/* ============================================================
   3D Anatomy online — page styles (layered on blog.css and site-chrome.css).
   Everything is scoped under .an3d. Palette = the Android app: deep teal ink,
   mint accent (#7ce2c8), bone (#e0d9c4). Type = IBM Plex Sans / Plex Sans Arabic.
   ============================================================ */
.an3d{
  --ink:#071216; --ink-2:#0c1b21; --ink-3:#122832; --line-d:rgba(160,230,212,.14);
  --mint:#7ce2c8; --mint-2:#3fd1ad; --mint-3:#0f8f74; --bone:#e0d9c4;
  --on-d:#eaf4f1; --soft-d:#9cb4b0;
  --paper:#f4f8f7; --card:#ffffff; --line:#d6e3e0; --ink-t:#0c1b21; --soft:#43575a;
  --ok:#11845f; --bad:#c2410c;
  --ease:cubic-bezier(.2,.8,.2,1);
  --coral:#0f8f74; --orange:#0b6f5a;
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background:var(--paper); color:var(--ink-t); overflow-x:clip;
}
html[lang="ar"] .an3d{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",Tahoma,"Segoe UI",Arial,sans-serif}
.an3d *{box-sizing:border-box}
.an3d [hidden]{display:none!important}
.an3d .an3d-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.an3d .an3d-narrow{max-width:860px}
.an3d section{scroll-margin-top:72px}
.an3d .an3d-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.an3d h1,.an3d h2,.an3d h3{font-family:inherit;margin:0;letter-spacing:-.02em}
html[lang="ar"] .an3d h1,html[lang="ar"] .an3d h2,html[lang="ar"] .an3d h3{letter-spacing:0}
.an3d .an3d-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-3)}
html[lang="ar"] .an3d .an3d-eyebrow{letter-spacing:0;font-size:.9rem}
.an3d .an3d-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}

