/* Nunna Consulting Group - one design system, four brand accents. Tokens: design/*.md + src/brands.mjs */
@view-transition { navigation: auto; }
:root{
  --bg:#0a0d14; --bg2:#10151f; --surface:#141b28; --surface2:#1a2333; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --ink:#f1f4fa; --muted:#a3adc2; --faint:#8f9ab0;
  --accent:#d4a84b; --accent2:#f0cf86; --on-accent:#14100a; --accent-soft:rgba(212,168,75,.12);
  --ok:#3ccf91; --err:#ff6b7a;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-display:"Fraunces",Georgia,serif; --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --shadow:0 24px 60px -24px rgba(0,0,0,.7); --max:1180px; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f7f8fb; --bg2:#eef1f6; --surface:#fff; --surface2:#f3f5f9; --line:rgba(15,23,42,.10); --line2:rgba(15,23,42,.2);
  --ink:#0d1320; --muted:#4a566d; --faint:#5b677e; --accent-soft:rgba(0,0,0,.05); --shadow:0 24px 50px -28px rgba(15,23,42,.35); color-scheme:light;
}
/* brand accents (AA on both themes: --accent is used for text on --bg, --btn for filled buttons) */
[data-brand="ncg"]{--accent:#d4a84b;--accent2:#f0cf86;--on-accent:#14100a;--font-display:"Fraunces",Georgia,serif}
[data-brand="nunnarao"]{--accent:#e0b04a;--accent2:#ffd98a;--on-accent:#0e1426;--font-display:"Fraunces",Georgia,serif}
[data-brand="naic"]{--accent:#34d399;--accent2:#6ee7b7;--on-accent:#04140d;--font-display:"Sora","Inter",sans-serif}
[data-brand="nail"]{--accent:#a78bfa;--accent2:#c4b5fd;--on-accent:#0d0720;--font-display:"Sora","Inter",sans-serif}
:root[data-theme="light"][data-brand="ncg"]{--accent:#7a5710;--accent2:#a87a14;--on-accent:#fff;--btn:#7a5710}
:root[data-theme="light"][data-brand="nunnarao"]{--accent:#7a5710;--accent2:#a87a14;--on-accent:#fff;--btn:#7a5710}
:root[data-theme="light"][data-brand="naic"]{--accent:#047857;--accent2:#059669;--on-accent:#fff;--btn:#047857}
:root[data-theme="light"][data-brand="nail"]{--accent:#6d28d9;--accent2:#7c3aed;--on-accent:#fff;--btn:#6d28d9}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){--bg:#f7f8fb;--bg2:#eef1f6;--surface:#fff;--surface2:#f3f5f9;--line:rgba(15,23,42,.10);--line2:rgba(15,23,42,.2);--ink:#0d1320;--muted:#4a566d;--faint:#5b677e;--accent-soft:rgba(0,0,0,.05);--shadow:0 24px 50px -28px rgba(15,23,42,.35);color-scheme:light}
  :root:not([data-theme])[data-brand="ncg"],:root:not([data-theme])[data-brand="nunnarao"]{--accent:#7a5710;--accent2:#a87a14;--on-accent:#fff;--btn:#7a5710}
  :root:not([data-theme])[data-brand="naic"]{--accent:#047857;--accent2:#059669;--on-accent:#fff;--btn:#047857}
  :root:not([data-theme])[data-brand="nail"]{--accent:#6d28d9;--accent2:#7c3aed;--on-accent:#fff;--btn:#6d28d9}
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.65 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent2)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.3rem,6vw,4.6rem);font-weight:600} h2{font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:600} h3{font-size:1.25rem;font-weight:600} h4{font-size:1rem}
p{margin:0 0 1em;text-wrap:pretty} ul,ol{padding-left:1.2em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:.6rem 1rem;border-radius:8px;z-index:100}
.skip:focus{left:12px}
.wrap{width:min(100% - 2rem,var(--max));margin-inline:auto}
.eyebrow{font:500 .75rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;display:inline-flex;gap:.6rem;align-items:center}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:62ch}
.muted{color:var(--muted)} .small{font-size:.875rem} .mono{font-family:var(--font-mono)}
/* header */
.hdr{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(14px);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:1rem;height:68px}
.logo{display:flex;align-items:center;gap:.7rem;color:var(--ink);text-decoration:none;font:600 1.05rem var(--font-display);letter-spacing:-.01em;line-height:1.1}
.logo:hover{color:var(--ink)}
.logo .mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);font:700 .8rem var(--font-body);letter-spacing:.02em;flex:none}
.logo .mark-img{object-fit:cover;background:none;padding:0;display:block}
.logo small{display:block;font:500 .62rem var(--font-mono);letter-spacing:.12em;color:var(--faint);text-transform:uppercase;margin-top:3px}
.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav a{color:var(--muted);text-decoration:none;padding:.5rem .7rem;border-radius:8px;font-size:.9rem;font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--accent-soft)}
.tools{display:flex;gap:.5rem;align-items:center}
.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{border-color:var(--accent)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.burger{display:none}
@media (max-width:980px){
  .burger{display:grid}
  .nav{position:fixed;inset:68px 0 auto 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1rem;border-bottom:1px solid var(--line);transform:translateY(-110%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s;margin:0;max-height:calc(100vh - 68px);overflow:auto}
  .nav[data-open="true"]{transform:none;visibility:visible}
  .nav a{padding:.9rem 1rem;font-size:1.05rem}
  .hdr .cta-h{display:none}
  .tools{margin-left:auto}
}
@media (min-width:981px){.tools{margin-left:.6rem}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:12px;font:600 .95rem var(--font-body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .2s;min-height:46px}
.btn-primary{background:var(--btn,var(--accent));color:var(--on-accent)}
.btn-primary:hover{color:var(--on-accent);transform:translateY(-2px);box-shadow:0 14px 30px -12px var(--accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn-ghost:hover{color:var(--ink);border-color:var(--accent);transform:translateY(-2px)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.hdr .btn{padding:.55rem 1rem;min-height:40px;font-size:.88rem}
/* hero */
.hero{position:relative;padding:clamp(4rem,10vw,8rem) 0 clamp(3rem,7vw,6rem);overflow:hidden;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(900px 480px at 78% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),linear-gradient(180deg,transparent 60%,var(--bg));pointer-events:none}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin-top:1.2rem}
.hero.compact{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3.5rem)}
.hero.compact h1{font-size:clamp(2rem,4.6vw,3.4rem)}
.crumbs{font:500 .78rem var(--font-mono);color:var(--faint);margin-bottom:1.2rem}.crumbs a{color:var(--faint);text-decoration:none}.crumbs a:hover{color:var(--accent)}
/* sections */
section{padding:clamp(3rem,7vw,6rem) 0}
.alt{background:var(--bg2);border-block:1px solid var(--line)}
.sec-head{max-width:720px;margin-bottom:2.5rem}
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;transition:transform .35s var(--ease),border-color .3s,box-shadow .35s;display:flex;flex-direction:column;color:inherit;text-decoration:none;overflow:hidden}
a.card:hover,.card.hov:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:var(--shadow);color:inherit}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--accent-soft),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::before{opacity:1}
.card h3{margin-bottom:.4rem}.card p{color:var(--muted);font-size:.95rem}
.card .more{margin-top:auto;padding-top:.8rem;color:var(--accent);font-weight:600;font-size:.9rem}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:1rem;border:1px solid var(--line)}
.ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tag{display:inline-block;font:500 .7rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:.28rem .6rem;border-radius:99px;border:1px solid var(--line2);color:var(--muted);margin:0 .3rem .3rem 0}
.tag.live{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
:root[data-theme="light"] .tag.live{color:#0a7a4f}
.tag.soon{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.featured{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface))}
.checks{list-style:none;padding:0;margin:.4rem 0 0}.checks li{padding:.3rem 0 .3rem 1.7rem;position:relative;color:var(--muted)}
.checks li::before{content:"";position:absolute;left:0;top:.62rem;width:.9rem;height:.5rem;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg) scale(.9)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:2.5rem}
.stat{border-left:2px solid var(--accent);padding-left:1rem}.stat b{display:block;font:600 2rem var(--font-display);letter-spacing:-.02em}.stat span{font-size:.85rem;color:var(--muted)}
.split{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;align-items:start}.split.wide-l{grid-template-columns:1.2fr .8fr}}
.prose{max-width:74ch}.prose h2{font-size:1.7rem;margin-top:2.2rem}.prose h3{margin-top:1.6rem}.prose li{margin:.3rem 0;color:var(--muted)}.prose p{color:var(--muted)}.prose strong{color:var(--ink)}
.note{border:1px dashed var(--line2);border-radius:var(--r-md);padding:1rem 1.2rem;color:var(--muted);font-size:.9rem;background:var(--accent-soft)}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem}
.steps li::before{content:"0" counter(s);font:500 .8rem var(--font-mono);color:var(--accent);display:block;margin-bottom:.7rem}
.steps b{display:block;font:600 1.05rem var(--font-display);margin-bottom:.3rem}.steps span{color:var(--muted);font-size:.93rem}
/* faq */
.faq details{border-bottom:1px solid var(--line);padding:1.1rem 0}.faq summary{cursor:pointer;font:600 1.05rem var(--font-display);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}.faq p{color:var(--muted);margin:.7rem 0 0;max-width:70ch}
/* forms */
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.2rem,3vw,2rem);display:grid;gap:1rem}
.form h3{margin:0}.field{display:grid;gap:.4rem}.field label{font-size:.85rem;font-weight:600}
.field input,.field select,.field textarea{width:100%;background:var(--bg2);color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:.8rem .9rem;font:inherit;min-height:46px}
.field textarea{min-height:120px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.row2{display:grid;gap:1rem}@media(min-width:620px){.row2{grid-template-columns:1fr 1fr}}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;color:var(--muted)}.consent input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--accent);flex:none}
.hp{position:absolute!important;left:-5000px!important;height:0;overflow:hidden}
.msg{padding:.8rem 1rem;border-radius:10px;font-size:.92rem;display:none}.msg.err{display:block;background:color-mix(in srgb,var(--err) 14%,transparent);border:1px solid var(--err);color:var(--ink)}
.done{text-align:center;padding:1rem 0}.done .tick{width:60px;height:60px;border-radius:50%;margin:0 auto 1rem;display:grid;place-items:center;background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);font-size:1.6rem}
.inline-form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}.inline-form .field{flex:1 1 220px}
/* footer */
.ftr{border-top:1px solid var(--line);padding:3.5rem 0 2rem;background:var(--bg2)}
.ftr-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ftr h4{font:500 .72rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:.8rem}
.ftr a{display:block;color:var(--muted);text-decoration:none;padding:.22rem 0;font-size:.93rem}.ftr a:hover{color:var(--accent)}
.ftr .legal{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.82rem;color:var(--faint)}
.ftr .legal a{display:inline;padding:0}
.ftr p{color:var(--muted);font-size:.9rem}
/* practice strip */
.strip{background:var(--bg2);border-bottom:1px solid var(--line);font:500 .78rem var(--font-mono)}
.strip .wrap{display:flex;gap:1.2rem;height:34px;align-items:center;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.strip a{color:var(--faint);text-decoration:none}.strip a:hover,.strip a[aria-current="true"]{color:var(--accent)}
/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}
/* catalog (NAIL) */
.cat-bar{display:grid;gap:.8rem;grid-template-columns:1fr;margin-bottom:1.4rem}@media(min-width:760px){.cat-bar{grid-template-columns:2fr 1fr 1fr}}
.cat-list{display:grid;gap:.8rem}
.item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.2rem}
.item h3{font-size:1.05rem;margin:0 0 .3rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.item p{margin:.2rem 0;color:var(--muted);font-size:.92rem}
.v-adopt,.v-have{color:var(--ok)}.v-trial,.v-assess{color:var(--accent)}.v-skip{color:var(--err)}
pre,code{font-family:var(--font-mono);font-size:.88em}pre{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:.93rem}th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line)}th{font:500 .72rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tbl{overflow-x:auto}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}
@media print{.hdr,.ftr,.strip,.hero canvas{display:none}}

