:root{
  --bg:#FFFFFF; --bg2:#FDEEE8; --ink:#373435; --muted:#6d6869;
  --red:#E8343A; --peach:#FCC8B8; --line:#e9d9d3; --card:#fff;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#1d1b1c;--bg2:#2a2324;--ink:#f3eeec;--muted:#b3aaa8;--line:#433a3b;--card:#252122;--peach:#7a3a36}
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;line-height:1.6;overflow-x:hidden}

.page{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;position:relative}
.left{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.main{margin:auto 0}
.logo{display:block;width:min(100%,430px);height:auto;margin-bottom:clamp(28px,5vw,48px)}

.right{background:var(--bg2);display:grid;place-items:center;padding:40px;position:relative;overflow:hidden}
.right::after{content:"";position:absolute;inset:auto -10% -30% auto;width:70%;aspect-ratio:1;background:var(--peach);opacity:.35;border-radius:50%;filter:blur(60px)}

h1{font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1.02;margin:0 0 22px;letter-spacing:-.01em}
h1 em{font-style:normal;color:var(--red)}
.lede{max-width:46ch;color:var(--muted);font-size:1.08rem;margin:0 0 32px}

/* countdown */
.count{display:flex;gap:clamp(14px,3vw,30px);margin-bottom:34px;flex-wrap:wrap}
.unit{min-width:64px}
.unit strong{display:block;font-family:'Playfair Display',Georgia,serif;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums;border-top:3px solid var(--red);padding-top:10px}
.unit span{font-size:.85rem;color:var(--muted)}

/* form */
form{display:flex;gap:10px;max-width:480px;flex-wrap:wrap}
input[type=email]{flex:1 1 220px;padding:15px 18px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;font:inherit}
button{padding:15px 24px;border:0;border-radius:6px;background:var(--red);color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:transform .15s,background .15s}
button:hover{background:#cf2228}
button:active{transform:scale(.97)}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.msg{min-height:1.6em;margin:12px 0 0;font-size:.95rem}
.msg.ok{color:#1e8a4c}
.msg.err{color:var(--red)}

footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
footer a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--red);border-color:var(--red)}

/* animated mark */
.mark{width:min(78%,440px);aspect-ratio:1;position:relative;z-index:1;filter:drop-shadow(0 30px 40px rgba(232,52,58,.22))}
.mark svg{width:100%;height:100%;display:block}
.bar{fill:var(--red);transform-box:fill-box;opacity:0;animation:grow .7s cubic-bezier(.2,.7,.2,1) forwards}
.bar.h{transform-origin:left center;transform:scaleX(0)}
.bar.v{transform-origin:center top;transform:scaleY(0)}
.bar:nth-of-type(2){animation-delay:.15s}
.bar:nth-of-type(3){animation-delay:.3s}
.bar:nth-of-type(4){animation-delay:.45s}
.bar:nth-of-type(5){animation-delay:.6s}
.bar:nth-of-type(6){animation-delay:.75s}
@keyframes grow{to{opacity:1;transform:none}}
.tile{fill:var(--peach);opacity:.6}

@media (max-width:860px){
  .page{grid-template-columns:1fr}
  .right{order:-1;padding:28px;min-height:280px}
  .mark{width:min(56%,260px)}
}
@media (prefers-reduced-motion:reduce){
  .bar{animation:none;opacity:1;transform:none}
}