:root{
  --bg:#050505;
  --bg-2:#0b0b0b;
  --bg-3:#121212;
  --bg-4:#181818;

  --panel:rgba(255,255,255,.04);
  --panel-2:rgba(255,255,255,.06);

  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --text:#f6f1e8;
  --muted:#b8b0a4;
  --soft:#8f887e;

  --gold:#e1c38a;
  --gold-2:#c7985b;
  --gold-3:#f0ddb4;
  --gold-4:#fff1cf;

  --shadow-xl:0 56px 160px rgba(0,0,0,.62);
  --shadow-lg:0 26px 78px rgba(0,0,0,.36);
  --shadow-md:0 14px 34px rgba(0,0,0,.24);

  --container:1360px;
  --narrow:940px;
  --transition:.28s ease;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  margin:0;
  color:var(--text);
  font-family:Inter,Arial,Helvetica,sans-serif;
  line-height:1.5;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 10% 8%, rgba(225,195,138,.09), transparent 18%),
    radial-gradient(circle at 86% 12%, rgba(255,255,255,.08), transparent 18%),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,.03), transparent 28%),
    linear-gradient(180deg,#040404 0%,#090909 36%,#050505 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018), transparent 14%, transparent 86%, rgba(255,255,255,.018)),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 18%, transparent 82%, rgba(255,255,255,.012));
  opacity:.85;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

.site-shell{
  position:relative;
  z-index:2;
}

.container{
  width:min(calc(100% - 32px), var(--container));
  margin:0 auto;
}

.narrow{
  width:min(calc(100% - 32px), var(--narrow));
  margin:0 auto;
}

.hero-copy,
.section-copy,
.packs-head,
.comparison-head{
  text-wrap:balance;
}

/* reveal */
.reveal-up{
  opacity:0;
  transform:translateY(30px) scale(.98);
  transition:all .8s cubic-bezier(.22,.61,.36,1);
}

.reveal-up.is-visible,
.reveal-up.active{
  opacity:1;
  transform:translateY(0) scale(1);
}

.delay-1{transition-delay:.06s}
.delay-2{transition-delay:.14s}
.delay-3{transition-delay:.22s}
.delay-4{transition-delay:.30s}

/* header */
.header{
  position:sticky;
  top:10px;
  z-index:1000;
  margin:10px 12px;
  background:transparent;
}

.header-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:82px;
  padding:12px 22px;
  border-radius:26px;
  background:rgba(20,20,20,.75);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  box-shadow:
    0 18px 42px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 40px rgba(225,195,138,.05);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  white-space:nowrap;
}

.brand-mark{
  width:58px;
  height:58px;
  border-radius:20px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.03)),
    linear-gradient(180deg, #181818, #0b0b0b);
  border:1px solid rgba(225,195,138,.30);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 18px 40px rgba(0,0,0,.34),
    0 0 42px rgba(225,195,138,.14);
}

.brand-mark svg{
  width:30px;
  height:30px;
  display:block;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.02;
}

.brand-name{
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.brand-sub{
  margin-top:4px;
  color:var(--soft);
  font-size:.68rem;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.nav{
  display:none;
  align-items:center;
  gap:30px;
}

.nav a{
  position:relative;
  color:#c8c1b7;
  font-size:.95rem;
  font-weight:500;
  transition:var(--transition);
}

.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(225,195,138,.70), transparent);
  transform:scaleX(0);
  transform-origin:center;
  transition:var(--transition);
}

.nav a:hover{
  color:var(--text);
}

.nav a:hover::after{
  transform:scaleX(1);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.mini-link{
  display:none;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font-size:.9rem;
}

.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;
  font-size:13px;
  font-weight:600;
  box-shadow:
    0 4px 14px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.15);
  transition:all .3s ease;
}

.header-cta:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.35);
  transform:translateY(-1px);
}

/* hero */
.hero{
  position:relative;
  min-height:calc(100dvh - 26px);
  display:flex;
  align-items:center;
  padding:26px 0 18px;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.58;
  background:
    radial-gradient(circle at 66% 26%, rgba(225,195,138,.17), transparent 18%),
    radial-gradient(circle at 72% 56%, rgba(255,255,255,.08), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.03), transparent 40%);
}

.hero-gridlines{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0, transparent 49.7%, rgba(255,255,255,.04) 50%, transparent 50.3%, transparent 100%),
    linear-gradient(180deg, transparent 0, transparent 49.8%, rgba(255,255,255,.03) 50%, transparent 50.2%, transparent 100%);
  opacity:.45;
}

.hero-beam{
  position:absolute;
  top:10%;
  right:10%;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(225,195,138,.18), transparent 66%);
  filter:blur(28px);
  pointer-events:none;
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  gap:24px;
  align-items:center;
}

.eyebrow{
  margin:0 0 14px;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:800;
}

h1,h2,h3,h4{
  margin:0;
  line-height:1.03;
  letter-spacing:-.035em;
}

