/* Varumo — Coming Soon
   Apple-style system font stack, solid palette
*/

:root{
  --canvas:     #f5f1e6;
  --canvas-2:   #ebe6d7;

  --bg:         #0c0a08;
  --surface:    #1a1612;
  --surface-2:  #252017;

  --ink:        #f4ead4;
  --ink-soft:   #cabfa5;
  --ink-mute:   #948a76;

  --line:       rgba(244,234,212,0.12);
  --line-soft:  rgba(244,234,212,0.06);

  --accent:     #d6b581;
  --accent-soft:#e9cfa4;

  /* Apple-style system font stack */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.2,.8,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  font-family:var(--sans);
  background:var(--canvas);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overscroll-behavior:none;
  background:
    radial-gradient(1400px 800px at 50% -10%, var(--canvas-2), var(--canvas) 60%);
}

a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;}

/* =========================================================
   CANVAS + FLOATING CARD
   ========================================================= */
.canvas{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    max(env(safe-area-inset-top), 32px)
    max(env(safe-area-inset-right), 24px)
    max(env(safe-area-inset-bottom), 32px)
    max(env(safe-area-inset-left), 24px);
}

.card{
  width:100%;
  max-width:780px;
  background:var(--bg);
  color:var(--ink);
  border-radius:28px;
  padding:52px 64px 40px;
  position:relative;
  isolation:isolate;
  box-shadow:
    0 50px 100px -28px rgba(28,22,16,0.28),
    0 22px 48px -16px rgba(28,22,16,0.18),
    0 2px 8px rgba(28,22,16,0.05),
    inset 0 1px 0 rgba(244,234,212,0.04);
  animation:cardRise 1s var(--ease) both;
  transition:box-shadow .6s var(--ease);
}
.card:hover{
  box-shadow:
    0 60px 120px -28px rgba(28,22,16,0.34),
    0 28px 56px -16px rgba(28,22,16,0.22),
    0 2px 8px rgba(28,22,16,0.06),
    inset 0 1px 0 rgba(244,234,212,0.06);
}
@keyframes cardRise{
  from{opacity:0;transform:translateY(18px) scale(.985);}
  to  {opacity:1;transform:translateY(0) scale(1);}
}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:44px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.brand__mark{
  color:var(--accent);
  transition:transform .4s var(--ease);
  transform-origin:center;
}
.brand:hover .brand__mark{animation:heartbeat .9s ease-in-out;}
@keyframes heartbeat{
  0%,100%{transform:scale(1);}
  20%    {transform:scale(1.12);}
  40%    {transform:scale(1);}
  60%    {transform:scale(1.06);}
  80%    {transform:scale(1);}
}
.brand__name{
  font-weight:600;
  font-size:17px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.topbar__meta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--ink-soft);
  background:var(--surface);
}
.dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(214,181,129,0.5);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(214,181,129,0.4);}
  70%{box-shadow:0 0 0 7px rgba(214,181,129,0);}
  100%{box-shadow:0 0 0 0 rgba(214,181,129,0);}
}

/* =========================================================
   STAGE
   ========================================================= */
.stage{
  text-align:center;
  padding:20px 0 28px;
}

.kicker{
  font-size:13px;
  font-weight:500;
  letter-spacing:-0.005em;
  color:var(--ink-mute);
  margin-bottom:20px;
  animation:rise .9s var(--ease) .05s both;
}
.kicker em{
  font-style:normal;
  color:var(--accent);
  font-weight:600;
}

/* Display headline — Apple-style tight display type */
.display{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(32px, 5.6vw, 56px);
  line-height:1.18;
  letter-spacing:-0.032em;
  color:var(--ink);
  margin:0 auto 40px;
  text-wrap:balance;
  padding-bottom:0.08em;
}
.display .word{
  display:inline-block;
  opacity:0;
  transform:translateY(0.3em);
  animation:wordRise 1s var(--ease) forwards;
  animation-delay:calc(var(--i, 0) * 90ms + 250ms);
  padding:0 0.03em;
}
.display .word:nth-child(1){--i:0;}
.display .word:nth-child(2){--i:1;}
.display .word.is-accent{
  color:var(--accent);
}
.display .word.is-accent i{
  font-style:italic;
  font-weight:500;
}
@keyframes wordRise{
  to{opacity:1;transform:translateY(0);}
}

