:root { --ink:#14213d; --ink-soft:#43506a; --paper:#fffdf9; --cream:#f8f3ea; --coral:#ff7754; --coral-deep:#e85b3d; --sun:#ffc94d; --mint:#bde8db; --sky:#dbeeff; --lavender:#e9e0ff; --line:rgba(20,33,61,.13); --shadow:0 20px 60px rgba(32,43,72,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif; }
a { color:inherit; }
.shell { width:min(1140px, calc(100% - 40px)); margin:auto; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:23px 0; }
.brand { display:inline-flex; align-items:baseline; color:var(--ink); text-decoration:none; font-size:1.65rem; font-weight:850; letter-spacing:-.07em; white-space:nowrap; }.brand-academy { margin-left:.22em; font-size:.57em; font-weight:700; letter-spacing:-.035em; }.novi-i { position:relative; display:inline-block; width:.34em; height:1.02em; margin-left:.02em; vertical-align:baseline; }
.novi-stem { position:absolute; left:50%; bottom:.02em; width:.16em; height:.56em; border-radius:.12em .12em .04em .04em; background:var(--ink); transform:translateX(-50%); }
.novi-eye { position:absolute; top:.05em; left:50%; width:.42em; height:.42em; border-radius:50%; background:linear-gradient(135deg,#ff9d6b,var(--coral-deep)); box-shadow:0 .04em .10em rgba(232,91,61,.24); transform:translateX(-50%); }
.novi-eye::before { content:""; position:absolute; top:17%; left:19%; width:24%; height:24%; border-radius:50%; background:rgba(255,255,255,.85); }
.novi-pupil { position:absolute; left:35%; top:35%; width:38%; height:38%; border-radius:50%; background:var(--ink); }
.nav-links { display:flex; align-items:center; gap:23px; font-size:.9rem; font-weight:700; color:var(--ink-soft); }.nav-links a { text-decoration:none; }.nav-links a:hover { color:var(--coral-deep); }.nav-links .nav-cta { color:white; background:var(--ink); padding:10px 14px; border-radius:999px; }
.hero { position:relative; overflow:hidden; padding:62px 0 84px; }.hero.soft { background:var(--cream); }.hero .orb { position:absolute; border-radius:50%; pointer-events:none; }.orb.one { width:430px; height:430px; right:-130px; top:-180px; background:#ffe2b6; }.orb.two { width:250px; height:250px; left:-130px; bottom:-145px; background:#d8f0ec; }
.hero-page { position:relative; overflow:hidden; padding:72px 0 80px; }.hero-how { background:linear-gradient(160deg,#f8efe2 0%,#f4e8d8 40%,#f0e9de 100%); }.hero-pricing { background:linear-gradient(160deg,#eef2f8 0%,#e8edf5 40%,#f0f2f6 100%); }.hero-page-inner { max-width:680px; }.hero-page h1 { font-size:clamp(2rem,4.5vw,3.2rem); line-height:1.05; margin:14px 0 16px; }.hero-page .lede { font-size:1.13rem; line-height:1.58; margin-bottom:28px; }.hero-steps { display:flex; gap:0; margin:0 0 28px; border-radius:16px; overflow:hidden; border:1px solid rgba(20,33,61,.08); background:rgba(255,255,255,.6); }.hero-step { display:flex; align-items:center; gap:10px; padding:14px 16px; flex:1; border-right:1px solid rgba(20,33,61,.06); font-size:.84rem; color:var(--ink-soft); line-height:1.3; }.hero-step:last-child { border-right:0; }.hero-step-num { flex-shrink:0; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--coral); color:white; font-size:.72rem; font-weight:850; }.hero-pricing-note { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px; }.hero-pricing-note span { padding:8px 14px; border-radius:99px; background:rgba(255,255,255,.7); border:1px solid rgba(20,33,61,.08); color:var(--ink-soft); font-size:.82rem; font-weight:700; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:99px; background:#fff2dc; color:#a8482e; font-size:.8rem; font-weight:780; letter-spacing:.02em; }.novi-signal { position:relative; width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,#ff9d6b,var(--coral-deep)); box-shadow:0 0 0 4px rgba(255,119,84,.15); }.novi-signal::before { content:""; position:absolute; width:2px; height:2px; top:1px; left:2px; border-radius:50%; background:white; }.novi-signal::after { content:""; position:absolute; width:3px; height:3px; right:1px; bottom:1px; border-radius:50%; background:var(--ink); }
h1 { position:relative; max-width:760px; margin:18px 0; font-size:clamp(3rem,6vw,5.8rem); line-height:.95; letter-spacing:-.07em; } h1 em { color:var(--coral-deep); font-style:normal; } h2 { margin:0 0 14px; font-size:clamp(2.15rem,4vw,3.55rem); line-height:1; letter-spacing:-.055em; } h3 { letter-spacing:-.035em; }
.lede { position:relative; max-width:650px; margin:0; color:var(--ink-soft); font-size:1.13rem; line-height:1.58; }.small { color:var(--ink-soft); font-size:.87rem; line-height:1.5; }
.button { display:inline-block; border:0; border-radius:999px; padding:14px 20px; text-decoration:none; font:inherit; font-size:.96rem; font-weight:780; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }.button:hover { transform:translateY(-2px); }.button.primary { background:var(--ink); color:white; box-shadow:0 10px 22px rgba(20,33,61,.17); }.button.coral { background:var(--coral); color:white; }.button.light { background:white; color:var(--ink); }.actions { position:relative; display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
section { padding:88px 0; }.section-intro { max-width:700px; }.section-intro .lede { max-width:620px; }.soft-section { background:var(--cream); }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:36px; }.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
.card { border:1px solid var(--line); border-radius:25px; padding:25px; background:white; }.card h3 { margin:0 0 10px; font-size:1.35rem; }.card p { margin:0; color:var(--ink-soft); line-height:1.58; font-size:.94rem; }.card .kicker { color:var(--coral-deep); font-size:.76rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px; }
.steps { display:grid; gap:14px; margin-top:34px; }.step { display:grid; grid-template-columns:43px 1fr; gap:14px; padding:18px; border-radius:18px; background:white; border:1px solid var(--line); }.step-number { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--sun); font-weight:850; }.step h3 { margin:2px 0 4px; font-size:1rem; }.step p { margin:0; color:var(--ink-soft); font-size:.92rem; line-height:1.48; }
.price-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:38px; }.price-card { position:relative; min-height:420px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:29px; padding:29px; background:white; }.price-card.featured { border:2px solid var(--coral); box-shadow:var(--shadow); }.price-badge { position:absolute; top:18px; right:18px; padding:6px 9px; border-radius:999px; background:#fff0df; color:var(--coral-deep); font-size:.72rem; font-weight:850; }.price { margin:13px 0 5px; font-size:3.3rem; font-weight:850; letter-spacing:-.075em; }.price span { font-size:1rem; letter-spacing:0; color:var(--ink-soft); font-weight:650; }.price-card ul { flex:1; padding:0; margin:22px 0; list-style:none; }.price-card li { display:flex; gap:9px; margin:12px 0; color:var(--ink-soft); line-height:1.42; }.price-card li::before { content:"•"; color:var(--coral-deep); font-weight:900; }.price-note { max-width:710px; margin:24px 0 0; color:var(--ink-soft); font-size:.89rem; line-height:1.55; }
.form-card { max-width:690px; margin:35px auto 0; border:1px solid var(--line); border-radius:29px; padding:clamp(24px,5vw,46px); background:white; box-shadow:var(--shadow); }.form-card h2 { font-size:clamp(2rem,4vw,3rem); }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:24px; }.field { display:grid; gap:7px; }.field.full { grid-column:1 / -1; }.field label { font-size:.85rem; font-weight:760; }.field input,.field select,.field textarea { width:100%; border:1px solid var(--line); border-radius:13px; padding:13px 14px; background:#fffdf9; color:var(--ink); font:inherit; }.field textarea { min-height:100px; resize:vertical; }.field input:focus,.field select:focus,.field textarea:focus { outline:3px solid rgba(255,119,84,.17); border-color:var(--coral); }.consent { display:flex; align-items:flex-start; gap:10px; margin:20px 0; color:var(--ink-soft); font-size:.85rem; line-height:1.45; }.consent input { margin-top:3px; }.form-status { min-height:22px; margin:14px 0 0; color:#26725f; font-size:.9rem; }.form-status.error { color:#b33c29; }.hp { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.faq { margin-top:36px; border-top:1px solid var(--line); }.faq details { border-bottom:1px solid var(--line); padding:18px 0; }.faq summary { display:flex; justify-content:space-between; gap:20px; cursor:pointer; font-weight:780; list-style:none; }.faq summary::-webkit-details-marker { display:none; }.faq summary::after { content:"+"; color:var(--coral-deep); font-size:1.35rem; line-height:.8; }.faq details[open] summary::after { content:"−"; }.faq p { max-width:760px; margin:12px 35px 0 0; color:var(--ink-soft); line-height:1.58; }
.cta { position:relative; overflow:hidden; border-radius:31px; padding:clamp(35px,6vw,70px); background:var(--ink); color:white; text-align:center; }.cta::before { content:""; position:absolute; width:300px; height:300px; top:-210px; left:-90px; border-radius:50%; background:var(--coral); }.cta::after { content:""; position:absolute; width:250px; height:250px; right:-150px; bottom:-175px; border-radius:50%; background:#2d8e9a; }.cta > * { position:relative; }.cta h2 { max-width:650px; margin:auto; }.cta p { max-width:560px; margin:16px auto 26px; color:rgba(255,255,255,.77); line-height:1.55; }
footer { display:flex; justify-content:space-between; gap:20px; padding:34px 0; color:var(--ink-soft); font-size:.84rem; }.footer-logo { display:inline-flex; align-items:baseline; color:var(--ink); font-size:1rem; font-weight:850; letter-spacing:-.055em; }.footer-logo .novi-i { width:.32em; height:1em; }.footer-logo .novi-eye { width:.40em; height:.40em; }.footer-logo .novi-stem { width:.15em; height:.55em; }.footer-academy { margin-left:.2em; font-weight:650; letter-spacing:-.02em; }
.age-explorer { margin-top:34px; padding:clamp(23px,4vw,42px); border:1px solid var(--line); border-radius:30px; background:linear-gradient(135deg,#fff 0%,#fff8ef 100%); box-shadow:var(--shadow); }.growth-slider { margin:0 0 30px; padding:17px 18px 13px; border:1px solid var(--line); border-radius:21px; background:white; }.growth-topline { display:flex; align-items:center; justify-content:space-between; gap:14px; color:var(--ink-soft); font-size:.86rem; font-weight:760; }.growth-topline output { display:grid; place-items:center; width:37px; height:37px; border-radius:50%; background:var(--coral); color:white; font-size:1rem; font-weight:850; box-shadow:0 5px 13px rgba(232,91,61,.24); }#age-slider { width:100%; height:30px; margin:7px 0 4px; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }#age-slider::-webkit-slider-runnable-track { height:8px; border-radius:99px; background:linear-gradient(90deg,var(--coral),#ffb273 52%,var(--mint)); }#age-slider::-webkit-slider-thumb { width:25px; height:25px; margin-top:-8.5px; border:4px solid white; border-radius:50%; appearance:none; -webkit-appearance:none; background:var(--ink); box-shadow:0 2px 9px rgba(20,33,61,.22); }#age-slider::-moz-range-track { height:8px; border-radius:99px; background:linear-gradient(90deg,var(--coral),#ffb273 52%,var(--mint)); }#age-slider::-moz-range-thumb { width:19px; height:19px; border:4px solid white; border-radius:50%; background:var(--ink); box-shadow:0 2px 9px rgba(20,33,61,.22); }.growth-labels { display:flex; justify-content:space-between; gap:8px; }.growth-labels span { display:grid; gap:2px; color:var(--ink-soft); font-size:.69rem; line-height:1.2; }.growth-labels span:nth-child(2),.growth-labels span:nth-child(3) { text-align:center; }.growth-labels span:last-child { text-align:right; }.growth-labels strong { color:var(--ink); font-size:.77rem; }.age-stage { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr); gap:22px; align-items:stretch; }.age-stage h3 { margin:8px 0 10px; font-size:clamp(1.6rem,3.2vw,2.45rem); line-height:1.04; }.age-stage p { margin:0; color:var(--ink-soft); line-height:1.58; }.age-prompt { padding:22px; border-radius:20px; background:var(--ink); color:white; display:flex; flex-direction:column; }.age-prompt .kicker { margin-bottom:12px; color:#ffc94d; font-size:.74rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }.age-prompt q { display:block; font-size:1.22rem; font-weight:760; line-height:1.28; margin-bottom:18px; }.age-prompt q::before,.age-prompt q::after { color:var(--coral); }.prompt-meta { display:flex; flex-direction:column; gap:8px; padding:14px 0; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:16px; }.prompt-meta-item { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }.prompt-meta-label { color:rgba(255,255,255,.5); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }.prompt-meta-value { color:#ffc94d; font-size:.78rem; font-weight:760; text-align:right; }.prompt-path { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }.prompt-step { display:flex; gap:10px; align-items:flex-start; }.prompt-step-num { flex-shrink:0; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--coral); color:white; font-size:.72rem; font-weight:850; }.prompt-step span:last-child { color:rgba(255,255,255,.82); font-size:.82rem; line-height:1.42; }.prompt-win { margin-top:auto; padding:13px 14px; border-radius:13px; background:rgba(189,232,219,.15); border:1px solid rgba(189,232,219,.25); color:#bde8db; font-size:.82rem; line-height:1.45; }.age-path { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }.age-path div { padding:13px; border-radius:16px; background:rgba(255,255,255,.8); border:1px solid var(--line); }.age-path strong { display:block; margin-bottom:4px; font-size:.79rem; }.age-path span { color:var(--ink-soft); font-size:.79rem; line-height:1.35; }.age-feature { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:baseline; margin-top:18px; padding:13px 15px; border:1px solid rgba(20,33,61,.1); border-radius:15px; background:#f4f8ff; }.age-feature span { color:var(--ink-soft); font-size:.75rem; font-weight:760; }.age-feature strong { color:var(--coral-deep); font-size:.85rem; }.age-feature p { grid-column:1 / -1; margin:0; font-size:.82rem; line-height:1.42; }.another-moment { margin-top:12px; padding:0; border:0; background:transparent; color:var(--coral-deep); font:inherit; font-size:.84rem; font-weight:800; cursor:pointer; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }.another-moment:hover { color:var(--ink); }.age-win { margin-top:18px; padding:14px 15px; border-radius:15px; background:var(--mint); color:#245b50; font-size:.9rem; line-height:1.45; }.age-note { margin:18px 0 0; color:var(--ink-soft); font-size:.78rem; line-height:1.45; }
@media (max-width:760px) { .nav-links { gap:12px; font-size:.82rem; }.nav-links a:not(.nav-cta) { display:none; }.grid-2,.grid-3,.price-grid,.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.hero { padding:47px 0 65px; } section { padding:65px 0; }.price-card { min-height:0; } footer { display:block; } footer > span { display:block; margin-top:7px; }.age-stage { grid-template-columns:1fr; }.age-path { grid-template-columns:1fr; }.age-option { min-width:40px; min-height:40px; } }
@media (max-width:430px) { .shell { width:min(100% - 28px,1140px); }.nav { padding:18px 0; }.nav-links .nav-cta { padding:9px 11px; } }