h1{
  font-size:clamp(2.95rem, 8vw, 6rem);
  max-width:10.6ch;
}

h2{
  font-size:clamp(1.95rem, 5vw, 4.3rem);
  max-width:12ch;
}

h3{
  font-size:1.16rem;
  margin-bottom:10px;
}

.hero-copy{
  position:relative;
}

.hero-copy::before{
  content:"";
  position:absolute;
  left:-14px;
  top:10px;
  width:2px;
  height:132px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--gold), transparent);
  opacity:.82;
  display:none;
}

.hero-lead{
  margin:14px 0 0;
  color:var(--muted);
  font-size:clamp(1rem, 2.7vw, 1.18rem);
  max-width:31rem;
}

.hero-sub{
  margin:12px 0 0;
  color:var(--soft);
  max-width:34rem;
  font-size:1rem;
}

.hero-actions-row{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 22px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.02em;
  transition:var(--transition);
}

.btn-ghost{
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);
  color:var(--text);
}

.btn-ghost:hover{
  background:rgba(255,255,255,.06);
}

.btn-gold,
.cta-primary,
.hero-primary-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.3;
  padding:18px 24px;
  border-radius:999px;
  background:linear-gradient(135deg,#f5d6a0,#e7b86c);
  color:#111;
  font-weight:700;
  font-size:15px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:
    0 8px 25px rgba(231,184,108,.35),
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 18px rgba(225,195,138,.06);
  position:relative;
  overflow:hidden;
  transition:all .3s ease;
}

.btn-gold::before,
.cta-primary::before,
.hero-primary-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  animation:ctaSweep 5.2s ease-in-out infinite;
}

.btn-gold:hover,
.cta-primary:hover,
.hero-primary-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 12px 35px rgba(231,184,108,.45),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.hero-primary-btn span{
  display:block;
  width:100%;
}

.cta-sub{
  margin-top:6px;
  font-size:.78rem;
  color:var(--soft);
  opacity:.85;
}

.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:14px;
}

.hero-pills span{
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(225,195,138,.18);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:.83rem;
  text-transform:lowercase;
}

/* hero visual */
.hero-visual{
  position:relative;
  min-height:650px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.float-card{
  position:absolute;
  padding:12px 14px;
  max-width:180px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.028)),
    rgba(14,14,14,.84);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-lg);
  z-index:3;
  animation:floaty 7s ease-in-out infinite;
}

.float-card strong{
  display:block;
  margin-bottom:5px;
  font-size:.88rem;
}

.float-card span{
  color:var(--muted);
  font-size:.80rem;
}

.float-card-a{
  left:-2%;
  top:14%;
}

.phone-stage{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.phone-orbit{
  position:absolute;
  border-radius:50%;
  filter:blur(20px);
  pointer-events:none;
  animation:pulseOrbit 6s ease-in-out infinite;
}

.orbit-a{
  width:220px;
  height:220px;
  background:rgba(225,195,138,.16);
  top:4%;
  right:12%;
}

.orbit-b{
  width:180px;
  height:180px;
  background:rgba(255,255,255,.08);
  bottom:6%;
  left:12%;
  animation-delay:1.5s;
}

.phone-shadow{
  position:absolute;
  width:min(100%, 920px);
  height:220px;
  bottom:-34px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,0,0,.62), rgba(0,0,0,.24) 42%, transparent 72%);
  filter:blur(18px);
  opacity:.95;
}

.ultra-device{
  position:relative;
  width:min(100%, 510px);
  padding:18px;
  border-radius:44px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05)),
    linear-gradient(180deg, #1b1b1b, #0b0b0b);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 72px 188px rgba(0,0,0,.62),
    0 16px 40px rgba(0,0,0,.24),
    0 0 46px rgba(225,195,138,.08);
  backdrop-filter:blur(12px);
  transform:perspective(1600px) rotateY(-6deg) rotateX(4deg);
  overflow:hidden;
  transition:transform .18s ease-out, box-shadow .25s ease;
  will-change:transform;
}

.ultra-device:hover{
  box-shadow:
    0 84px 198px rgba(0,0,0,.66),
    0 18px 44px rgba(0,0,0,.28),
    0 0 60px rgba(225,195,138,.13);
}

.device-light-track{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:44px;
  z-index:2;
  background:radial-gradient(circle at 50% 20%, rgba(255,255,255,.12), transparent 36%);
  mix-blend-mode:screen;
}

.device-metal-frame{
  position:absolute;
  inset:0;
  border-radius:44px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 28px rgba(225,195,138,.05);
  pointer-events:none;
}

.device-reflection{
  position:absolute;
  pointer-events:none;
  z-index:3;
  border-radius:999px;
  filter:blur(10px);
}

.reflection-main{
  top:-12%;
  left:-18%;
  width:34%;
  height:130%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform:rotate(13deg);
  animation:sweep 7.8s ease-in-out infinite;
}

