:root {
  --bg: #08080a;
  --bg-soft: #0d0d11;
  --surface: rgba(255,255,255,.055);
  --surface-strong: rgba(255,255,255,.085);
  --line: rgba(255,255,255,.105);
  --line-hot: rgba(255,112,55,.32);
  --text: #f8f6f5;
  --muted: #aaa4a2;
  --muted-2: #777174;
  --hot: #ff6232;
  --hot-2: #ff9b4c;
  --gold: #ffd29a;
  --danger: #ff4c35;
  --ok: #72dfaa;
  --radius: 22px;
  --radius-lg: 32px;
  --max: 1180px;
  --nav-h: 72px;
  --shadow: 0 24px 80px rgba(0,0,0,.32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 84% -5%, rgba(255, 79, 34, .13), transparent 62%),
    radial-gradient(760px 620px at -10% 38%, rgba(255, 149, 79, .06), transparent 60%),
    var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img, svg { max-width: 100%; display: block; }
::selection { background: rgba(255,98,50,.32); color: #fff; }

.skip-link {
  position: fixed; top: -80px; left: 16px; z-index: 9999;
  background: #fff; color: #111; padding: 10px 14px; border-radius: 10px;
}
.skip-link:focus { top: 14px; }

.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: .18; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}
.cursor-glow {
  display: none;
  position: fixed; width: 420px; height: 420px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,100,45,.10), rgba(255,100,45,0) 67%);
  transform: translate(-50%,-50%); will-change: left, top;
}

