
/* v5 preview */
.hero .k{font-size:15px;color:var(--brand-d);font-weight:600}
.hero .k:before{width:28px;height:2px}
h1{font-size:clamp(40px,7.4vw,76px);line-height:1.18;letter-spacing:0}
.hero h1 em{background:linear-gradient(transparent 70%,rgba(200,178,122,.45) 70% 92%,transparent 92%);color:var(--ink);padding:0 .08em}
.hero-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:28px 0 0;border-top:1px solid var(--line);padding-top:20px}
.hero-nums div{padding-right:10px}
.hero-nums div+div{padding-left:14px;border-left:1px solid var(--line)}
.hero-nums dt{font:700 clamp(26px,7vw,40px)/1 var(--sans);color:var(--brand-d);font-variant-numeric:tabular-nums}
.hero-nums dd{font-size:13.5px;line-height:1.4;color:var(--mute);margin-top:6px}
.real{background:var(--ink);color:#F7FAFC;border-radius:36px 36px 0 0;margin-top:-28px;z-index:2}
.real h2,.real h2 em{color:#fff}.real .k{color:#E8D6B4}
.real h2 em{background:none}
.real-grid{display:grid;gap:16px;margin-top:36px}
@media(min-width:820px){.real-grid{grid-template-columns:1fr 1fr;gap:24px}}
.real-card{border-radius:24px;padding:26px 24px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.real-card h3{font-size:20px;color:#fff;margin-bottom:16px}
.real-card.old{opacity:.92}.real-card.old h3{color:#B9C6D6}
.real-card ol{list-style:none;counter-reset:s;display:grid;gap:12px}
.real-card li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5}
.real-card li:before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--sans);background:rgba(255,255,255,.12);color:#DCECF2}
.real-card.new{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.real-card.new h3{color:var(--brand-d)}
.real-card.new li:before{background:var(--brand);color:#fff}
.real-end{margin-top:20px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.25);font-weight:600;font-size:15.5px}
.real-end span{display:block;font-size:12px;color:#9FC7D8;font-weight:500;margin-bottom:4px}
.real-end.ok{border-color:var(--line-2);color:var(--ok)}.real-end.ok span{color:var(--label)}
/* mobile: product (phone) visible in first screen */
@media(max-width:859px){
  .hero{padding:20px 0 48px}
  .hero-copy h1{font-size:clamp(28px,8vw,44px);line-height:1.2}
  .hero-lead{display:none}
  .hero-act{margin-top:18px}.hero-act .ghost{display:none}
  .hero-nums{margin-top:16px;padding-top:14px}.hero-nums dt{font-size:24px}.hero-nums dd{font-size:12.5px}
  .hero-stage{margin-top:-4px}
}
/* C: midnight stage, product centre */
.hero{background:radial-gradient(120% 60% at 50% 38%,#3F587A 0%,#2C4263 38%,#1F2D42 75%);color:#F7FAFC}
.hero:before{background:radial-gradient(3px 3px at 12% 12%,#E8D6B4,transparent 70%),radial-gradient(2px 2px at 82% 9%,#DCECF2,transparent 70%),radial-gradient(3px 3px at 90% 46%,#E8D6B4,transparent 70%),radial-gradient(2px 2px at 5% 52%,#DCECF2,transparent 70%),radial-gradient(2px 2px at 30% 6%,#fff,transparent 70%),radial-gradient(2px 2px at 64% 30%,#fff,transparent 70%),radial-gradient(3px 3px at 8% 88%,#E8D6B4,transparent 70%),radial-gradient(2px 2px at 76% 92%,#DCECF2,transparent 70%)}
.hero .k{color:#E8D6B4}.hero .k:before{background:#E8D6B4}
.hero h1,.hero-copy h1{color:#fff}
.hero h1 em{background:linear-gradient(transparent 72%,rgba(232,214,180,.55) 72% 90%,transparent 90%);color:#fff}
.hero .btn{background:#fff;color:#1F2D42;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.hero .btn:hover{background:#EEF4F8}
.hero-nums{border-top-color:rgba(255,255,255,.18)}
.hero-nums div+div{border-left-color:rgba(255,255,255,.18)}
.hero-nums dt{color:#fff}.hero-nums dd{color:#B9CCE0}
.hero-phone{filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));transform:rotate(0) translateX(0)}
.hero-stage:before{content:"";position:absolute;left:50%;top:44%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(159,199,216,.38),transparent 70%);z-index:-1}
.hero-cap{color:#DCECF2}
.hero-dots button i{background:rgba(255,255,255,.35)}
@media(max-width:859px){
 .hero{padding:18px 0 40px}
 .hero .w{gap:0}
 .hero-copy{display:contents}
 .hero-copy>.k{order:1}.hero-copy>h1{order:2;font-size:clamp(28px,8vw,44px);line-height:1.2}
 .hero-stage{order:3;margin:10px auto 0;padding-bottom:6px}
 .hero-act{order:4;margin-top:6px}.hero-act .ghost{display:none}
 .hero-nums{order:5;margin-top:18px}
 .hero-lead{display:none}
 .hero .w{display:flex;flex-direction:column}
 .hero-phone{width:min(64%,262px)}.hero-cap,.hero-dots{display:none}
 .hero-toast{left:0;top:26px;max-width:196px;z-index:3;padding:8px 10px}
 .hero-bo{display:block;width:52%;min-width:0;right:0;bottom:70px;padding:10px;border-radius:18px}.hero-kpi small{font-size:10.5px}
 .hero-bo .hero-list{display:none}
}
.hero-lead{color:#DCECF2}
.hero-toast,.hero-bo{color:var(--ink)}
.hero h1 em{background:linear-gradient(transparent 72%,rgba(200,178,122,.85) 72% 88%,transparent 88%)}
@media(min-width:860px){.hero-cap{color:var(--ink)}}
/* taste pass 2: LINE badge contrast, no decorative step numerals, 16px body in steps */
.film-ping .lg,.line-n i{background:#06C755;color:#052E14;font-size:11px}
.how-step span{font-size:16px}
.tour-line i,.talk-cards i{color:#052E14}.btn.line{color:#052E14}
/* polish: details that make it feel finished */
h1,h2,h3{text-wrap:balance}
p,dd,li,summary{text-wrap:pretty}
.hero-nums dt,.price b,[class*=price] strong,.film-ping b{font-variant-numeric:tabular-nums}
img{outline:1px solid rgba(31,45,66,.08);outline-offset:-1px}
.hero img,.hero-phone img{outline-color:rgba(0,0,0,.1)}
.btn,.nav-cta,button{transition-property:transform,background-color,color,box-shadow;transition-duration:.2s}
.btn:active,.nav-cta:active,button:active{transform:scale(.97)}
.nav-link,.lang a{position:relative}
.nav-link:after,.lang a:after{content:"";position:absolute;inset:-10px -6px}
@media(prefers-reduced-motion:reduce){.btn:active,.nav-cta:active,button:active{transform:none}}
/* theme-sheet pass (31 Oct): stage rhythm pearl→midnight, floating white cards, gold only on price, bigger section titles */
h2{font-size:clamp(30px,3.6vw,46px);line-height:1.2}
.sub{font-size:17px}
.card{border-color:transparent;box-shadow:0 1px 2px rgba(31,45,66,.06),0 18px 40px -20px rgba(31,45,66,.3)}
.k:before{background:var(--gold)}
/* pricing becomes the second stage */
section#price.pearl{background:radial-gradient(120% 70% at 50% 20%,#3F587A 0%,#2C4263 42%,#1F2D42 80%);color:#F7FAFC;position:relative;overflow:hidden}
section#price:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(2px 2px at 10% 18%,#E8D6B4,transparent 70%),radial-gradient(2px 2px at 86% 12%,#DCECF2,transparent 70%),radial-gradient(2px 2px at 93% 64%,#E8D6B4,transparent 70%),radial-gradient(2px 2px at 5% 78%,#DCECF2,transparent 70%),radial-gradient(1.5px 1.5px at 48% 6%,#fff,transparent 70%)}
section#price .w{position:relative}
section#price h2,section#price h2 em{color:#fff}section#price .sub{color:#DCECF2}section#price .k{color:#E8D6B4}
section#price .price-card{background:#fff;border:0;box-shadow:0 2px 4px rgba(0,0,0,.2),0 48px 90px -30px rgba(0,0,0,.6);border-radius:28px}
.price-col .price{color:var(--ink);font-weight:700}
.price-col em{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:600;font-size:14px;width:max-content;margin-top:6px}
.price-col small{color:#5C6F86}
@media(min-width:720px){.price-cols{grid-template-columns:1fr 1fr}.price-col+.price-col{border-top:0;border-left:1px solid var(--line)}}
.price-list svg{background:var(--ink);color:#fff}
section#price .price-fine{color:#B9CCE0}
section#price .price-trial{background:rgba(255,255,255,.06);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#F7FAFC}
section#price .price-trial h3{color:#fff}section#price .price-trial p,section#price .price-trial li{color:#DCECF2}
section#price .price-trial .btn{background:#fff;color:var(--ink)}section#price .price-trial .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
/* 3 steps: white cards float, icon in midnight disc */
.how-step{box-shadow:0 1px 2px rgba(31,45,66,.06),0 24px 48px -24px rgba(31,45,66,.32)}
.how-ic{background:var(--ink);color:#fff;border-radius:14px}
/* tour cards hover lift */
.tour-grid .card{transition-property:transform,box-shadow;transition-duration:.3s}
.tour-grid .card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(31,45,66,.06),0 32px 56px -28px rgba(31,45,66,.4)}
/* footer joins the midnight */
footer{background:var(--ink);color:#B9CCE0;border-top:0}footer a{color:#DCE6EE}
.price-col .price,.tour-rc .price,.price{color:#7A6430}.price-col .price{color:var(--ink)}
/* 31 Oct r2: no frame on logo/svg, stage cards without hairline, one stage gradient everywhere, slow twinkle + gentle float */
.mark img,img[src$=".svg"],.how-pic img{outline:0}
.hero-toast,.hero-bo{border-color:transparent;box-shadow:0 2px 4px rgba(0,0,0,.18),0 30px 60px -20px rgba(0,0,0,.6)}
section.mid{background:radial-gradient(120% 70% at 50% 20%,#3F587A 0%,#2C4263 42%,#1F2D42 80%);position:relative;overflow:hidden}
section.mid:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(2px 2px at 14% 22%,#E8D6B4,transparent 70%),radial-gradient(2px 2px at 80% 14%,#DCECF2,transparent 70%),radial-gradient(2px 2px at 90% 72%,#E8D6B4,transparent 70%),radial-gradient(2px 2px at 8% 84%,#DCECF2,transparent 70%),radial-gradient(1.5px 1.5px at 52% 8%,#fff,transparent 70%)}
section.mid>.w{position:relative}
.real{background:radial-gradient(120% 70% at 50% 20%,#3F587A 0%,#2C4263 42%,#1F2D42 80%)}
@media(prefers-reduced-motion:no-preference){
 .hero:before,section.mid:before,section#price:before{animation:twinkle 6s ease-in-out infinite alternate}
 @keyframes twinkle{from{opacity:.45}to{opacity:1}}
 .hero-toast{animation:bob 7s ease-in-out infinite}.hero-bo{animation:bob 8s 1s ease-in-out infinite}
 @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
 .price-col em{background:linear-gradient(100deg,#C8B27A 0%,#E8D6B4 45%,#C8B27A 60%);background-size:220% 100%;animation:sheen 5s ease-in-out infinite}
 @keyframes sheen{0%,60%{background-position:120% 0}100%{background-position:-20% 0}}
}
/* colour harmony: blue accents on pearl sections are one tone, gold only on prices */
.k{color:#5C7491}
.tour-grid .card,.how-step,.price-trial{border-color:transparent}
.pill{background:var(--ice);color:#3F587A}