.reflection-soft{
  top:-8%;
  right:8%;
  width:12%;
  height:118%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform:rotate(10deg);
  animation:sweepSoft 9.4s ease-in-out infinite;
}

.device-edge-glow{
  position:absolute;
  inset:0;
  border-radius:44px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 42px rgba(225,195,138,.04),
    0 0 44px rgba(225,195,138,.06);
  pointer-events:none;
}

.device-top-details{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  width:72px;
  height:18px;
  pointer-events:none;
}

.camera-dot{
  position:absolute;
  left:50%;
  top:0;
  width:8px;
  height:8px;
  margin-left:-4px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #2f2f2f, #070707 70%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 4px rgba(255,255,255,.05);
}

.earpiece-slot{
  position:absolute;
  top:10px;
  left:50%;
  width:54px;
  height:6px;
  margin-left:-27px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.side-button{
  position:absolute;
  right:-2px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
  box-shadow:0 0 8px rgba(255,255,255,.05);
  z-index:4;
}

.side-button-top{top:128px;height:34px}
.side-button-mid{top:188px;height:58px}
.side-button-low{top:262px;height:58px}

.phone-notch{
  width:34%;
  height:24px;
  margin:0 auto 16px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  position:relative;
  z-index:4;
}

.real-screen{
  position:relative;
  height:760px;
  border-radius:32px;
  padding:18px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.10), transparent 26%),
    linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,.6),
    inset 0 0 8px rgba(255,255,255,.04);
}

.real-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:32px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 16%, transparent 82%, rgba(255,255,255,.012));
  z-index:1;
}

.screen-glass{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:32px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 20%),
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.08), transparent 18%);
  mix-blend-mode:screen;
  z-index:1;
}

.screen-noise{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:32px;
  opacity:.05;
  background-image:radial-gradient(rgba(255,255,255,.6) 0.5px, transparent 0.5px);
  background-size:4px 4px;
  z-index:1;
}

.phone-screen > *{
  position:relative;
  z-index:2;
}

.screen-status{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--soft);
  font-size:.72rem;
  margin-bottom:10px;
}

.status-right{
  display:flex;
  gap:8px;
  align-items:center;
}

.signal-bars{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
}

.signal-bars i{
  width:3px;
  background:rgba(255,255,255,.65);
  border-radius:999px;
  display:block;
}

.signal-bars i:nth-child(1){height:5px}
.signal-bars i:nth-child(2){height:7px}
.signal-bars i:nth-child(3){height:9px}
.signal-bars i:nth-child(4){height:11px}

.battery-wrap{
  width:22px;
  height:10px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:3px;

  padding:1px;
  position:relative;
}

.battery-wrap::after{
  content:"";
  position:absolute;
  right:-3px;
  top:2px;
  width:2px;
  height:4px;
  border-radius:1px;
  background:rgba(255,255,255,.55);
}

.battery-fill{
  display:block;
  width:87%;
  height:100%;
  border-radius:1px;
  background:linear-gradient(90deg, #d9c18c, #f0ddb4);
}

.screen-scroll{
  animation:screenScroll 12.6s ease-in-out infinite;
  will-change:transform;
}

.screen-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:.74rem;
  margin-bottom:12px;
}

.screen-chip::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(180deg, #f5dfb0, #b68b4c);
  box-shadow:0 0 12px rgba(225,195,138,.35);
}

.screen-top-appbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.app-pill{
  height:18px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
}

.menu-pill{width:40px}
.title-pill{width:110px}
.action-pill{width:62px}

.screen-hero{
  margin-bottom:16px;
  padding:16px 14px;
  border-radius:22px;
  background:
    radial-gradient(circle at top, rgba(225,195,138,.10), transparent 42%),
    rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.screen-hero h3{
  font-size:1.42rem;
  line-height:1;
  letter-spacing:-.04em;
  max-width:8ch;
  margin:0 0 8px;
  font-weight:800;
  color:var(--text);
}

.screen-hero p{
  margin:0;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.38;
  max-width:19ch;
}

.screen-button{
  width:74%;
  height:46px;
  border-radius:999px;
  background:linear-gradient(180deg, #f6e1b3 0%, #cf9f63 100%);
  margin:14px 0 0;
  box-shadow:0 10px 24px rgba(209,172,113,.18);
}

.pulse-btn{
  animation:pulseButton 2.8s ease-in-out infinite;
}

.screen-real-card{
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  margin:10px 0 12px;
}

.screen-real-card strong{
  display:block;
  font-size:.90rem;
  margin-bottom:4px;
}

.screen-real-card p{
  margin:0;
  font-size:.76rem;
  color:var(--muted);
  line-height:1.35;
}

.screen-panel{
  padding:14px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  margin-bottom:12px;
}

.screen-panel.alt{
  background:rgba(255,255,255,.03);
}

.glow-panel{
  box-shadow:0 0 0 1px rgba(225,195,138,.06) inset, 0 0 24px rgba(225,195,138,.06);
}

.screen-kicker{
  width:42%;
  height:11px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  margin-bottom:10px;
}

.screen-line{
  width:100%;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  margin-bottom:8px;
}

.screen-line.short{
  width:62%;
}

.screen-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
}

.mini-card{
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.05);
}

