/*
Theme Name: NavigateUP
Theme URI: https://navigateup.in
Author: NavigateUP
Author URI: https://navigateup.in
Description: Fast, SEO-friendly career guidance and placement theme for NavigateUP. Deep navy + teal palette, no page builder needed, built-in lead forms and testimonials.
Version: 1.1.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: navigateup
*/

:root{--navy:#142B4A;--navy-d:#0E2039;--teal:#18A999;--teal-l:#2BC4B2;--teal-d:#0B6E63;--bg:#F7FAFC;--mint:#DCEFEA;--muted:#4A5B72;--line:#DDE6EE;--field:#7C8FA6;--soft:#C9D6E4;--r:14px;--w:1140px;--sh:0 8px 28px rgba(20,43,74,.08)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Malayalam","Noto Sans Tamil",Arial,sans-serif;color:var(--navy);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
svg{flex:none}
a{color:var(--teal-d)}
a:hover{color:var(--navy)}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em;margin:0 0 .6em;color:var(--navy)}
h1{font-size:clamp(2rem,5.2vw,3.3rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
.wrap{width:min(100% - 2rem,var(--w));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--teal-d);outline-offset:2px}
.hero :focus-visible,.page-hero :focus-visible,.cta :focus-visible,.site-footer :focus-visible{outline-color:var(--teal-l)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--navy);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;line-height:1.1}
.brand:hover{color:var(--navy)}
.brand b{color:var(--teal-d)}
.brand small{display:block;font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.15rem}
.custom-logo-link img{max-height:52px;width:auto}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav ul{display:flex;gap:1.3rem;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;color:var(--navy);font-weight:600;font-size:.94rem;padding:.3rem 0;border-bottom:2px solid transparent}
.nav ul a:hover,.nav .current-menu-item>a,.nav .current_page_item>a{color:var(--teal-d);border-bottom-color:var(--teal)}
.menu-toggle{display:none;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);cursor:pointer}
@media(max-width:960px){
.menu-toggle{display:grid}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:1rem;gap:1rem;box-shadow:var(--sh)}
.nav.is-open{display:flex}
.nav ul{flex-direction:column;gap:0}
.nav ul a{display:block;padding:.7rem .25rem;border-bottom:1px solid var(--line)}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.5rem;border-radius:999px;font:inherit;font-weight:700;font-size:.95rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s,translate .2s ease}
.btn-primary{background:var(--teal);color:var(--navy)}
.btn-primary:hover{background:var(--teal-l);color:var(--navy)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-d);color:#fff}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-light{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.btn-light:hover{background:#fff;color:var(--navy)}
.btn-block{width:100%}