/* ---------- buttons ---------- */
.an3d .an3d-btn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  border-radius:999px;padding:.88rem 1.4rem;text-decoration:none;line-height:1.15;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s,border-color .2s}
.an3d .an3d-btn svg{width:19px;height:19px;flex:none}
html[dir="rtl"] .an3d .an3d-btn svg{transform:scaleX(-1)}
.an3d .an3d-btn.primary{color:#062019;background:linear-gradient(100deg,#a4f0dc 0%,#7ce2c8 45%,#46cdaa 100%);box-shadow:0 10px 28px rgba(63,209,173,.28),inset 0 1px 0 rgba(255,255,255,.5)}
.an3d .an3d-btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(63,209,173,.38),inset 0 1px 0 rgba(255,255,255,.5);color:#062019}
.an3d .an3d-btn.ghost{color:inherit;background:transparent;border:1.5px solid currentColor;opacity:.92}
.an3d .an3d-btn.ghost:hover{transform:translateY(-2px);opacity:1}
.an3d .an3d-btn.light{color:var(--ink-t);background:#fff;border:1px solid var(--line);box-shadow:0 2px 10px rgba(7,18,22,.08)}
.an3d .an3d-btn.light:hover{transform:translateY(-2px);color:var(--ink-t)}
.an3d .an3d-btn.full{width:100%}
.an3d .an3d-btn.lg{padding:1.05rem 1.8rem;font-size:1.08rem}
.an3d a:focus-visible,.an3d button:focus-visible,.an3d input:focus-visible,.an3d summary:focus-visible{outline:3px solid var(--mint-2);outline-offset:3px}

/* ---------- hero (dark) ---------- */
.an3d .an3d-hero{position:relative;background:radial-gradient(1200px 600px at 75% 30%,#123a3a 0%,transparent 60%),linear-gradient(180deg,#081519 0%,#071216 100%);color:var(--on-d);padding:clamp(28px,5vw,64px) 0 clamp(36px,5vw,56px);overflow:hidden}
.an3d .an3d-glow{position:absolute;inset:auto -10% -40% auto;width:60vw;height:60vw;max-width:760px;max-height:760px;border-radius:50%;background:radial-gradient(circle,rgba(124,226,200,.16),transparent 65%);pointer-events:none}
.an3d .an3d-hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,56px);align-items:center}
.an3d .an3d-crumb ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 1.1rem;padding:0;font-size:.86rem;color:var(--soft-d)}
.an3d .an3d-crumb li+li::before{content:"/";margin-inline-end:.4rem;opacity:.6}
.an3d .an3d-crumb a{color:var(--soft-d);text-decoration:none}
.an3d .an3d-crumb a:hover{color:var(--mint)}
.an3d .an3d-hero .an3d-eyebrow{color:var(--mint)}
.an3d .an3d-hero h1{font-size:clamp(2.1rem,4.6vw,3.55rem);line-height:1.04;font-weight:700;margin:.8rem 0 0;color:#f4fbf9;text-wrap:balance}
html[lang="ar"] .an3d .an3d-hero h1{line-height:1.3;font-size:clamp(1.9rem,4.2vw,3.1rem)}
.an3d .an3d-lead{font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.6;color:#c4d6d2;margin:1.1rem 0 0;max-width:58ch}
html[lang="ar"] .an3d .an3d-lead{line-height:1.85}
.an3d .an3d-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:1.6rem}
.an3d .an3d-hero .an3d-btn.ghost{color:var(--on-d);border-color:rgba(234,244,241,.38)}
.an3d .an3d-lang{color:var(--soft-d);font-size:.92rem;text-decoration:underline;text-underline-offset:3px;margin-inline-start:.3rem}
.an3d .an3d-lang:hover{color:var(--mint)}
.an3d .an3d-facts{list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(14px,3vw,34px)}
.an3d .an3d-facts li{display:flex;flex-direction:column;gap:.15rem}
.an3d .an3d-facts b{font-size:1.55rem;font-weight:700;color:var(--mint);font-variant-numeric:tabular-nums}
.an3d .an3d-facts span{font-size:.82rem;color:var(--soft-d)}
.an3d .an3d-hero-art{margin:0;position:relative}
.an3d .an3d-hero-art img{display:block;width:auto;height:auto;max-width:100%;max-height:min(640px,72vh);margin-inline:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}

/* ---------- viewer ---------- */
.an3d .an3d-tool{background:linear-gradient(180deg,#071216 0%,#071216 55%,var(--paper) 55%);padding:0 0 clamp(40px,6vw,72px)}
.an3d .an3d-viewer{position:relative;border-radius:22px;overflow:hidden;background:radial-gradient(900px 520px at 50% 38%,#173a3f 0%,#0c1c22 55%,#081418 100%);
  border:1px solid var(--line-d);box-shadow:0 30px 80px rgba(3,10,12,.45),0 0 0 1px rgba(255,255,255,.03) inset;color:var(--on-d)}
.an3d .an3d-top{display:flex;align-items:center;gap:.7rem;padding:.8rem;border-bottom:1px solid var(--line-d);background:rgba(8,20,24,.6);position:relative;z-index:5}
.an3d .an3d-search{position:relative;flex:1;max-width:520px;display:flex;align-items:center}
.an3d .an3d-search>svg{position:absolute;inset-inline-start:.85rem;width:18px;height:18px;color:var(--soft-d);pointer-events:none}
.an3d .an3d-search input{width:100%;font:inherit;font-size:.98rem;color:var(--on-d);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.66rem 1rem;padding-inline-start:2.5rem;outline:none}
.an3d .an3d-search input::placeholder{color:#7f9894}
.an3d .an3d-search input:focus{border-color:var(--mint-2);background:rgba(255,255,255,.09)}
.an3d .an3d-results{position:absolute;top:calc(100% + 6px);inset-inline:0;list-style:none;margin:0;padding:.35rem;background:#0f2228;border:1px solid var(--line-d);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);max-height:min(60vh,420px);overflow:auto}
.an3d .an3d-results button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;padding:.55rem .7rem;border-radius:10px}
.an3d .an3d-results button:hover,.an3d .an3d-results button:focus-visible{background:rgba(124,226,200,.12)}
.an3d .an3d-results b{font-weight:600;color:var(--on-d)}
.an3d .an3d-results small{grid-column:1;color:var(--soft-d);font-size:.8rem}
.an3d .an3d-results svg{grid-row:1/3;grid-column:2;align-self:center;width:16px;height:16px;color:var(--mint)}
.an3d .an3d-results .none{padding:.7rem;color:var(--soft-d)}
.an3d .an3d-unlock{margin-inline-start:auto;display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-weight:700;font-size:.9rem;color:#062019;background:var(--mint);border:0;border-radius:999px;padding:.62rem 1rem;cursor:pointer;white-space:nowrap}
.an3d .an3d-unlock svg{width:16px;height:16px}
.an3d .an3d-unlock:hover{background:#9cebd7}
.an3d .an3d-viewer.unlocked .an3d-unlock{display:none}
.an3d .an3d-planok{margin-inline-start:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;font-weight:600;color:var(--mint)}
.an3d .an3d-planok svg{width:16px;height:16px}
.an3d .an3d-stage{position:relative;height:clamp(440px,68vh,720px);touch-action:none}
.an3d .an3d-canvas{display:block;width:100%;height:100%;cursor:grab;outline:none}
.an3d .an3d-canvas:active{cursor:grabbing}
.an3d .an3d-loader{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.8rem;color:var(--soft-d);font-size:.92rem;pointer-events:none;transition:opacity .4s}
.an3d .an3d-loader i{width:38px;height:38px;border-radius:50%;border:3px solid rgba(124,226,200,.2);border-top-color:var(--mint);animation:an3dspin .9s linear infinite}
.an3d .an3d-viewer.ready .an3d-loader{opacity:0}
@keyframes an3dspin{to{transform:rotate(360deg)}}
.an3d .an3d-tools{position:absolute;top:.8rem;inset-inline-end:.8rem;display:flex;flex-direction:column;gap:.45rem;z-index:3}
.an3d .an3d-tools button{display:flex;align-items:center;gap:.5rem;font:inherit;font-size:.84rem;font-weight:600;color:var(--on-d);background:rgba(10,26,31,.78);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.5rem .7rem;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.an3d .an3d-tools button svg{width:18px;height:18px;flex:none}
.an3d .an3d-tools button:hover{background:rgba(22,52,60,.9)}
.an3d .an3d-tools button[aria-pressed="true"]{background:var(--mint);color:#062019;border-color:var(--mint)}
.an3d .an3d-hint{position:absolute;bottom:.9rem;left:50%;transform:translateX(-50%);margin:0;padding:.42rem .85rem;border-radius:999px;background:rgba(8,20,24,.7);color:var(--soft-d);font-size:.84rem;white-space:nowrap;pointer-events:none;transition:opacity .5s}
.an3d .an3d-hint.gone{opacity:0}
.an3d .an3d-status{position:absolute;top:.9rem;left:50%;transform:translateX(-50%);margin:0;max-width:min(520px,80%);text-align:center;padding:.55rem .95rem;border-radius:12px;background:rgba(8,20,24,.86);border:1px solid var(--line-d);color:var(--on-d);font-size:.9rem;z-index:4}
.an3d-nogl .an3d-status{top:40%}
.an3d .an3d-tip{position:absolute;top:0;left:0;z-index:4;pointer-events:none;padding:.32rem .6rem;border-radius:8px;background:rgba(6,16,19,.9);border:1px solid var(--line-d);color:var(--on-d);font-size:.84rem;white-space:nowrap}
.an3d .an3d-card{position:absolute;bottom:.9rem;inset-inline-start:.9rem;z-index:4;width:min(360px,calc(100% - 1.8rem));padding:1rem 1.05rem .95rem;border-radius:16px;
  background:rgba(9,24,29,.9);border:1px solid var(--line-d);box-shadow:0 20px 50px rgba(0,0,0,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.an3d .an3d-card .an3d-kicker{margin:0 0 .3rem;font-size:.76rem;font-weight:600;color:var(--mint);letter-spacing:.04em;padding-inline-end:1.8rem}
.an3d .an3d-card h3{font-size:1.28rem;font-weight:700;color:#f4fbf9;line-height:1.25;padding-inline-end:1.6rem}
.an3d .an3d-alt{display:flex;flex-direction:column;gap:.12rem;margin:.35rem 0 0;color:var(--soft-d);font-size:.92rem}
.an3d .an3d-alt span:first-child{font-style:italic}
html[lang="ar"] .an3d .an3d-alt span:first-child{font-style:normal}
html[lang="ar"] .an3d .an3d-alt span.la{font-style:italic}
.an3d .an3d-alt span[dir="ltr"]{text-align:start}
html[lang="ar"] .an3d .an3d-alt span[dir="ltr"]{text-align:right}
.an3d .an3d-def{margin:.6rem 0 0;font-size:.86rem;color:#c4d6d2}
.an3d .an3d-def summary{cursor:pointer;color:var(--mint);font-weight:600;font-size:.82rem}
.an3d .an3d-def p{margin:.35rem 0 0;line-height:1.55;max-height:9.5em;overflow:auto;text-align:left}
.an3d .an3d-acts{display:flex;gap:.45rem;margin-top:.8rem}
.an3d .an3d-acts button{flex:1;font:inherit;font-size:.84rem;font-weight:600;color:var(--on-d);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:.48rem .4rem;cursor:pointer}
.an3d .an3d-acts button:hover{background:rgba(124,226,200,.16);border-color:rgba(124,226,200,.4)}
.an3d .an3d-x{position:absolute;top:.6rem;inset-inline-end:.6rem;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:0;background:rgba(255,255,255,.07);color:var(--on-d);cursor:pointer}
.an3d .an3d-x svg{width:16px;height:16px}
.an3d .an3d-x:hover{background:rgba(255,255,255,.14)}
.an3d .an3d-quizbar{position:absolute;top:.9rem;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.35rem .8rem;
  max-width:min(640px,calc(100% - 9rem));padding:.65rem 1rem;border-radius:16px;background:rgba(9,24,29,.92);border:1px solid var(--line-d);box-shadow:0 14px 40px rgba(0,0,0,.4);text-align:center;transition:background .25s,border-color .25s}
.an3d .an3d-quizbar .n{font-size:.76rem;color:var(--soft-d);width:100%}
.an3d .an3d-quizbar b{font-size:1.1rem;color:#f4fbf9}
.an3d .an3d-quizbar small{color:var(--soft-d);font-style:italic}
.an3d .an3d-quizbar button{font:inherit;font-size:.82rem;font-weight:600;color:var(--on-d);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.35rem .8rem;cursor:pointer}
.an3d .an3d-quizbar.ok{border-color:#3fd1ad;background:rgba(14,70,58,.95)}
.an3d .an3d-quizbar.bad{border-color:#f59e64;background:rgba(80,36,16,.95)}
.an3d .an3d-viewer.quizzing .an3d-tools button:not([data-tool="quiz"]):not([data-tool="present"]){opacity:.45;pointer-events:none}
.an3d .an3d-caption{display:none}
.an3d .an3d-chips{display:flex;gap:.5rem;padding:.75rem .8rem;border-top:1px solid var(--line-d);background:rgba(8,20,24,.6);overflow-x:auto;scrollbar-width:thin}
.an3d .an3d-chip{flex:none;display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.88rem;font-weight:600;color:var(--soft-d);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.5rem .9rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.an3d .an3d-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--c,rgba(255,255,255,.25));box-shadow:0 0 0 2px rgba(255,255,255,.06),0 0 10px -2px var(--c,transparent)}
.an3d .an3d-chip .lock{width:14px;height:14px;display:none;opacity:.8}
.an3d .an3d-chip.locked .lock{display:block}
.an3d .an3d-chip:hover{color:var(--on-d);border-color:rgba(124,226,200,.45)}
.an3d .an3d-chip.on{color:#062019;background:var(--mint);border-color:var(--mint)}
.an3d .an3d-chip.on .dot{box-shadow:0 0 0 2px rgba(6,32,25,.35)}
.an3d .an3d-chip.busy{animation:an3dpulse 1s ease-in-out infinite}
@keyframes an3dpulse{50%{opacity:.55}}
.an3d .an3d-credit{margin:.9rem .2rem 0;font-size:.8rem;line-height:1.55;color:var(--soft)}
.an3d .an3d-credit a{color:var(--mint-3)}

/* presentation mode */
.an3d .an3d-viewer.present{border-radius:0;border:0;display:flex;flex-direction:column;height:100vh;height:100dvh}
.an3d .an3d-viewer.present .an3d-stage{flex:1;height:auto}
.an3d .an3d-viewer.present .an3d-top,.an3d .an3d-viewer.present .an3d-hint,.an3d .an3d-viewer.present .an3d-card{display:none!important}
.an3d .an3d-viewer.present .an3d-tools{flex-direction:row;opacity:.35;transition:opacity .3s}
.an3d .an3d-viewer.present .an3d-tools:hover{opacity:1}
.an3d .an3d-viewer.present .an3d-tools button span{display:none}
.an3d .an3d-viewer.present .an3d-caption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.4rem 1.6rem;position:absolute;left:0;right:0;bottom:0;z-index:4;padding:1.2rem 2rem 1.5rem;
  background:linear-gradient(0deg,rgba(5,14,17,.92),rgba(5,14,17,0));pointer-events:none;text-align:center}
.an3d .an3d-viewer.present .an3d-caption:empty{display:none}
.an3d .an3d-viewer.present .an3d-caption b{font-size:clamp(1.8rem,3.6vw,3.2rem);color:#fff;width:100%}
.an3d .an3d-viewer.present .an3d-caption span{font-size:clamp(1.05rem,1.8vw,1.6rem);color:var(--mint)}
.an3d .an3d-viewer.present .an3d-quizbar{max-width:min(900px,90%)}
.an3d .an3d-viewer.present .an3d-quizbar b{font-size:clamp(1.4rem,2.6vw,2.2rem)}
.an3d .an3d-viewer.present .an3d-chips{opacity:.4;transition:opacity .3s}
.an3d .an3d-viewer.present .an3d-chips:hover{opacity:1}

/* ---------- sections (light) ---------- */
.an3d .an3d-sec{padding:clamp(56px,8vw,104px) 0;background:var(--paper)}
.an3d .an3d-sec.alt{background:#fff}
.an3d .an3d-head{max-width:760px;margin-bottom:clamp(26px,4vw,44px)}
.an3d .an3d-head h2,.an3d .an3d-split h2{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;font-weight:700;margin-top:.7rem;text-wrap:balance}
html[lang="ar"] .an3d .an3d-head h2,html[lang="ar"] .an3d .an3d-split h2{line-height:1.35}
.an3d .an3d-head p,.an3d .an3d-subp{color:var(--soft);font-size:1.06rem;line-height:1.65;margin:.9rem 0 0;max-width:62ch}
.an3d .an3d-how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,26px)}
.an3d .an3d-how li{background:#fff;border:1px solid var(--line);border-radius:20px;position:relative;overflow:hidden;box-shadow:0 18px 40px -26px rgba(7,18,22,.45)}
.an3d .an3d-stepshot{margin:0;background:#0b1c22;aspect-ratio:3/2;overflow:hidden}
.an3d .an3d-stepshot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.an3d .an3d-how li:hover .an3d-stepshot img{transform:scale(1.035)}
.an3d .an3d-steptxt{padding:1.75rem 1.35rem 1.45rem;position:relative}
.an3d .an3d-steptxt .n{position:absolute;top:-22px;inset-inline-start:1.2rem}
.an3d .an3d-how .n{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#7ce2c8,#3fd1ad);color:#062019;font-weight:700;margin-bottom:.9rem;box-shadow:0 8px 20px rgba(63,209,173,.35)}
.an3d .an3d-how h3,.an3d .an3d-use h3,.an3d .an3d-feat h3{font-size:1.14rem;font-weight:700;line-height:1.3}
.an3d .an3d-how p,.an3d .an3d-use p,.an3d .an3d-feat p{color:var(--soft);line-height:1.6;margin:.5rem 0 0;font-size:.97rem}
.an3d .an3d-uses{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
.an3d .an3d-use{border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -28px rgba(7,18,22,.5);display:flex;flex-direction:column}
.an3d .an3d-use figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:#0b1c22}
.an3d .an3d-use figure img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.an3d .an3d-use:hover figure img{transform:scale(1.04)}
.an3d .an3d-usetxt{padding:1.15rem 1.2rem 1.35rem}
.an3d .an3d-use .ic,.an3d .an3d-feat .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--ink-2);color:var(--mint);margin-bottom:1rem}
.an3d .an3d-use .ic svg,.an3d .an3d-feat .ic svg{width:24px;height:24px}
.an3d .an3d-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:center}
.an3d .an3d-present{background:linear-gradient(180deg,#071216,#0b1c22);color:var(--on-d)}
.an3d .an3d-present .an3d-eyebrow{color:var(--mint)}
.an3d .an3d-present h2{color:#f4fbf9}
.an3d .an3d-present .an3d-subp{color:#c4d6d2}
.an3d .an3d-shot{margin:0}
.an3d .an3d-shot img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line-d);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.an3d .an3d-points{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.75rem}
.an3d .an3d-points li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.55}
.an3d .an3d-points svg{width:20px;height:20px;flex:none;color:var(--mint);margin-top:.15rem}
.an3d .an3d-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.an3d .an3d-feat{padding:1.5rem 1.4rem;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,#f7fbfa,#eef6f4)}
.an3d .an3d-feat .ic3d{display:block;width:96px;height:96px;margin:-.5rem 0 .7rem -.4rem;filter:drop-shadow(0 12px 16px rgba(15,143,116,.25))}
.an3d .an3d-feat .ic3d img{width:100%;height:100%;display:block}
.an3d .an3d-android .an3d-split{grid-template-columns:.95fr 1.05fr}
.an3d .an3d-android .an3d-btn{margin-top:1.4rem}
.an3d .an3d-phones{margin:0}
.an3d .an3d-phones img{display:block;width:100%;height:auto;max-width:560px;margin-inline:auto}

/* pricing */
.an3d .an3d-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);align-items:stretch}
.an3d .an3d-plan{position:relative;display:flex;flex-direction:column;padding:1.6rem 1.4rem;border-radius:20px;background:#fff;border:1px solid var(--line)}
.an3d .an3d-plan.best{background:linear-gradient(180deg,#0c1b21,#10262d);color:var(--on-d);border-color:#1f4a50;box-shadow:0 24px 60px rgba(7,18,22,.25)}
.an3d .an3d-plan .tag{position:absolute;top:-12px;inset-inline-start:1.4rem;background:var(--mint);color:#062019;font-size:.74rem;font-weight:700;padding:.3rem .7rem;border-radius:999px}
.an3d .an3d-plan h3{font-size:1.12rem;font-weight:700}
.an3d .an3d-plan .pr{display:flex;align-items:baseline;gap:.45rem;margin:.7rem 0 0}
.an3d .an3d-plan .pr b{font-size:2.3rem;font-weight:700;letter-spacing:-.02em}
.an3d .an3d-plan .pr small{color:var(--soft)}
.an3d .an3d-plan.best .pr small,.an3d .an3d-plan.best .note{color:var(--soft-d)}
.an3d .an3d-plan .note{margin:.2rem 0 0;font-size:.86rem;color:var(--soft)}
.an3d .an3d-plan ul{list-style:none;margin:1.2rem 0 1.4rem;padding:0;display:grid;gap:.55rem;flex:1}
.an3d .an3d-plan li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem;line-height:1.45}
.an3d .an3d-plan li svg{width:18px;height:18px;flex:none;color:var(--mint-3);margin-top:.1rem}
.an3d .an3d-plan.best li svg{color:var(--mint)}
.an3d .an3d-plan.best .an3d-btn.ghost{color:var(--on-d)}
.an3d .an3d-paynote{margin:1.4rem auto 0;max-width:72ch;text-align:center;color:var(--soft);font-size:.9rem;line-height:1.6}

/* app line in the hero */
.an3d .an3d-applink{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 0;font-size:.95rem;color:var(--soft-d)}
.an3d .an3d-applink img{border-radius:8px}
.an3d .an3d-applink a{display:inline-flex;align-items:center;gap:.35rem;color:var(--mint);font-weight:600;text-decoration:none}
.an3d .an3d-applink a:hover{text-decoration:underline}
.an3d .an3d-applink svg{width:16px;height:16px}
html[dir="rtl"] .an3d .an3d-applink svg{transform:scaleX(-1)}
/* guides */
.an3d .an3d-guides{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.an3d .an3d-guide{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;box-shadow:0 18px 40px -28px rgba(7,18,22,.5);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.an3d .an3d-guide:hover{transform:translateY(-3px);box-shadow:0 24px 50px -26px rgba(7,18,22,.55)}
.an3d .an3d-guide img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:#0b1c22}
.an3d .an3d-guidetxt{display:flex;flex-direction:column;gap:.45rem;padding:1.1rem 1.2rem 1.3rem}
.an3d .an3d-guidetxt b{font-size:1.06rem;line-height:1.35;color:var(--ink-t)}
.an3d .an3d-guidetxt small{font-size:.9rem;line-height:1.55;color:var(--soft)}
.an3d .an3d-guidetxt em{font-style:normal;font-weight:700;font-size:.9rem;color:var(--mint-3)}
@media (max-width:959px){.an3d .an3d-guides{grid-template-columns:1fr;max-width:560px}}

/* faq */
.an3d .an3d-faq{display:grid;gap:.7rem}
.an3d .an3d-faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 1.2rem}
.an3d .an3d-faq summary{cursor:pointer;list-style:none;padding:1.05rem 0;font-weight:600;font-size:1.03rem;display:flex;justify-content:space-between;gap:1rem}
.an3d .an3d-faq summary::-webkit-details-marker{display:none}
.an3d .an3d-faq summary::after{content:"+";color:var(--mint-3);font-size:1.3rem;line-height:1}
.an3d .an3d-faq details[open] summary::after{content:"–"}
.an3d .an3d-faq details>div{padding:0 0 1.1rem;color:var(--soft);line-height:1.65}

/* final */
.an3d .an3d-final{position:relative;overflow:hidden;padding:clamp(80px,11vw,150px) 0;text-align:center;color:var(--on-d);background:#071216}
.an3d .an3d-finalbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.an3d .an3d-final::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 50% 55%,rgba(7,18,22,.55),transparent 70%)}
.an3d .an3d-final .an3d-wrap{position:relative}
.an3d .an3d-final h2{font-size:clamp(1.8rem,3.8vw,2.8rem);font-weight:700;color:#f4fbf9}
.an3d .an3d-final p{color:#c4d6d2;margin:.9rem auto 1.8rem;font-size:1.08rem}

/* plans dialog */
.an3d .an3d-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(3,10,12,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.an3d-modal-open{overflow:hidden}
body.an3d-modal-open #nask-fab{display:none}
@media (max-width:640px){body.an3d-viewing #nask-fab{opacity:0;pointer-events:none;transition:opacity .25s}}
.an3d .an3d-sheet{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;color:var(--ink-t);border-radius:22px;padding:1.7rem 1.5rem 1.4rem;box-shadow:0 40px 100px rgba(0,0,0,.45)}
.an3d .an3d-sheet .an3d-x{background:#eef4f2;color:var(--ink-t)}
.an3d .an3d-sheet h2{font-size:1.45rem;font-weight:700;padding-inline-end:2rem}
.an3d .an3d-sheet>p{color:var(--soft);line-height:1.6;margin:.6rem 0 1.1rem}
.an3d .an3d-mplans{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.an3d .an3d-mplan{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1rem 1rem;border-radius:16px;border:1px solid var(--line);background:var(--paper)}
.an3d .an3d-mplan.best{background:var(--ink-2);color:var(--on-d);border-color:var(--ink-2)}
.an3d .an3d-mplan em{position:absolute;top:-10px;inset-inline-end:.8rem;font-style:normal;font-size:.72rem;font-weight:700;background:var(--mint);color:#062019;padding:.22rem .6rem;border-radius:999px}
.an3d .an3d-mplan .p{font-size:1.7rem;font-weight:700;display:flex;align-items:baseline;gap:.35rem;margin-bottom:.5rem}
.an3d .an3d-mplan .p small{font-size:.82rem;font-weight:500;opacity:.75}
.an3d .an3d-mplan.best .an3d-btn.ghost{color:var(--on-d)}
.an3d .an3d-secure{display:flex;gap:.5rem;align-items:center;font-size:.84rem;color:var(--soft);margin:.9rem 0 0}
.an3d .an3d-secure svg{width:16px;height:16px;flex:none;color:var(--mint-3)}
.an3d .an3d-keyform{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.an3d .an3d-keyform label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.5rem}
.an3d .an3d-keyform div{display:flex;gap:.5rem}
.an3d .an3d-keyform input{flex:1;min-width:0;font:inherit;font-size:.92rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink-t)}
.an3d .an3d-keyform input:focus{outline:2px solid var(--mint-2);border-color:transparent}
.an3d .an3d-keymsg{min-height:1.3em;margin:.55rem 0 0;font-size:.88rem;color:var(--soft)}
.an3d .an3d-keymsg.ok{color:var(--ok)}
.an3d .an3d-keymsg.bad{color:var(--bad)}
.an3d .an3d-signout{all:unset;cursor:pointer;margin-top:.6rem;font-size:.82rem;color:var(--soft);text-decoration:underline}

/* reveal */
/* hidden only once the page script runs, so a page without JS still shows everything */
.an3d.an3d-js .an3d-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.an3d.an3d-js .an3d-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.an3d.an3d-js .an3d-reveal{opacity:1;transform:none;transition:none}.an3d .an3d-btn{transition:none}}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .an3d .an3d-uses{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:959px){
  .an3d .an3d-hero-in,.an3d .an3d-split,.an3d .an3d-android .an3d-split{grid-template-columns:1fr}
  .an3d .an3d-hero-art img{max-height:520px}
  .an3d .an3d-how,.an3d .an3d-feats{grid-template-columns:1fr 1fr}
  .an3d .an3d-plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .an3d .an3d-present .an3d-shot{order:2}
}
@media (max-width:640px){
  .an3d .an3d-facts{grid-template-columns:repeat(2,auto);gap:14px 28px}
  .an3d .an3d-how,.an3d .an3d-feats,.an3d .an3d-uses{grid-template-columns:1fr}
  .an3d .an3d-stage{height:min(78vh,620px)}
  .an3d .an3d-top{flex-wrap:wrap}
  .an3d .an3d-search{flex-basis:100%;max-width:none;order:2}
  .an3d .an3d-unlock,.an3d .an3d-planok{order:1;margin-inline-start:auto}
  .an3d .an3d-tools{top:.6rem;inset-inline-end:.6rem}
  .an3d .an3d-tools button{padding:.55rem}
  .an3d .an3d-tools button span{display:none}
  .an3d .an3d-card{inset-inline:.6rem;bottom:.6rem;width:auto}
  .an3d .an3d-quizbar{max-width:calc(100% - 4.5rem);left:.6rem;transform:none;inset-inline-start:.6rem}
  html[dir="rtl"] .an3d .an3d-quizbar{left:auto;right:.6rem}
  .an3d .an3d-hint{font-size:.78rem}
  .an3d .an3d-mplans{grid-template-columns:1fr}
  .an3d .an3d-keyform div{flex-direction:column}
}