.mini-card.before{
  background:rgba(255,255,255,.03);
}

.mini-card.after{
  background:linear-gradient(180deg, rgba(225,195,138,.12), rgba(255,255,255,.04));
}

.mini-card span{
  display:inline-flex;
  margin-bottom:7px;
  color:var(--soft);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.screen-bottom-bar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}

.bottom-pill{
  height:14px;
  flex:1;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}

.bottom-pill.strong{
  background:linear-gradient(180deg, rgba(225,195,138,.22), rgba(255,255,255,.08));
}

.hero-side-panel{
  position:absolute;
  max-width:220px;
  padding:14px 16px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.028)),
    rgba(12,12,12,.84);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px);
  z-index:3;
}

.hero-side-label{
  display:inline-flex;
  margin-bottom:8px;
  color:var(--gold);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
}

.hero-side-panel strong{
  display:block;
  color:var(--text);
  font-size:.92rem;
  line-height:1.35;
}

.hero-side-right{
  right:-1%;
  bottom:17%;
}

/* micro strip */
.micro-strip{
  padding:18px 0 4px;
}

.micro-strip-grid{
  display:grid;
  gap:10px;
  padding:16px;
  border-radius:26px;
  border:1px solid rgba(225,195,138,.16);
  background:
    linear-gradient(180deg, rgba(225,195,138,.06), rgba(255,255,255,.02)),
    rgba(255,255,255,.02);
  box-shadow:var(--shadow-lg);
}

.micro-item{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:.94rem;
}

/* sections */
.section{
  padding:70px 20px;
}

.section-compact{
  padding-top:55px;
  padding-bottom:55px;
}

.split-grid{
  display:grid;
  gap:22px;
}

.section-copy p{
  color:var(--muted);
}

.cards-grid{
  display:grid;
  gap:14px;
}

.info-card{
  position:relative;
  overflow:hidden;
  padding:20px;
  border-radius:24px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
    rgba(255,255,255,.02);
  box-shadow:var(--shadow-lg);
  transition:var(--transition);
}

.card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.info-card:hover{
  transform:translateY(-3px);
  border-color:rgba(225,195,138,.18);
}

.info-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(225,195,138,.36), transparent);
  opacity:.8;
}

/* comparison head */
.comparison{
  position:relative;
}

.comparison-head{
  text-align:center;
  max-width:860px;
  margin:0 auto 30px;
}

.comparison-head p{
  margin-left:auto;
  margin-right:auto;
  max-width:680px;
  color:var(--muted);
}

/* real avant/apres */
.comparison-stage-real{
  display:grid;
  grid-template-columns:1fr 240px 1fr;
  gap:30px;
  align-items:center;
}

.compare-card-real{
  position:relative;
  padding:24px;
  border-radius:32px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top, rgba(225,195,138,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(255,255,255,.02);
  box-shadow:
    0 26px 80px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  transition:transform .28s ease, box-shadow .28s ease;
}

.compare-card-real::before{
  content:"";
  position:absolute;
  top:0;
  left:22px;
  right:22px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(225,195,138,.36), transparent);
  opacity:.9;
}

.compare-card-real:hover{
  transform:translateY(-4px);
}

.compare-card-after{
  border-color:rgba(225,195,138,.18);
  box-shadow:
    0 30px 90px rgba(0,0,0,.40),
    0 0 34px rgba(225,195,138,.07),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.compare-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:var(--text);
  font-size:.80rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:16px;
}

.compare-real-visual{
  position:relative;
  height:460px;
  padding:14px;
  margin-bottom:18px;
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at top, rgba(225,195,138,.07), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    #090909;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 42px rgba(0,0,0,.30);
}

.compare-real-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 16%, transparent 84%, rgba(255,255,255,.02)),
    radial-gradient(circle at top, rgba(225,195,138,.05), transparent 24%);
}

.compare-real-visual::after{
  content:"";
  position:absolute;
  inset:14px;
  z-index:1;
  border-radius:22px;
  background:#0a0a0a;
}

.compare-real-visual img{
  position:relative;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  transform:scale(1.08);
  border-radius:22px;
  background:#0a0a0a;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.compare-real-visual-after{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 22px 52px rgba(0,0,0,.34),
    0 0 28px rgba(225,195,138,.06);
}

.compare-card-real h3{
  margin:0 0 8px;
  font-size:1.20rem;
  line-height:1.08;
}

.compare-card-real p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.52;
}

.comparison-middle{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.comparison-divider{
  width:1px;
  height:92px;
  background:linear-gradient(180deg, transparent, rgba(225,195,138,.62), transparent);
}

.comparison-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

.comparison-tags span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(225,195,138,.16);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:.82rem;
  font-weight:600;
}