/* Hero */
.hero{background:radial-gradient(900px 420px at 88% -10%,rgba(24,169,153,.3),transparent 60%),var(--navy);color:#fff;padding:clamp(3rem,7vw,5.5rem) 0}
.hero h1{color:#fff}
.hero h1 span{color:var(--teal)}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.3fr .7fr}}
.lead{font-size:1.1rem;color:var(--soft);max-width:36rem}
.pill{display:inline-flex;gap:.5rem;align-items:center;padding:.4rem .9rem;border-radius:999px;background:rgba(24,169,153,.18);color:#9BE8DE;font-size:.82rem;font-weight:600;margin-bottom:1.2rem}
.btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.hero-card{background:#fff;color:var(--navy);border-radius:22px;padding:1.6rem;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.hero-card img{margin:0 auto 1.2rem;width:min(55%,180px)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.95rem}
.ticks li{display:flex;gap:.6rem;align-items:flex-start}
.ticks .i{color:var(--teal-d);margin-top:.28rem}

/* Page hero */
.page-hero{background:radial-gradient(800px 300px at 50% -20%,rgba(24,169,153,.28),transparent 65%),var(--navy);color:#fff;text-align:center;padding:clamp(2.6rem,6vw,4.2rem) 0}
.page-hero h1{color:#fff;margin-bottom:.4em}
.page-hero p{color:var(--soft);max-width:40rem;margin:0 auto;font-size:1.05rem}
.page-hero .eyebrow{color:var(--teal)}

/* Stats */
.stats{background:var(--mint)}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:center;padding-block:1.7rem}
.stat b{display:block;font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;line-height:1.1}
.stat span{font-size:.88rem;color:var(--muted);font-weight:600}

/* Sections */
.section{padding:clamp(3rem,6vw,4.8rem) 0}
.alt{background:var(--bg)}
.eyebrow{display:block;color:var(--teal-d);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;margin-bottom:.6rem}
.sec-head{text-align:center;max-width:42rem;margin:0 auto 2.6rem}
.sec-head p{color:var(--muted)}
.grid{display:grid;gap:1.25rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr))}
.g5{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:var(--sh);position:relative;isolation:isolate;transition:translate .25s ease,box-shadow .25s ease}
.card p{color:var(--muted);font-size:.95rem}
.card p:last-child{margin-bottom:0}
.ic{width:48px;height:48px;border-radius:12px;background:var(--mint);color:var(--teal-d);display:grid;place-items:center;margin-bottom:1rem}

/* Services */
.svc{display:flex;flex-direction:column;scroll-margin-top:96px}
.svc .price{font-size:1.4rem;font-weight:800;margin:.2rem 0 1rem}
.svc .ticks{margin-bottom:1.5rem}
.svc .btn{margin-top:auto}
.svc.feat{background:var(--navy);border-color:var(--teal);color:#fff}
.svc.feat h3,.svc.feat .price{color:#fff}
.svc.feat p{color:var(--soft)}
.svc.feat .ticks .i{color:var(--teal)}
.badge{align-self:flex-start;display:inline-block;background:var(--teal);color:var(--navy);font-size:.7rem;font-weight:800;padding:.15rem .65rem;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.7rem}
.emp .big{font-size:2rem;font-weight:800;color:var(--teal-d);margin:.2rem 0 1rem}
.emp.dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.emp.dark h3{color:#fff}
.emp.dark .big{color:var(--teal)}
.emp.dark .ticks .i{color:var(--teal)}

/* Steps */
.num{position:relative;width:46px;height:46px;border-radius:50%;background:var(--teal);color:var(--navy);font-weight:800;display:grid;place-items:center;font-size:1.1rem;flex:none}
.step{text-align:center}
.step .num{margin:0 auto 1rem}
.rows{display:grid;gap:1rem;max-width:52rem;margin-inline:auto}
.row-step{display:flex;gap:1.2rem;align-items:flex-start}
.row-step h3{margin-bottom:.3rem}

/* Testimonials */
.quote{display:flex;flex-direction:column;gap:1rem}
.quote blockquote{margin:0;font-style:italic;color:var(--navy)}
.who{display:flex;gap:.75rem;align-items:center;margin-top:auto}
.who b{display:block;font-size:.95rem}
.who small{color:var(--muted)}
.av{width:42px;height:42px;border-radius:50%;background:var(--mint);color:var(--teal-d);font-weight:800;display:grid;place-items:center}
.tag{align-self:flex-start;font-size:.72rem;font-weight:700;padding:.15rem .65rem;border-radius:999px;background:var(--mint);color:var(--teal-d)}
.filters{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.filters button{font:inherit;font-weight:700;font-size:.88rem;padding:.55rem 1.2rem;border-radius:999px;border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer}
.filters button[aria-pressed=true]{background:var(--navy);color:#fff}
.empty{text-align:center;max-width:36rem;margin-inline:auto}

/* CTA */
.cta{background:radial-gradient(800px 300px at 50% 120%,rgba(24,169,153,.3),transparent 65%),var(--navy);color:#fff;text-align:center;padding:clamp(3rem,6vw,4.5rem) 0}
.cta h2{color:#fff}
.cta p{color:var(--soft);max-width:36rem;margin-inline:auto}
.cta .btns{justify-content:center}
.band{display:grid;gap:1.5rem;align-items:center;background:var(--mint);border-radius:22px;padding:clamp(1.6rem,4vw,2.6rem)}
@media(min-width:800px){.band{grid-template-columns:1.6fr auto}}
.band h2{margin-bottom:.3em;font-size:clamp(1.4rem,3vw,1.9rem)}
.band p{margin:0;color:var(--muted)}

/* Contact + forms */
.split{display:grid;gap:2rem;align-items:start}
@media(min-width:900px){.split{grid-template-columns:.8fr 1.2fr}}
.info{display:grid;gap:1rem}
.info>a,.info>div{display:flex;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem;text-decoration:none;color:var(--navy)}
.info>a:hover{border-color:var(--teal)}
.info small{display:block;color:var(--muted);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.info b{font-size:1.05rem}
.info .ic{margin:0;flex:none}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.2rem,3vw,2rem);box-shadow:var(--sh)}
.form h2{font-size:1.5rem}
.f-grid{display:grid;gap:1rem;margin-bottom:1rem}
@media(min-width:640px){.f-grid{grid-template-columns:1fr 1fr}.f-grid .full{grid-column:1/-1}}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.3rem}
label i{color:#8A1F1F;font-style:normal}
input,select,textarea{width:100%;font:inherit;padding:.75rem .9rem;border:1px solid var(--field);border-radius:10px;background:#fff;color:var(--navy)}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:#5A6C84}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.88rem;margin-bottom:1.2rem}
.check input{width:auto;margin-top:.3rem}
.notice{padding:1rem 1.2rem;border-radius:12px;margin-bottom:1.2rem;font-weight:600}
.notice.ok{background:var(--mint);color:var(--navy);border:1px solid var(--teal)}
.notice.err{background:#FDECEC;color:#7A1F1F;border:1px solid #E5A3A3}
.alt-line{text-align:center;margin:1rem 0 0;font-size:.92rem;color:var(--muted)}
.prose{max-width:46rem;margin-inline:auto}
.prose h2{margin-top:1.6em}
.prose img{border-radius:12px}

/* Footer */
.site-footer{background:var(--navy);color:var(--soft);padding:3.5rem 0 1.5rem;font-size:.93rem}
.f-cols{display:grid;gap:2rem}
@media(min-width:800px){.f-cols{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.fh{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;font-weight:700;margin-bottom:1rem}
.site-footer a{color:var(--soft);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.f-brand{display:flex;gap:.7rem;align-items:center;color:#fff;font-weight:800;font-size:1.25rem;margin-bottom:.8rem}
.f-brand a{color:#fff}
.f-brand .logo-badge{background:#fff;border-radius:12px;padding:4px;display:block}
.f-contact li{display:flex;gap:.6rem;align-items:center}
.f-contact .i{color:var(--teal)}
.social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.social a{border:1px solid rgba(255,255,255,.3);padding:.35rem .85rem;border-radius:999px;font-size:.84rem}
.legal{border-top:1px solid rgba(255,255,255,.15);margin-top:2.2rem;padding-top:1.2rem;font-size:.82rem;color:#9FB1C6;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ===================== Motion & interaction =====================
   CSS first. JavaScript only adds classes. Everything is switched off for
   visitors who prefer reduced motion, and only transform/opacity animate,
   so there is no layout shift and no effect on LCP. */

.info-h{font-size:1.3rem;margin:0}
.form{scroll-margin-top:96px}
.form:target{animation:nu-pulse 1.4s ease-out 1}
@keyframes nu-pulse{0%{box-shadow:0 0 0 0 rgba(24,169,153,.55)}100%{box-shadow:0 0 0 18px rgba(24,169,153,0)}}
input:focus,textarea:focus{border-color:var(--teal-d);box-shadow:0 0 0 4px rgba(24,169,153,.18)}
.notice{animation:nu-pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes nu-pop{from{opacity:0;transform:scale(.94)}}
.spin{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:nu-spin .7s linear infinite;vertical-align:-.15em;margin-right:.55rem}
@keyframes nu-spin{to{transform:rotate(360deg)}}

/* Contact tabs. :has() lets the #hire link open the right tab before any JavaScript runs. */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem}
.tabs button{font:inherit;font-weight:700;font-size:.92rem;padding:.85rem 1rem;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tabs button:hover{border-color:var(--teal)}
.tabs button[aria-selected=true]{background:var(--teal);border-color:var(--teal);color:var(--navy)}
.tabs-wrap:not(.manual):has(#hire:target) [data-tab=seeker]{background:#fff;border-color:var(--line)}
.tabs-wrap:not(.manual):has(#hire:target) [data-tab=hire]{background:var(--teal);border-color:var(--teal)}
.tabs-wrap:not(.manual):has(#hire:target) #panel-seeker{display:none}
.tabs-wrap:not(.manual):has(#hire:target) #panel-hire{display:block}

/* Scroll progress bar (CSS scroll-driven, no JavaScript) */
.progress{display:none;position:fixed;top:0;left:0;right:0;height:3px;background:var(--teal);transform-origin:0 50%;transform:scaleX(0);z-index:80;pointer-events:none}
@supports (animation-timeline:scroll()){.progress{display:block;animation:nu-prog linear both;animation-timeline:scroll(root)}}
@keyframes nu-prog{to{transform:scaleX(1)}}

/* Hero depth: soft orbs, glass chips, typing line */
.hero{position:relative;overflow:hidden}
.hero>.wrap{position:relative;z-index:1}
.orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.o1{width:520px;height:520px;right:-120px;top:-160px;background:radial-gradient(circle,rgba(24,169,153,.35),transparent 65%)}
.o2{width:360px;height:360px;left:-120px;bottom:-140px;background:radial-gradient(circle,rgba(43,196,178,.22),transparent 65%)}
.hero-visual{position:relative}
.hero-card{transition:transform .25s ease}
.chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:999px;font-size:.8rem;font-weight:700;color:#fff;white-space:nowrap;background:rgba(20,43,74,.78);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.chip .i{color:var(--teal)}
.c1{left:-1.6rem;top:10%}
.c2{right:-1rem;top:46%}
.c3{left:-.6rem;bottom:-1rem}
@media(max-width:899px){.chip{display:none}}
.rot{display:block;color:var(--teal);min-height:1.2em}
.rot-t::after{content:"";display:inline-block;width:3px;height:.85em;margin-left:5px;background:var(--teal);vertical-align:-.05em;animation:nu-blink 1s step-end infinite}
@keyframes nu-blink{50%{opacity:0}}

/* Marquee strip */
.ticker{overflow:hidden;background:var(--navy-d);color:var(--soft);font-weight:600;font-size:.9rem;padding:.8rem 0;border-top:1px solid rgba(255,255,255,.08)}
.ticker-track{display:flex;gap:2.6rem;width:max-content;animation:nu-marquee 42s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;gap:2.6rem;white-space:nowrap}
.ticker-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes nu-marquee{to{transform:translateX(-50%)}}

/* Scroll reveals (classes are added by theme.js, so content is always visible without JavaScript) */
.nu-anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease var(--d,0s),transform .65s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .25s ease,box-shadow .25s ease}
.nu-anim .reveal.in{opacity:1;transform:none}

/* Card lift and cursor spotlight */
.card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(24,169,153,.16),transparent 65%)}
@media(hover:hover){.card:hover{translate:0 -5px;box-shadow:0 16px 40px rgba(20,43,74,.14)}.card:hover::before{opacity:1}}

/* Self-drawing underline and step rings */
.hl{background:linear-gradient(var(--teal),var(--teal)) 0 100%/100% .14em no-repeat;padding-bottom:.05em;transition:background-size .9s ease .35s}
.nu-anim .reveal:not(.in) .hl{background-size:0 .14em}
.ring{position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg);fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-dasharray:145;stroke-dashoffset:0;pointer-events:none}
.nu-anim .step .ring{transition:stroke-dashoffset 1.2s ease .3s}
.nu-anim .step.reveal:not(.in) .ring{stroke-dashoffset:145}

/* Placement: pinned intro + scroll-linked timeline */
.story{display:grid;gap:2.5rem;align-items:start}
@media(min-width:900px){.story{grid-template-columns:.8fr 1.2fr}.story-intro{position:sticky;top:110px}}
.story-count{margin:1.2rem 0 1.4rem;font-weight:800;color:var(--teal-d)}
.story-count b{font-size:2.6rem;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;padding:0 .15em}
.story-steps{position:relative;display:grid;gap:1.1rem}
.story-steps::before,.story-steps::after{content:"";position:absolute;left:calc(1.5rem + 22px);top:24px;bottom:24px;width:2px;z-index:0}
.story-steps::before{background:var(--line)}
.story-steps::after{background:var(--teal);transform-origin:top;transform:scaleY(var(--p,0))}
.story-steps .card{z-index:1}
.row-step.active .num{box-shadow:0 0 0 6px rgba(24,169,153,.22)}
.nu-anim .story .row-step{opacity:.5;transition:opacity .4s ease,border-color .4s ease,translate .25s ease,box-shadow .25s ease}
.nu-anim .story .row-step.active{opacity:1;border-color:var(--teal)}

/* Genie chat widget (replaces the plain WhatsApp button) */
.genie{position:fixed;right:1rem;bottom:1rem;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:.8rem}
.genie-btn{position:relative;display:block;width:66px;height:66px;border-radius:50%;background:#fff;border:3px solid var(--teal);box-shadow:0 10px 28px rgba(20,43,74,.38)}
.genie-btn img{width:100%;height:100%;border-radius:50%;padding:7px;object-fit:contain}
.genie-btn::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--teal);opacity:0;pointer-events:none}
.genie-wa{position:absolute;right:-5px;bottom:-3px;width:26px;height:26px;border-radius:50%;background:var(--teal);color:var(--navy);display:grid;place-items:center;border:2px solid #fff}
.genie-bubble{position:relative;width:min(84vw,272px);background:#fff;color:var(--navy);border:1px solid var(--line);border-radius:18px 18px 4px 18px;padding:1rem 1rem .9rem;box-shadow:0 18px 44px rgba(20,43,74,.28);transform-origin:100% 100%}
.genie-bubble[hidden]{display:none}
.genie-x{position:absolute;right:.35rem;top:.25rem;width:32px;height:32px;border:0;background:none;font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer;border-radius:50%}
.genie-x:hover{background:var(--bg);color:var(--navy)}
.genie-name{display:block;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-d);padding-right:1.6rem}
.genie-say{margin:.25rem 0 .8rem;font-size:1.05rem;font-weight:800}
.typed{display:inline-block}
.genie-opt{display:block;margin-top:.45rem;padding:.55rem .9rem;border:1px solid var(--navy);border-radius:999px;color:var(--navy);font-weight:700;font-size:.88rem;text-decoration:none;text-align:center;transition:background .15s,color .15s}
.genie-opt:hover{background:var(--navy);color:#fff}
.genie-opt:first-of-type{background:var(--teal);border-color:var(--teal)}
.genie-opt:first-of-type:hover{background:var(--teal-l);color:var(--navy)}
.puff{position:absolute;right:20px;bottom:22px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,0,.65),rgba(255,122,0,0) 70%);opacity:0;pointer-events:none}

@media(prefers-reduced-motion:no-preference){
	/* hero entrance: never fades the headline or logo image, so LCP is untouched */
	.hero .pill,.hero .lead,.hero .btns{animation:nu-up .7s cubic-bezier(.2,.7,.2,1) both}
	.hero .lead{animation-delay:.15s}
	.hero .btns{animation-delay:.28s}
	.hero-visual{animation:nu-rise .9s .2s cubic-bezier(.2,.7,.2,1) both}
	.chip{animation:nu-float 5s ease-in-out infinite}
	.c2{animation-delay:-1.7s}
	.c3{animation-delay:-3.3s}
	/* genie */
	.genie-btn{animation:nu-genie-in .7s .9s cubic-bezier(.2,1.5,.4,1) both,nu-bob 3.4s 1.7s ease-in-out infinite}
	.genie-btn::after{animation:nu-ring 2.8s 2s ease-out infinite}
	.genie.open .puff{animation:nu-puff 1.1s ease-out both}
	.genie.open .p2{animation-delay:.12s}
	.genie.open .p3{animation-delay:.24s}
	.genie-bubble:not([hidden]){animation:nu-bubble .5s cubic-bezier(.2,1.4,.4,1) both}
	.genie.open .typed{animation:nu-type 1.3s steps(19) .45s both}
	/* page transition between pages (browsers that support it) */
	@view-transition{navigation:auto}
	.site-header{view-transition-name:site-header}
	::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
}
@keyframes nu-up{from{opacity:0;transform:translateY(18px)}}
@keyframes nu-rise{from{transform:translateY(26px) scale(.97)}}
@keyframes nu-float{50%{translate:0 -10px}}
@keyframes nu-genie-in{from{opacity:0;scale:.3}}
@keyframes nu-bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -8px;rotate:-4deg}}
@keyframes nu-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes nu-puff{0%{opacity:.9;transform:scale(.3) translate(0,0)}100%{opacity:0;transform:scale(2.4) translate(-26px,-30px)}}
@keyframes nu-bubble{from{opacity:0;transform:scale(.6) translateY(14px)}}
@keyframes nu-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Hero parallax: scroll-driven CSS, compositor only */
@supports (animation-timeline:scroll()){
	@media(prefers-reduced-motion:no-preference){
		.o1{animation:nu-pa linear both;animation-timeline:scroll(root);animation-range:0 100vh}
		.o2{animation:nu-pb linear both;animation-timeline:scroll(root);animation-range:0 100vh}
		.hero-card{animation:nu-pc linear both;animation-timeline:scroll(root);animation-range:0 90vh}
	}
}
@keyframes nu-pa{to{transform:translateY(170px)}}
@keyframes nu-pb{to{transform:translateY(-100px)}}
@keyframes nu-pc{to{translate:0 -38px}}

@media(prefers-reduced-motion:reduce){
	.progress{display:none!important}
	.rot-t::after{display:none}
	.ticker-track{width:auto;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem}
	.ticker-track span:nth-child(n+8){display:none}
}