
:root {
    --bg: #050706;
    --bg-deep: #020403;
    --panel: rgba(17, 21, 19, 0.86);
    --line: rgba(255, 255, 255, 0.10);
    --accent: #ffc400;
    --green: #39e58c;
    --text: #f4f6f5;
    --muted: #a4ada8;
    --muted-2: #707a74;
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.56);
    --radius-xl: 30px;
    --radius-lg: 20px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg-deep); }
body { min-height: 100vh; overflow-x: hidden; position: relative; color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.65; background: var(--bg-deep); }
body::before { content:""; position:fixed; inset:0; z-index:-3; background-image: linear-gradient(45deg, rgba(255,255,255,.026) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.026) 75%), linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%), url("carbon-bg.webp"); background-size:12px 12px, 12px 12px, cover; background-position:0 0, 6px 6px, center top; background-attachment:fixed; filter:grayscale(1) contrast(1.12) brightness(.58); opacity:.74; }
body::after { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(circle at 77% 12%, rgba(255,196,0,.13), transparent 25%), radial-gradient(circle at 18% 2%, rgba(57,229,140,.055), transparent 22%), linear-gradient(180deg, rgba(2,4,3,.46) 0%, rgba(2,4,3,.72) 48%, rgba(2,4,3,.93) 100%); }
a { color: inherit; text-decoration: none; }
.container { width: min(1240px, calc(100% - 40px)); margin: 0 auto; text-align: center; }
.lang-switcher { position:absolute; top:2px; right:0; z-index:30; text-align:left; }
[dir="rtl"] .lang-switcher { right:auto; left:0; text-align:right; }
.lang-switcher summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:42px; padding:8px 14px; color:var(--text); font-size:.82rem; font-weight:700; letter-spacing:.01em; border:1px solid var(--line); border-radius:999px; background:rgba(8,12,10,.74); backdrop-filter: blur(15px); box-shadow:0 10px 30px rgba(0,0,0,.24); user-select:none; }
.lang-switcher summary::-webkit-details-marker { display:none; }
.lang-switcher summary::after { content:"▾"; color:var(--accent); font-size:.65rem; }
.lang-switcher[open] summary::after { content:"▴"; }
.lang-switcher .lang-menu { position:absolute; top:calc(100% + 8px); right:0; display:grid; grid-template-columns: repeat(2, minmax(132px, 1fr)); gap:3px; width:max-content; padding:8px; border:1px solid var(--line); border-radius:16px; background:rgba(10,14,12,.96); box-shadow:var(--shadow); backdrop-filter:blur(20px); }
[dir="rtl"] .lang-switcher .lang-menu { right:auto; left:0; }
.lang-switcher .lang-menu a { display:block; padding:9px 11px; border-radius:9px; color:var(--muted); font-size:.82rem; text-decoration:none; white-space:nowrap; transition:background .2s ease, color .2s ease; }
.lang-switcher .lang-menu a:hover { color:var(--text); background:rgba(255,196,0,.09); }
.lang-switcher .lang-menu a.active { color:var(--accent); font-weight:800; background:rgba(255,196,0,.07); }
.hero { position:relative; min-height:min(930px, 100vh); display:flex; align-items:center; padding:88px 0 74px; }
.hero::before { content:""; position:absolute; left:50%; top:50%; width:min(1160px, 96vw); height:78%; transform:translate(-50%, -50%); z-index:-1; border-radius:60px; background:linear-gradient(120deg, rgba(7,10,8,.58), rgba(17,20,18,.16)); border:1px solid rgba(255,255,255,.035); box-shadow:inset 0 1px 0 rgba(255,255,255,.025), 0 60px 160px rgba(0,0,0,.30); }
.hero-grid { width:100%; display:grid; grid-template-columns:minmax(0, .88fr) minmax(540px, 1.12fr); gap:clamp(44px, 7vw, 92px); align-items:center; }
.hero-copy { text-align:left; position:relative; z-index:4; }
[dir="rtl"] .hero-copy { text-align:right; }
.brand-lockup { display:flex; align-items:center; gap:16px; margin-bottom:30px; }
.logo { width:74px; height:74px; object-fit:cover; border-radius:20px; padding:4px; border:1px solid rgba(255,196,0,.52); background:#0b0f0d; box-shadow:0 12px 32px rgba(0,0,0,.48), 0 0 34px rgba(255,196,0,.09); animation:logo-enter .75s cubic-bezier(.2,.8,.2,1) both; }
.brand-meta { display:grid; gap:3px; }
.brand-kicker { color:var(--accent); font-size:.73rem; font-weight:800; letter-spacing:.22em; }
.brand-version { color:var(--muted-2); font-size:.68rem; font-weight:700; letter-spacing:.13em; }
h1 { max-width:680px; margin-bottom:22px; color:var(--text); font-size:clamp(3.2rem, 6.1vw, 6.15rem); line-height:.96; font-weight:800; letter-spacing:-.055em; text-wrap:balance; }
h1 span { display:block; color:var(--accent); text-shadow:0 0 34px rgba(255,196,0,.13); }
.tagline { max-width:620px; color:var(--muted); font-size:clamp(1.06rem, 1.5vw, 1.27rem); line-height:1.65; }
.hero-proof { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.proof-pill { display:inline-flex; align-items:center; gap:9px; min-height:40px; padding:8px 13px; color:#dfe5e1; font-size:.78rem; font-weight:700; border-radius:999px; border:1px solid var(--line); background:rgba(13,17,15,.62); backdrop-filter:blur(10px); }
.proof-pill svg { width:18px; height:18px; stroke:var(--green); stroke-width:1.8; }
.cta-row { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:30px; }
.cta-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:60px; padding:0 24px; border-radius:15px; color:#151007; background:linear-gradient(180deg, #ffd444 0%, var(--accent) 56%, #e9a900 100%); box-shadow:0 14px 34px rgba(255,196,0,.18), inset 0 1px 0 rgba(255,255,255,.56); font-size:1rem; font-weight:800; transition:transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.cta-button svg { width:22px; height:22px; fill:currentColor; }
.cta-button:hover { transform:translateY(-3px); filter:brightness(1.06); box-shadow:0 20px 46px rgba(255,196,0,.25), inset 0 1px 0 rgba(255,255,255,.62); }
.qr-card { display:flex; align-items:center; gap:12px; min-height:60px; padding:7px 13px 7px 8px; border:1px solid var(--line); border-radius:15px; background:rgba(13,17,15,.66); backdrop-filter:blur(12px); }
.qr-card img { width:46px; height:46px; padding:3px; border-radius:9px; background:white; }
.qr-card > div { max-width:165px; }
.qr-label { color:var(--text); font-size:.76rem; line-height:1.2; font-weight:800; }
.qr-sub { margin-top:3px; color:var(--muted-2); font-size:.64rem; line-height:1.25; }
.availability-note { margin-top:13px; max-width:620px; color:var(--muted-2); font-size:.74rem; }
.security-visual-wrap { position:relative; min-width:0; }
.security-console { position:relative; overflow:hidden; width:100%; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-xl); background:linear-gradient(145deg, rgba(255,255,255,.035), transparent 30%), rgba(6,10,8,.89); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(255,196,0,.025); backdrop-filter:blur(18px); transform:perspective(1200px) rotateY(-4deg) rotateX(1.5deg); transform-origin:center; animation:console-enter 1s cubic-bezier(.2,.8,.2,1) both, console-float 7s ease-in-out 1.2s infinite; }
.security-console::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.035) 39%, transparent 50%); transform:translateX(-100%); animation:glass-sheen 7s ease-in-out 2s infinite; }
.console-topbar { position:relative; z-index:6; height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.018); }
.console-brand, .console-code { color:#b8c1bc; font-size:.66rem; font-weight:800; letter-spacing:.16em; }
.console-code { color:var(--muted-2); }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(57,229,140,.9); animation:status-pulse 1.8s ease-in-out infinite; }
.security-stage { position:relative; min-height:560px; overflow:hidden; isolation:isolate; background:radial-gradient(circle at center, rgba(255,196,0,.045) 0 7%, transparent 37%), linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.16)); }
.stage-grid { position:absolute; inset:0; z-index:-3; opacity:.36; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:32px 32px; mask-image:radial-gradient(circle at center, black 0%, transparent 78%); }
.stage-glow { position:absolute; left:50%; top:50%; width:70%; aspect-ratio:1; transform:translate(-50%,-50%); z-index:-2; border-radius:50%; background:radial-gradient(circle, rgba(255,196,0,.09), transparent 66%); filter:blur(10px); animation:stage-breathe 4.6s ease-in-out infinite; }
.orbit { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(255,196,0,.14); box-shadow:inset 0 0 30px rgba(255,196,0,.018); }
.orbit::before, .orbit::after { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 11px rgba(255,196,0,.9); }
.orbit::before { top:-3px; left:50%; }
.orbit::after { bottom:-3px; right:26%; }
.orbit-one { width:52%; aspect-ratio:1; animation:spin 17s linear infinite; }
.orbit-two { width:70%; aspect-ratio:1; border-style:dashed; border-color:rgba(255,255,255,.09); animation:spin-reverse 28s linear infinite; }
.orbit-three { width:88%; aspect-ratio:1; border-color:rgba(57,229,140,.08); animation:spin 42s linear infinite; }
.scan-sweep { position:absolute; left:50%; top:50%; width:84%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; z-index:-1; opacity:.62; background:conic-gradient(from 0deg, transparent 0deg 315deg, rgba(255,196,0,.02) 322deg, rgba(255,196,0,.22) 359deg, transparent 360deg); animation:sweep 5.6s linear infinite; mask-image:radial-gradient(circle, transparent 0 18%, #000 28% 100%); }
.scan-line { position:absolute; left:12%; right:12%; height:1px; top:12%; z-index:0; background:linear-gradient(90deg, transparent, rgba(57,229,140,.62), transparent); box-shadow:0 0 15px rgba(57,229,140,.45); animation:scan-line 4s ease-in-out infinite; }
.security-core { position:absolute; left:50%; top:50%; width:188px; aspect-ratio:1; transform:translate(-50%,-50%); z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(255,196,0,.42); background:radial-gradient(circle at 48% 35%, rgba(255,255,255,.065), transparent 32%), linear-gradient(145deg, rgba(28,33,30,.98), rgba(5,8,7,.98)); box-shadow:0 0 0 9px rgba(255,196,0,.025), 0 20px 55px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08); }
.core-halo { position:absolute; inset:-20px; border-radius:50%; border:1px solid rgba(255,196,0,.12); animation:core-pulse 2.8s ease-out infinite; }
.core-shield { width:46px; height:46px; display:grid; place-items:center; margin-bottom:7px; border-radius:14px; color:var(--green); background:rgba(57,229,140,.08); border:1px solid rgba(57,229,140,.26); box-shadow:0 0 24px rgba(57,229,140,.10); }
.core-shield svg { width:27px; height:27px; stroke:currentColor; stroke-width:1.8; }
.core-eyebrow { color:var(--accent); font-size:.53rem; font-weight:800; letter-spacing:.2em; }
.security-core strong { margin-top:2px; color:var(--text); font-size:1.27rem; line-height:1.2; letter-spacing:.08em; }
.security-core small { margin-top:2px; color:var(--muted-2); font-size:.48rem; font-weight:700; letter-spacing:.14em; }
.metric-node { --node-x:50%; --node-y:50%; position:absolute; left:var(--node-x); top:var(--node-y); z-index:5; display:grid; grid-template-columns:30px auto 7px; align-items:center; gap:8px; min-width:110px; height:42px; padding:5px 10px 5px 6px; transform:translate(-50%,-50%); color:#c9d0cc; font-size:.57rem; font-weight:800; letter-spacing:.12em; border:1px solid rgba(255,255,255,.105); border-radius:12px; background:rgba(11,15,13,.87); box-shadow:0 12px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter:blur(12px); animation:node-float 3.4s ease-in-out var(--delay) infinite, node-enter .8s cubic-bezier(.2,.8,.2,1) var(--delay) both; }
.metric-node::after { content:""; position:absolute; left:50%; top:100%; width:1px; height:26px; opacity:.30; background:linear-gradient(var(--accent), transparent); transform-origin:top; }
.node-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--accent); background:rgba(255,196,0,.07); }
.node-icon svg { width:17px; height:17px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.metric-node i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(57,229,140,.8); animation:node-status 1.8s ease-in-out var(--delay) infinite; }
.node-root { --node-x:50%; --node-y:11%; }
.node-boot { --node-x:82%; --node-y:28%; }
.node-selinux { --node-x:84%; --node-y:70%; }
.node-privacy { --node-x:50%; --node-y:88%; }
.node-network { --node-x:16%; --node-y:70%; }
.node-traffic { --node-x:18%; --node-y:28%; }
.node-root::after { height:42px; }
.node-privacy::after { top:auto; bottom:100%; background:linear-gradient(transparent, var(--accent)); }
.node-boot::after, .node-selinux::after { left:0; top:50%; width:36px; height:1px; transform:translateX(-100%); background:linear-gradient(90deg, transparent, var(--accent)); }
.node-network::after, .node-traffic::after { left:100%; top:50%; width:36px; height:1px; background:linear-gradient(90deg, var(--accent), transparent); }
.telemetry { position:absolute; z-index:3; bottom:22px; color:var(--muted-2); font-size:.52rem; font-weight:800; letter-spacing:.14em; }
.telemetry-left { left:22px; text-align:left; }
.telemetry-right { right:22px; text-align:right; }
.telemetry-right strong { display:block; margin-top:1px; color:var(--green); font-size:1rem; letter-spacing:.06em; }
.telemetry-bars { display:flex; align-items:end; gap:3px; height:16px; margin-top:6px; }
.telemetry-bars b { display:block; width:4px; border-radius:3px; background:var(--accent); animation:bars 1.25s ease-in-out infinite alternate; }
.telemetry-bars b:nth-child(1){height:35%; animation-delay:-.2s;} .telemetry-bars b:nth-child(2){height:70%; animation-delay:-.5s;} .telemetry-bars b:nth-child(3){height:45%; animation-delay:-.8s;} .telemetry-bars b:nth-child(4){height:100%; animation-delay:-1.1s;} .telemetry-bars b:nth-child(5){height:62%; animation-delay:-.35s;}
.console-footer { position:relative; z-index:5; display:grid; grid-template-columns:repeat(3,1fr); min-height:72px; border-top:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.012); }
.console-footer > div { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:8px; align-content:center; justify-content:center; padding:0 14px; text-align:left; border-right:1px solid rgba(255,255,255,.06); }
.console-footer > div:last-child { border-right:0; }
.console-footer span { grid-row:1 / 3; width:7px; height:7px; align-self:center; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(57,229,140,.56); }
.console-footer b { color:#d8deda; font-size:.58rem; letter-spacing:.12em; }
.console-footer small { color:var(--muted-2); font-size:.45rem; letter-spacing:.14em; }
.visual-caption { margin-top:15px; color:var(--muted-2); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
main { padding-bottom:28px; }
main > section { margin-top:112px; }
h2 { font-size:clamp(2rem, 4vw, 3.15rem); margin-bottom:14px; color:var(--text); line-height:1.08; letter-spacing:-.035em; text-wrap:balance; }
.section-subtitle { max-width:760px; margin:0 auto 42px; color:var(--muted); font-size:1rem; }
.usecases { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:16px; text-align:left; }
.usecase-card, .scan-card, .journey-step { min-height:100%; padding:24px; border-radius:17px; border:1px solid var(--line); background:rgba(13,17,15,.76); box-shadow:0 16px 46px rgba(0,0,0,.20); backdrop-filter:blur(10px); transition:transform .25s ease, border-color .25s ease; text-align:left; }
.usecase-card:hover, .scan-card:hover, .journey-step:hover { transform:translateY(-5px); border-color:rgba(255,196,0,.22); }
.usecase-icon { display:block; margin-bottom:12px; font-size:1.55rem; }
.usecase-card p, .scan-card p, .journey-step p, .details-content p, .details-content li { color:var(--muted); font-size:.92rem; }
.usecase-card strong { color:var(--text); }
.scan-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); grid-auto-rows:1fr; gap:18px; text-align:left; }
.scan-card { display:flex; flex-direction:column; height:100%; }
.scan-card h3, .journey-step h3 { margin-bottom:10px; color:var(--text); font-size:1.08rem; line-height:1.35; }
.scan-card__anim { position:relative; height:108px; margin-bottom:18px; border-radius:18px; background:linear-gradient(180deg, rgba(7,12,21,0.8), rgba(12,19,32,0.95)); border:1px solid rgba(255,255,255,0.06); overflow:hidden; }
.scan-card__anim > * { position:absolute; }
.anim-root .shield { inset:20px auto auto 28px; width:62px; height:72px; background:linear-gradient(180deg, #ffe08a, #ffc526); clip-path:polygon(50% 0%,93% 18%,93% 58%,50% 100%,7% 58%,7% 18%); }
.anim-root .key { left:84px; top:44px; width:16px; height:16px; border:5px solid #8bff7a; border-radius:50%; }
.anim-root .key::after { content:''; position:absolute; left:14px; top:4px; width:34px; height:6px; background:#8bff7a; box-shadow:16px 0 0 #8bff7a; }
.anim-root .pulse-ring { left:154px; top:28px; width:40px; height:40px; border-radius:50%; border:2px solid rgba(139,255,122,.8); animation:ping 2.2s infinite; }
.anim-boot .lock-body { left:42px; top:44px; width:56px; height:42px; background:#ffc526; border-radius:10px; }
.anim-boot .lock-arch { left:50px; top:22px; width:38px; height:34px; border:8px solid #9ac8ff; border-bottom:none; border-radius:24px 24px 0 0; animation:unlock 2.8s ease-in-out infinite; transform-origin:left bottom; }
.anim-boot .unlock-spark { right:36px; top:36px; width:20px; height:20px; background:radial-gradient(circle, #8bff7a, transparent 70%); box-shadow:0 0 22px rgba(139,255,122,.8); animation:blink 1.4s infinite; }
.anim-integrity .grid-cells { left:20px; top:20px; right:20px; bottom:20px; background: linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0/26px 26px, linear-gradient(0deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0/26px 26px; }
.anim-integrity .check-line { left:42px; top:54px; width:88px; height:18px; border-left:6px solid #8bff7a; border-bottom:6px solid #8bff7a; transform:rotate(-45deg); animation:drawCheck 2.2s ease-in-out infinite; }
.anim-selinux .terminal { left:22px; top:24px; width:120px; height:60px; border-radius:14px; background:#0c1421; border:1px solid rgba(154,200,255,.25); }
.anim-selinux .terminal::before { content:''; position:absolute; left:14px; top:16px; width:54px; height:4px; border-radius:999px; background:#9ac8ff; box-shadow:0 13px 0 rgba(154,200,255,.72), 0 26px 0 rgba(139,255,122,.82); }
.anim-selinux .cursor { left:42px; top:54px; width:40px; height:10px; background:linear-gradient(90deg, #8bff7a 0 68%, transparent 68% 100%); animation:blink 1s steps(1) infinite; }
.anim-selinux .status-bars { right:24px; top:28px; width:72px; height:48px; background:linear-gradient(180deg, rgba(139,255,122,.85) 0 33%, rgba(255,196,0,.86) 33% 66%, rgba(255,90,90,.9) 66% 100%); border-radius:12px; opacity:.85; }
.anim-privacy .cam { left:26px; top:40px; width:64px; height:34px; border-radius:10px; background:#ffc526; }
.anim-privacy .cam::after { content:''; position:absolute; right:-14px; top:8px; width:18px; height:18px; background:#ffc526; clip-path: polygon(0 0,100% 20%,100% 80%,0 100%); }
.anim-privacy .mic { left:112px; top:30px; width:28px; height:44px; border-radius:14px; background:#9ac8ff; }
.anim-privacy .mic::before { content:''; position:absolute; left:10px; top:42px; width:8px; height:20px; background:#9ac8ff; }
.anim-privacy .mic::after { content:''; position:absolute; left:-4px; top:58px; width:36px; height:14px; border-bottom:4px solid #9ac8ff; border-radius:0 0 12px 12px; }
.anim-privacy .privacy-wave { right:22px; top:18px; width:74px; height:74px; border-radius:50%; border:3px solid rgba(139,255,122,.7); animation:ping 2.6s infinite; }
.anim-network .signal-bars { left:28px; bottom:22px; width:84px; height:60px; background: linear-gradient(180deg, transparent 0 58%, #9ac8ff 58% 100%) 0 0/14px 100% no-repeat, linear-gradient(180deg, transparent 0 44%, #9ac8ff 44% 100%) 20px 0/14px 100% no-repeat, linear-gradient(180deg, transparent 0 28%, #9ac8ff 28% 100%) 40px 0/14px 100% no-repeat, linear-gradient(180deg, transparent 0 16%, #9ac8ff 16% 100%) 60px 0/14px 100% no-repeat; }
.anim-network .down-arrow { left:132px; top:22px; width:18px; height:48px; background:linear-gradient(180deg, #ff8547, #ff5a5a); clip-path:polygon(35% 0,65% 0,65% 56%,100% 56%,50% 100%,0 56%,35% 56%); animation:bob 1.8s ease-in-out infinite; }
.anim-network .net-dot { right:28px; top:44px; width:18px; height:18px; border-radius:50%; background:#8bff7a; box-shadow:0 0 18px rgba(139,255,122,.8); }
.anim-traffic .traffic-bars { left:26px; right:26px; bottom:24px; height:58px; background: linear-gradient(180deg, transparent 0 54%, #8bff7a 54% 100%) 0 0/16px 100% no-repeat, linear-gradient(180deg, transparent 0 26%, #ffc526 26% 100%) 28px 0/16px 100% no-repeat, linear-gradient(180deg, transparent 0 38%, #9ac8ff 38% 100%) 56px 0/16px 100% no-repeat, linear-gradient(180deg, transparent 0 14%, #ff8547 14% 100%) 84px 0/16px 100% no-repeat, linear-gradient(180deg, transparent 0 46%, #8bff7a 46% 100%) 112px 0/16px 100% no-repeat; animation:barsMove 2.4s ease-in-out infinite; }
.anim-traffic .traffic-line { left:24px; top:28px; width:120px; height:40px; border-left:4px solid transparent; border-bottom:4px solid transparent; }
.anim-traffic .traffic-line::before { content:''; position:absolute; inset:0; border-bottom:4px solid #dff6ff; border-left:4px solid #dff6ff; transform:skewX(-35deg); opacity:.55; }
.anim-heat .battery { left:24px; top:34px; width:88px; height:42px; border-radius:10px; border:4px solid #9ac8ff; }
.anim-heat .battery::after { content:''; position:absolute; right:-10px; top:12px; width:8px; height:14px; border-radius:0 4px 4px 0; background:#9ac8ff; }
.anim-heat .thermo { left:128px; top:24px; width:18px; height:58px; border-radius:12px; background:linear-gradient(180deg, #ffc526 0 40%, #ff5a5a 40% 100%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.15); }
.anim-heat .thermo::after { content:''; position:absolute; left:-9px; bottom:-12px; width:36px; height:36px; border-radius:50%; background:#ff5a5a; }
.anim-heat .heat-wave { right:26px; top:22px; width:70px; height:70px; background:radial-gradient(circle, rgba(255,133,71,.22), transparent 68%); animation:heatWave 1.8s ease-in-out infinite; }
.anim-developer .gear { left:28px; top:28px; width:54px; height:54px; border-radius:50%; background: radial-gradient(circle, #9ac8ff 35%, transparent 36%), conic-gradient(from 0deg, #9ac8ff 0 10%, transparent 10% 20%, #9ac8ff 20% 30%, transparent 30% 40%, #9ac8ff 40% 50%, transparent 50% 60%, #9ac8ff 60% 70%, transparent 70% 80%, #9ac8ff 80% 90%, transparent 90% 100%); animation:gearSpin 5s linear infinite; }
.anim-developer .switch-panel { left:104px; top:36px; width:86px; height:36px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14); }
.anim-developer .switch-panel::before { content:''; position:absolute; top:4px; left:46px; width:28px; height:28px; border-radius:50%; background:#8bff7a; box-shadow:0 0 16px rgba(139,255,122,.7); animation:switchGlow 2s ease-in-out infinite; }
.anim-developer .switch-panel::after { content:''; position:absolute; left:14px; top:16px; width:24px; height:4px; border-radius:999px; background:#9ac8ff; box-shadow:0 -8px 0 rgba(154,200,255,.48), 0 8px 0 rgba(154,200,255,.48); }
.anim-developer .dev-dot { right:26px; top:40px; width:18px; height:18px; border-radius:50%; background:#ff5757; box-shadow:0 0 20px rgba(255,87,87,.8); animation:blink 1.2s infinite; }

/* Additional scan-card illustrations. */
.anim-rootapps .rootapps-phone { left:24px; top:18px; width:66px; height:76px; border:5px solid #9ac8ff; border-radius:16px; background:#0b1320; transform:rotate(-6deg); box-shadow:0 10px 18px rgba(0,0,0,.28); }
.anim-rootapps .rootapps-phone::before { content:''; position:absolute; left:23px; top:8px; width:14px; height:4px; border-radius:999px; background:#9ac8ff; opacity:.75; }
.anim-rootapps .rootapps-phone::after { content:'#'; position:absolute; left:18px; top:25px; width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:#ffc526; color:#11170f; font-size:18px; font-weight:900; }
.anim-rootapps .rootapps-grid { left:112px; top:25px; width:70px; height:58px; background:linear-gradient(90deg,#ffc526 0 30%,transparent 30% 36%,#8bff7a 36% 66%,transparent 66% 72%,#9ac8ff 72% 100%) 0 0/100% 24px no-repeat, linear-gradient(90deg,#ff8547 0 30%,transparent 30% 36%,#9ac8ff 36% 66%,transparent 66% 72%,#8bff7a 72% 100%) 0 34px/100% 24px no-repeat; border-radius:6px; animation:appsPulse 2.2s ease-in-out infinite; }
.anim-rootapps .rootapps-scan { right:22px; top:28px; width:52px; height:52px; border:4px solid rgba(139,255,122,.82); border-radius:50%; box-shadow:0 0 18px rgba(139,255,122,.28); animation:scanOrbit 2.7s linear infinite; }
.anim-rootapps .rootapps-scan::after { content:''; position:absolute; right:-15px; bottom:-8px; width:25px; height:6px; border-radius:999px; background:#8bff7a; transform:rotate(48deg); transform-origin:left center; }

.anim-usb .usb-plug { left:24px; top:36px; width:68px; height:34px; border-radius:9px 4px 4px 9px; background:linear-gradient(90deg,#ffc526,#ff9f3f); box-shadow:0 0 16px rgba(255,197,38,.18); }
.anim-usb .usb-plug::before { content:''; position:absolute; right:-24px; top:7px; width:26px; height:20px; border:4px solid #9ac8ff; border-left:none; border-radius:0 6px 6px 0; }
.anim-usb .usb-plug::after { content:''; position:absolute; left:18px; top:10px; width:10px; height:5px; background:#151c25; box-shadow:18px 0 0 #151c25; }
.anim-usb .usb-cable { left:92px; top:50px; width:70px; height:4px; background:#9ac8ff; border-radius:999px; }
.anim-usb .usb-cable::after { content:''; position:absolute; right:-5px; top:-22px; width:42px; height:42px; border:4px solid #9ac8ff; border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:rotate(45deg); }
.anim-usb .usb-bug { right:40px; top:28px; width:42px; height:48px; border-radius:17px 17px 13px 13px; background:#ff5a70; box-shadow:0 0 18px rgba(255,90,112,.30); animation:bugMove 1.9s ease-in-out infinite; }
.anim-usb .usb-bug::before { content:''; position:absolute; left:8px; top:-10px; width:26px; height:16px; border-radius:14px 14px 0 0; background:#ff5a70; }
.anim-usb .usb-bug::after { content:''; position:absolute; inset:9px -9px auto; height:4px; background:#ff8aa0; box-shadow:0 12px 0 #ff8aa0,0 24px 0 #ff8aa0; }
.anim-usb .usb-alert { right:18px; top:16px; width:20px; height:20px; border-radius:50%; background:#ffc526; color:#15190d; }
.anim-usb .usb-alert::before { content:'!'; position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-weight:900; }

.anim-frameworks .framework-phone { left:22px; top:18px; width:64px; height:76px; border:5px solid #9ac8ff; border-radius:16px; background:#0b1320; transform:rotate(-5deg); }
.anim-frameworks .framework-phone::after { content:''; position:absolute; left:14px; top:22px; width:28px; height:28px; border-radius:50%; background:#ffc526; box-shadow:inset 0 0 0 7px rgba(18,22,12,.28); }
.anim-frameworks .framework-modules { left:108px; top:22px; width:76px; height:62px; background:linear-gradient(135deg,#9ac8ff 0 48%,#1a2c44 48% 52%,#8bff7a 52% 100%); clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%); animation:moduleFloat 2.3s ease-in-out infinite; }
.anim-frameworks .framework-modules::before { content:''; position:absolute; left:23px; top:18px; width:30px; height:26px; border:5px solid #07110a; border-top-color:transparent; border-left-color:transparent; transform:rotate(45deg); opacity:.78; }
.anim-frameworks .framework-hook { right:34px; top:22px; width:52px; height:58px; border:7px solid #ff8547; border-left-color:transparent; border-top-color:transparent; border-radius:0 0 38px 0; transform:rotate(10deg); }
.anim-frameworks .framework-hook::before { content:''; position:absolute; right:25px; top:-2px; width:23px; height:7px; border-radius:999px; background:#ff8547; transform:rotate(-32deg); }
.anim-frameworks .framework-status { right:20px; bottom:16px; width:17px; height:17px; border-radius:50%; background:#8bff7a; box-shadow:0 0 16px rgba(139,255,122,.72); animation:blink 1.35s infinite; }
.journey-steps { display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap; gap:0; }
.journey-step { flex:1 1 230px; max-width:290px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.journey-icon { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 17px; color:var(--accent); border-radius:18px; border:1px solid rgba(255,196,0,.32); background:rgba(255,196,0,.07); }
.step-outcome .journey-icon { color:var(--green); border-color:rgba(57,229,140,.30); background:rgba(57,229,140,.07); }
.journey-arrow { display:flex; align-items:center; padding:0 14px; color:var(--accent); font-size:1.45rem; }
[dir="rtl"] .journey-arrow { transform:scaleX(-1); }
.legal-section { max-width:780px; margin-left:auto; margin-right:auto; }
.legal-section details { overflow:hidden; margin-bottom:11px; border:1px solid var(--line); border-radius:15px; background:rgba(13,17,15,.75); backdrop-filter:blur(10px); }
.legal-section summary { position:relative; padding:19px 54px 19px 20px; cursor:pointer; color:var(--text); font-size:1rem; font-weight:800; text-align:left; list-style:none; transition:background .2s ease; }
[dir="rtl"] .legal-section summary { padding:19px 20px 19px 54px; text-align:right; }
.legal-section summary::-webkit-details-marker { display:none; }
.legal-section summary:hover { background:rgba(255,255,255,.025); }
.legal-section summary::after { content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); color:var(--accent); font-size:1.45rem; font-weight:400; transition:transform .2s ease; }
[dir="rtl"] .legal-section summary::after { right:auto; left:20px; }
.legal-section details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.details-content { padding:0 20px 22px; border-top:1px solid var(--line); color:var(--muted); text-align:left; }
[dir="rtl"] .details-content { text-align:right; }
.details-content p, .details-content ul { margin-top:15px; }
.details-content ul { padding-left:22px; }
[dir="rtl"] .details-content ul { padding-left:0; padding-right:22px; }
.details-content a { color:var(--accent); text-decoration:none; }
.details-content a:hover { text-decoration:underline; }
footer { margin-top:110px; padding:34px 0 42px; border-top:1px solid var(--line); color:var(--muted-2); font-size:.82rem; }
footer p + p { margin-top:4px; }
@keyframes logo-enter { from{opacity:0; transform:translateY(14px) scale(.88);} to{opacity:1; transform:none;} }
@keyframes console-enter { from{opacity:0; transform:perspective(1200px) rotateY(-10deg) rotateX(4deg) translateY(30px) scale(.96);} to{opacity:1; transform:perspective(1200px) rotateY(-4deg) rotateX(1.5deg);} }
@keyframes console-float { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
@keyframes glass-sheen { 0%,70% { transform:translateX(-120%);} 92%,100% { transform:translateX(120%);} }
@keyframes status-pulse { 0%,100% { opacity:.65; transform:scale(.9);} 50% { opacity:1; transform:scale(1.12);} }
@keyframes stage-breathe { 0%,100% { opacity:.55; transform:translate(-50%,-50%) scale(.96);} 50% { opacity:1; transform:translate(-50%,-50%) scale(1.04);} }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes spin-reverse { to { transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes sweep { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes scan-line { 0%,100%{top:13%; opacity:0;} 15%{opacity:.7;} 50%{opacity:.95;} 85%{opacity:.5;} 100%{top:86%; opacity:0;} }
@keyframes core-pulse { 0%{opacity:.65; transform:scale(.86);} 70%,100%{opacity:0; transform:scale(1.22);} }
@keyframes node-enter { from{opacity:0; transform:translate(-50%,-50%) scale(.78);} to{opacity:1; transform:translate(-50%,-50%) scale(1);} }
@keyframes node-float { 0%,100% { margin-top:0; } 50% { margin-top:-5px; } }
@keyframes node-status { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes bars { to { height:100%; opacity:1; } }
@keyframes ping { 0%{transform:scale(.5); opacity:1;} 100%{transform:scale(2.5); opacity:0;} }
@keyframes unlock { 0%,35%,100%{transform:rotate(0deg);} 50%,85%{transform:rotate(-28deg);} }
@keyframes blink { 0%,49%{opacity:1;} 50%,100%{opacity:.2;} }
@keyframes drawCheck { 0%{clip-path: inset(0 100% 0 0);} 40%,100%{clip-path: inset(0 0 0 0);} }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }
@keyframes barsMove { 50%{transform:translateY(-4px);} }
@keyframes heatWave { 0%,100%{opacity:.5; transform:scale(.92);} 50%{opacity:1; transform:scale(1.06);} }
@keyframes gearSpin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes switchGlow { 0%,100%{transform:translateX(0);} 50%{transform:translateX(4px);} }
@keyframes appsPulse { 0%,100%{opacity:.72; transform:translateY(0);} 50%{opacity:1; transform:translateY(-3px);} }
@keyframes scanOrbit { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes bugMove { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(5px) rotate(2deg);} }
@keyframes moduleFloat { 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-5px) rotate(3deg);} }

@media (max-width:1080px) { .hero{min-height:auto; padding-top:100px;} .hero-grid{grid-template-columns:1fr; gap:66px;} .hero-copy{max-width:760px; margin:0 auto; text-align:center;} [dir="rtl"] .hero-copy{text-align:center;} .brand-lockup,.hero-proof,.cta-row{justify-content:center;} .tagline,.availability-note{margin-left:auto; margin-right:auto;} .security-visual-wrap{width:min(690px, 100%); margin:0 auto;} .security-console{transform:none; animation-name:console-enter-flat, console-float;} @keyframes console-enter-flat { from { opacity:0; transform:translateY(30px) scale(.96);} to { opacity:1; transform:none;} } }
@media (max-width:760px) { .container{width:min(100% - 28px, 1240px);} .hero{padding:90px 0 54px;} .hero::before{width:100%; height:91%; border-radius:32px;} .lang-switcher{top:20px;} .brand-lockup{margin-bottom:25px;} h1{font-size:clamp(3rem, 13vw, 5rem);} .security-stage{min-height:490px;} .metric-node{min-width:92px; grid-template-columns:26px auto 6px; gap:6px; height:38px; padding:4px 7px 4px 5px; font-size:.49rem;} .node-icon{width:26px; height:26px;} .node-icon svg{width:15px; height:15px;} .security-core{width:160px;} .console-footer > div{padding:0 9px;} .console-footer b{font-size:.5rem;} main > section{margin-top:86px;} .journey-steps{gap:12px;} .journey-arrow{display:none;} }
@media (max-width:520px) { .container{width:min(100% - 20px, 1240px);} .lang-switcher{position:absolute; top:16px; right:0;} [dir="rtl"] .lang-switcher{right:auto; left:0;} .lang-switcher .lang-menu{grid-template-columns:1fr; max-height:330px; overflow-y:auto;} .hero{padding-top:82px;} .brand-lockup{gap:12px;} .logo{width:62px; height:62px; border-radius:17px;} .brand-kicker{font-size:.64rem;} .brand-version{font-size:.59rem;} .tagline{font-size:1rem;} .hero-proof{display:grid; grid-template-columns:1fr;} .proof-pill{justify-content:center;} .cta-row{display:grid; grid-template-columns:1fr; width:100%;} .cta-button,.qr-card{width:100%;} .qr-card{justify-content:center;} .security-stage{min-height:430px;} .console-topbar{height:46px; padding:0 13px;} .console-brand, .console-code { font-size:.52rem; letter-spacing:.11em; } .metric-node{min-width:74px; grid-template-columns:22px auto; height:34px; padding:4px 6px 4px 4px; font-size:.42rem; letter-spacing:.08em;} .metric-node i{display:none;} .node-icon{width:22px; height:22px; border-radius:7px;} .node-icon svg{width:13px; height:13px;} .node-root{--node-y:10%;} .node-privacy{--node-y:89%;} .node-boot,.node-selinux{--node-x:83%;} .node-network,.node-traffic{--node-x:17%;} .security-core{width:132px;} .core-shield{width:38px; height:38px;} .security-core strong{font-size:1.03rem;} .telemetry{display:none;} .console-footer{min-height:61px;} .console-footer small{display:none;} .console-footer b{font-size:.43rem;} .console-footer span{width:6px; height:6px;} h2{font-size:2rem;} .usecase-card, .scan-card{padding:22px;} footer{margin-top:80px;} }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
body::-webkit-scrollbar { width:10px; }
body::-webkit-scrollbar-track { background:#030504; }
body::-webkit-scrollbar-thumb { background:linear-gradient(var(--accent), #9c7600); border-radius:999px; border:2px solid #030504; }


/* =========================================================
   AGDM use-case cards v4 — reference-matched production block
   ========================================================= */
.agdm-usecases-v4 {
    width: min(1320px, calc(100% - 40px));
    margin: 112px auto 0;
    text-align: left;
}
.agdm-usecase-group + .agdm-usecase-group { margin-top: 22px; }
.agdm-usecase-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 15px;
}
.agdm-usecase-heading__bar {
    flex: 0 0 7px;
    width: 7px;
    height: 30px;
    border-radius: 99px;
    background: #ffc400;
    box-shadow: 0 0 16px rgba(255,196,0,.12);
}
.agdm-usecase-heading h2 {
    margin: 0;
    color: #f4f6f5;
    font-size: clamp(2rem, 2.6vw, 2.55rem);
    line-height: 1;
    letter-spacing: -.035em;
    font-weight: 800;
}
.agdm-personal-grid,
.agdm-business-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px 11px;
}
.agdm-usecase-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(184, 199, 192, .24);
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 8%, rgba(61, 75, 69, .08), transparent 37%),
        linear-gradient(145deg, rgba(14, 19, 17, .99), rgba(8, 12, 11, .995));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018), 0 9px 24px rgba(0,0,0,.14);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.agdm-usecase-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,196,0,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 14px 30px rgba(0,0,0,.22);
}
.agdm-usecase-card--personal {
    min-height: 260px;
    padding: 8px 25px 18px;
    display: flex;
    flex-direction: column;
}
.agdm-usecase-art {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.agdm-usecase-art--personal {
    flex: 0 0 115px;
    height: 115px;
    margin-bottom: 1px;
}
.agdm-usecase-art img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.26));
}
.agdm-usecase-copy h3,
.agdm-business-card h3 {
    margin: 0;
    color: #f4f6f5;
    font-size: 1.06rem;
    line-height: 1.2;
    letter-spacing: -.012em;
    font-weight: 800;
}
.agdm-usecase-copy p,
.agdm-business-card p {
    margin: 6px 0 0;
    color: rgba(224, 231, 227, .74);
    font-size: .88rem;
    line-height: 1.43;
}
.agdm-business-grid { gap: 8px 11px; }
.agdm-business-card {
    min-height: 181px;
    padding: 10px 24px 13px;
    display: flex;
    flex-direction: column;
}
.agdm-business-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 70px;
}
.agdm-business-card__art {
    flex: 0 0 auto;
    width: 126px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.agdm-business-card__art img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.26));
}
.agdm-business-card__art--wide {
    width: 270px;
    height: 82px;
    justify-content: flex-start;
}
.agdm-business-card__art--shared { width: 190px; }
.agdm-business-card--stacked { padding-top: 6px; }
.agdm-business-card--stacked .agdm-business-card__copy { margin-top: -2px; }
.agdm-business-card--stacked .agdm-business-card__copy p { margin-top: 3px; }
.agdm-business-card h3 { font-size: .98rem; line-height: 1.18; }
.agdm-business-card p { margin-top: 6px; font-size: .79rem; line-height: 1.37; }
.agdm-business-card--left-art .agdm-business-card__top { justify-content: flex-start; }
.agdm-business-card--left-art h3 { flex: 1 1 auto; }
.agdm-business-card--right-art h3 { flex: 1 1 auto; }
.agdm-usecase-note {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 8px 24px;
    min-height: 58px;
    border: 1px solid rgba(184, 199, 192, .23);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(14, 19, 17, .99), rgba(8, 12, 11, .995));
}
.agdm-usecase-note__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
}
.agdm-usecase-note__icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: #ffc400;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.agdm-usecase-note p {
    margin: 0;
    color: rgba(225, 232, 228, .78);
    font-size: .82rem;
    line-height: 1.35;
}
@media (max-width: 1080px) {
    .agdm-personal-grid,
    .agdm-business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agdm-usecase-card--personal { min-height: 270px; }
    .agdm-business-card { min-height: 190px; }
}
@media (max-width: 720px) {
    .agdm-usecases-v4 { width: min(100% - 28px, 1320px); margin-top: 86px; }
    .agdm-usecase-group + .agdm-usecase-group { margin-top: 34px; }
    .agdm-usecase-heading { gap: 11px; margin-bottom: 12px; }
    .agdm-usecase-heading__bar { width: 5px; flex-basis: 5px; height: 27px; }
    .agdm-usecase-heading h2 { font-size: 1.85rem; }
    .agdm-personal-grid,
    .agdm-business-grid { grid-template-columns: 1fr; gap: 11px; }
    .agdm-usecase-card--personal { min-height: 0; padding: 8px 20px 20px; }
    .agdm-usecase-art--personal { height: 122px; flex-basis: 122px; }
    .agdm-business-card { min-height: 0; padding: 12px 20px 16px; }
    .agdm-business-card__art--wide { width: min(270px, 78vw); }
    .agdm-usecase-note { grid-template-columns: 38px minmax(0,1fr); padding: 11px 14px; }
    .agdm-usecase-note p br { display: none; }
}
@media (max-width: 430px) {
    .agdm-usecase-heading h2 { font-size: 1.58rem; }
    .agdm-usecase-card--personal { padding-left: 17px; padding-right: 17px; }
    .agdm-usecase-copy h3 { font-size: 1rem; }
    .agdm-usecase-copy p { font-size: .84rem; }
    .agdm-business-card__top { align-items: center; }
    .agdm-business-card__art { width: 105px; height: 68px; }
    .agdm-business-card__art--shared { width: 145px; }
    .agdm-business-card h3 { font-size: .92rem; }
    .agdm-business-card p { font-size: .78rem; }
}


/* =========================================================
   v8.3.4 — undistorted single carbon background + equal cards
   ========================================================= */
html {
    min-height: 100%;
    background: #020403;
}
body {
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    background: transparent !important;
}
/* One source image, no tiling and no stretching. The image keeps its
   original proportions and is fixed behind the whole scrolling page. */
body::before {
    content: "" !important;
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-color: #020403;
    background-image: url("carbon-bg.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: brightness(.62) contrast(1.08) saturate(.72);
    opacity: .86;
}
body::after {
    content: "" !important;
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 77% 12%, rgba(255,196,0,.045), transparent 27%),
        radial-gradient(circle at 18% 2%, rgba(57,229,140,.018), transparent 23%),
        linear-gradient(180deg, rgba(2,4,3,.42) 0%, rgba(2,4,3,.58) 48%, rgba(2,4,3,.72) 100%);
}
.hero {
    isolation: isolate;
}
.agdm-business-card__art--crypto {
    width: 205px;
    height: 82px;
}
.agdm-business-card__art--crypto img {
    max-width: 100%;
    max-height: 100%;
}
.agdm-personal-grid,
.agdm-business-grid {
    grid-auto-rows: 300px;
}
.agdm-usecase-card--personal,
.agdm-business-card {
    width: 100%;
    height: 300px;
    min-height: 300px;
}
.agdm-business-card {
    padding-top: 15px;
    padding-bottom: 16px;
}
.agdm-business-card__top {
    min-height: 88px;
}
.agdm-business-card p {
    font-size: .82rem;
    line-height: 1.43;
}
@media (max-width: 720px) {
    .agdm-personal-grid,
    .agdm-business-grid {
        grid-auto-rows: auto;
    }
    .agdm-usecase-card--personal,
    .agdm-business-card {
        height: auto;
        min-height: 0;
    }
}
@media (max-width: 430px) {
    .agdm-business-card__art--crypto {
        width: 150px;
    }
}


/* =========================================================
   v8.3.7 — clearer scan cards, no duplicate checks
   ========================================================= */
.scan-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}
.scan-card {
    min-width: 0;
}
.scan-card__anim {
    height: 112px;
    isolation: isolate;
}

/* Certificate and key illustration. */
.anim-testkeys .test-certificate {
    left: 24px;
    top: 18px;
    width: 92px;
    height: 76px;
    border: 3px solid #9ac8ff;
    border-radius: 12px;
    background: linear-gradient(180deg, #101b2b, #09111c);
    box-shadow: 0 10px 18px rgba(0,0,0,.25);
}
.anim-testkeys .test-certificate::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 15px;
    width: 54px;
    height: 4px;
    border-radius: 999px;
    background: #9ac8ff;
    box-shadow: 0 13px 0 rgba(154,200,255,.62), 0 26px 0 rgba(154,200,255,.38);
}
.anim-testkeys .test-certificate::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffc526;
    box-shadow: inset 0 0 0 5px rgba(17,23,15,.24), 0 0 14px rgba(255,197,38,.24);
}
.anim-testkeys .test-key {
    left: 144px;
    top: 39px;
    width: 24px;
    height: 24px;
    border: 6px solid #8bff7a;
    border-radius: 50%;
    animation: testKeyTurn 2.4s ease-in-out infinite;
}
.anim-testkeys .test-key::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 6px;
    width: 52px;
    height: 7px;
    border-radius: 999px;
    background: #8bff7a;
    box-shadow: 24px 9px 0 -1px #8bff7a;
}
.anim-testkeys .test-stamp {
    right: 30px;
    top: 22px;
    width: 38px;
    height: 38px;
    border: 3px solid #ff8547;
    border-radius: 50%;
    opacity: .82;
    animation: testStamp 2.4s ease-in-out infinite;
}
.anim-testkeys .test-stamp::before {
    content: "!";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ff8547;
    font-size: 24px;
    font-weight: 950;
}

/* Technical card illustration refinements. */
.anim-usb .usb-bug {
    width: 38px;
    height: 42px;
    right: 44px;
    top: 30px;
}

/* Calm, purposeful motion instead of decorative movement. */
.anim-root .pulse-ring,
.anim-privacy .privacy-wave { animation-duration: 2.8s; }
.anim-network .down-arrow { animation-duration: 2.2s; }
.anim-traffic .traffic-bars { animation-duration: 2.8s; }
.anim-heat .heat-wave { animation-duration: 2.4s; }
.anim-developer .gear { animation-duration: 7s; }
.anim-usb .usb-bug { animation-duration: 2.6s; }
.anim-frameworks .framework-modules { animation-duration: 2.8s; }

@keyframes testKeyTurn {
    0%, 30%, 100% { transform: rotate(0deg); }
    48%, 70% { transform: rotate(18deg); }
}
@keyframes testStamp {
    0%, 35%, 100% { transform: scale(.88); opacity: .45; }
    50%, 75% { transform: scale(1); opacity: 1; }
}
@media (max-width: 1120px) {
    .scan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .scan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .scan-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   Journey cards v9 — human illustrations reused from v8_3
   ========================================================= */
.journey-section {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
.journey-section > h2 {
    margin-bottom: 36px;
}
.journey-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
}
.journey-step {
    max-width: none;
    min-height: 390px;
    padding: 22px 24px 27px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}
.journey-step h3 {
    margin: 8px 0 10px;
    font-size: 1.12rem;
    line-height: 1.28;
}
.journey-step p {
    margin: 0;
    line-height: 1.58;
}
.journey-visual {
    position: relative;
    width: 100%;
    height: 152px;
    margin-bottom: 3px;
    overflow: hidden;
    border-radius: 13px;
    border: 1px solid rgba(176, 195, 186, .12);
    background:
        radial-gradient(circle at 58% 48%, rgba(78, 110, 96, .12), transparent 42%),
        linear-gradient(145deg, rgba(8, 13, 11, .66), rgba(4, 8, 7, .28));
}
.journey-visual::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 16px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .33);
    filter: blur(7px);
}
.journey-person {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 10px;
    width: auto;
    height: 126px;
    transform: translateX(-50%);
    object-fit: contain;
    filter: drop-shadow(0 11px 13px rgba(0, 0, 0, .32));
    animation: journeyPersonFloat 4.2s ease-in-out infinite;
}
.journey-question {
    position: absolute;
    z-index: 4;
    color: #ffc526;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 16px rgba(255, 197, 38, .42);
    animation: journeyQuestionPulse 2.1s ease-in-out infinite;
}
.journey-question--one {
    top: 20px;
    right: 22%;
    font-size: 2.25rem;
}
.journey-question--two {
    top: 52px;
    left: 20%;
    font-size: 1.35rem;
    animation-delay: -.75s;
}
.journey-warning-dot {
    position: absolute;
    z-index: 4;
    right: 16%;
    bottom: 28px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff596f;
    box-shadow: 0 0 0 0 rgba(255, 89, 111, .5);
    animation: journeyWarningPulse 1.7s ease-out infinite;
}
.journey-visual--scan {
    background:
        radial-gradient(circle at 38% 46%, rgba(255, 197, 38, .09), transparent 38%),
        linear-gradient(145deg, rgba(8, 13, 11, .66), rgba(4, 8, 7, .28));
}
.journey-scan-ring {
    position: absolute;
    z-index: 3;
    left: 29%;
    top: 45%;
    width: 52px;
    height: 52px;
    border: 2px solid rgba(255, 197, 38, .72);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.62);
    opacity: 0;
    animation: journeyScanRing 2.4s ease-out infinite;
}
.journey-scan-ring--two { animation-delay: 1.2s; }
.journey-scan-line {
    position: absolute;
    z-index: 5;
    left: 17%;
    top: 30px;
    width: 25%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #ffc526, transparent);
    box-shadow: 0 0 12px rgba(255, 197, 38, .56);
    animation: journeyScanLine 2.8s ease-in-out infinite;
}
.journey-scan-dot {
    position: absolute;
    z-index: 5;
    left: 29%;
    top: 45%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #72ff91;
    box-shadow: 0 0 17px rgba(114, 255, 145, .78);
    animation: journeyScanDot 1.4s ease-in-out infinite;
}
.journey-visual--result {
    background:
        radial-gradient(circle at 68% 43%, rgba(57, 229, 140, .12), transparent 40%),
        linear-gradient(145deg, rgba(8, 13, 11, .66), rgba(4, 8, 7, .28));
}
.journey-result-halo {
    position: absolute;
    z-index: 1;
    right: 18%;
    top: 26px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(80, 255, 137, .08);
    box-shadow: 0 0 28px rgba(80, 255, 137, .18);
    animation: journeyResultHalo 2.4s ease-in-out infinite;
}
.journey-result-shield {
    position: absolute;
    z-index: 4;
    right: 20%;
    top: 34px;
    width: 55px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 0 13px rgba(112, 255, 128, .35));
    animation: journeyShieldFloat 3s ease-in-out infinite;
}
.journey-result-check {
    position: absolute;
    z-index: 5;
    right: 13%;
    bottom: 25px;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #061008;
    background: #72ff91;
    font-size: 1.05rem;
    font-weight: 1000;
    box-shadow: 0 0 17px rgba(114, 255, 145, .38);
    animation: journeyCheckPop 2.2s ease-in-out infinite;
}
.journey-arrow {
    display: grid;
    place-items: center;
    padding: 0;
    color: #ffc526;
    font-size: 1.65rem;
    filter: drop-shadow(0 0 8px rgba(255, 197, 38, .25));
    animation: journeyArrowMove 1.8s ease-in-out infinite;
}
@keyframes journeyPersonFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-4px); }
}
@keyframes journeyQuestionPulse {
    0%, 100% { opacity: .45; transform: translateY(0) scale(.92); }
    50% { opacity: 1; transform: translateY(-4px) scale(1.08); }
}
@keyframes journeyWarningPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 89, 111, .48); }
    70%, 100% { box-shadow: 0 0 0 13px rgba(255, 89, 111, 0); }
}
@keyframes journeyScanRing {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
    25% { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.75); }
}
@keyframes journeyScanLine {
    0%, 100% { transform: translateY(0); opacity: .25; }
    50% { transform: translateY(82px); opacity: 1; }
}
@keyframes journeyScanDot {
    0%, 100% { transform: scale(.75); opacity: .5; }
    50% { transform: scale(1.15); opacity: 1; }
}
@keyframes journeyResultHalo {
    0%, 100% { transform: scale(.9); opacity: .48; }
    50% { transform: scale(1.08); opacity: 1; }
}
@keyframes journeyShieldFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-5px) rotate(1deg); }
}
@keyframes journeyCheckPop {
    0%, 100% { transform: scale(.86); opacity: .68; }
    50% { transform: scale(1.06); opacity: 1; }
}
@keyframes journeyArrowMove {
    0%, 100% { transform: translateX(-2px); opacity: .7; }
    50% { transform: translateX(3px); opacity: 1; }
}
@media (max-width: 900px) {
    .journey-steps {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .journey-arrow {
        min-height: 30px;
        transform: rotate(90deg);
    }
    .journey-step {
        min-height: 0;
    }
}
@media (max-width: 520px) {
    .journey-section > h2 { margin-bottom: 24px; }
    .journey-step { padding: 18px 18px 23px; }
    .journey-visual { height: 140px; }
    .journey-person { height: 116px; }
}