.comparison-proof-text{
  max-width:250px;
  margin:4px 0 0;
  text-align:center;
  color:var(--gold-3);
  font-size:.98rem;
  line-height:1.55;
  font-weight:700;
  text-wrap:balance;
}

.mini-intro{
  text-align:center;
  color:var(--soft);
  font-size:.88rem;
  margin:14px 0 0;
}

/* packs */
.packs-head{
  text-align:center;
  max-width:860px;
  margin:0 auto 24px;
}

.packs-head p{
  color:var(--muted);
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}

.packs-grid{
  display:grid;
  gap:12px;
  align-items:stretch;
}

.pack-card{
  position:relative;
  border-radius:30px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
    rgba(255,255,255,.02);
  box-shadow:var(--shadow-lg);
  padding:26px 24px 24px;
  overflow:hidden;
  transition:var(--transition);
}

.pack-card:hover{
  transform:translateY(-5px);
}

.pack-card::before{
  content:"";
  position:absolute;
  top:0;
  left:18px;
  right:18px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(225,195,138,.36), transparent);
}

.pack-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(225,195,138,.32), transparent);
}

.pack-card-featured{
  border-color:rgba(225,195,138,.34);
  background:
    radial-gradient(circle at top, rgba(225,195,138,.20), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(255,255,255,.025);
  box-shadow:
    0 34px 92px rgba(0,0,0,.40),
    0 0 40px rgba(225,195,138,.10);
}

.featured-glow{
  position:absolute;
  inset:auto auto -120px 50%;
  width:300px;
  height:300px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(225,195,138,.22), transparent 66%);
  filter:blur(22px);
  pointer-events:none;
}

.pack-type{
  display:inline-flex;
  margin-bottom:10px;
  color:var(--gold);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
}

.pack-price{
  margin:0 0 10px;
  font-size:2.25rem;
  line-height:1;
  letter-spacing:-.05em;
  color:var(--text);
}

.pack-price small{
  font-size:.9rem;
  color:var(--soft);
  font-weight:600;
  margin-left:6px;
}

.pack-badge{
  display:inline-flex;
  margin-bottom:14px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(225,195,138,.16);
  color:var(--gold-3);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:800;
  border:1px solid rgba(225,195,138,.16);
}

.pack-card h3{
  margin-bottom:8px;
  font-size:1.5rem;
  line-height:1.05;
}

.pack-subline{
  margin:2px 0 14px;
  color:var(--gold-3);
  font-size:.96rem;
  font-weight:600;
  line-height:1.4;
}

.pack-card p{
  color:var(--muted);
  font-size:.98rem;
  line-height:1.6;
}

.pack-seo-note{
  margin:10px 0 0;
  color:var(--soft);
  font-size:.84rem;
  line-height:1.45;
}

.pack-phone-preview{
  width:100%;
  max-width:158px;
  margin:16px 0;
  padding:8px;
  border-radius:20px;
  background:linear-gradient(180deg, #171717, #0b0b0b);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow-md);
}

.pack-preview-screen{
  min-height:148px;
  padding:10px;
  border-radius:14px;
  background:
    radial-gradient(circle at top, rgba(225,195,138,.08), transparent 28%),
    #101010;
}

.pack-preview-line{
  height:10px;
  width:100%;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  margin-bottom:8px;
}

.pack-preview-line.short{
  width:58%;
}

.pack-preview-box{
  height:56px;
  border-radius:12px;
  margin-top:10px;
  background:linear-gradient(180deg, rgba(242,221,176,.18), rgba(255,255,255,.06));
}

.pack-list{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:9px;
  color:var(--muted);
  font-size:.95rem;
}

.pack-list li{
  padding-left:16px;
  position:relative;
  line-height:1.45;
}

.pack-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:linear-gradient(180deg, #f6e1b3, #cf9f63);
  box-shadow:0 0 10px rgba(225,195,138,.30);
}

/* seo */
.seo-section h2{
  max-width:none;
  margin-bottom:12px;
}

.seo-section p{
  margin:0 0 22px;
  color:var(--muted);
}

/* closing */
.closing-grid{
  display:grid;
  gap:16px;
  align-items:center;
  padding:30px 24px 18px;
  border-radius:36px 36px 0 0;
  border:1px solid rgba(225,195,138,.18);
  border-bottom:none;
  background:
    radial-gradient(circle at top, rgba(225,195,138,.14), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:var(--shadow-xl), 0 0 42px rgba(225,195,138,.05);
  overflow:hidden;
}

.closing-copy p{
  max-width:700px;
  color:var(--muted);
}

.closing-phone-wrap{
  position:relative;
  display:flex;
  justify-content:center;
}

.closing-light{
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(225,195,138,.15), transparent 68%);
  filter:blur(16px);
}

.closing-phone-shell{
  position:relative;
  width:min(100%, 200px);
  padding:10px;
  border-radius:28px;
  background:linear-gradient(180deg, #171717, #0b0b0b);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow-lg);
}

.closing-phone-screen{
  min-height:240px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.05);
  background:
    radial-gradient(circle at top, rgba(225,195,138,.08), transparent 26%),
    #101010;
}

.closing-kicker{
  width:42%;
  height:11px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  margin-bottom:10px;
}

.closing-line{
  width:100%;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  margin-bottom:8px;
}


.closing-line.short{
  width:62%;
}

.closing-box{
  height:110px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(242,221,176,.18), rgba(255,255,255,.06));
  margin:16px 0;
}