/* Countdown */
.countdown{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  margin:0 auto 36px;
  animation:rise 1s var(--ease) .45s both;
  width:min(420px, 100%);
}
.countdown__cell{
  background:var(--surface);
  padding:18px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:0;
  position:relative;
  transition:background .3s var(--ease);
}
.countdown__cell:hover{background:var(--surface-2);}
.countdown__flip{
  position:relative;
  display:block;
  height:1em;
  overflow:hidden;
  font-size:32px;
  font-weight:500;
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.03em;
  min-width:1.6em;
  text-align:center;
}
.countdown__num{display:block;will-change:transform, opacity;}
.countdown__num.is-enter{animation:flipIn .5s var(--ease);}
.countdown__num.is-leave{
  position:absolute;inset:0;
  animation:flipOut .5s var(--ease) forwards;
  pointer-events:none;
}
@keyframes flipIn{
  0%   { transform:translateY(-105%); opacity:0; filter:blur(3px); }
  60%  { opacity:1; filter:blur(0); }
  100% { transform:translateY(0);    opacity:1; }
}
@keyframes flipOut{
  0%   { transform:translateY(0);    opacity:1; }
  100% { transform:translateY(110%); opacity:0; filter:blur(2px); }
}
.countdown__label{
  font-size:10px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--ink-mute);
}

/* CTA — solid gold pill */
.cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 22px;
  min-height:46px;
  background:var(--accent);
  color:#1a1408;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  letter-spacing:-0.005em;
  transition:transform .25s var(--ease), box-shadow .35s var(--ease), background .25s var(--ease);
  animation:rise 1s var(--ease) .55s both;
  box-shadow:
    0 1px 0 rgba(255,236,190,0.35) inset,
    0 10px 24px -12px rgba(214,181,129,0.55),
    0 2px 6px rgba(12,10,8,0.15);
}
.cta:hover{
  transform:translateY(-2px);
  background:var(--accent-soft);
  box-shadow:
    0 1px 0 rgba(255,236,190,0.5) inset,
    0 16px 32px -10px rgba(214,181,129,0.7),
    0 4px 10px rgba(12,10,8,0.2);
}
.cta:active{transform:translateY(0);}
.cta__icon{width:15px;height:15px;flex-shrink:0;}
.cta__label{color:inherit;}

/* Foot */
.foot{
  text-align:center;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--ink-mute);
  padding-top:24px;
  border-top:1px solid var(--line);
  margin-top:12px;
  animation:fadeIn 1s var(--ease) .7s both;
}

/* Animations */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px){
  .canvas{
    padding:
      max(env(safe-area-inset-top), 16px)
      max(env(safe-area-inset-right), 14px)
      max(env(safe-area-inset-bottom), 18px)
      max(env(safe-area-inset-left), 14px);
  }
  .card{
    padding:28px 24px 22px;
    border-radius:20px;
  }
  .topbar{margin-bottom:30px;gap:10px;}
  .brand__name{font-size:15px;}
  .topbar__meta{font-size:10px;padding:5px 9px;}

  .stage{padding:10px 0 18px;}

  .kicker{font-size:12px;margin-bottom:14px;}

  .display{
    font-size:clamp(26px, 8vw, 36px);
    letter-spacing:-0.032em;
    margin-bottom:26px;
  }
  .display .word{transform:translateY(0.25em);}

  .countdown{
    width:100%;
    max-width:340px;
    border-radius:12px;
    margin-bottom:26px;
  }
  .countdown__cell{padding:13px 6px;gap:6px;}
  .countdown__flip{font-size:24px;}
  .countdown__label{font-size:9.5px;}

  .cta{
    width:100%;
    max-width:280px;
    justify-content:center;
    padding:12px 18px;
    min-height:46px;
  }

  .foot{font-size:10px;padding-top:18px;}
}

@media (max-width: 380px){
  .card{padding:24px 20px 20px;}
  .display{font-size:clamp(22px, 7.5vw, 28px);}
  .countdown__flip{font-size:22px;}
  .countdown__label{font-size:9px;}
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape){
  .canvas{padding:14px 18px;}
  .card{padding:22px 36px 18px;}
  .topbar{margin-bottom:16px;}
  .stage{padding:6px 0 12px;}
  .kicker{margin-bottom:10px;font-size:11px;}
  .display{font-size:clamp(22px, 4vw, 32px);margin-bottom:14px;}
  .countdown{margin-bottom:14px;}
  .countdown__cell{padding:10px 6px;}
  .countdown__flip{font-size:22px;}
  .cta{min-height:40px;padding:10px 18px;font-size:13px;}
  .foot{padding-top:14px;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}