.container { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; position: relative; z-index: 3; }
.section { padding: 84px 0; position: relative; }
.section-tight { padding: 60px 0; }
.grid { display: grid; gap: 18px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; color: #d7cfcb; font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg,var(--hot),var(--gold)); }
.section-title { font-size: clamp(2rem, 9vw, 4.4rem); line-height: .98; letter-spacing: -.055em; margin: 0; max-width: 900px; }
.section-lead { margin: 18px 0 0; color: var(--muted); font-size: 1.04rem; max-width: 690px; }
.text-hot { background: linear-gradient(110deg,#fff 0%,var(--gold) 48%,var(--hot) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

.site-header {
  position: fixed; inset: 0 0 auto; height: var(--nav-h); z-index: 1000;
  border-bottom: 1px solid transparent; transition: .3s ease;
}
.site-header.scrolled {
  background: rgba(8,8,10,.76); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%);
  border-bottom-color: var(--line);
}
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 760; letter-spacing: .08em; font-size: .92rem; z-index: 2; }
.brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 18px rgba(255,97,43,.17)); }
.nav-links {
  position: fixed; inset: 0; padding: 112px 24px 30px; background: rgba(7,7,9,.98); display: flex; flex-direction: column;
  gap: 4px; transform: translateY(-102%); transition: transform .4s cubic-bezier(.2,.8,.2,1); z-index: 1;
}
.nav-links.open { transform: translateY(0); }
.nav-links a { padding: 13px 0; font-size: 1.25rem; color: #d6d1ce; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }
.nav-cta { margin-top: 18px; }
.menu-btn {
  z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: #fff; cursor: pointer;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after { width: 18px; height: 1px; background: currentColor; display: block; content: ""; transition: .25s ease; }
.menu-btn span::before { transform: translateY(-6px); }
.menu-btn span::after { transform: translateY(5px); }
.menu-btn.active span { background: transparent; }
.menu-btn.active span::before { transform: translateY(0) rotate(45deg); }
.menu-btn.active span::after { transform: translateY(-1px) rotate(-45deg); }

.btn {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border-radius: 14px;
  border: 1px solid transparent; font-weight: 700; font-size: .92rem; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #17100d; background: linear-gradient(120deg,#ffd7a5 0%,#ff8a45 52%,#ff6337 100%); box-shadow: 0 10px 40px rgba(255,92,45,.16); }
.btn-secondary { color: #fff; background: rgba(255,255,255,.055); border-color: var(--line); }
.btn-ghost { color: #d9d3d0; background: transparent; border-color: var(--line); }
.btn svg { width: 17px; height: 17px; }

.hero { min-height: 100svh; padding: calc(var(--nav-h) + 54px) 0 50px; display: flex; align-items: center; position: relative; overflow: clip; }
.hero::before {
  content:""; position:absolute; width: 760px; height: 760px; border-radius: 50%; right: -430px; top: 4%; z-index:0;
  background: radial-gradient(circle at 38% 42%, rgba(255,187,113,.22), rgba(255,93,40,.12) 28%, rgba(163,31,18,.06) 50%, transparent 68%);
  filter: blur(2px); animation: breathe 7s ease-in-out infinite;
}
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero-copy { position: relative; z-index: 5; }
.hero-badge {
  display: inline-flex; align-items:center; gap:10px; padding: 8px 11px; border-radius: 999px; border:1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.04); color:#c6bfbc; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
}
.hero-badge i { width:7px; height:7px; border-radius:50%; background:var(--hot); box-shadow:0 0 0 5px rgba(255,98,50,.08),0 0 20px rgba(255,98,50,.7); }
.hero h1 { margin: 18px 0 16px; font-size: clamp(3rem, 15vw, 7.2rem); letter-spacing: -.07em; line-height: .86; font-weight: 760; max-width: 880px; }
.hero p { color: #b5aeaa; font-size: clamp(1.02rem,3.8vw,1.25rem); max-width: 650px; margin: 0; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.hero-meta { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; margin-top:38px; max-width:620px; }
.hero-meta div { padding:14px; border-left:1px solid var(--line-hot); background: linear-gradient(90deg,rgba(255,104,46,.035),transparent); }
.hero-meta strong { display:block; font-size:.86rem; }
.hero-meta span { display:block; color:var(--muted-2); font-size:.76rem; margin-top:3px; }

.orbit-stage { height: 410px; display:grid; place-items:center; position:relative; perspective:900px; }
.orbit-stage::before { content:""; position:absolute; width:320px; height:320px; border:1px solid rgba(255,255,255,.06); border-radius:50%; box-shadow: inset 0 0 80px rgba(255,81,35,.035); }
.orbit-stage::after { content:""; position:absolute; width:225px; height:225px; border:1px dashed rgba(255,124,67,.16); border-radius:50%; animation: spin 26s linear infinite; }
.magma-core {
  width: 136px; aspect-ratio:1; border-radius: 32% 68% 60% 40% / 44% 37% 63% 56%; position:relative; z-index:3;
  background: radial-gradient(circle at 28% 20%,#ffe2b4 0 6%,#ffab64 17%,#ff5c32 48%,#7b1613 74%,#1d0b0b 100%);
  box-shadow: inset -20px -22px 34px rgba(0,0,0,.35), 0 0 45px rgba(255,87,38,.30), 0 0 100px rgba(255,87,38,.11);
  animation: morph 8s ease-in-out infinite, floaty 6s ease-in-out infinite;
}
.magma-core::after { content:"M"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.9); font-weight:900; font-size:3.3rem; letter-spacing:-.12em; text-shadow:0 2px 18px rgba(0,0,0,.2); }
.orbit-pill { position:absolute; z-index:4; min-width:112px; padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:rgba(13,13,17,.7); backdrop-filter:blur(10px); font-size:.75rem; color:#c9c2be; box-shadow:var(--shadow); }
.orbit-pill b { display:block; color:#fff; font-size:.77rem; margin-bottom:1px; }
.orbit-pill.p1 { transform:translate(-115px,-126px) rotate(-4deg); }
.orbit-pill.p2 { transform:translate(110px,-70px) rotate(4deg); }
.orbit-pill.p3 { transform:translate(92px,130px) rotate(-2deg); }
.orbit-pill.p4 { transform:translate(-124px,112px) rotate(3deg); }

.trust-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }
.trust-row { min-height:72px; display:flex; gap:22px; align-items:center; justify-content:space-between; overflow:auto; scrollbar-width:none; }
.trust-row::-webkit-scrollbar { display:none; }
.trust-label { color:var(--muted-2); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; flex:0 0 auto; }
.trust-item { color:#d9d3cf; font-size:.78rem; font-weight:700; display:flex; align-items:center; gap:8px; white-space:nowrap; flex:0 0 auto; }
.trust-item i { width:7px; height:7px; border-radius:50%; background:linear-gradient(var(--hot-2),var(--hot)); box-shadow:0 0 16px rgba(255,98,50,.5); }

.card {
  border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.024));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03); overflow:hidden; position:relative;
}
.card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,116,59,.09),transparent 45%); transition:opacity .25s ease; }
.card:hover::after { opacity:1; }
.feature-card { padding:24px; min-height:220px; }
.feature-card .icon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; border:1px solid var(--line-hot); background:rgba(255,91,39,.07); margin-bottom:38px; }
.feature-card .icon svg { width:21px; }
.feature-card h3 { margin:0 0 7px; font-size:1.12rem; }
.feature-card p { margin:0; color:var(--muted); font-size:.91rem; }