/* footer */
.footer-bar{
  margin-top:0;
}

.footer-bar-luxury{
  position:relative;
  padding:14px 22px 16px;
  border-radius:0 0 26px 26px;
  border:1px solid rgba(225,195,138,.18);
  border-top:1px solid rgba(225,195,138,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015)),
    rgba(7,7,7,.96);
  box-shadow:
    0 18px 54px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
}

.footer-bar-luxury::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(225,195,138,.46), transparent);
  opacity:.85;
}

.footer-luxury-top{
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  z-index:2;
}

.footer-brand-block{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.footer-brand-lux{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.78rem;
}

.footer-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(180deg, #f6e1b3, #cf9f63);
  box-shadow:0 0 16px rgba(225,195,138,.32);
}

.footer-signature{
  margin:0;
  color:var(--gold-4);
  font-size:1rem;
  max-width:28rem;
  line-height:1.32;
  letter-spacing:.01em;
}

.footer-links-lux{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.footer-links-lux a{
  color:var(--muted);
  font-size:.88rem;
  transition:var(--transition);
  position:relative;
}

.footer-links-lux a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, rgba(225,195,138,.45), transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:var(--transition);
}

.footer-links-lux a:hover{
  color:var(--text);
}

.footer-links-lux a:hover::after{
  transform:scaleX(1);
}

.footer-luxury-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.05);
  position:relative;
  z-index:2;
}

.footer-luxury-bottom p{
  margin:0;
  color:var(--soft);
  font-size:.82rem;
  max-width:none;
}

/* animations */
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

@keyframes pulseOrbit{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.05)}
}

@keyframes pulseButton{
  0%,100%{transform:scale(1);box-shadow:0 10px 24px rgba(209,172,113,.18)}
  50%{transform:scale(1.03);box-shadow:0 14px 30px rgba(209,172,113,.28)}
}

@keyframes sweep{
  0%,100%{transform:translateX(-10%) rotate(14deg);opacity:.18}
  45%{opacity:.48}
  60%{transform:translateX(210%) rotate(14deg);opacity:.24}
}

@keyframes sweepSoft{
  0%,100%{transform:translateX(0) rotate(10deg);opacity:.07}
  50%{transform:translateX(-30px) rotate(10deg);opacity:.14}
}

@keyframes screenScroll{
  0%,16%,100%{transform:translateY(0)}
  38%{transform:translateY(-56px)}
  58%{transform:translateY(-126px)}
  80%{transform:translateY(-92px)}
}

@keyframes ctaSweep{
  0%{left:-120%}
  45%{left:-120%}
  65%{left:120%}
  100%{left:120%}
}

/* responsive */
@media (max-width:1023px){
  .hero-side-panel,
  .float-card{
    display:none;
  }

  .comparison-stage-real{
    grid-template-columns:1fr;
    gap:18px;
  }

  .comparison-middle{
    order:2;
    padding:4px 0 10px;
  }

  .compare-card-real:first-child{
    order:1;
  }

  .compare-card-real:last-child{
    order:3;
  }

  .comparison-divider{
    height:60px;
  }

  .comparison-proof-text{
    max-width:420px;
  }
}

@media (max-width:768px){
  section{
    padding:55px 16px;
  }
}

