/* Add after the existing theme CSS. All visual styles are scoped to .av. */
.hero.atinas-hero-enhanced { text-align:left; padding:76px 32px 84px; }
.atinas-hero-enhanced .hero-inner { display:grid; grid-template-columns:minmax(0,1.23fr) minmax(0,1fr); align-items:center; gap:48px; max-width:1320px; }
.atinas-hero-enhanced .hero-copy { min-width:0; }
.atinas-hero-enhanced h1 { font-size:clamp(25px,2.55vw,36px); line-height:1.75; letter-spacing:-.035em; }
.atinas-hero-enhanced .hero-cta-row { justify-content:flex-start; gap:20px; }
.atinas-hero-enhanced .sub { font-size:18px; }
.atinas-hero-enhanced .copy { font-size:16px; }
.av { --av-ink:#0b2942; --av-muted:#547078; --av-line:#d8e5e5; width:100%; min-width:0; color:var(--av-ink); font-size:14px; line-height:1.6; }
.av [hidden] { display:none!important; }
.av-top,.av-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.av-top { padding:0 4px 20px; }
.av-eyebrow { color:#d8e8ed; font-size:16px; font-weight:500; }
.av-example { color:#a9bdcb; font-size:10px; white-space:nowrap; }
.av-scene { position:relative; width:100%; aspect-ratio:1.18; }
.av-panel { position:absolute; inset:0; }
.av-board { position:absolute; inset:2% 0 10%; border:0; background:transparent; opacity:1; transition:opacity 1s; }
.av-board-heading { padding:16px 18px; color:#ecf5f5; font-size:13px; }
.av-board-heading span { float:right; font-size:10px; color:#a9c2cc; }
.av-columns { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; color:#a3d9d6; font-size:11px; padding:0 8px; }
.av-tile { position:absolute; left:calc(3% + var(--x)*32%); top:calc(25% + var(--y)*29%); width:30%; height:25%; background:#f8fbfa; border:1px solid #d8e5e5; border-radius:8px; padding:12px 10px; box-shadow:0 6px 18px #02182715; transition:transform 1.25s cubic-bezier(.22,.8,.25,1), background 1s; }
.av-tile i { display:block; color:#678286; font-size:10px; font-style:normal; margin-bottom:6px; }
.av-tile strong { display:block; font-size:14px; white-space:nowrap; }
.av-tile small { display:block; font-size:9px; color:#607b81; margin-top:3px; white-space:nowrap; }
.av-tile b { position:absolute; top:9px; right:10px; color:#16827c; font-size:13px; transition:opacity .6s; }
.av-result { position:absolute; bottom:0; left:0; width:100%; text-align:center; color:#b5e9e2; font-size:13px; transition:opacity .7s, transform .7s; }
.av[data-stage="start"] .av-tile,.av[data-stage="start"] .av-module { transform:translate(var(--dx),var(--dy)) rotate(var(--r)); }
.av[data-stage="start"] .av-board,.av[data-stage="start"] .av-dashboard { opacity:0; }
.av:not([data-stage="done"]) .av-result,.av:not([data-stage="done"]) .av-tile b { opacity:0; }
.av:not([data-stage="done"]) .av-result { transform:translateY(5px); }
.av-bottom { min-height:48px; margin-top:18px; padding-top:15px; border-top:1px solid #385268; }
.av-caption { color:#c0d5dd; margin:0; font-size:13px; }
.av-window-heading { display:flex; align-items:center; justify-content:space-between; gap:5px; border-bottom:1px solid var(--av-line); padding:14px 18px; font-size:13px; font-weight:700; }
.av-window-heading>span { font-size:9px; font-weight:400; color:#527276; }
.av-busy { position:absolute; inset:1% 8% 12%; transition:opacity .6s,transform .8s; }
.av-busy-title { color:#c0d5dd; margin-bottom:12px; font-size:13px; }
.av-slip { background:#f2f5f4; border:1px solid #d7e0df; border-radius:6px; padding:9px 16px; font-size:12px; margin-top:5px; transform:translateX(-12px); }
.av-slip:nth-child(even) { transform:translateX(12px); }
.av-slip span { float:right; color:#809491; font-size:10px; }
.av-review { position:absolute; inset:5% 2% 13%; background:#f7faf9; border:1px solid var(--av-line); border-radius:12px; box-shadow:0 12px 35px #00172524; transition:opacity .8s,transform .8s; }
.av-review-main { padding:22px; }
.av-tag { display:inline-block; color:#20766f; background:#e1f0eb; border-radius:4px; padding:3px 8px; font-size:10px; }
.av-review h3 { margin:14px 0 10px; font-size:23px; letter-spacing:-.02em; }
.av-review p { font-size:12px; color:#5a737a; margin:0 0 18px; }
.av-ready { display:flex; gap:8px; font-size:10px; color:#347c76; margin-bottom:18px; }
.av-mock-button { background:#0b2942; color:white; border-radius:6px; padding:12px 14px; font-size:12px; }
.av-mock-button span { float:right; color:#7fd9d9; }
.av[data-stage="start"] .av-review { opacity:0; transform:translateY(14px) scale(.97); }
.av:not([data-stage="start"]) .av-busy { opacity:0; transform:translateY(-8px) scale(.97); }
.av-app { position:absolute; inset:0 2%; border:1px solid var(--av-line); background:#f8fbfa; border-radius:12px; overflow:hidden; }
.av-received { margin:14px 18px 10px; padding-bottom:12px; border-bottom:1px solid var(--av-line); }
.av-received strong { display:block; font-size:14px; margin:7px 0 2px; }
.av-received small { font-size:10px; color:#5a737a; }
.av-steps { list-style:none; padding:0 18px; margin:0; }
.av-steps li { display:flex; gap:10px; align-items:center; padding:6px 0; font-size:12px; color:#6c7e85; transition:color .4s; }
.av-steps i { font-style:normal; font-size:10px; display:grid; place-items:center; width:21px; height:21px; border:1px solid #d4dede; border-radius:50%; color:transparent; }
.av-steps small { margin-left:auto; font-size:9px; opacity:0; }
.av-steps .is-complete { color:#153f45; }
.av-steps .is-complete i { color:#187d72; background:#deefe9; border-color:#deefe9; }
.av-steps .is-complete small { opacity:1; }
.av-steps .is-active i { color:#355b66; background:#e5edef; }
.av-app-complete { margin:12px 18px 0; background:#e1f0eb; padding:9px 12px; color:#236e63; font-size:13px; border-radius:6px; transition:opacity .5s; }
.av-app-complete span { display:block; font-size:9px; }
.av:not([data-stage="done"]) .av-app-complete { opacity:0; }
.av-dashboard { position:absolute; inset:0 0 10%; background:#edf4f2; border:1px solid var(--av-line); border-radius:12px; transition:opacity 1s; }
.av-dashboard-foot { position:absolute; bottom:12px; width:100%; text-align:center; font-size:11px; color:#577778; }
.av-module { position:absolute; left:calc(4% + var(--x)*47%); top:calc(18% + var(--y)*29%); width:45%; height:27%; background:#fff; border:1px solid #d8e5e5; border-radius:8px; padding:12px 14px; transition:transform 1.3s cubic-bezier(.22,.8,.25,1); }
.av-module strong { display:block; font-size:13px; margin-bottom:8px; }
.av-fields span { display:block; height:11px; border:1px solid #dae5e3; border-radius:3px; margin-top:6px; background:#f7faf9; }
.av-fields span:last-child { width:70%; }
.av-table { font-size:9px; line-height:1.4; color:#688585; }
.av-days { display:flex; justify-content:space-between; font-size:10px; color:#688585; }
.av-days b { background:#dceee9; color:#286e66; padding:0 4px; border-radius:3px; }
.av-notice { font-size:9px; line-height:1.9; color:#478278; }
.av-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(min-width:1600px) { .atinas-hero-enhanced h1 { font-size:38px; } }
@media(max-width:1100px) and (min-width:901px) { .atinas-hero-enhanced .hero-inner { gap:24px; } .atinas-hero-enhanced h1 { font-size:25px; } .atinas-hero-enhanced .hero-eyebrow { font-size:12px; } .av-scene { aspect-ratio:1.04; } .av-review h3 { font-size:20px; } }
@media(max-width:900px) { .hero.atinas-hero-enhanced { padding:52px 24px 56px; } .atinas-hero-enhanced .hero-inner { grid-template-columns:1fr; gap:44px; max-width:680px; } .atinas-hero-enhanced h1 { font-size:clamp(24px,4.3vw,36px); } .av { max-width:520px; margin:0 auto; } }
@media(max-width:480px) { .hero.atinas-hero-enhanced { padding:36px 20px 44px; } .atinas-hero-enhanced .hero-eyebrow { font-size:10px; padding:6px 10px; } .atinas-hero-enhanced .sub { font-size:16px; } .atinas-hero-enhanced .copy { font-size:14px; } .atinas-hero-enhanced .hero-cta-row { gap:16px; } .atinas-hero-enhanced .btn { font-size:15px; padding:14px 20px; } .av-scene { aspect-ratio:.93; } .av-eyebrow { font-size:14px; } .av-example { font-size:8px; } .av-tile { padding:12px 7px; } .av-tile strong { font-size:12px; } .av-tile small { font-size:8px; } .av-review-main { padding:18px; } .av-review h3 { font-size:21px; } .av-module { padding:12px 10px; } .av-module strong { font-size:12px; } .av-caption { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .av *, .av *::before, .av *::after { animation:none!important; transition:none!important; } }
/* Keep the full mini-app readable even at a 320px viewport. */
.av-scene { min-height:410px; }
@media(max-width:480px) { .av-review h3 { font-size:clamp(18px,5vw,21px); } }
/* Reset under the loop fade, so cards never animate backwards into clutter. */
.av[data-stage="start"] .av-tile,
.av[data-stage="start"] .av-module,
.av[data-stage="start"] .av-board,
.av[data-stage="start"] .av-dashboard,
.av[data-stage="start"] .av-busy,
.av[data-stage="start"] .av-review { transition:none; }
/* E: information takes different useful forms, rather than one fixed workflow. */
.av-e svg { display:block; width:100%; height:100%; overflow:visible; }
.av-e-title { font-family:inherit; font-size:15px; font-weight:500; fill:#254c51; }
.av-e-piece { transform:translate(0,0) rotate(0deg); transform-origin:var(--origin); transition:transform 2s cubic-bezier(.22,.75,.25,1); }
.av-e-homes { opacity:1; transition:opacity 1.4s .7s; }
.av-e-loose { opacity:0; transition:opacity .8s; }
.av[data-stage="start"] .av-e-piece { transform:translate(var(--tx),var(--ty)) rotate(var(--turn)); transition:none; }
.av[data-stage="start"] .av-e-homes { opacity:0; transition:none; }
.av[data-stage="start"] .av-e-loose { opacity:.6; transition:none; }
@media(max-width:480px) { .av[data-pattern="E"] .av-eyebrow { font-size:13px; } .av[data-pattern="E"] .av-example { display:none; } }