/* RMC Export Billing website: premium design. Navy and gold, Poppins font.
   Menu, footer and the WhatsApp button also work on guide.html; everything else applies under body.site. */
:root { --navy:#0b1f3a; --navy2:#12305c; --navy3:#1d4a8c; --gold:#c8963e; --gold-light:#e7b866; --gold-dark:#a97a27; --bg:#f6f8fc; --text:#1d2433; --muted:#5c6679; --line:#e3e8f1; --wa:#25d366; --card:#fff; --shadow:0 10px 30px rgba(11,31,58,.08); --shadow-lg:0 24px 60px rgba(11,31,58,.18); }
body.site, body.guide-page { font-family:"Poppins","Segoe UI",system-ui,-apple-system,Arial,sans-serif; }
body.site { margin:0; color:var(--text); background:var(--bg); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.site * { box-sizing:border-box; }
body.site img { max-width:100%; height:auto; }
body.site a { color:var(--navy3); }
body.site .wrap { max-width:1160px; margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:8px 14px; z-index:100; }
.skip:focus { left:8px; top:8px; }

/* ---------- Menu: transparent over the home hero, solid after scrolling ---------- */
nav.menu { background:rgba(11,31,58,.98); position:sticky; top:0; z-index:50; transition:background .25s, box-shadow .25s; }
nav.menu.top { background:transparent; }
nav.menu.scrolled { background:rgba(11,31,58,.97); backdrop-filter:saturate(160%) blur(10px); box-shadow:0 6px 24px rgba(0,0,0,.25); }
nav.menu .wrap { max-width:1160px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:22px; min-height:68px; }
nav.menu a, nav.menu summary { color:#fff; text-decoration:none; font-weight:500; opacity:.9; cursor:pointer; font-size:.93rem; }
nav.menu a:hover, nav.menu a:focus-visible, nav.menu a[aria-current], nav.menu summary:hover { opacity:1; color:var(--gold-light); }
nav.menu a[aria-current] { text-decoration:underline; text-underline-offset:6px; text-decoration-color:var(--gold); }
nav.menu .brand { margin-right:auto; display:flex; align-items:center; gap:10px; opacity:1; white-space:nowrap; font-weight:700; font-size:1rem; letter-spacing:.03em; }
nav.menu .brand:hover { color:#fff; }
nav.menu .brand img { width:36px; height:36px; border-radius:9px; }
nav.menu .links { display:flex; align-items:center; gap:20px; }
nav.menu .links a.dl { background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--navy); opacity:1; padding:9px 20px; border-radius:10px; font-weight:600; box-shadow:0 4px 14px rgba(200,150,62,.35); transition:transform .15s, box-shadow .15s; }
nav.menu .links a.dl:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(200,150,62,.55); color:var(--navy); }
.menu-toggle { display:none; background:none; border:1px solid rgba(255,255,255,.35); border-radius:10px; width:44px; height:44px; cursor:pointer; padding:0; position:relative; }
.menu-toggle span { position:absolute; left:11px; right:11px; height:2px; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s, top .2s; }
.menu-toggle span:nth-child(1) { top:14px; } .menu-toggle span:nth-child(2) { top:21px; } .menu-toggle span:nth-child(3) { top:28px; }
nav.menu.open .menu-toggle span:nth-child(1) { top:21px; transform:rotate(45deg); }
nav.menu.open .menu-toggle span:nth-child(2) { opacity:0; }
nav.menu.open .menu-toggle span:nth-child(3) { top:21px; transform:rotate(-45deg); }
nav.menu details { position:relative; }
nav.menu summary { list-style:none; }
nav.menu summary::-webkit-details-marker { display:none; }
nav.menu summary::after { content:" \25BE"; }
nav.menu details .drop { position:absolute; right:0; top:calc(100% + 14px); background:var(--navy); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:8px 0; min-width:220px; display:flex; flex-direction:column; box-shadow:0 14px 34px rgba(0,0,0,.35); }
nav.menu details .drop a { padding:10px 20px; }

/* ---------- Footer (dark) ---------- */
footer.site-footer { background:var(--navy); color:#c8d3e6; padding:64px 0 28px; margin-top:0; text-align:left; font-size:.93rem; position:relative; }
footer.site-footer::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
footer.site-footer .wrap { max-width:1160px; margin:0 auto; padding:0 24px; }
footer.site-footer .cols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.5fr; gap:36px; }
footer.site-footer h3 { color:#fff; font-size:.88rem; margin:0 0 14px; letter-spacing:.08em; text-transform:uppercase; }
footer.site-footer p { margin:0 0 8px; color:#c8d3e6; }
footer.site-footer ul { list-style:none; margin:0; padding:0; }
footer.site-footer li { margin:0 0 8px; }
footer.site-footer a { color:#e8eefb; text-decoration:none; }
footer.site-footer a:hover, footer.site-footer a:focus-visible { color:var(--gold-light); text-decoration:underline; }
footer.site-footer .fbrand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; margin-bottom:12px; }
footer.site-footer .fbrand img { width:40px; height:40px; border-radius:10px; }
footer.site-footer .made { color:var(--gold-light); font-weight:600; }
footer.site-footer .legal { border-top:1px solid rgba(255,255,255,.12); margin-top:36px; padding-top:20px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:.84rem; color:#9fb0cc; }
body.site footer.site-footer h3 { color:#fff; }
body.site footer.site-footer a { color:#e8eefb; }
body.site footer.site-footer a:hover, body.site footer.site-footer a:focus-visible { color:var(--gold-light); }
body.site footer.site-footer p { color:#c8d3e6; }
body.site footer.site-footer .made { color:var(--gold-light); }

/* ---------- WhatsApp button ---------- */
.wa-float { position:fixed; right:20px; bottom:20px; z-index:60; width:60px; height:60px; border-radius:50%; background:var(--wa); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.3); transition:transform .15s; }
.wa-float::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); animation:ping 2.4s ease-out infinite; }
.wa-float:hover, .wa-float:focus-visible { transform:scale(1.08); outline:3px solid rgba(37,211,102,.45); }
.wa-float svg { width:33px; height:33px; fill:#fff; }
@keyframes ping { 0% { transform:scale(1); opacity:.6; } 80%,100% { transform:scale(1.5); opacity:0; } }

/* ---------- Buttons ---------- */
body.site .btn { display:inline-block; font:inherit; font-weight:600; text-decoration:none; padding:14px 30px; border-radius:12px; border:2px solid transparent; cursor:pointer; text-align:center; transition:transform .15s, box-shadow .2s, background .2s; }
body.site .btn:hover, body.site .btn:focus-visible { transform:translateY(-3px); }
body.site .btn-gold { background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--navy); box-shadow:0 8px 24px rgba(200,150,62,.4); }
body.site .btn-gold:hover { box-shadow:0 0 0 4px rgba(231,184,102,.25), 0 14px 36px rgba(200,150,62,.65); color:var(--navy); }
body.site .btn-line { background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.5); }
body.site .btn-line:hover { background:rgba(255,255,255,.14); box-shadow:0 0 0 4px rgba(255,255,255,.1), 0 12px 30px rgba(255,255,255,.12); color:#fff; }
body.site .btn-navy { background:var(--navy2); color:#fff; }
body.site .btn-navy:hover { background:var(--navy); box-shadow:0 12px 28px rgba(11,31,58,.35); color:#fff; }
body.site .btn-big { font-size:1.1rem; padding:17px 38px; }
body.site h1, body.site h2, body.site h3 { line-height:1.25; color:var(--navy); }

/* ---------- Scroll animations (only when JS is on) ---------- */
.js .reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--d,0s); }
.js .reveal.left { transform:translateX(-36px); } .js .reveal.right { transform:translateX(36px); }
.js .reveal.in { opacity:1; transform:none; }

/* ---------- Home hero ---------- */
body.site header.hero { background:radial-gradient(900px 500px at 85% 15%,rgba(200,150,62,.16),transparent 60%), radial-gradient(800px 600px at 10% 90%,rgba(29,74,140,.55),transparent 60%), linear-gradient(135deg,#071427 0%,var(--navy) 45%,var(--navy2) 100%); color:#fff; position:relative; overflow:hidden; }
body.site header.hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%); pointer-events:none; }
body.site header.hero.hero-home { min-height:100vh; margin-top:-68px; padding:128px 0 90px; display:flex; align-items:center; }
body.site header.hero.hero-home .wrap { display:grid; grid-template-columns:1.02fr 1fr; gap:48px; align-items:center; position:relative; width:100%; }
body.site header.hero h1 { color:#fff; font-size:3.2rem; font-weight:700; letter-spacing:-.02em; margin:0 0 20px; line-height:1.15; }
body.site header.hero h1 span { background:linear-gradient(135deg,var(--gold-light),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.site header.hero p.lead { font-size:1.15rem; opacity:.92; margin:0 0 32px; max-width:540px; font-weight:300; }
body.site header.hero .cta { display:flex; gap:16px; flex-wrap:wrap; }
body.site header.hero small { display:block; margin-top:20px; opacity:.75; font-size:.86rem; }
.pill-tag { display:inline-block; border:1px solid rgba(231,184,102,.5); color:var(--gold-light); background:rgba(200,150,62,.1); padding:6px 16px; border-radius:99px; font-size:.82rem; font-weight:500; margin-bottom:22px; }

/* laptop mockup */
.laptop { position:relative; max-width:640px; margin:0 auto; animation:float 6s ease-in-out infinite; filter:drop-shadow(0 40px 50px rgba(0,0,0,.45)); }
.laptop .lid { background:linear-gradient(160deg,#2b3a55,#141d30); border-radius:16px 16px 6px 6px; padding:14px 14px 18px; border:1px solid rgba(255,255,255,.14); position:relative; }
.laptop .lid::before { content:""; position:absolute; top:5px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#3d4d6b; }
.laptop .screen { border-radius:6px; overflow:hidden; background:#fff; aspect-ratio:1200/545; }
.laptop .screen img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.laptop .base { height:16px; margin:0 -5%; background:linear-gradient(#cfd6e4,#8e99b0); border-radius:0 0 18px 18px; position:relative; box-shadow:0 2px 0 rgba(255,255,255,.2) inset; }
.laptop .base::before { content:""; position:absolute; left:50%; top:0; width:18%; height:6px; margin-left:-9%; background:#6f7a92; border-radius:0 0 8px 8px; }
@keyframes float { 0%,100% { transform:translateY(0) rotate(-.4deg); } 50% { transform:translateY(-14px) rotate(.4deg); } }

/* ---------- Sections ---------- */
body.site section { padding:92px 0 0; }
body.site section h2 { font-size:2.15rem; text-align:center; margin:0 0 12px; letter-spacing:-.015em; font-weight:700; }
body.site .sub { text-align:center; color:var(--muted); max-width:680px; margin:0 auto 46px; font-size:1.02rem; }
body.site .eyebrow { text-align:center; color:var(--gold-dark); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; margin-bottom:10px; }

/* trust strip */
.trust { background:#fff; border-bottom:1px solid var(--line); box-shadow:0 8px 24px rgba(11,31,58,.05); position:relative; z-index:2; }
.trust ul { list-style:none; margin:0 auto; padding:20px 24px; max-width:1160px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; }
.trust li { font-weight:600; color:var(--navy2); font-size:.92rem; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.trust li::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(200,150,62,.18); }

/* stats */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat { text-align:center; background:linear-gradient(160deg,var(--navy),var(--navy2)); color:#fff; border-radius:20px; padding:34px 18px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.stat::after { content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; background:rgba(200,150,62,.16); }
.stat .num { font-size:3rem; font-weight:700; line-height:1.1; color:var(--gold-light); }
.stat .lbl { margin-top:6px; font-size:.92rem; opacity:.9; }

/* cards and feature grid */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:24px; }
.card { background:var(--card); border-radius:18px; padding:28px; box-shadow:var(--shadow); border:1px solid var(--line); transition:transform .2s, box-shadow .2s; }
.grid .card:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(11,31,58,.14); }
.card h3 { font-size:1.08rem; margin:0 0 6px; font-weight:600; }
.card p { color:var(--muted); font-size:.93rem; margin:0; }
.icon { width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,#fdf3df,#f8e3b8); color:var(--gold-dark); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.icon svg { width:28px; height:28px; }

/* steps */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step { background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 26px; box-shadow:var(--shadow); }
.step .num { width:46px; height:46px; border-radius:50%; background:var(--navy2); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:16px; border:3px solid var(--gold); }
.step h3 { margin:0 0 6px; font-size:1.12rem; } .step p { margin:0; color:var(--muted); }

/* showcase: alternating rows */
.showcase { display:grid; gap:88px; }
.show-row { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.show-row.flip .show-text { order:2; }
.show-text .tag { display:inline-block; background:#fdf3df; color:var(--gold-dark); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding:5px 14px; border-radius:99px; margin-bottom:14px; }
.show-text h3 { font-size:1.9rem; margin:0 0 14px; font-weight:700; letter-spacing:-.01em; }
.show-text p { color:var(--muted); margin:0 0 16px; }
.show-text ul { list-style:none; margin:0 0 22px; padding:0; }
.show-text li { padding:5px 0 5px 30px; position:relative; }
.show-text li::before { content:""; position:absolute; left:4px; top:13px; width:13px; height:7px; border-left:3px solid var(--gold); border-bottom:3px solid var(--gold); transform:rotate(-45deg); }
.show-media { background:linear-gradient(135deg,#e8eef9,#f6e9cf); border-radius:24px; padding:22px; box-shadow:var(--shadow-lg); }
.show-media img { display:block; width:100%; border-radius:12px; box-shadow:0 10px 30px rgba(11,31,58,.2); background:#fff; }
.show-media img.tall { max-height:560px; width:auto; margin:0 auto; object-fit:contain; }

/* gallery */
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.gallery figure { margin:0; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s; }
.gallery figure:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(11,31,58,.14); }
.gallery a { display:block; background:#e9eef7; cursor:zoom-in; }
.gallery img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.gallery figcaption { padding:16px 18px 18px; font-size:.9rem; color:var(--muted); }
.gallery figcaption strong { display:block; color:var(--navy); margin-bottom:2px; font-weight:600; }
dialog#zoom { border:0; border-radius:16px; padding:0; max-width:min(1200px,96vw); background:#fff; }
dialog#zoom::backdrop { background:rgba(7,20,39,.85); }
dialog#zoom img { display:block; max-width:100%; max-height:84vh; margin:0 auto; }
dialog#zoom p { margin:0; padding:12px 18px; color:var(--text); }
dialog#zoom button { position:absolute; right:10px; top:10px; border:0; background:var(--navy); color:#fff; border-radius:50%; width:40px; height:40px; font-size:1.4rem; cursor:pointer; }

/* comparison */
.table-scroll { overflow-x:auto; border-radius:18px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); }
table.compare { width:100%; border-collapse:collapse; min-width:640px; }
table.compare th, table.compare td { padding:15px 20px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; font-size:.93rem; }
table.compare thead th { background:var(--navy); color:#fff; font-weight:600; }
table.compare thead th.us { background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--navy); }
table.compare tbody th { font-weight:600; color:var(--navy); width:30%; }
table.compare td.us { background:#fffaf0; }
table.compare tr:last-child th, table.compare tr:last-child td { border-bottom:0; }
.yes { color:#1a7f45; font-weight:700; }

/* pricing */
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.plan { background:#fff; border:1px solid var(--line); border-radius:22px; padding:34px 28px; display:flex; flex-direction:column; box-shadow:var(--shadow); position:relative; transition:transform .2s, box-shadow .2s; }
.plan:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(11,31,58,.14); }
.plan.pop { border:2px solid var(--gold); box-shadow:0 0 0 6px rgba(200,150,62,.12), var(--shadow-lg); transform:translateY(-10px); }
.plan.pop:hover { transform:translateY(-16px); }
.plan .badge { position:absolute; top:-15px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--navy); font-size:.78rem; font-weight:700; padding:5px 18px; border-radius:99px; white-space:nowrap; box-shadow:0 6px 16px rgba(200,150,62,.4); }
.plan h3 { margin:0; font-size:1.3rem; }
.plan .tagline { color:var(--muted); font-size:.9rem; margin:4px 0 16px; }
.plan .price { font-size:2.5rem; font-weight:700; color:var(--navy); line-height:1.1; }
.plan .price small { font-size:.9rem; color:var(--muted); font-weight:500; }
.plan .yearly { color:var(--muted); font-size:.86rem; margin-bottom:14px; min-height:1.4em; }
.plan ul { list-style:none; margin:10px 0 22px; padding:0; flex:1; }
.plan li { padding:6px 0 6px 28px; position:relative; font-size:.9rem; }
.plan li::before { content:""; position:absolute; left:4px; top:13px; width:12px; height:7px; border-left:2.5px solid #1a7f45; border-bottom:2.5px solid #1a7f45; transform:rotate(-45deg); }
.plan .soon { text-align:center; color:var(--muted); font-weight:600; border:1.5px dashed #c9d1e0; border-radius:12px; padding:11px; }
.plan.pop .soon { border-color:var(--gold); color:var(--gold-dark); background:#fffaf0; }
.note-center { text-align:center; color:var(--muted); margin-top:26px; }

/* customer reviews */
.reviews-empty { max-width:720px; margin:0 auto 40px; text-align:center; background:#fff; border:1px dashed #c9d1e0; border-radius:20px; padding:38px 28px; box-shadow:var(--shadow); }
.reviews-empty .big-stars { color:var(--gold); font-size:1.8rem; letter-spacing:6px; margin-bottom:10px; }
.reviews-empty h3 { margin:0 0 6px; font-size:1.3rem; }
.reviews-empty p { margin:0 0 18px; color:var(--muted); }
.carousel { position:relative; margin-bottom:44px; }
.track { display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:8px 4px 22px; scrollbar-width:thin; }
.track > .review { flex:0 0 min(380px,86%); scroll-snap-align:start; }
.review { background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:var(--shadow); }
.review .stars { color:var(--gold); letter-spacing:3px; font-size:1.15rem; margin-bottom:10px; }
.review blockquote { margin:0 0 16px; color:var(--text); font-size:.97rem; }
.review .who strong { display:block; color:var(--navy); font-weight:600; }
.review .who span { color:var(--muted); font-size:.86rem; }
.car-btn { position:absolute; top:42%; width:44px; height:44px; border-radius:50%; border:0; background:var(--navy); color:#fff; font-size:1.3rem; cursor:pointer; box-shadow:0 8px 20px rgba(11,31,58,.3); z-index:2; }
.car-btn:hover { background:var(--gold); color:var(--navy); }
.car-btn.prev { left:-12px; } .car-btn.next { right:-12px; }
.review-form-box { max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:22px; padding:36px; box-shadow:var(--shadow-lg); }
.review-form-box h3 { text-align:center; margin:0 0 4px; font-size:1.4rem; }
.review-form-box > p { text-align:center; color:var(--muted); margin:0 0 20px; }
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.fgrid .full { grid-column:1 / -1; }
.rate { display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; margin:6px 0 4px; }
form.cform .rate input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
form.cform .rate label { display:inline-block; font-size:2.2rem; line-height:1; color:#d3d9e6; cursor:pointer; transition:color .15s, transform .15s; margin:0; font-weight:400; }
form.cform .rate label:hover, form.cform .rate label:hover ~ label, form.cform .rate input:checked ~ label { color:var(--gold); }
form.cform .rate label:hover { transform:scale(1.15); }
form.cform .rate input:focus-visible + label { outline:3px solid rgba(200,150,62,.5); border-radius:6px; }
.thanks { display:none; background:#effaf3; border:1px solid #bfe6cd; color:#1a6a3b; border-radius:14px; padding:18px 22px; margin-top:18px; text-align:center; font-weight:500; }
.thanks:target, .thanks.show { display:block; }
.hp { position:absolute; left:-9999px; }

/* FAQ */
.faq { max-width:840px; margin:0 auto; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:14px; box-shadow:0 4px 14px rgba(11,31,58,.04); transition:box-shadow .2s; }
.faq details[open] { box-shadow:var(--shadow); border-color:#e5d3ad; }
.faq summary { cursor:pointer; padding:18px 56px 18px 22px; font-weight:600; color:var(--navy); list-style:none; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-size:1.6rem; color:var(--gold-dark); }
.faq details[open] summary::after { content:"\2212"; }
.faq .ans { padding:0 22px 20px; color:var(--text); }
.faq .ans p, .faq .ans ol, .faq .ans ul { margin:8px 0; }
.faq .ans ol, .faq .ans ul { padding-left:22px; }

/* call to action */
.cta-wrap { padding:96px 0 96px; }
.band { background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-dark)); color:var(--navy); border-radius:28px; padding:64px 32px; text-align:center; box-shadow:0 24px 60px rgba(200,150,62,.35); position:relative; overflow:hidden; }
.band::before { content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.18); }
.band::after { content:""; position:absolute; left:-60px; bottom:-90px; width:240px; height:240px; border-radius:50%; background:rgba(11,31,58,.08); }
.band > * { position:relative; z-index:1; }
body.site .band h2 { color:var(--navy); font-size:2.3rem; margin-bottom:10px; }
.band p { margin:0 auto 26px; max-width:560px; font-size:1.05rem; color:#2a2410; }
body.site .band a:not(.btn) { color:var(--navy); font-weight:600; }
body.site .btn-dark { background:var(--navy); color:#fff; box-shadow:0 10px 26px rgba(11,31,58,.4); }
body.site .btn-dark:hover { box-shadow:0 0 0 4px rgba(11,31,58,.18), 0 16px 36px rgba(11,31,58,.55); color:#fff; }

/* inner pages */
body.site header.hero.page { padding:64px 0 66px; text-align:center; min-height:0; margin-top:0; display:block; }
body.site header.hero.page .wrap { display:block; position:relative; }
body.site header.hero.page h1 { font-size:2.4rem; margin-bottom:10px; }
body.site header.hero.page p { max-width:680px; margin:0 auto; opacity:.92; font-size:1.05rem; font-weight:300; }
.crumbs { font-size:.85rem; opacity:.85; margin-bottom:12px; }
body.site .crumbs a { color:#fff; }
body.site main > section:first-child { padding-top:56px; }
.prose { background:#fff; border:1px solid var(--line); border-radius:20px; padding:40px 44px; box-shadow:var(--shadow); max-width:880px; margin:0 auto; }
.prose h2 { font-size:1.3rem !important; text-align:left !important; margin:30px 0 8px !important; }
.prose h2:first-child { margin-top:0 !important; }
.prose h3 { font-size:1.05rem; margin:20px 0 6px; }
.prose p, .prose li { color:var(--text); }
.prose ul, .prose ol { padding-left:24px; margin:8px 0 12px; }
.prose li { margin:4px 0; }
.updated { color:var(--muted); font-size:.88rem; margin:0 0 16px; }
.callout { background:#fffaf0; border-left:4px solid var(--gold); padding:14px 18px; border-radius:8px; margin:16px 0; }
.toc { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:30px; }
.toc a { background:#fff; border:1px solid var(--line); border-radius:99px; padding:9px 20px; text-decoration:none; font-weight:500; color:var(--navy2); transition:border-color .2s, transform .2s; }
.toc a:hover { border-color:var(--gold); transform:translateY(-2px); }
article.guide { margin-bottom:28px; scroll-margin-top:90px; }
article.guide h2 { margin-top:0 !important; }
table.simple { width:100%; border-collapse:collapse; margin:12px 0; }
table.simple th, table.simple td { border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; font-size:.92rem; }
table.simple th { background:#f1f4fa; color:var(--navy); }
.cgrid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
dl.facts { margin:0; }
dl.facts dt { font-weight:600; color:var(--navy); margin-top:16px; font-size:.82rem; text-transform:uppercase; letter-spacing:.07em; }
dl.facts dt:first-child { margin-top:0; }
dl.facts dd { margin:2px 0 0; word-break:break-word; }
form.cform label { display:block; font-weight:500; color:var(--navy); margin:16px 0 5px; font-size:.92rem; }
form.cform input, form.cform textarea, form.cform select { width:100%; font:inherit; padding:12px 14px; border:1px solid #c9d1e0; border-radius:10px; background:#fff; color:var(--text); }
form.cform textarea { min-height:140px; resize:vertical; }
form.cform input:focus, form.cform textarea:focus { outline:3px solid rgba(200,150,62,.35); border-color:var(--gold); }
.note { color:var(--muted); font-size:.86rem; margin-top:10px; }
.dl-box { text-align:center; padding:48px 24px; }
.dl-box .meta { color:var(--muted); margin-top:16px; }
.dl-box .meta strong { color:var(--navy); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
ol.big { counter-reset:b; list-style:none; padding:0; margin:0; }
ol.big li { counter-increment:b; position:relative; padding:0 0 20px 56px; }
ol.big li::before { content:counter(b); position:absolute; left:0; top:0; width:38px; height:38px; border-radius:50%; background:var(--navy2); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; border:3px solid var(--gold); }
ol.big li strong { color:var(--navy); }

@media (max-width:1000px) {
  .menu-toggle { display:block; }
  nav.menu .links { display:none; position:absolute; left:0; right:0; top:100%; background:var(--navy); flex-direction:column; align-items:stretch; gap:0; padding:8px 22px 18px; max-height:82vh; overflow:auto; box-shadow:0 20px 40px rgba(0,0,0,.35); }
  nav.menu.open .links { display:flex; }
  nav.menu.open { background:var(--navy); }
  nav.menu .links a, nav.menu summary { padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.1); display:block; font-size:1rem; }
  nav.menu details .drop { position:static; box-shadow:none; background:none; border:0; padding:0 0 0 14px; }
  nav.menu details .drop a { padding:13px 4px; }
  nav.menu .links a.dl { margin-top:14px; text-align:center; border:0; }
  footer.site-footer .cols { grid-template-columns:1fr 1fr; }
  .plans { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .plan.pop { transform:none; }
  .stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  body.site header.hero.hero-home { padding:112px 0 64px; min-height:auto; }
  body.site header.hero.hero-home .wrap { grid-template-columns:1fr; gap:44px; text-align:center; }
  body.site header.hero p.lead { margin-left:auto; margin-right:auto; }
  body.site header.hero .cta { justify-content:center; }
  body.site header.hero h1 { font-size:2.5rem; }
  .show-row, .cgrid, .two, .steps { grid-template-columns:1fr; gap:32px; }
  .show-row.flip .show-text { order:0; }
  .showcase { gap:64px; }
}
@media (max-width:640px) {
  body.site .wrap, nav.menu .wrap, footer.site-footer .wrap { padding-left:18px; padding-right:18px; }
  nav.menu .brand { font-size:.9rem; }
  body.site header.hero h1 { font-size:2rem; }
  body.site header.hero p.lead { font-size:1rem; }
  body.site header.hero.page h1 { font-size:1.7rem; }
  body.site section { padding-top:68px; }
  body.site section h2 { font-size:1.65rem; }
  .show-text h3 { font-size:1.5rem; }
  .prose { padding:24px 20px; }
  .fgrid { grid-template-columns:1fr; }
  .review-form-box { padding:24px 18px; }
  .stat .num { font-size:2.3rem; } .stat { padding:26px 12px; }
  .trust ul { justify-content:flex-start; gap:10px 22px; }
  footer.site-footer .cols { grid-template-columns:1fr; }
  body.site .btn-big { font-size:1rem; padding:15px 28px; }
  body.site header.hero .cta .btn { width:100%; }
  .car-btn { display:none; }
  .band { padding:48px 20px; } body.site .band h2 { font-size:1.7rem; }
  .wa-float { right:14px; bottom:14px; width:56px; height:56px; }
}
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  .js .reveal { opacity:1; transform:none; }
}

/* Multi-PC: "Premium · Coming soon" badges */
.card.card-premium { position:relative; border-color:rgba(200,150,62,.55); background:linear-gradient(180deg,#fffdf7,#fff); }
.card .pbadge, .plan .soon-tag { display:inline-block; background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--navy); font-weight:700; font-size:.72rem; letter-spacing:.04em; padding:4px 11px; border-radius:99px; box-shadow:0 3px 10px rgba(200,150,62,.35); white-space:nowrap; }
.card .pbadge { position:absolute; top:22px; right:22px; }
.plan .soon-tag { margin-left:6px; padding:2px 9px; font-size:.68rem; vertical-align:middle; }
@media (max-width:520px) { .card .pbadge { position:static; margin:-6px 0 12px; } }

/* ---------- Plans: add-on, comparison table, previous versions ---------- */
.addon { display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:30px auto 0; max-width:980px; background:#fffaf0; border:1.5px dashed var(--gold); border-radius:18px; padding:22px 26px; }
.addon h3 { margin:0 0 4px; font-size:1.1rem; }
.addon p { margin:0; color:var(--muted); font-size:.94rem; }
.addon .soon { text-align:center; color:var(--gold-dark); font-weight:600; border:1.5px dashed var(--gold); border-radius:12px; padding:11px 24px; white-space:nowrap; background:#fff; }
table.plan-compare th, table.plan-compare td { text-align:center; }
table.plan-compare tbody th { text-align:left; width:44%; }
table.versions td { vertical-align:top; }
table.versions .vnotes p { margin:8px 0 0; }
table.versions details summary { cursor:pointer; color:var(--navy3); font-size:.85rem; margin-top:4px; }
body.site .btn-small { padding:8px 16px; font-size:.86rem; border-radius:9px; }

/* ---------- Subtle 3D look: laptop tilt, card tilt and glow, particles, rising sections (see fx3d.js) ---------- */
.hero-fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.scene { perspective:1100px; perspective-origin:50% 35%; }
.laptop { transform-style:preserve-3d; }
.laptop.tilt { animation:none; transform:rotateX(var(--rx,4deg)) rotateY(var(--ry,-8deg)); will-change:transform; }
.laptop .lid { box-shadow:0 1px 0 #3a4a68, 0 2px 0 #1d2840, 0 3px 0 #141d30, 0 8px 18px rgba(0,0,0,.35); }
.laptop .screen { position:relative; }
.laptop .screen::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%); pointer-events:none; }
.grid .card, .plan { position:relative; }
.grid .card::after, .plan::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(231,184,102,.22),transparent 65%); }
.grid .card.tilting::after, .plan.tilting::after { opacity:1; }
.js .reveal.tilting { transition:transform .08s linear, box-shadow .25s, opacity .7s; }
.js .reveal { transform:perspective(900px) translate3d(0,34px,-70px) rotateX(9deg); transform-origin:50% 100%; }
.js .reveal.left { transform:perspective(900px) translate3d(-36px,0,-50px) rotateY(8deg); transform-origin:100% 50%; }
.js .reveal.right { transform:perspective(900px) translate3d(36px,0,-50px) rotateY(-8deg); transform-origin:0 50%; }
.js .reveal.in { transform:none; }
@media (prefers-reduced-motion:reduce) {
  .hero-fx { display:none; }
  .laptop.tilt { transform:none !important; }
  .js .reveal, .js .reveal.left, .js .reveal.right { opacity:1; transform:none; }
}
.plan .price.tbd { font-size:1.6rem; padding:.55rem 0 .35rem; }

/* ---------- Pricing (v9): toggle, three plan cards, comparison table, add-on (plans.html and the home page) ---------- */
.pricing { max-width:1120px; margin:0 auto; }
.ptoggle { position:relative; display:grid; grid-template-columns:1fr 1fr; width:min(100%,380px); margin:6px auto 44px; background:#e6ebf5; border-radius:99px; padding:5px; box-shadow:inset 0 1px 3px rgba(11,31,58,.12); }
.ptoggle .thumb { position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:99px; background:linear-gradient(135deg,var(--gold-light),var(--gold)); box-shadow:0 4px 12px rgba(200,150,62,.45); transition:transform .35s cubic-bezier(.4,.1,.2,1); }
.pricing[data-period="yearly"] .ptoggle .thumb { transform:translateX(100%); }
.ptoggle button { position:relative; z-index:1; border:0; background:none; font:inherit; font-weight:600; color:var(--navy2); padding:11px 12px; border-radius:99px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; transition:color .25s; }
.ptoggle button.on { color:var(--navy); }
.ptoggle button:focus-visible { outline:3px solid rgba(11,31,58,.5); outline-offset:2px; }
.ptoggle .chip { background:var(--navy); color:var(--gold-light); font-size:.68rem; font-weight:700; letter-spacing:.02em; padding:2px 8px; border-radius:99px; white-space:nowrap; }
.pricing[data-period="monthly"] .y, .pricing[data-period="yearly"] .m { display:none; }

.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; padding-top:16px; }
.pcol { display:flex; }
.pcard { position:relative; flex:1; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:22px; padding:36px 28px 28px; box-shadow:var(--shadow); transition:transform .28s ease, box-shadow .28s ease; }
.pcard h3 { margin:0; font-size:1.35rem; }
.pcard .ptag { margin:4px 0 18px; color:var(--muted); font-size:.92rem; min-height:2.6em; }
.pprice { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; min-height:3.2rem; }
.pprice .m, .pprice .y { display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.pamt { font-size:2.7rem; font-weight:700; color:var(--navy); line-height:1.1; letter-spacing:-.02em; }
.pamt.tbd { font-size:1.55rem; line-height:1.4; }
.pper { color:var(--muted); font-size:.95rem; font-weight:500; }
.psave { min-height:1.5em; margin:2px 0 16px; color:var(--gold-dark); font-size:.86rem; font-weight:600; }
.plimits { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 20px; }
.plimits div { background:#f3f6fc; border-radius:12px; padding:10px 6px; text-align:center; }
.plimits b { display:block; font-size:1.35rem; color:var(--navy); line-height:1.2; }
.plimits span { color:var(--muted); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }
.pfeat { list-style:none; margin:0 0 26px; padding:18px 0 0; border-top:1px solid var(--line); flex:1; }
.pfeat li { display:flex; gap:11px; align-items:flex-start; padding:7px 0; font-size:.93rem; line-height:1.45; }
.ck { flex:none; width:20px; height:20px; border-radius:50%; background:#e1f4e8; color:#1a7f45; font-size:.74rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; line-height:1; margin-top:1px; }
.nk { color:#b4bdce; font-weight:700; }
.pbtn { display:block; text-align:center; width:100%; }
.pbtn.soon { color:var(--muted); font-weight:600; border:1.5px dashed #c9d1e0; border-radius:12px; padding:12px; background:transparent; }
body.site .btn.pbtn { padding:13px 20px; }
.pflag { position:absolute; top:-15px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--navy); font-size:.78rem; font-weight:700; padding:5px 18px; border-radius:99px; white-space:nowrap; box-shadow:0 6px 16px rgba(200,150,62,.4); }
.pcard.pop { border:2px solid var(--gold); box-shadow:0 0 0 6px rgba(200,150,62,.12), var(--shadow-lg); transform:translateY(-12px); }
.pcard.pop .pbtn.soon { border-color:var(--gold); color:var(--gold-dark); background:#fffaf0; }
.pcard.dark { background:linear-gradient(165deg,#0b1f3a 0%,#16386b 100%); border-color:#1f4585; color:#dfe8f7; box-shadow:0 20px 50px rgba(11,31,58,.35); }
.pcard.dark h3, .pcard.dark .pamt, .pcard.dark .plimits b { color:#fff; }
.pcard.dark .pamt { color:var(--gold-light); }
.pcard.dark .ptag, .pcard.dark .pper, .pcard.dark .plimits span { color:rgba(223,232,247,.72); }
.pcard.dark .plimits div { background:rgba(255,255,255,.08); }
.pcard.dark .pfeat { border-top-color:rgba(255,255,255,.14); }
.pcard.dark .ck { background:rgba(231,184,102,.2); color:var(--gold-light); }
.pcard.dark .psave { color:var(--gold-light); }
.pcard.dark .pbtn.soon { border-color:var(--gold); color:var(--gold-light); }
@media (hover:hover) {
  .pcard:hover { transform:translateY(-8px); box-shadow:0 22px 50px rgba(11,31,58,.18); }
  .pcard.pop:hover { transform:translateY(-20px); box-shadow:0 0 0 6px rgba(200,150,62,.16), 0 28px 60px rgba(11,31,58,.22); }
}

.ptitle { text-align:center; margin:72px 0 28px; }
.cmp { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.cmp-scroll { outline:none; }
.cmp-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.94rem; }
.cmp-table thead th { position:sticky; top:68px; z-index:3; background:var(--navy); color:#fff; padding:16px 12px; font-weight:600; text-align:center; width:20%; }
.cmp-table thead th:first-child { width:40%; border-radius:18px 0 0 0; }
.cmp-table thead th:last-child { border-radius:0 18px 0 0; background:#16386b; color:var(--gold-light); }
.cmp-table thead th.pop { background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--navy); }
.cmp-table thead th small { display:block; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.cmp-table tbody th, .cmp-table tbody td { padding:13px 14px; border-bottom:1px solid #edf0f7; background:#fff; text-align:center; }
.cmp-table tbody th[scope="row"] { text-align:left; font-weight:500; color:var(--text); padding-left:20px; }
.cmp-table tbody tr:nth-child(even) th, .cmp-table tbody tr:nth-child(even) td { background:#f7f9fd; }
.cmp-table tbody td:nth-child(3) { background-image:linear-gradient(rgba(200,150,62,.07),rgba(200,150,62,.07)); }
.cmp-table td.txt { font-weight:600; color:var(--navy); }
.cmp-table tr.grp th { background:linear-gradient(90deg,#fdf3df,#fff9ec); color:var(--gold-dark); text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; font-weight:700; text-align:left; padding:12px 20px; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom:0; }
.paddon { display:flex; align-items:center; gap:20px; margin:40px auto 0; max-width:900px; border:1.5px dashed var(--gold); background:#fffaf0; border-radius:18px; padding:22px 26px; }
.paddon .aico { flex:none; width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg,#fdf3df,#f8e3b8); color:var(--gold-dark); display:flex; align-items:center; justify-content:center; }
.paddon .atext { flex:1; }
.paddon h3 { margin:0 0 4px; font-size:1.12rem; }
.paddon p { margin:0 0 4px; color:var(--muted); font-size:.94rem; }
.paddon .aprice { color:var(--gold-dark); font-weight:700; }
.paddon .pbtn.soon { width:auto; flex:none; padding:11px 24px; background:#fff; border-color:var(--gold); color:var(--gold-dark); white-space:nowrap; }
@media (max-width:900px) {
  .pgrid { grid-template-columns:1fr; max-width:460px; margin:0 auto; gap:30px; }
  .pcard.pop { transform:none; }
  .pcard .ptag { min-height:0; }
}
@media (max-width:760px) {
  .cmp-scroll { overflow:auto; max-height:78vh; -webkit-overflow-scrolling:touch; border-radius:18px; }
  .cmp-table { min-width:620px; }
  .cmp-table thead th { top:0; padding:13px 8px; }
  .cmp-table thead th:first-child, .cmp-table tbody th[scope="row"] { position:sticky; left:0; z-index:2; }
  .cmp-table thead th:first-child { z-index:5; }
  .cmp-table tbody th[scope="row"] { box-shadow:2px 0 0 #edf0f7; min-width:150px; }
  .cmp-table tr.grp th { position:sticky; left:0; }
}
@media (max-width:640px) {
  .paddon { flex-direction:column; align-items:flex-start; padding:20px; }
  .paddon .pbtn.soon { width:100%; }
  .ptitle { margin-top:56px; }
  .pamt { font-size:2.3rem; }
}
body.site .pricing .ptitle { margin:84px 0 30px; }
body.site .pricing .pgrid + .ptitle { margin-top:96px; }

/* =====================================================================================================================
   v10: premium motion and 3D look. html[data-fx] is "3d" (WebGL), "rich" (GSAP, no WebGL) or "lite" (phones, reduced
   motion, data saver: images and plain CSS only). See fx/boot.js, fx/motion.js and fx/scene3d.js.
   ===================================================================================================================== */

/* ---------- logo intro and gold progress bar ---------- */
#loader { position:fixed; inset:0; z-index:9999; background:radial-gradient(800px 500px at 50% 40%,#16386b,#0b1f3a 70%); display:flex; align-items:center; justify-content:center; transition:opacity .7s ease, visibility .7s; animation:ld-fail 0s 3s forwards; }
#loader.done { opacity:0; visibility:hidden; }
#loader .ld-in { text-align:center; animation:ld-in .8s cubic-bezier(.2,.8,.2,1) both; }
#loader img { display:block; margin:0 auto; border-radius:18px; filter:drop-shadow(0 0 22px rgba(231,184,102,.55)); animation:ld-glow 1.6s ease-in-out infinite; }
#loader .ld-name { margin:16px 0 18px; color:var(--gold-light); font-size:.8rem; font-weight:600; letter-spacing:.32em; }
#loader .ld-bar { width:170px; height:3px; margin:0 auto; border-radius:3px; background:rgba(255,255,255,.15); overflow:hidden; }
#loader .ld-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-light)); transform:translateX(-100%); animation:ld-bar 1.1s ease forwards; }
.no-intro #loader { display:none; }
@keyframes ld-in { from { opacity:0; transform:translateY(14px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes ld-glow { 50% { filter:drop-shadow(0 0 34px rgba(231,184,102,.85)); } }
@keyframes ld-bar { to { transform:none; } }
@keyframes ld-fail { to { opacity:0; visibility:hidden; } }
#progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:9998; pointer-events:none; }
#progress i { display:block; height:100%; transform-origin:0 50%; transform:scaleX(var(--p,0)); background:linear-gradient(90deg,var(--gold-dark),var(--gold-light)); box-shadow:0 0 12px rgba(231,184,102,.8); }

/* ---------- glass sticky menu ---------- */
nav.menu, nav.menu.scrolled { background:rgba(11,31,58,.58); backdrop-filter:saturate(170%) blur(18px); -webkit-backdrop-filter:saturate(170%) blur(18px); border-bottom:1px solid rgba(255,255,255,.09); }
nav.menu.top { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }
nav.menu.scrolled { box-shadow:0 8px 30px rgba(0,0,0,.28); }
@media (max-width:1000px) { nav.menu.open { background:rgba(11,31,58,.96); } }

/* ---------- hero: letter-by-letter headline, 3D hooks ---------- */
h1[data-split].split-ready .w { display:inline-block; white-space:nowrap; }
h1[data-split].split-ready .ch { display:inline-block; opacity:0; transform:translateY(.55em) rotateX(-70deg); transform-origin:50% 100%; }
.intro-done h1[data-split].split-ready .ch { animation:ch-in .75s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--i) * 26ms); }
h1[data-split].split-ready .ch.gold { background:linear-gradient(135deg,var(--gold-light),var(--gold) 60%,var(--gold-dark)); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes ch-in { to { opacity:1; transform:none; } }
body.home header.hero .wrap, body.home main .wrap { position:relative; z-index:2; }
#fx3d { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:1; pointer-events:none; }
html.gl-ready .scene .laptop, html.gl-ready .story .css-laptop { visibility:hidden; }
html.gl-ready .globe-svg { opacity:0; }
body.home header.hero.hero-home { isolation:auto; }

/* ---------- features: frosted glass on a deep navy stage ---------- */
#features { position:relative; background:radial-gradient(900px 520px at 12% 0%,rgba(29,74,140,.6),transparent 62%), radial-gradient(760px 520px at 92% 100%,rgba(200,150,62,.22),transparent 60%), linear-gradient(180deg,#0b1f3a,#0f2a52); color:#dfe8f7; }
#features h2, #features .eyebrow + h2 { color:#fff; }
#features .sub { color:rgba(223,232,247,.8); }
#features .card { position:relative; background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); box-shadow:0 22px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.2); color:#e5edfb; transform-style:preserve-3d; }
#features .card.card-premium { background:linear-gradient(135deg,rgba(231,184,102,.2),rgba(255,255,255,.05)); border-color:rgba(231,184,102,.5); }
#features .card h3 { color:#fff; }
#features .card p { color:rgba(223,232,247,.78); }
#features .card::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.26) 46%,transparent 62%) var(--sx,-40%) 0 / 260% 100% no-repeat; }
#features .card.tilting::before { opacity:1; }
#features .card .icon { background:linear-gradient(135deg,rgba(231,184,102,.28),rgba(231,184,102,.08)); color:var(--gold-light); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; transform:translateZ(0); }
@media (hover:hover) {
  #features .card:hover .icon { transform:translateZ(54px) scale(1.14) rotate(-7deg); box-shadow:0 22px 30px rgba(0,0,0,.4), 0 0 26px rgba(231,184,102,.5); }
  #features .grid .card:hover { box-shadow:0 28px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(231,184,102,.35), inset 0 1px 0 rgba(255,255,255,.25); }
}
#features .card .pbadge { color:var(--navy); }

/* ---------- scroll story ---------- */
.story { position:relative; background:radial-gradient(900px 600px at 80% 20%,rgba(29,74,140,.55),transparent 62%), linear-gradient(180deg,#0f2a52,#0a1d38); color:#dfe8f7; padding:0; }
.story-stage { min-height:100vh; display:flex; align-items:center; padding:90px 0; box-sizing:border-box; }
.story-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; width:100%; }
.story .eyebrow { text-align:left; }
.story h2 { color:#fff; font-size:2.3rem; margin:0 0 6px; text-align:left; }
.story-steps { list-style:none; margin:30px 0 0; padding:0; }
.story-steps li { border-left:2px solid rgba(255,255,255,.16); padding:8px 0 8px 22px; margin:0 0 12px; opacity:.45; transition:opacity .45s, border-color .45s, transform .45s; }
.story-steps li b { display:block; color:#fff; font-size:1.12rem; font-weight:600; }
.story-steps li span { display:block; max-height:0; overflow:hidden; font-size:.94rem; color:rgba(223,232,247,.82); transition:max-height .6s ease; }
.story-steps li.on { opacity:1; border-color:var(--gold); transform:translateX(8px); }
.story-steps li.on span { max-height:9em; margin-top:4px; }
.story-visual { position:relative; perspective:1300px; }
.story .css-laptop { max-width:700px; margin:0 auto; animation:none; transform-style:preserve-3d; }
.story .css-laptop .screen { position:relative; aspect-ratio:16/10; background:#12305c; }
.story .css-laptop .slide { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .7s ease; object-fit:cover; object-position:top; background:#f4f7fd; }
.story .css-laptop .slide[data-kind="portrait"] { object-fit:contain; background:linear-gradient(135deg,#12305c,#1d4a8c); padding:2.2% 0; box-sizing:border-box; }
.story .css-laptop .slide.on { opacity:1; }
.story-cards { display:none; }
.story-card { position:relative; background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:18px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.story-card img { display:block; width:100%; height:200px; object-fit:cover; object-position:top; border-radius:12px; background:#f4f7fd; }
.story-card h3 { color:#fff; margin:14px 0 6px; font-size:1.1rem; }
.story-card p { color:rgba(223,232,247,.8); margin:0; font-size:.93rem; }
html[data-fx="lite"] .story-stage { min-height:0; padding:72px 0 28px; }
html[data-fx="lite"] .story-grid { grid-template-columns:1fr; }
html[data-fx="lite"] .story-visual, html[data-fx="lite"] .story-steps { display:none; }
html[data-fx="lite"] .story-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; padding-bottom:72px; }

/* ---------- globe / export section ---------- */
.globe-sec { position:relative; background:radial-gradient(800px 560px at 75% 50%,rgba(29,74,140,.5),transparent 62%), #081a33; color:#dfe8f7; padding:96px 0; overflow:hidden; }
.globe-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.globe-sec h2 { color:#fff; text-align:left; font-size:2.2rem; }
.globe-sec .eyebrow { text-align:left; }
.globe-sec .sub { text-align:left; color:rgba(223,232,247,.82); margin:12px 0 18px; max-width:520px; }
.globe-copy ul { list-style:none; padding:0; margin:0 0 26px; }
.globe-copy li { position:relative; padding:7px 0 7px 30px; color:#e5edfb; }
.globe-copy li::before { content:""; position:absolute; left:4px; top:15px; width:12px; height:7px; border-left:3px solid var(--gold); border-bottom:3px solid var(--gold); transform:rotate(-45deg); }
.globe-visual { aspect-ratio:1; width:100%; max-width:560px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.globe-svg { width:100%; height:auto; filter:drop-shadow(0 0 40px rgba(80,140,255,.35)); transition:opacity .6s; }
.globe-svg .routes path { stroke-dasharray:6 9; animation:route-dash 3s linear infinite; }
.globe-svg .pulse { transform-origin:250px 235px; animation:globe-ping 2s ease-out infinite; }
@keyframes route-dash { to { stroke-dashoffset:-60; } }
@keyframes globe-ping { 0% { transform:scale(1); opacity:.9; } 100% { transform:scale(3.4); opacity:0; } }

/* ---------- pricing: 3D lifted cards, the Most Popular card glows gold ---------- */
.pcard { transform:perspective(1000px) translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d; }
.pcard.pop { --lift:-12px; transform:perspective(1000px) translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); animation:gold-glow 3.4s ease-in-out infinite; }
.pcard.tilting { transition:transform .08s linear, box-shadow .3s; }
@media (hover:hover) {
  .pcard:hover { --lift:-9px; transform:perspective(1000px) translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
  .pcard.pop:hover { --lift:-22px; transform:perspective(1000px) translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
}
@keyframes gold-glow { 0%,100% { box-shadow:0 0 0 6px rgba(200,150,62,.12), 0 16px 44px rgba(200,150,62,.28); } 50% { box-shadow:0 0 0 11px rgba(200,150,62,.22), 0 24px 70px rgba(231,184,102,.6); } }
.pcard::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 46%,transparent 62%) var(--sx,-40%) 0 / 260% 100% no-repeat; }
.pcard.tilting::after { opacity:1; }
@media (max-width:900px) { .pcard.pop { --lift:0px; } }

/* ---------- footer: dark navy, animated stars, flowing gold line ---------- */
footer.site-footer { background:radial-gradient(900px 400px at 50% 0%,#12305c,#0b1f3a 65%) , var(--navy); }
footer.site-footer .foot-stars { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
footer.site-footer .wrap { position:relative; z-index:2; }
footer.site-footer::before { height:3px; background:linear-gradient(90deg,transparent,var(--gold-dark),var(--gold-light),var(--gold),transparent); background-size:200% 100%; animation:gold-line 7s linear infinite; z-index:3; }
@keyframes gold-line { to { background-position:-200% 0; } }

/* ---------- buttons: ripple and magnetic pull ---------- */
body.site .btn, nav.menu a.dl, .pbtn { position:relative; overflow:hidden; }
.rip { position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); animation:rip .65s ease-out forwards; pointer-events:none; }
.btn-gold .rip, nav.menu a.dl .rip { background:rgba(11,31,58,.25); }
@keyframes rip { to { transform:scale(1); opacity:0; } }
.magnetic { transition:translate .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, transform .25s; }

/* ---------- stacking: the 3D canvas sits behind the page text and cards ---------- */
body.home main { position:relative; }

/* ---------- light version and reduced motion ---------- */
@media (max-width:1000px) { .story-grid, .globe-grid { grid-template-columns:1fr; } .globe-sec { padding:72px 0; } .globe-visual { max-width:420px; } .story h2, .globe-sec h2 { font-size:1.8rem; } }
@media (prefers-reduced-motion:reduce) {
  #loader { display:none; }
  h1[data-split].split-ready .ch { opacity:1; transform:none; animation:none; }
  .pcard.pop, .globe-svg .routes path, .globe-svg .pulse, footer.site-footer::before { animation:none; }
  .rip { display:none; }
  .story .css-laptop .slide { transition:none; }
}

body.site header.hero h1[data-split] span { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:inherit; -webkit-text-fill-color:currentColor; }
body.site header.hero h1[data-split] span.ch.gold { background:linear-gradient(135deg,var(--gold-light),var(--gold) 60%,var(--gold-dark)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

body.site .story h2, body.site .globe-sec h2, body.site #features h2 { color:#fff; }
body.site .story .eyebrow, body.site .globe-sec .eyebrow { color:var(--gold-light); }
body.site .story-card h3 { color:#fff; }
body.site .story-card img { height:210px; width:100%; object-fit:cover; object-position:top; }
body.site .story h2, body.site .story .eyebrow, body.site .globe-sec h2, body.site .globe-sec .eyebrow, body.site .globe-sec .sub { text-align:left; }
@media (max-width:1000px) { body.site .story h2, body.site .story .eyebrow, body.site .globe-sec h2, body.site .globe-sec .eyebrow, body.site .globe-sec .sub { text-align:center; } .globe-copy ul { display:inline-block; text-align:left; } .globe-copy { text-align:center; } .story-copy { text-align:center; } }
nav.menu { background:rgba(11,31,58,.94); }
nav.menu.scrolled { background:rgba(11,31,58,.62); }
nav.menu.top { background:transparent; }
@media (max-width:1000px) { nav.menu.open { background:rgba(11,31,58,.97); } }