@media (max-width:767px){
  .header{
    top:8px;
    margin:8px 10px;
  }

  .header-shell{
    min-height:70px;
    padding:10px 11px;
    border-radius:18px;
    gap:10px;
  }

  .brand{
    gap:10px;
    align-items:center;
  }

  .brand-mark{
    width:48px;
    height:48px;
    border-radius:16px;
  }

  .brand-mark svg{
    width:24px;
    height:24px;
  }

  .brand-name{
    font-size:.94rem;
    letter-spacing:.13em;
  }

  .brand-sub{
    font-size:.60rem;
    letter-spacing:.14em;
    margin-top:3px;
    opacity:.9;
  }

  .header-actions{
    gap:8px;
  }

  .header-cta{
    min-height:42px;
    padding:0 14px;
    font-size:.86rem;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.24);
    box-shadow:
      0 4px 14px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.18);
  }

  .btn{
    width:100%;
    min-height:50px;
    font-size:.92rem;
  }

  .btn-gold,
  .cta-primary,
  .hero-primary-btn{
    background:linear-gradient(135deg,#f3d39b 0%,#d4a05f 100%);
    color:#141414;
    border:1px solid rgba(255,255,255,.22);
    box-shadow:
      0 8px 18px rgba(217,169,105,.20),
      inset 0 1px 0 rgba(255,255,255,.42);
  }

  .hero{
    min-height:auto;
    padding-top:16px;
    padding-bottom:8px;
  }

  h1{
    font-size:2.18rem;
    line-height:1.02;
    letter-spacing:-.04em;
    max-width:11ch;
  }

  .hero-lead{
    font-size:.95rem;
    margin-top:10px;
  }

  .hero-sub{
    font-size:.89rem;
    margin-top:9px;
    line-height:1.48;
    color:#a79f94;
  }

  .hero-actions-row{
    margin-top:12px;
    gap:9px;
  }

  .cta-sub{
    margin-top:5px;
    font-size:.74rem;
  }

  .hero-pills{
    margin-top:12px;
    gap:6px;
  }

  .hero-pills span{
    font-size:.73rem;
    padding:6px 9px;
    border-color:rgba(225,195,138,.14);
  }

  .hero-visual{
    min-height:auto;
    margin-top:4px;
  }

  .phone-stage{
    transform:scale(.775);
    transform-origin:top center;
    margin-top:-18px;
  }

  .ultra-device{
    width:min(100%, 376px);
  }

  .real-screen{
    height:590px;
  }

  .phone-shadow{
    height:138px;
    bottom:-14px;
    opacity:.82;
  }

  .screen-scroll{
    animation-duration:13.2s;
  }

  .info-card{
    padding:18px;
  }

  .compare-card-real{
    padding:16px;
    border-radius:24px;
  }

  .compare-badge{
    min-height:36px;
    padding:0 14px;
    font-size:.74rem;
    margin-bottom:12px;
  }

  .compare-real-visual{
    height:auto;
    padding:10px;
    margin-bottom:14px;
    border-radius:20px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
      #090909;
  }

  .compare-real-visual::before{
    border-radius:20px;
  }

  .compare-real-visual::after{
    inset:10px;
    border-radius:16px;
  }

  .compare-real-visual img{
    width:100%;
    height:auto;
    object-fit:cover;
    object-position:center;
    transform:scale(1.08);
    border-radius:16px;
    background:#0a0a0a;
  }

  .compare-card-real h3{
    font-size:1.04rem;
    margin-bottom:7px;
  }

  .compare-card-real p{
    font-size:.9rem;
    line-height:1.46;
  }

  .comparison-middle{
    gap:12px;
    padding:4px 0 8px;
  }

  .comparison-divider{
    height:54px;
  }

  .comparison-tags span{
    min-height:36px;
    padding:0 12px;
    font-size:.8rem;
  }

  .comparison-proof-text{
    max-width:none;
    font-size:.9rem;
    line-height:1.5;
  }

  .mini-intro{
    font-size:.82rem;
    margin-top:10px;
  }

  .packs-head{
    margin-bottom:18px;
  }

  .packs-grid{
    gap:10px;
  }

  .pack-card{
    padding:18px 14px 17px;
    border-radius:22px;
  }

  .pack-type{
    margin-bottom:8px;
    font-size:.73rem;
  }

  .pack-price{
    font-size:1.9rem;
    margin-bottom:8px;
  }

  .pack-card h3{
    font-size:1.26rem;
    margin-bottom:6px;
  }


  .pack-subline{
    font-size:.89rem;
    margin:0 0 10px;
  }

  .pack-card p{
    font-size:.92rem;
    line-height:1.5;
  }

  .pack-seo-note{
    font-size:.79rem;
    margin-top:8px;
  }

  .pack-list{
    gap:7px;
    margin-top:13px;
    font-size:.9rem;
  }

  .pack-phone-preview{
    max-width:146px;
    margin:14px 0;
  }

  .pack-card-featured{
    transform:none;
    border-color:rgba(225,195,138,.38);
    box-shadow:
      0 28px 72px rgba(0,0,0,.34),
      0 0 32px rgba(225,195,138,.09);
  }

  .closing-grid{
    padding:22px 16px 14px;
    border-radius:26px 26px 0 0;
    gap:16px;
  }

  .closing-copy h2{
    font-size:1.8rem;
    max-width:none;
  }

  .closing-copy p{
    font-size:.92rem;
  }

  .closing-phone-shell{
    width:min(100%, 210px);
  }

  .closing-phone-screen{
    min-height:250px;
  }

  .footer-bar-luxury{
    padding:12px 14px 12px;
    border-radius:0 0 22px 22px;
  }

  .footer-signature{
    font-size:.94rem;
    line-height:1.3;
  }

  .footer-luxury-bottom{
    margin-top:10px;
    padding-top:10px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .footer-luxury-bottom p{
    font-size:.84rem;
    line-height:1.5;
  }
}

@media (min-width:768px){
  .hero-actions-row{
    flex-direction:row;
    flex-wrap:wrap;
  }

  .micro-strip-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .cards-grid-2{
    grid-template-columns:repeat(2,1fr);
  }

  .info-card-large,
  .info-card-wide{
    grid-column:span 2;
  }

  .packs-grid{
    grid-template-columns:1fr 1.18fr 1fr;
    align-items:stretch;
  }

  .closing-grid{
    grid-template-columns:1fr auto;
  }

  .footer-luxury-top{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
  }
}

@media (min-width:1024px){
  .nav{
    display:flex;
  }

  .mini-link{
    display:inline-flex;
  }

  .hero-grid{
    grid-template-columns:.92fr 1.08fr;
    gap:42px;
    align-items:center;
  }

  .hero-copy{
    max-width:600px;
  }

  h1{
    font-size:clamp(3.5rem, 4.85vw, 5.35rem);
    max-width:10.2ch;
  }

  .hero-lead{
    max-width:29rem;
    font-size:1.15rem;
  }

  .hero-sub{
    max-width:33rem;
    font-size:1rem;
  }

  .hero-copy::before{
    display:block;
  }

  .split-grid{
    grid-template-columns:.92fr 1.08fr;
    align-items:start;
  }

  .pack-card-featured{
    transform:translateY(-10px) scale(1.015);
  }
}

@media (min-width:1280px){
  .hero{
    padding-top:28px;
  }

  .hero-visual{
    min-height:700px;
  }

  .ultra-device{
    width:530px;
  }

  .real-screen{
    height:770px;
  }
}

/* scrollbar */
::-webkit-scrollbar{
  width:12px;
}

::-webkit-scrollbar-track{
  background:#0b0b0b;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #3a342c, #b99257);
  border-radius:999px;
  border:2px solid #0b0b0b;
}

::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #4c4338, #d2a867);
}

