/* =========================================================
   COINZAX — coming soon (static)
   Mobile-first, fluid, no external image assets
   ========================================================= */

:root{
  --bg:            #04060b;
  --bg-2:          #080c15;
  --panel:         #0b1019;
  --line:          rgba(212,175,55,.22);
  --line-soft:     rgba(255,255,255,.08);

  --gold:          #d4af37;
  --gold-light:    #f2dd91;
  --gold-deep:     #a87c1b;
  --gold-grad:     linear-gradient(135deg,#f6e4a6 0%,#d4af37 45%,#a87c1b 100%);

  --text:          #ffffff;
  --text-soft:     #b9c0cc;
  --text-dim:      #7d8695;

  --up:            #16b877;
  --down:          #e0483d;

  --radius:        14px;
  --maxw:          1180px;
  --pad:           clamp(1.15rem, 5vw, 2.5rem);

  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--gold); color:#000; font-weight:700;
  padding:.6rem 1rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.gold{
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* =========================================================
   BACKGROUND SCENE
   dotted globe + glowing horizon limb + candle silhouettes
   ========================================================= */
.bg-fx{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(115% 75% at 50% -12%, #0c1422 0%, transparent 58%),
    radial-gradient(80% 55% at 92% 26%, rgba(168,124,27,.14) 0%, transparent 62%),
    linear-gradient(180deg,#04060b 0%,#070a11 45%,#04060b 100%);
  pointer-events:none;
  overflow:hidden;
}

/* dotted world-map sphere sitting behind the phone */
.bg-fx__globe{
  position:absolute;
  right:-12%; top:-6%;
  width:min(88vw,940px); aspect-ratio:1;
  border-radius:50%;
  background-image:radial-gradient(rgba(232,196,116,.85) 1.15px, transparent 1.25px);
  background-size:8px 8px;
  opacity:.5;
  -webkit-mask-image:
    radial-gradient(circle at 50% 50%, #000 0 47%, transparent 49%),
    radial-gradient(circle at 30% 24%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(circle at 50% 50%, #000 0 47%, transparent 49%),
    radial-gradient(circle at 30% 24%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
  mask-composite:intersect;
}
/* soft body of the sphere */
.bg-fx__globe::before{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(60,80,120,.20) 0%, rgba(8,12,20,.55) 55%, rgba(4,6,11,.85) 78%);
}

/* bright lit limb curving under / around the sphere */
.bg-fx__limb{
  position:absolute;
  right:-16%; top:-4%;
  width:min(90vw,940px); aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(from 150deg,
      rgba(255,196,80,0)    0deg,
      rgba(255,190,80,.35) 30deg,
      rgba(255,222,150,.95) 72deg,
      rgba(255,236,190,1)  92deg,
      rgba(255,196,80,.45) 122deg,
      rgba(255,196,80,0)   165deg);
  -webkit-mask-image:radial-gradient(circle, transparent 0 48.4%, #000 48.9% 50.4%, transparent 51%);
  mask-image:radial-gradient(circle, transparent 0 48.4%, #000 48.9% 50.4%, transparent 51%);
  filter:blur(1.5px) drop-shadow(0 0 26px rgba(255,178,58,.55)) drop-shadow(0 0 70px rgba(255,160,40,.32));
}

/* wide warm haze cast by the limb */
.bg-fx__glow{
  position:absolute; right:-22%; top:6%;
  width:min(92vw,980px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,175,55,.16) 0%, rgba(212,175,55,.06) 42%, transparent 68%);
  filter:blur(36px);
}

/* faint candlestick silhouettes drifting behind the copy */
.bg-fx__candles{
  position:absolute;
  right:4%; top:4%;
  width:min(74vw,780px); height:min(56vh,560px);
  opacity:.75;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
}
.bg-fx__candles svg{ width:100%; height:100%; display:block; }

.bg-fx__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 60% at 55% 22%, #000 0%, transparent 76%);
  mask-image:radial-gradient(80% 60% at 55% 22%, #000 0%, transparent 76%);
}

/* ---------------- logo ---------------- */
.logo__text{
  font-weight:900;
  letter-spacing:.06em;
  font-size:clamp(1.25rem,4.6vw,1.75rem);
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
}
.logo__x{
  -webkit-text-fill-color:var(--gold-light);
  color:var(--gold-light);
}
.logo--lg .logo__text{ font-size:clamp(1.4rem,5.5vw,2rem); }

/* ---------------- header ---------------- */
.site-header{ padding-block:clamp(1.1rem,4vw,2rem); }
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

/* ---------------- hero ---------------- */
.hero{ padding-block:clamp(1rem,4vw,2.5rem) clamp(2.5rem,8vw,5rem); }

.hero__inner{
  display:grid;
  gap:clamp(2.5rem,7vw,3.5rem);
  align-items:center;
}

.eyebrow{
  font-size:clamp(.72rem,2.6vw,.85rem);
  font-weight:700;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.75rem;
}

.hero__title{
  font-size:clamp(2.1rem,9vw,4.05rem);
  line-height:1.06;
  font-weight:900;
  letter-spacing:-.012em;
  text-transform:uppercase;
  margin-bottom:clamp(1rem,3vw,1.5rem);
}

.hero__lead{
  font-size:clamp(.95rem,3.4vw,1.06rem);
  color:var(--text-soft);
  max-width:31rem;
  margin-bottom:clamp(1.75rem,5vw,2.4rem);
}

/* promise card */
.promise{
  display:flex;
  gap:clamp(1rem,3.5vw,1.5rem);
  align-items:center;
  padding:clamp(1.25rem,4.5vw,2rem);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(145deg, rgba(15,20,32,.92) 0%, rgba(7,10,17,.94) 100%);
  box-shadow:0 20px 60px -30px rgba(212,175,55,.5), inset 0 1px 0 rgba(255,255,255,.04);
  max-width:34rem;
}
.promise__icon{
  flex:0 0 auto;
  width:clamp(46px,12vw,70px);
  filter:drop-shadow(0 0 14px rgba(212,175,55,.45));
}
.promise__icon svg{ display:block; width:100%; height:auto; }

.promise__label{
  font-size:clamp(.65rem,2.4vw,.76rem);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.35rem;
}
.promise__title{
  font-size:clamp(1.15rem,5vw,1.82rem);
  line-height:1.15;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:.6rem;
}
.promise__text{
  font-size:clamp(.85rem,3vw,.93rem);
  color:var(--text-soft);
}

/* =========================================================
   PHONE MOCK-UP  (realistic device on a lit podium)
   ========================================================= */
.hero__visual{
  display:flex;
  justify-content:center;
  order:-1;                       /* device first on mobile, like the reference */
}

.stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(302px,74vw);
  isolation:isolate;
}

/* soft key light behind the device */
.stage::before{
  content:"";
  position:absolute; left:50%; top:6%;
  transform:translateX(-50%);
  width:150%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,180,60,.16) 0%, rgba(212,175,55,.05) 45%, transparent 70%);
  filter:blur(28px);
  z-index:-1;
}

.phone{
  position:relative;
  z-index:3;
  width:100%;
  transform:perspective(1500px) rotateY(-5deg) rotateX(1.5deg);
  transform-style:preserve-3d;
}

/* physical side buttons */
.phone__btn{
  position:absolute;
  width:2.5px;
  border-radius:1.5px;
  background:linear-gradient(90deg,#5c626e 0%,#2b303a 55%,#171b23 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.7);
  z-index:1;
}
.phone__btn--right{
  right:-2.5px;
  background:linear-gradient(270deg,#5c626e 0%,#2b303a 55%,#171b23 100%);
}
.phone__btn--left{ left:-2.5px; }
.phone__btn--silent{ top:15.5%; height:3.2%; }
.phone__btn--up{    top:22.5%; height:7.5%; }
.phone__btn--down{  top:32.0%; height:7.5%; }
.phone__btn--power{ top:26.0%; height:11%; }

.phone__frame{
  position:relative;
  z-index:2;
  border-radius:clamp(26px,8.4vw,40px);
  padding:clamp(5px,1.6vw,8px);
  background:
    linear-gradient(148deg,
      #7d8492 0%,
      #444a57 9%,
      #1b1f28 24%,
      #0b0e14 46%,
      #0b0e14 58%,
      #262b35 78%,
      #6b7280 92%,
      #babfc8 100%);
  box-shadow:
    0 1px 1px rgba(255,255,255,.35) inset,
    0 -1px 1px rgba(0,0,0,.85) inset,
    0 0 0 1px rgba(0,0,0,.85),
    0 34px 60px -22px rgba(0,0,0,.95),
    0 0 60px rgba(212,175,55,.16);
}
/* inner black rim between metal and glass */
.phone__frame::before{
  content:"";
  position:absolute;
  inset:clamp(3px,1vw,5px);
  border-radius:clamp(23px,7.6vw,36px);
  box-shadow:0 0 0 1.5px #05070b, 0 0 0 2.5px rgba(255,255,255,.05);
  pointer-events:none;
  z-index:4;
}

.phone__screen{
  --fs: clamp(7.4px, 2.35vw, 9.6px);
  position:relative;
  font-size:var(--fs);
  border-radius:clamp(22px,7.2vw,34px);
  background:linear-gradient(180deg,#080b12 0%,#05070c 100%);
  overflow:hidden;
  aspect-ratio:9 / 19.5;
  padding:2.9em 1em 0;
  display:flex;
  flex-direction:column;
  gap:.9em;
  line-height:1.35;
}
.app-status,.app-bar,.ticker,.panel,.app-nav{ flex:0 0 auto; }

/* dynamic island */
.phone__island{
  position:absolute;
  top:.85em; left:50%;
  transform:translateX(-50%);
  width:33%; height:1.85em;
  border-radius:1em;
  background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.05);
  z-index:6;
}
.phone__island::after{
  content:"";
  position:absolute; right:.5em; top:50%;
  transform:translateY(-50%);
  width:.6em; height:.6em; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #33455f 0%, #0a0f18 68%);
  box-shadow:0 0 3px rgba(90,150,255,.45);
}

/* glass reflection over the whole device */
.phone__glare{
  position:absolute; inset:0;
  border-radius:clamp(26px,8.4vw,40px);
  background:linear-gradient(118deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.05) 14%,
    rgba(255,255,255,0)   34%,
    rgba(255,255,255,0)   66%,
    rgba(255,255,255,.045) 88%,
    rgba(255,255,255,.10) 100%);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:7;
}

/* ---------- app UI inside the screen ---------- */
.app-status{
  display:flex; align-items:center; justify-content:space-between;
  color:rgba(255,255,255,.75);
  font-size:.95em; font-weight:600;
  margin-top:-1.5em;
  position:relative; z-index:7;
}
.app-status__icons{ display:inline-flex; gap:.45em; align-items:center; }

.app-bar{ display:flex; align-items:center; justify-content:space-between; }
.app-bar__logo{
  font-weight:900; letter-spacing:.09em; font-size:1.15em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.app-bar__icon{ color:rgba(255,255,255,.5); display:inline-flex; }

.ticker{ display:flex; justify-content:space-between; gap:1em; }
.ticker__pair{ font-weight:700; font-size:1.25em; }
.ticker__type{ color:var(--text-dim); font-size:.95em; }
.ticker__price{
  font-weight:800; font-size:1.75em; line-height:1.2; margin-top:.15em;
  color:var(--up);
  transition:color .25s ease;
  font-variant-numeric:tabular-nums;
}
.ticker__change{ color:var(--up); font-size:.95em; font-variant-numeric:tabular-nums; }
.ticker__price.is-down,.ticker__change.is-down{ color:var(--down); }
.ticker__price.flash-up{ animation:flashUp .35s ease-out; }
.ticker__price.flash-dn{ animation:flashDn .35s ease-out; }
@keyframes flashUp{ 0%{ text-shadow:0 0 7px rgba(31,189,125,.55);} 100%{ text-shadow:none; } }
@keyframes flashDn{ 0%{ text-shadow:0 0 7px rgba(224,72,61,.55);} 100%{ text-shadow:none; } }

.ticker__right{ text-align:right; }
.ticker__k{ color:var(--text-dim); font-size:.9em; }
.ticker__v{ font-size:1em; font-weight:600; margin-bottom:.35em; font-variant-numeric:tabular-nums; }
.ticker__v--up{ color:var(--up); }

/* ---------- chart ---------- */
.chart{
  margin-top:.2em; padding-right:5.2em; position:relative;
  display:flex; flex-direction:column;
  flex:1 1 auto; min-height:0;
}
.chart__plot{ position:relative; flex:1 1 auto; min-height:7em; }
.chart__svg{ width:100%; height:100%; display:block; overflow:visible; }

.chart__grid line{ stroke:rgba(255,255,255,.06); stroke-width:.6; }

.candles line{ stroke-width:1.1; }
.c-up line{ stroke:#1fbd7d; } .c-up rect{ fill:#1fbd7d; }
.c-dn line{ stroke:#e0483d; } .c-dn rect{ fill:#e0483d; }

/* newest candle slides the series left, then fades in */
.candles{ animation:candleShift .5s cubic-bezier(.32,.72,.35,1); }
@keyframes candleShift{
  from{ transform:translateX(var(--slot,14px)); }
  to  { transform:translateX(0); }
}
.candles .is-fresh{ animation:freshIn .5s ease-out; }
@keyframes freshIn{ from{ opacity:0; } to{ opacity:1; } }

.chart__marker{
  stroke:#1fbd7d; stroke-width:.7; stroke-dasharray:3 3; opacity:.75;
}
.chart__pulse{ fill:#1fbd7d; }
.chart__pulse-ring{
  fill:none; stroke:#1fbd7d; stroke-width:1;
  transform-box:fill-box; transform-origin:center;
  animation:pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing{
  0%  { transform:scale(.4); opacity:.9; }
  70% { transform:scale(2.6); opacity:0; }
  100%{ transform:scale(2.6); opacity:0; }
}

.chart__scale{
  position:absolute; right:-5.2em; top:0; height:100%;
  width:5.2em;
  font-size:.85em; color:var(--text-dim);
  text-align:right; pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.chart__scale li{
  position:absolute; right:0;
  transform:translateY(-50%);
  white-space:nowrap;
  transition:opacity .15s ease;
}
.chart__scale li.is-hidden{ opacity:0; }
.chart__badge{
  position:absolute; right:-5.2em;
  transform:translateY(-50%);
  background:#1fbd7d; color:#04060b;
  font-size:.85em; font-weight:700;
  padding:.08em .35em; border-radius:2px;
  white-space:nowrap;
  transition:background-color .2s ease;
  font-variant-numeric:tabular-nums;
  z-index:2;
}
.chart__badge.is-down{ background:#e0483d; color:#fff; }

.chart__times{
  display:flex; justify-content:space-between;
  font-size:.85em; color:var(--text-dim);
  margin-top:.25em;
}

/* ---------- trading panel ---------- */
.panel{
  border-top:1px solid var(--line-soft);
  padding-top:1em;
}
.panel__label{
  font-size:.9em; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.85);
}
.panel__sub{ font-size:.88em; color:var(--text-dim); margin-bottom:.7em; }

.stepper{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid rgba(255,255,255,.14);
  border-radius:.7em;
  padding:.5em .9em;
  font-size:1.05em; font-weight:700;
  background:rgba(255,255,255,.03);
}
.stepper__btn{ color:var(--text-soft); font-size:1.2em; line-height:1; }

.lev{ margin-top:.85em; }
.lev__head{
  display:flex; justify-content:space-between;
  font-size:.95em; color:var(--text-soft); margin-bottom:.7em;
}
.lev__value{ color:var(--gold-light); font-weight:700; }
.lev__track{
  position:relative; height:.28em; border-radius:1em;
  background:rgba(255,255,255,.14);
}
.lev__fill{
  position:absolute; left:0; top:0; height:100%; width:33%;
  border-radius:1em; background:var(--gold-grad);
}
.lev__knob{
  position:absolute; left:33%; top:50%;
  width:.95em; height:.95em; border-radius:50%;
  transform:translate(-50%,-50%);
  background:#fff; box-shadow:0 0 .5em rgba(212,175,55,.9);
}
.lev__dot{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:.34em; height:.34em; border-radius:50%;
  background:rgba(255,255,255,.45);
}
.lev__scale{
  display:flex; justify-content:space-between;
  font-size:.82em; color:var(--text-dim); margin-top:.5em;
}

.sides{ display:flex; gap:.6em; margin-top:1em; }
.side{
  flex:1; text-align:center;
  padding:.62em 0;
  border-radius:.5em;
  font-weight:800; font-size:1.05em;
  text-transform:uppercase; letter-spacing:.05em;
  color:#fff;
}
.side--long{ background:linear-gradient(180deg,#1cb974,#12905a); box-shadow:0 .3em .9em -.4em rgba(28,185,116,.9); }
.side--short{ background:linear-gradient(180deg,#e0483d,#b32f26); box-shadow:0 .3em .9em -.4em rgba(224,72,61,.9); }

.app-nav{
  display:flex; justify-content:space-between;
  border-top:1px solid var(--line-soft);
  margin-top:1em;
  padding:.7em .1em 1.4em;
  font-size:.8em;
  color:var(--text-dim);
  position:relative;
}
.app-nav__item{
  display:flex; flex-direction:column; align-items:center; gap:.3em;
  flex:1;
}
.app-nav__item.is-active{ color:var(--gold-light); }
/* home indicator bar */
.app-nav::after{
  content:"";
  position:absolute; left:50%; bottom:.55em;
  transform:translateX(-50%);
  width:32%; height:.36em;
  border-radius:1em;
  background:rgba(255,255,255,.35);
}

/* ---------- podium under the device ---------- */
.podium{
  position:relative;
  width:118%;
  height:clamp(52px,15vw,74px);
  margin-top:clamp(-40px,-9.5vw,-22px);
  z-index:1;
}
.podium__disc{
  position:absolute; left:50%; top:0;
  transform:translateX(-50%);
  width:82%; height:100%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255,205,110,.30) 0%, rgba(120,86,24,.16) 38%, transparent 66%),
    linear-gradient(180deg,#1a1f28 0%,#0a0d14 62%,#05070b 100%);
  box-shadow:
    0 0 0 1px rgba(212,175,55,.38),
    0 0 26px rgba(212,175,55,.22),
    inset 0 8px 22px rgba(0,0,0,.85);
}
.podium__disc::after{
  content:"";
  position:absolute; inset:16% 12%;
  border-radius:50%;
  border:1px solid rgba(212,175,55,.28);
  box-shadow:inset 0 0 14px rgba(212,175,55,.14);
}
.podium__ring{
  position:absolute; left:50%; top:24%;
  transform:translateX(-50%);
  width:112%; height:96%;
  border-radius:50%;
  border:1px solid rgba(212,175,55,.22);
  box-shadow:0 0 30px rgba(212,175,55,.14);
}
.podium__ring--outer{
  width:142%; height:118%;
  top:36%;
  border-color:rgba(212,175,55,.12);
}
.podium__glow{
  position:absolute; left:50%; top:-14%;
  transform:translateX(-50%);
  width:150%; height:130%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,190,70,.30) 0%, rgba(212,175,55,.08) 42%, transparent 70%);
  filter:blur(14px);
  z-index:-1;
}

/* ---------------- features ---------------- */
.features{
  padding-block:clamp(2rem,7vw,3.5rem);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(8,11,18,.6), rgba(4,6,11,.6));
}

.features__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem,5vw,2rem);
}

.feature{
  position:relative;
  text-align:center;
  padding:clamp(1rem,3vw,1.25rem) .5rem;
}
.feature::after{
  content:"";
  position:absolute; right:calc(clamp(1.5rem,5vw,2rem) / -2);
  top:6%; bottom:6%;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.14) 22%, rgba(255,255,255,.14) 78%, transparent);
  display:none;
}
.feature__icon{
  display:inline-flex;
  width:clamp(34px,9vw,44px);
  color:var(--gold);
  margin-bottom:.9rem;
  filter:drop-shadow(0 0 10px rgba(212,175,55,.35));
}
.feature__icon svg{ width:100%; height:auto; display:block; }

.feature__title{
  font-size:clamp(.85rem,3.2vw,.95rem);
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.3;
  margin-bottom:.6rem;
}
.feature__text{
  font-size:clamp(.82rem,3vw,.88rem);
  color:var(--text-soft);
  max-width:22ch;
  margin-inline:auto;
}

/* ---------------- footer ---------------- */
.site-footer{
  padding-block:clamp(2rem,7vw,3rem);
  text-align:center;
}
.tagline{
  margin-top:.65rem;
  font-size:clamp(.7rem,2.8vw,.85rem);
  font-weight:600;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--gold);
}
.copyright{
  margin-top:1.25rem;
  font-size:.78rem;
  color:var(--text-dim);
  letter-spacing:.04em;
}

/* =========================================================
   BREAKPOINTS
   ========================================================= */
@media (max-width:359px){
  .hero__title{ font-size:1.9rem; }
  .promise{ flex-direction:column; text-align:center; }
}

@media (min-width:480px){
  .features__grid{ grid-template-columns:repeat(2,1fr); }
  .feature::after{ display:block; }
  .feature:nth-child(2n)::after{ display:none; }
}

@media (min-width:768px){
  .features__grid{ grid-template-columns:repeat(3,1fr); }
  .feature:nth-child(2n)::after{ display:block; }
  .feature:nth-child(3n)::after{ display:none; }
}

@media (min-width:1000px){
  .hero{ padding-block:clamp(1rem,3vw,2rem) clamp(2rem,5vw,3.5rem); }
  .hero__inner{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:clamp(2rem,5vw,4rem);
  }
  .hero__visual{ order:0; }
  .stage{ width:min(296px,29vw); }
  .phone__screen{ --fs:clamp(8px,.95vw,10.5px); }

  .features__grid{ grid-template-columns:repeat(6,1fr); }
  .feature:nth-child(3n)::after{ display:block; }
  .feature:last-child::after{ display:none; }
  .feature__text{ max-width:18ch; }
}

@media (min-width:1280px){
  .stage{ width:306px; }
  .phone__screen{ --fs:10.5px; }
}

@media (max-height:520px) and (orientation:landscape){
  .hero__inner{ grid-template-columns:1fr 1fr; align-items:center; }
  .hero__visual{ order:0; }
  .stage{ width:min(210px,24vw); }
}

/* motion / contrast preferences */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .phone{ transform:none; }
}

@media print{
  .bg-fx{ display:none; }
  body{ background:#fff; color:#000; }
}