/* ---- APM Suite: animated product map + giveaway carousel ---- */
.apm-map{margin-top:1.6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem}
.apm-map svg{width:100%;height:auto;display:block}
.apm-narrow{display:none!important}
@media (max-width:640px){.apm-wide{display:none!important}.apm-narrow{display:block!important}}
.apm-map .e{fill:none;stroke:var(--line2);stroke-width:2}
.apm-map .e.mcp{stroke:var(--accent);stroke-width:2.2;stroke-dasharray:7 9;opacity:.9;animation:apmflow 1.8s linear infinite}
.apm-map .e.obs{stroke-dasharray:2 6;opacity:.8}
@keyframes apmflow{to{stroke-dashoffset:-32}}
.apm-map .n rect{fill:var(--surface2);stroke:var(--line2);stroke-width:1.5;transition:stroke .25s}
.apm-map a:hover .n rect,.apm-map a:focus-visible .n rect{stroke:var(--accent)}
.apm-map a:focus-visible{outline:none}
.apm-map .t{fill:var(--ink);font:600 18px var(--font-display)}
.apm-map .t.sm{font-size:15px}
.apm-narrow .t{font-size:14.5px}.apm-narrow .s{font-size:12.5px}
.apm-map .s{fill:var(--muted);font:500 13px var(--font-body)}
.apm-map .dot{fill:var(--accent);transform-box:fill-box;transform-origin:center;animation:apmpulse 2.4s ease-in-out infinite}
@keyframes apmpulse{50%{transform:scale(1.5);opacity:.55}}
.apm-map .tool rect{stroke-dasharray:4 4}
.apm-legend{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;color:var(--muted);font-size:.85rem}
.apm-legend li{display:inline-flex;align-items:center;gap:.5rem}
.apm-legend i{display:inline-block;width:26px;height:0;border-top:2px solid var(--accent)}
.apm-legend .k-mcp{border-top-style:dashed}.apm-legend .k-obs{border-top:2px dotted var(--line2)}.apm-legend .k-dot{width:10px;height:10px;border:0;border-radius:50%;background:var(--accent)}
@media (prefers-reduced-motion:reduce){.apm-map .e.mcp,.apm-map .dot{animation:none}}
.car{position:relative}
.car-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:.4rem;scrollbar-width:thin;border-radius:var(--r-lg)}
.car-slide{flex:0 0 100%;scroll-snap-align:center;min-width:0;display:flex}
@media (min-width:900px){.car-slide{flex-basis:calc(50% - .5rem)}.car-slide:last-child{flex-basis:calc(50% - .5rem)}}
.gw-card{flex:1;min-height:100%;position:relative}
.gw-card .gw-prize{display:flex;top:.6rem;right:.8rem}.gw-card .gw-prize .guide-img{width:84px;height:105px}.gw-card .gw-ticket{margin-bottom:1rem;font-size:.9rem}
@media (min-width:600px){.gw-card:has(.gw-prize) h3,.gw-card:has(.gw-prize) .eyebrow,.gw-card:has(.gw-prize)>p:first-of-type{padding-right:11.5rem}}
@media (max-width:599px){.gw-card .gw-prize{position:static;justify-content:center;margin-bottom:.4rem}}
.gw-card h3{font-size:1.4rem}
.gw-enter .form{border:0;padding:0;background:none;box-shadow:none}
.car-ctl{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}
.car-ctl[hidden]{display:none}
.car-dots{display:flex;gap:.5rem}
.car-dots button{width:12px;height:12px;border-radius:50%;border:1px solid var(--line2);background:transparent;padding:0;cursor:pointer}
.car-dots button[aria-current="true"]{background:var(--accent);border-color:var(--accent)}
.car-dots button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- NAIC mascot + visual polish (additive) ---- */
.guide{position:absolute;right:0;top:-.4rem;width:112px;pointer-events:none;display:none;z-index:1;animation:guide-bob 5s ease-in-out infinite}
.guide-img{display:block;width:112px;height:140px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
@media (min-width:900px){.guide{display:block;width:150px}.guide-img{width:150px;height:187px}.hero.compact .wrap{position:relative}}
@keyframes guide-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.mascot-stage{position:relative;width:min(100%,260px);aspect-ratio:4/5;margin:1.6rem auto 0}
.mascot-stage .ms-poster,.mascot-stage model-viewer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.mascot-stage model-viewer{--poster-color:transparent;background:transparent;opacity:0;transition:opacity .5s}
.mascot-stage.on model-viewer{opacity:1}
.mascot-stage.on .ms-poster{visibility:hidden}
.ms-go{position:absolute;left:50%;bottom:-.2rem;transform:translateX(-50%);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;font:600 .78rem var(--font-body);cursor:pointer;box-shadow:var(--shadow)}
.mascot-stage.on .ms-go,.mascot-stage.loading .ms-go{display:none}
@media (min-width:900px){.hero:has(.mascot-stage) .wrap{position:relative}.hero .mascot-stage{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(36%,400px);margin:0}.hero:has(.mascot-stage) h1,.hero:has(.mascot-stage) .lead{max-width:min(60%,40rem)}}
.mascot-stage::before{content:"";position:absolute;inset:8% 4% 0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 38%,transparent),transparent 72%);filter:blur(10px);z-index:0}
.mascot-stage>*{z-index:1}
.gw-head{position:relative}
.gw-prize{position:absolute;right:0;top:-1rem;display:none;align-items:flex-end;gap:.2rem;pointer-events:none}
.gw-prize .guide-img{width:96px;height:120px}
.gw-ticket{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);font:700 1.05rem var(--font-display);padding:.5rem .8rem;border-radius:12px;transform:rotate(-6deg);box-shadow:var(--shadow);line-height:1.05;margin-bottom:1.6rem}
.gw-ticket small{display:block;font:600 .62rem var(--font-body);letter-spacing:.02em;margin-top:2px}
@media (min-width:760px){.gw-prize{display:flex}}
/* products */
.plogo{display:block;border-radius:13px;box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 60%,transparent);flex:none}
.pthumb{margin:-1.6rem -1.6rem 1rem;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;aspect-ratio:12/7;background:var(--surface);position:relative}
.pthumb img,.pthumb svg{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.card:hover .pthumb img,.card:hover .pthumb svg{transform:scale(1.05)}
.card:has(.pthumb)>.plogo{position:relative;margin:-2.4rem 0 .6rem;border:3px solid var(--surface);z-index:2}
.pshot-wrap{position:relative;max-width:980px;margin-inline:auto}
.pshot-wrap>.plogo{position:absolute;left:-10px;top:-18px;z-index:3;border:3px solid var(--bg)}
.pshot{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--accent) 55%,#000)}
.pshot-bar{display:flex;gap:6px;padding:9px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.pshot-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.pshot img,.pshot svg{display:block;width:100%;height:auto}
.pshot figcaption{padding:.5rem .9rem}
/* aurora hero + card glow (CSS only; motion honours prefers-reduced-motion) */
[data-brand=naic] .hero::before,[data-brand=nail] .hero::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(40% 40% at 20% 30%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%),radial-gradient(35% 35% at 80% 20%,color-mix(in srgb,var(--accent2) 22%,transparent),transparent 70%),radial-gradient(40% 40% at 60% 90%,rgba(99,102,241,.18),transparent 70%);animation:aurora 22s ease-in-out infinite alternate;filter:blur(20px)}
@keyframes aurora{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(3%,-4%,0) scale(1.12) rotate(4deg)}}
[data-brand=naic] a.card:hover,[data-brand=nail] a.card:hover{transform:perspective(900px) translateY(-5px) rotateX(1.5deg) rotateY(-1.5deg);box-shadow:0 22px 50px -22px color-mix(in srgb,var(--accent) 70%,transparent)}
.map-flow{stroke-dasharray:6 8;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
@media (prefers-reduced-motion:reduce){.guide,.map-flow,[data-brand=naic] .hero::before,[data-brand=nail] .hero::before{animation:none}[data-brand=naic] a.card:hover,[data-brand=nail] a.card:hover{transform:none}.pthumb img,.pthumb svg{transition:none}}