.about-grid { margin-top:34px; }
.about-main { padding:28px; min-height:330px; display:flex; flex-direction:column; justify-content:space-between; }
.about-main .big-copy { font-size:clamp(1.65rem,7vw,3.2rem); line-height:1.05; letter-spacing:-.045em; max-width:760px; }
.about-main .small-copy { color:var(--muted); max-width:600px; margin-top:30px; }
.about-side { padding:24px; min-height:250px; background:radial-gradient(380px 240px at 100% 0%,rgba(255,95,42,.13),transparent 65%),linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.024)); }
.about-side small { color:var(--muted-2); text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; }
.about-side h3 { font-size:1.55rem; margin:20px 0 6px; line-height:1.1; }
.about-side p { color:var(--muted); margin:0; }

.product-shell { margin-top:36px; padding:12px; border-radius:30px; border:1px solid var(--line); background:rgba(255,255,255,.025); box-shadow:var(--shadow); }
.product-stage { border-radius:22px; overflow:hidden; min-height:630px; position:relative; background:radial-gradient(600px 360px at 50% 15%,rgba(255,83,39,.12),transparent 62%),#0b0b0e; display:grid; align-items:end; }
.product-copy { padding:30px 22px 18px; position:relative; z-index:4; }
.product-logo { display:inline-flex; align-items:center; gap:10px; font-size:.73rem; letter-spacing:.16em; text-transform:uppercase; color:#c4bdba; }
.product-logo b { font-size:1.05rem; color:#fff; letter-spacing:.06em; }
.product-copy h3 { font-size:clamp(2.2rem,10vw,5.2rem); line-height:.92; letter-spacing:-.06em; margin:12px 0 14px; }
.product-copy p { color:var(--muted); max-width:620px; }
.phone-wrap { min-height:400px; display:grid; place-items:center; position:relative; }
.phone-glow { position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,91,44,.14); filter:blur(70px); }
.phone {
  width:min(280px,72vw); aspect-ratio:.5; border-radius:42px; padding:9px; background:linear-gradient(145deg,#4a4547,#151416 22%,#050506 76%,#3d393b); box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.14); transform:rotate(3deg); position:relative; z-index:2;
}
.phone-screen { height:100%; border-radius:34px; overflow:hidden; background:radial-gradient(250px 160px at 70% 8%,rgba(255,92,42,.22),transparent 70%),#0a0a0c; padding:16px 14px; }
.phone-island { width:84px; height:24px; border-radius:999px; background:#000; margin:0 auto 24px; }
.app-head { display:flex; align-items:center; justify-content:space-between; }
.app-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#f4b978,#d6492d 60%,#431a16); border:2px solid rgba(255,255,255,.16); }
.app-head strong { font-size:.78rem; }
.app-icons { display:flex; gap:6px; }
.app-icons i { width:24px; height:24px; border-radius:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07); }
.story-row { display:flex; gap:9px; margin:18px 0; }
.story { width:45px; height:45px; border-radius:50%; padding:2px; background:linear-gradient(135deg,var(--gold),var(--hot),#8c2b75); }
.story::after { content:""; display:block; width:100%; height:100%; border-radius:50%; background:#18171a; border:2px solid #0a0a0c; }
.feed-card { border-radius:18px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.035); overflow:hidden; margin-bottom:10px; }
.feed-cover { height:150px; background:radial-gradient(circle at 35% 35%,rgba(255,205,147,.5),transparent 12%),radial-gradient(circle at 70% 35%,rgba(255,96,45,.5),transparent 20%),linear-gradient(135deg,#361c22,#101318 50%,#482113); }
.feed-body { padding:10px; }
.feed-line { height:7px; background:rgba(255,255,255,.08); border-radius:99px; margin-top:7px; }
.feed-line.short { width:58%; }
.app-bottom { height:46px; position:absolute; left:14px; right:14px; bottom:15px; border-radius:16px; background:rgba(20,20,24,.88); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(10px); display:flex; justify-content:space-around; align-items:center; }
.app-bottom i { width:12px; height:12px; border-radius:4px; border:1px solid rgba(255,255,255,.35); }

.pillars { margin-top:32px; }
.pillar { padding:22px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; }
.pillar:last-child { border-bottom:1px solid var(--line); }
.pillar .num { color:var(--hot-2); font-size:.75rem; font-weight:700; padding-top:5px; }
.pillar h3 { margin:0; font-size:1.25rem; }
.pillar p { margin:7px 0 0; color:var(--muted); font-size:.9rem; }

.compliance-grid { margin-top:32px; }
.compliance-card { padding:22px; }
.compliance-card .tag { display:inline-block; padding:5px 8px; border:1px solid rgba(114,223,170,.2); color:#a6e6c7; background:rgba(114,223,170,.05); border-radius:999px; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; }
.compliance-card h3 { margin:20px 0 6px; }
.compliance-card p { color:var(--muted); margin:0; font-size:.9rem; }

.faq { margin-top:32px; border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q { width:100%; background:none; border:0; color:#fff; padding:22px 0; text-align:left; display:flex; justify-content:space-between; gap:16px; cursor:pointer; font-weight:700; }
.faq-q span:last-child { color:var(--hot-2); transition:.25s ease; }
.faq-q[aria-expanded="true"] span:last-child { transform:rotate(45deg); }
.faq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.faq-a > div { overflow:hidden; }
.faq-a p { color:var(--muted); margin:0; padding:0 0 22px; max-width:780px; }
.faq-item.open .faq-a { grid-template-rows:1fr; }

.cta-panel { padding:38px 22px; border-radius:30px; position:relative; overflow:hidden; background:linear-gradient(130deg,rgba(255,210,154,.98),rgba(255,114,58,.98) 50%,rgba(183,47,31,.98)); color:#1b0e09; box-shadow:0 35px 100px rgba(255,83,39,.12); }
.cta-panel::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; right:-180px; top:-210px; border:1px solid rgba(45,14,8,.14); box-shadow:0 0 0 55px rgba(45,14,8,.035),0 0 0 110px rgba(45,14,8,.025); }
.cta-panel h2 { margin:0; font-size:clamp(2.2rem,10vw,4.7rem); line-height:.93; letter-spacing:-.06em; max-width:850px; position:relative; }
.cta-panel p { max-width:650px; font-weight:600; opacity:.72; position:relative; }
.cta-panel .btn { background:#120b09; color:#fff; margin-top:10px; position:relative; }

.site-footer { padding:56px 0 28px; border-top:1px solid var(--line); }
.footer-grid { display:grid; gap:36px; }
.footer-brand p { color:var(--muted); max-width:410px; font-size:.88rem; }
.footer-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.footer-col h4 { font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:#7f7978; margin:0 0 12px; }
.footer-col a { display:block; color:#c5bfbc; padding:5px 0; font-size:.87rem; }
.footer-col a:hover { color:#fff; }
.footer-bottom { margin-top:42px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; color:#6f6968; font-size:.75rem; }

/* Inner pages */
.page-hero { padding:calc(var(--nav-h) + 70px) 0 54px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; width:520px; height:520px; right:-250px; top:-180px; background:radial-gradient(circle,rgba(255,91,42,.13),transparent 65%); }
.page-hero h1 { font-size:clamp(2.7rem,12vw,5.8rem); letter-spacing:-.06em; line-height:.93; margin:10px 0 14px; max-width:900px; }
.page-hero p { color:var(--muted); max-width:720px; }
.breadcrumb { color:#7e7877; font-size:.76rem; }
.breadcrumb a:hover { color:#fff; }
.content-layout { display:grid; gap:30px; }
.content-nav { display:none; }
.prose { max-width:820px; }
.prose section { padding:0 0 40px; scroll-margin-top:100px; }
.prose h2 { font-size:1.65rem; letter-spacing:-.03em; margin:0 0 12px; }
.prose h3 { font-size:1.08rem; margin:24px 0 8px; }
.prose p, .prose li { color:#b1aaa7; }
.prose ul { padding-left:20px; }
.prose li { margin:7px 0; }
.prose a { color:#ffb576; text-decoration:underline; text-underline-offset:3px; }
.notice { padding:18px; border:1px solid rgba(255,181,118,.18); background:rgba(255,148,72,.05); border-radius:16px; color:#c9c1bd; margin:22px 0; }
.notice strong { color:#fff; }
.legal-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.legal-meta span { padding:7px 10px; border-radius:999px; border:1px solid var(--line); color:#8f8987; font-size:.72rem; }

.support-grid { display:grid; gap:14px; margin-top:28px; }
.support-card { padding:22px; }
.support-card h3 { margin:0 0 5px; }
.support-card p { color:var(--muted); margin:0; font-size:.9rem; }
.support-card a { color:#ffb576; display:inline-block; margin-top:14px; font-size:.87rem; }
.form { display:grid; gap:14px; margin-top:30px; }
.field label { display:block; font-size:.78rem; color:#a39d9a; margin:0 0 6px; }
.field input, .field textarea, .field select { width:100%; color:#fff; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:14px; padding:13px 14px; outline:none; }
.field textarea { min-height:140px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:rgba(255,122,64,.56); box-shadow:0 0 0 4px rgba(255,98,50,.07); }
.form-status { color:#aaa4a2; font-size:.83rem; min-height:20px; }

.delete-steps { counter-reset:step; display:grid; gap:12px; margin-top:25px; }
.delete-step { padding:20px 20px 20px 70px; min-height:80px; position:relative; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.03); }
.delete-step::before { counter-increment:step; content:counter(step); position:absolute; left:20px; top:19px; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--gold),var(--hot)); color:#1d0f09; font-weight:800; }
.delete-step h3 { margin:0 0 3px; font-size:.96rem; }
.delete-step p { margin:0; color:var(--muted); font-size:.86rem; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1; transform:none; }
.reveal.d2 { transition-delay:.08s; }
.reveal.d3 { transition-delay:.16s; }
.reveal.d4 { transition-delay:.24s; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes breathe { 0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1} }
@keyframes floaty { 0%,100%{translate:0 -4px}50%{translate:0 8px} }
@keyframes morph { 0%,100%{border-radius:32% 68% 60% 40% / 44% 37% 63% 56%}50%{border-radius:58% 42% 36% 64% / 54% 62% 38% 46%} }

@media (min-width: 700px) {
  .container { width:min(calc(100% - 56px),var(--max)); }
  .section { padding:110px 0; }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-grid { grid-template-columns:1.6fr .8fr; }
  .compliance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .support-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:1.25fr 1fr; }
  .footer-bottom { flex-direction:row; justify-content:space-between; }
  .product-stage { grid-template-columns:1.05fr .95fr; align-items:center; }
  .product-copy { padding:54px 42px; }
  .phone-wrap { min-height:650px; }
  .hero-meta { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (min-width: 980px) {
  :root { --nav-h: 82px; }
  .menu-btn { display:none; }
  .nav-links { position:static; inset:auto; padding:0; background:none; flex-direction:row; align-items:center; gap:26px; transform:none; }
  .nav-links a { padding:0; font-size:.78rem; color:#a9a3a0; }
  .nav-links .nav-cta { margin:0; padding:0 15px; min-height:40px; color:#18110d; }
  .hero { padding-top:calc(var(--nav-h) + 40px); }
  .hero-grid { grid-template-columns:1.2fr .8fr; gap:20px; }
  .hero h1 { font-size:clamp(4.7rem,8vw,7.5rem); }
  .orbit-stage { height:620px; }
  .orbit-stage::before { width:480px; height:480px; }
  .orbit-stage::after { width:340px; height:340px; }
  .magma-core { width:190px; }
  .orbit-pill.p1 { transform:translate(-186px,-180px) rotate(-4deg); }
  .orbit-pill.p2 { transform:translate(188px,-100px) rotate(4deg); }
  .orbit-pill.p3 { transform:translate(155px,180px) rotate(-2deg); }
  .orbit-pill.p4 { transform:translate(-190px,145px) rotate(3deg); }
  .feature-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .compliance-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pillar { grid-template-columns:70px 280px 1fr; gap:24px; }
  .pillar p { margin:0; }
  .content-layout { grid-template-columns:240px 1fr; gap:70px; align-items:start; }
  .content-nav { display:block; position:sticky; top:110px; }
  .content-nav a { display:block; color:#797372; border-left:1px solid var(--line); padding:7px 0 7px 14px; font-size:.78rem; }
  .content-nav a:hover { color:#fff; border-left-color:var(--hot); }
  .support-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cursor-glow { display:block; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
}

@media (prefers-contrast: more) {
  :root { --muted:#d4cfcc; --line:rgba(255,255,255,.28); }
}

/* ========================================================================
   MAGMA CORP — MOBILE HARDENING PATCH 2026-09-19
   Corrige o menu mobile sobrepondo o hero e melhora a composição <= 979px.
   ======================================================================== */

@media (max-width: 979px) {
  .site-header {
    height: var(--nav-h);
    background: rgba(8,8,10,.88);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
    border-bottom: 1px solid var(--line);
  }

  .nav-wrap {
    position: relative;
    z-index: 1002;
  }

  .brand {
    min-width: 0;
    max-width: calc(100% - 62px);
  }

  .brand span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .menu-btn {
    position: relative;
    z-index: 1004;
    flex: 0 0 44px;
  }

  /*
   * O estado fechado agora depende de opacity/visibility/pointer-events,
   * além de transform. Isso evita o menu 'vazar' sobre o hero em mobile.
   */
  .nav-links {
    position: fixed;
    top: calc(var(--nav-h) + 10px);
    right: 12px;
    bottom: auto;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - var(--nav-h) - 26px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    gap: 2px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 20px;
    background: rgba(12,12,15,.985);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    backdrop-filter: blur(24px) saturate(130%);
    box-shadow: 0 28px 80px rgba(0,0,0,.58);
    transform: translateY(-10px) scale(.985);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity .22s ease,
      visibility .22s ease,
      transform .28s cubic-bezier(.2,.8,.2,1);
    z-index: 1003;
  }

  .nav-links.open,
  .menu-btn[aria-expanded="true"] + .nav-links {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 1rem;
    line-height: 1.2;
  }

  .nav-links a:not(.nav-cta):active,
  .nav-links a:not(.nav-cta):focus-visible {
    background: rgba(255,255,255,.055);
  }

  .nav-links .nav-cta {
    width: 100%;
    margin: 6px 0 0;
    min-height: 50px;
    color: #17100d;
  }

  body.nav-open {
    overflow: hidden;
    touch-action: none;
  }
}

@media (max-width: 699px) {
  :root {
    --nav-h: 70px;
    --radius: 18px;
    --radius-lg: 24px;
  }

  .container {
    width: min(calc(100% - 28px), var(--max));
  }

  .section {
    padding: 70px 0;
  }

  .section-tight {
    padding: 50px 0;
  }

  .section-title {
    font-size: clamp(2.15rem, 11vw, 3.5rem);
    line-height: 1;
    letter-spacing: -.05em;
  }

  .section-lead {
    margin-top: 16px;
    font-size: .98rem;
  }

  .hero {
    min-height: auto;
    padding: calc(var(--nav-h) + 34px) 0 42px;
    overflow: hidden;
  }

  .hero::before {
    width: 520px;
    height: 520px;
    right: -340px;
    top: 22%;
  }

  .hero-grid {
    gap: 22px;
  }

  .hero-badge {
    max-width: 100%;
    font-size: .65rem;
    line-height: 1.35;
    letter-spacing: .07em;
  }

  .hero h1 {
    margin: 16px 0 14px;
    font-size: clamp(2.85rem, 14vw, 4.3rem);
    line-height: .9;
    letter-spacing: -.065em;
  }

  .hero p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 24px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-meta {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin-top: 28px;
  }

  .hero-meta div {
    min-width: 0;
    padding: 11px 10px;
  }

  .hero-meta strong {
    font-size: .78rem;
  }

  .hero-meta span {
    font-size: .69rem;
    line-height: 1.35;
  }

  .orbit-stage {
    width: 100%;
    height: 340px;
    margin-top: 2px;
    overflow: visible;
  }

  .orbit-stage::before {
    width: 276px;
    height: 276px;
  }

  .orbit-stage::after {
    width: 198px;
    height: 198px;
  }

  .magma-core {
    width: 118px;
  }

  .magma-core::after {
    font-size: 2.8rem;
  }

  .orbit-pill {
    min-width: 0;
    max-width: 122px;
    padding: 8px 9px;
    border-radius: 12px;
    font-size: .66rem;
    line-height: 1.3;
  }

  .orbit-pill b {
    font-size: .7rem;
  }

  .orbit-pill.p1 { transform: translate(-102px,-108px) rotate(-3deg); }
  .orbit-pill.p2 { transform: translate(100px,-65px) rotate(3deg); }
  .orbit-pill.p3 { transform: translate(91px,108px) rotate(-2deg); }
  .orbit-pill.p4 { transform: translate(-103px,101px) rotate(2deg); }

  .trust-row {
    min-height: 66px;
    gap: 18px;
    justify-content: flex-start;
    scroll-snap-type: x proximity;
  }

  .trust-label,
  .trust-item {
    scroll-snap-align: start;
  }

  .about-grid,
  .feature-grid,
  .compliance-grid {
    margin-top: 26px;
  }

  .about-main {
    min-height: auto;
    padding: 23px;
  }

  .about-main .big-copy {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }

  .feature-card {
    min-height: 190px;
    padding: 22px;
  }

  .feature-card .icon {
    margin-bottom: 28px;
  }

  .product-shell {
    margin-top: 28px;
    padding: 8px;
    border-radius: 24px;
  }

  .product-stage {
    min-height: auto;
    border-radius: 18px;
  }

  .product-copy {
    padding: 28px 18px 8px;
  }

  .product-copy h3 {
    font-size: clamp(2.3rem, 12vw, 3.7rem);
  }

  .phone-wrap {
    min-height: 430px;
    overflow: hidden;
  }

  .phone {
    width: min(250px, 72vw);
    transform: rotate(2deg) translateY(20px);
  }

  .pillar {
    grid-template-columns: 38px 1fr;
    gap: 10px;
  }

  .pillar p {
    grid-column: 2;
  }

  .cta-panel {
    padding: 30px 20px;
    border-radius: 24px;
  }

  .cta-panel h2 {
    font-size: clamp(2.15rem, 11vw, 3.4rem);
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 379px) {
  .container {
    width: min(calc(100% - 24px), var(--max));
  }

  .brand {
    font-size: .82rem;
    letter-spacing: .06em;
  }

  .brand img {
    width: 31px;
    height: 31px;
  }

  .hero h1 {
    font-size: clamp(2.55rem, 13vw, 3.5rem);
  }

  .orbit-pill.p1 { transform: translate(-92px,-105px) rotate(-3deg); }
  .orbit-pill.p2 { transform: translate(91px,-62px) rotate(3deg); }
  .orbit-pill.p3 { transform: translate(82px,105px) rotate(-2deg); }
  .orbit-pill.p4 { transform: translate(-93px,98px) rotate(2deg); }
}

/* ========================================================================
   MAGMA CORP — MOBILE NAV FAILSAFE V3
   Regra definitiva: no mobile o menu NAO participa do layout quando fechado.
   O display so e ativado quando aria-expanded/open/nav-open estiverem ativos.
   ======================================================================== */
@media (max-width: 979px) {
  #main-nav.nav-links {
    display: none !important;
    position: fixed !important;
    top: calc(var(--nav-h) + 10px) !important;
    right: 12px !important;
    bottom: auto !important;
    left: 12px !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100dvh - var(--nav-h) - 26px) !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    background: rgba(10,10,13,.985) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.62) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0,-8px,0) scale(.985) !important;
    z-index: 10030 !important;
  }

  body.nav-open #main-nav.nav-links,
  #main-nav.nav-links.open,
  .menu-btn[aria-expanded="true"] + #main-nav.nav-links {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) scale(1) !important;
  }

  #main-nav.nav-links > a {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  #main-nav.nav-links > .nav-cta {
    justify-content: center !important;
    margin-top: 6px !important;
    color: #17100d !important;
  }

  .site-header,
  .site-header .nav-wrap {
    overflow: visible !important;
  }

  .menu-btn {
    display: grid !important;
    position: relative !important;
    z-index: 10040 !important;
  }
}

@media (min-width: 980px) {
  #main-nav.nav-links {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}