/* ===== APP LOADER ===== */

.app-loader{
  position:fixed;
  inset:0;
  z-index:3000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:
    radial-gradient(circle at center, rgba(225,195,138,.08), transparent 26%),
    #050505;
  transition:opacity .45s ease, visibility .45s ease;
}

.app-loader.is-hidden{
  opacity:0;
  visibility:hidden;
}

.app-loader-mark{
  width:56px;
  height:56px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.03)),
    linear-gradient(180deg, #181818, #0b0b0b);
  border:1px solid rgba(225,195,138,.30);
  box-shadow:
    0 18px 40px rgba(0,0,0,.34),
    0 0 42px rgba(225,195,138,.14);
  position:relative;
}

.app-loader-mark::before{
  content:"";
  position:absolute;
  inset:15px 19px 15px 19px;
  border:2px solid #e1c38a;
  border-radius:8px;
}

.app-loader-mark::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:13px;
  width:6px;
  height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:#e1c38a;
}

.app-loader-text{
  color:#f0ddb4;
  font-size:.95rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
}

/* ===== APP MODE POLISH ===== */

html,
body{
  min-height:100%;
}

body{
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}

.site-shell{
  min-height:100dvh;
}

@supports (padding:max(0px)){
  body{
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
}

.btn-ghost{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding:18px 26px;
  border-radius:999px;

  font-weight:600;
  line-height:1.3;

  color:#fff;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02)
  );

  border:1px solid rgba(255,255,255,0.18);

  backdrop-filter:blur(14px);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1);

  transition:all .3s ease;
}

.btn-ghost:hover{
  transform:translateY(-2px);

  background:linear-gradient(
    180deg,
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.04)
  );

  border-color:rgba(255,255,255,0.35);

  box-shadow:
    0 18px 50px rgba(0,0,0,0.55),
    0 0 30px rgba(217,169,105,0.12);
}

.hero-actions-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}


.btn-ghost span{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* ===== CTA FINAL MICRO ANIMATION ===== */

.cta-reveal-row{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
}

.cta-reveal-row.is-visible{
  opacity:1;
  transform:translateY(0);
}

.cta-reveal-row .btn{
  position:relative;
}

.cta-reveal-row.is-visible .btn-gold{
  animation:ctaGoldIntroGlow 1.4s ease-out .15s 1;
}

@keyframes ctaGoldIntroGlow{
  0%{
    box-shadow:
      0 10px 30px rgba(217,169,105,0.18),
      0 4px 12px rgba(0,0,0,0.30);
  }
  45%{
    box-shadow:
      0 18px 46px rgba(217,169,105,0.42),
      0 8px 18px rgba(0,0,0,0.38),
      0 0 28px rgba(217,169,105,0.20);
  }
  100%{
    box-shadow:
      0 10px 30px rgba(217,169,105,0.18),
      0 4px 12px rgba(0,0,0,0.30);
  }
}

.btn-ghost{
  position:relative;
  overflow:hidden;
}

.btn-ghost::before{
  content:"";
  position:absolute;
  top:0;
  left:-70%;
  width:42%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );
  transform:skewX(-20deg);
  transition:left .55s ease;
}

.btn-ghost:hover{
  transform:translateY(-2px);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.45),
    0 0 24px rgba(255,255,255,0.08);
}

.btn-ghost:hover::before{
  left:125%;
}