/* =====================================================================
   NOA LANDING SKIN — "Higgsfield, aga NOA"
   MIKS: MagicAI lilla vaikenagu vahetame taielikult valja ilma Vite
   buildita — see fail laetakse PARAST kompileeritud Tailwind CSS-i ja
   kirjutab ule paleti-tokenid + votmeklassid. Uued NOA sektsioonid
   (hero, showreel, kuidas-tootab) on stiilitud .noa-* klassidega siin.
   JOUDLUS: MITTE UHTEGI backdrop-filterit, mitte animeeritud blur'i.
   Filmitera = staatiline SVG-noise data-URI.
   ===================================================================== */

/* --- Fraunces (OFL litsents, variable 300-900, /fraunces.woff2) --- */
@font-face {
    font-family: "Fraunces";
    src: url("/fraunces.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* --- NOA tokenid + Tailwindi juurtokenite ulekirjutus --- */
:root {
    /* MIKS: kompileeritud CSS kasutab hsl(var(--token)) — vahetame juurest */
    --background: 220 58% 6%;            /* suganavy #070d1a */
    --foreground: 215 30% 78%;           /* hele kirjatoon navy peal */
    --heading-foreground: 44 45% 91%;    /* soe elevandiluu pealkirjadele */
    --primary: 41 51% 54%;               /* kuld #c8a04a — lilla valja */
    --font-heading: "Fraunces";

    --noa-navy-0: #070d1a;
    --noa-navy-1: #0a1428;
    --noa-surface: rgba(16, 32, 60, 0.92);
    --noa-gold-0: #c8a04a;
    --noa-gold-1: #e8cf7a;
    --noa-line: rgba(232, 207, 122, 0.28);
    --noa-line-soft: rgba(232, 207, 122, 0.14);
    --noa-ink: #f4eddc;
    --noa-dim: rgba(214, 222, 240, 0.6);
    --noa-cyan: #7fd6e8; /* AINULT elavatele andmetele */
    --noa-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

html {
    background: var(--noa-navy-0);
}

body {
    background: linear-gradient(175deg, var(--noa-navy-0) 0%, var(--noa-navy-1) 46%, #081124 74%, var(--noa-navy-0) 100%) fixed;
    color: hsl(var(--foreground));
}

/* --- Filmitera ule kogu lehe: STAATILINE svg-noise + ei puutu hiirt --- */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    opacity: 0.05;
    pointer-events: none;
    z-index: 95;
}

/* --- Pealkirjad = Fraunces --- */
h1, h2, h3,
.font-heading {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
}

h2 { color: var(--noa-ink); }

/* =====================================================================
   HEADER — kleepuv nav valgest navy'ks
   ===================================================================== */
.site-header.lqd-is-sticky {
    color: var(--noa-ink) !important;
}
.site-header.lqd-is-sticky .site-header-nav {
    background: rgba(10, 20, 40, 0.97) !important;
    border-bottom: 1px solid var(--noa-line-soft) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45) !important;
}
/* MIKS: sticky-logo on tume variant — navy peal kaoks ara, jatame heleda */
.site-header.lqd-is-sticky .site-logo img.peer {
    opacity: 0 !important;
}
.site-header.lqd-is-sticky .site-logo img:not(.peer) {
    opacity: 1 !important;
    transform: none !important;
}
/* mobiilimenuu taust */
.site-nav-container {
    background-color: var(--noa-navy-1) !important;
}
@media (min-width: 992px) {
    .site-nav-container { background-color: transparent !important; }
}

/* =====================================================================
   NOA HERO — taisekraani kino
   ===================================================================== */
.noa-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    text-align: center;
    padding: 9.5rem 0 5rem;
    background:
        radial-gradient(1100px 520px at 50% -8%, rgba(200, 160, 74, 0.16), transparent 62%),
        radial-gradient(900px 600px at 82% 108%, rgba(20, 44, 86, 0.55), transparent 65%),
        linear-gradient(180deg, var(--noa-navy-0) 0%, var(--noa-navy-1) 58%, #081124 100%);
}
/* vinjett — staatiline */
.noa-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(3, 6, 14, 0.55) 100%);
}
.noa-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}
.noa-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.noa-kicker {
    font-family: var(--noa-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--noa-gold-1);
    border: 1px solid var(--noa-line);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    margin-bottom: 2.2rem;
    background: rgba(16, 32, 60, 0.6);
}
.noa-kicker .dot {
    background: var(--noa-gold-0);
    opacity: 0.9;
}
.noa-hero-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 480;
    font-size: clamp(3rem, 8vw, 7.25rem);
    line-height: 0.98;
    letter-spacing: -0.015em;
    color: var(--noa-ink);
    max-width: 18ch;
    margin: 0 auto 1.8rem;
}
.noa-hero-title em,
.noa-hero-title strong {
    font-style: normal;
    font-weight: 560;
    background: linear-gradient(115deg, var(--noa-gold-0) 8%, var(--noa-gold-1) 55%, #f6e7ae 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.noa-hero-desc {
    max-width: 46ch;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--noa-dim);
    margin: 0 auto 2.6rem;
}
.noa-hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3.4rem;
}
.noa-btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.05rem 2.3rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--noa-gold-0), var(--noa-gold-1));
    color: #171205;
    font-weight: 650;
    font-size: 1.02rem;
    border: 1px solid rgba(246, 231, 174, 0.65);
    box-shadow: 0 14px 44px rgba(200, 160, 74, 0.26);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.noa-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 56px rgba(200, 160, 74, 0.36);
    color: #171205;
}
.noa-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.05rem 2rem;
    border-radius: 14px;
    border: 1px solid var(--noa-line);
    color: var(--noa-ink);
    font-weight: 550;
    background: rgba(16, 32, 60, 0.55);
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.noa-btn-ghost:hover {
    border-color: var(--noa-gold-1);
    transform: translateY(-2px);
    color: var(--noa-ink);
}
/* usaldusriba — mono-mikrosildid */
.noa-trustbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem 1.4rem;
    font-family: var(--noa-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(214, 222, 240, 0.55);
}
.noa-trustbar b {
    font-weight: 400;
    color: rgba(232, 207, 122, 0.75);
}
.noa-trustbar .tick {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: var(--noa-gold-0);
    opacity: 0.7;
}
.noa-scroll-hint {
    margin-top: 2.6rem;
    font-family: var(--noa-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(214, 222, 240, 0.45);
    transition: color 0.25s ease;
}
.noa-scroll-hint:hover { color: var(--noa-gold-1); }

/* =====================================================================
   NOA sektsiooni-pead (jagatud)
   ===================================================================== */
.noa-sec-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.4rem;
}
.noa-sec-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--noa-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--noa-gold-1);
    margin-bottom: 1.2rem;
}
.noa-sec-kicker::before,
.noa-sec-kicker::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--noa-line);
}
.noa-sec-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.05;
    color: var(--noa-ink);
    margin-bottom: 1rem;
}
.noa-sec-desc {
    color: var(--noa-dim);
    font-size: 1.05rem;
    line-height: 1.55;
}

/* =====================================================================
   SHOWREEL — kuldraamis 16:9 "kaadrid" (ILMA videota, ausalt)
   ===================================================================== */
.noa-showreel {
    position: relative;
    padding: 5.5rem 0 3rem;
}
.noa-reel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
}
@media (max-width: 767px) {
    .noa-reel-grid { grid-template-columns: 1fr; }
}
.noa-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--noa-line);
    background: var(--noa-surface);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.noa-frame:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 207, 122, 0.55);
}
.noa-frame svg.noa-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* kaadri sisemine kuldjoon */
.noa-frame::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(232, 207, 122, 0.16);
    border-radius: 12px;
    pointer-events: none;
}
.noa-frame-label {
    position: absolute;
    left: 1.1rem;
    bottom: 0.95rem;
    z-index: 2;
    font-family: var(--noa-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(244, 237, 220, 0.85);
}
.noa-frame-tag {
    position: absolute;
    right: 1.1rem;
    bottom: 0.9rem;
    z-index: 2;
    font-family: var(--noa-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(232, 207, 122, 0.8);
    border: 1px solid var(--noa-line-soft);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    background: rgba(7, 13, 26, 0.7);
}
.noa-frame-meta {
    position: absolute;
    left: 1.1rem;
    top: 0.95rem;
    z-index: 2;
    font-family: var(--noa-mono);
    font-size: 9.5px;
    letter-spacing: 0.2em;
    color: rgba(214, 222, 240, 0.5);
}
.noa-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 999px;
    border: 1px solid var(--noa-line);
    background: rgba(7, 13, 26, 0.66);
    display: grid;
    place-content: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.noa-frame:hover .noa-play {
    transform: scale(1.08);
    border-color: var(--noa-gold-1);
}
.noa-play svg { display: block; }

/* =====================================================================
   KUIDAS TOOTAB — HUD-kaardid
   ===================================================================== */
.noa-how {
    padding: 5rem 0 5.5rem;
}
.noa-how-panel {
    position: relative;
    border: 1px solid var(--noa-line-soft);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(10, 20, 40, 0.85), rgba(7, 13, 26, 0.92));
    padding: 4.5rem 3rem;
    overflow: hidden;
}
@media (max-width: 640px) {
    .noa-how-panel { padding: 3rem 1.2rem; }
}
/* orn kuld-haze paneeli ulaosas — staatiline */
.noa-how-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(720px 260px at 50% 0%, rgba(200, 160, 74, 0.12), transparent 70%);
    pointer-events: none;
}
.noa-hud-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
    margin-bottom: 2.6rem;
}
@media (max-width: 767px) {
    .noa-hud-grid { grid-template-columns: 1fr; }
}
.noa-hud-card {
    position: relative;
    background: var(--noa-surface);
    border: 1px solid var(--noa-line-soft);
    border-radius: 16px;
    padding: 2.3rem 1.8rem 2.1rem;
    text-align: left;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.noa-hud-card:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 207, 122, 0.45);
}
/* HUD-nurgatikid */
.noa-hud-card i.c {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: rgba(232, 207, 122, 0.55);
    border-style: solid;
    border-width: 0;
}
.noa-hud-card i.c.tl { top: 7px; left: 7px; border-top-width: 1px; border-left-width: 1px; }
.noa-hud-card i.c.br { bottom: 7px; right: 7px; border-bottom-width: 1px; border-right-width: 1px; }
.noa-hud-step {
    display: block;
    font-family: var(--noa-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--noa-gold-1);
    margin-bottom: 1.1rem;
}
.noa-hud-step::after {
    content: "";
    display: block;
    width: 34px;
    height: 1px;
    margin-top: 0.7rem;
    background: linear-gradient(90deg, var(--noa-gold-0), transparent);
}
.noa-hud-title {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--noa-ink);
}
.noa-how-foot {
    position: relative;
    text-align: center;
    color: var(--noa-dim);
}
.noa-how-foot a { color: var(--noa-gold-1); }

/* =====================================================================
   MAGICAI SEKTSIOONIDE UMBERVARVIMINE (lilla + heledad plaadid valja)
   MIKS: kompileeritud Tailwind ei sisalda uusi klasse — votame olemas-
   olevad klassinimed atribuudi-selektoriga kinni ja varvime NOA-ks.
   ===================================================================== */

/* lilla gradient-taust (varu, kui .banner-bg kuskil veel esineb) */
.banner-bg {
    background: linear-gradient(160deg, var(--noa-navy-0) 0%, var(--noa-navy-1) 55%, #10203c 100%) !important;
    animation: none !important;
}
.banner-subtitle-gradient { display: none !important; }

/* heledad pastell-plaadid → NOA pind */
[class*="bg-[#F5F5F7]"],
[class*="bg-[#F3E5F5]"],
[class*="bg-[#FDF1F1]"],
[class*="bg-[#F2F2F2]"] {
    background: var(--noa-surface) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid var(--noa-line-soft);
}

/* lilla/sinise margi-sildid → kuld */
[class*="bg-[#28027C]"],
[class*="bg-[#60027C]"],
[class*="bg-[#083D91]"],
[class*="bg-[#885EFE]"],
[class*="bg-[#6C727B]"] {
    background: rgba(232, 207, 122, 0.12) !important;
    color: var(--noa-gold-1) !important;
}
[class*="text-[#28027C]"],
[class*="text-[#60027C]"],
[class*="text-[#083D91]"],
[class*="text-[#885EFE]"],
[class*="text-[#5A4791]"] {
    color: var(--noa-gold-1) !important;
}

/* mustad/tume-sinised plokid → navy paneel kuldjoonega */
[class*="bg-[#010101]"] {
    background-color: var(--noa-navy-1) !important;
    background-image: radial-gradient(720px 260px at 50% 0%, rgba(200, 160, 74, 0.1), transparent 70%) !important;
    border: 1px solid var(--noa-line-soft);
}
[class*="bg-[#343C57]"],
[class*="bg-[#262626]"] {
    background-color: var(--noa-navy-1) !important;
}

/* suured umarad raamid → kuldjoon + orn pind */
.site-section [class*="rounded-[50px]"] {
    border-color: var(--noa-line-soft) !important;
    background-color: rgba(10, 20, 40, 0.55);
}

/* aktiivsed valged pillid (hinnad, generaatorid) → kuld-pind */
.lqd-is-active[class*=":bg-white"] {
    background: rgba(232, 207, 122, 0.16) !important;
    color: var(--noa-ink) !important;
    border-color: var(--noa-line) !important;
}
[class*="hover:bg-white"]:hover {
    background: rgba(232, 207, 122, 0.14) !important;
    color: var(--noa-ink) !important;
}

/* valge-taustaga kaardid ja tekstid */
.site-section [class*="text-black"] { color: var(--noa-ink) !important; }
.site-section strong { color: var(--noa-ink); }
.site-section [class*="hover:bg-black"]:hover {
    background: linear-gradient(135deg, var(--noa-gold-0), var(--noa-gold-1)) !important;
    color: #171205 !important;
}

/* hinnaplaanide "vali" nupp → kuld-aktsent */
#pricing a[class*="bg-black"] {
    background: rgba(232, 207, 122, 0.1) !important;
    color: var(--noa-ink) !important;
    border: 1px solid var(--noa-line-soft);
}
#pricing a[class*="bg-black"]:hover {
    background: linear-gradient(135deg, var(--noa-gold-0), var(--noa-gold-1)) !important;
    color: #171205 !important;
}

/* featured plaani raam kullaks */
#pricing [class*="rounded-3xl"].border,
#pricing .border[class*="rounded-3xl"] {
    border-color: var(--noa-line) !important;
}

/* varjud tumedal pehmemaks */
.site-section [class*="shadow-"] {
    --tw-shadow-color: rgba(0, 0, 0, 0.5);
}

/* FAQ, testimonials jm heledad ikoonikastid */
.lqd-box-dot { border-color: var(--noa-navy-1) !important; }

/* jalus tumedaks (varu — jalus voib olla juba tume) */
.site-footer {
    background: var(--noa-navy-0) !important;
    color: var(--noa-dim);
    border-top: 1px solid var(--noa-line-soft);
}

/* GDPR riba */
.gdpr-notice, [class*="gdpr"] a { color: inherit; }

/* =====================================================================
   Reduced motion — konstellatsioon peatub CSS-i poolelt varjatuna
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .noa-hero-canvas { display: none; }
    .noa-frame, .noa-hud-card, .noa-btn-gold, .noa-btn-ghost { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   HOLLYWOOD-PASS — käsitsi lisatud kiht (kaskaad: hilisem võidab).
   MÕÕDETUD PROBLEEM: h1 oli 48px = blogi, mitte kino. Higgsfield-klassi
   hero elab 90-130px skaalal ja tegelane on LAVAL, mitte ikoonina nurgas.
   Jõudlusreeglid kehtivad: null backdrop-filterit, ainult staatilised
   gradiendid + üks one-shot sisenemine.
   ══════════════════════════════════════════════════════════════════════ */

.noa-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}

/* Letterbox — kino esimene märk: mustad ribad + kuldne juuksepiir */
.noa-hero::before,.noa-hero::after{content:"";position:absolute;left:0;right:0;height:56px;
  background:#04070e;z-index:5;pointer-events:none}
.noa-hero::before{top:0;border-bottom:1px solid rgba(232,207,122,.22)}
.noa-hero::after{bottom:0;border-top:1px solid rgba(232,207,122,.22)}

/* PEALKIRI — kino-mõõt. clamp: telefon 3.4rem → lagi 8.25rem */
.noa-hero-title{font-family:Fraunces,Georgia,serif !important;font-weight:300;
  font-size:clamp(3.4rem,8.6vw,8.25rem) !important;line-height:.98 !important;
  letter-spacing:-.025em;color:#f2e9d6;max-width:11ch;
  text-wrap:balance;margin:.18em 0 .22em}
.noa-hero-title em,.noa-hero-title i{font-style:italic;color:transparent;
  background:linear-gradient(115deg,#c8a04a 20%,#e8cf7a 55%,#c8a04a 85%);
  -webkit-background-clip:text;background-clip:text}

.noa-kicker{font-family:ui-monospace,Menlo,monospace;font-size:12px;
  letter-spacing:.34em;text-transform:uppercase;color:#c8a04a}
.noa-hero-desc{font-size:clamp(1.02rem,1.4vw,1.3rem);line-height:1.6;
  color:rgba(214,222,240,.82);max-width:46ch}

/* Tekst vasakule — lavastus vajab suunda, keskjoondus on brošüür */
.noa-hero-inner{position:relative;z-index:2;text-align:left;max-width:1240px;
  padding-block:120px}
.noa-hero-inner>*{margin-inline:0}
.noa-hero-cta{justify-content:flex-start}

/* CTA-d kino-mõõtu */
.noa-btn-gold{font-size:1.05rem;padding:1.05rem 2.2rem;border-radius:14px;
  background:linear-gradient(120deg,#c8a04a,#e8cf7a 60%,#d9b85c);color:#0a1428;
  font-weight:600;box-shadow:0 18px 50px -18px rgba(200,160,74,.55);
  transition:transform .18s ease,box-shadow .18s ease}
.noa-btn-gold:hover{transform:translateY(-2px);box-shadow:0 24px 60px -16px rgba(200,160,74,.7)}
.noa-btn-ghost{border:1px solid rgba(232,207,122,.4);border-radius:14px;
  padding:1.02rem 1.8rem;color:#e8cf7a;transition:border-color .18s ease}
.noa-btn-ghost:hover{border-color:rgba(232,207,122,.85)}

/* ── MASKOTI LAVA ─────────────────────────────────────────────────── */
.noa-mascot-stage{position:absolute;right:4vw;bottom:56px;z-index:1;
  width:min(430px,33vw);margin:0;pointer-events:none;
  animation:noa-sisene 1s cubic-bezier(.16,.84,.44,1) both}
.noa-mascot-stage img{position:relative;z-index:2;width:100%;height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
/* Kuldne tagavalgus — STAATILINE radial, mitte filter-animatsioon */
.noa-mascot-halo{position:absolute;inset:-18% -22%;z-index:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(200,160,74,.32),rgba(200,160,74,.08) 55%,transparent 75%)}
/* Põranda-vari annab kaalu — tegelane SEISAB, mitte ei hõlju suvaliselt */
.noa-mascot-floor{position:absolute;left:12%;right:12%;bottom:-2%;height:36px;z-index:0;
  border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent 70%)}
@keyframes noa-sisene{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* Kitsas ekraan: maskott taandub hämaraks taustafiguuriks teksti taha */
@media (max-width:980px){
  .noa-mascot-stage{right:50%;transform:translateX(50%);width:min(340px,72vw);
    opacity:.22;bottom:8%}
  .noa-hero-inner{text-align:left;padding-block:96px 140px}
}

/* ── HOLLYWOOD-PASS v2: kaks mõõdetud parandust ─────────────────────
   1) MASKOTT EI TOHI SÕLTUDA ANIMATSIOONIST. Eelmine reegel kasutas
      opacity-keyframe'i + 'both' filli — kui animatsioon ei käivitu
      (peidetud paan/taust-tab), JÄÄB opacity:0 ja staar on laval nähtamatu.
      Seesama lõks lõi kooli dashboardi mustaks. Nüüd: sisenemine on
      AINULT transform (element on alati nähtav, liikumine on boonus).
   2) Pealkiri (11ch × 124px) ulatus maskoti figuurini (mõõdetud: h1 parem
      serv ületas img vasaku serva x=937). Tekstiveerg saab parema piiri —
      kino-poster lubab halo-kattuvust, aga mitte roboti näo katmist. */
.noa-mascot-stage{animation:none;opacity:1}
.noa-mascot-stage img{animation:noa-sisene-t 1s cubic-bezier(.16,.84,.44,1)}
@keyframes noa-sisene-t{from{transform:translateY(26px)}to{transform:none}}
@media (min-width:981px){
  .noa-hero-inner{padding-right:min(37vw,540px)}
  .noa-hero-title{max-width:10ch}
}
@media (max-width:980px){
  .noa-mascot-stage{opacity:.22}
}

/* ── ARNO EKRAANIPILTIDE PARANDUSED (mõõdetud vead, mitte maitse) ──────
   1) Jaluse-hero ("Su esimene video ootab") kandis MagicAI LILLA gradienti
      ja halli nuppu — NOA-s on lilla keelatud värv.
   2) Menüülinkide hover tegi inetuid tumedaid kaste (tailwind hover:bg).
   Mõlemad on kompileeritud tailwind-klassid, mida me ei saa uuesti ehitada
   (build-pipeline'i pole) — seega sihitud !important kaskaad. */

/* Jalus: lilla gradient → süganavy + õrn kuldne valgus ülaservas */
footer [class*="bg-gradient"], footer .bg-gradient-to-br{
  background:radial-gradient(120% 90% at 50% 0%, rgba(200,160,74,.14), transparent 55%),
             linear-gradient(180deg,#0a1428,#070d1a) !important}
footer{background:#070d1a !important}
/* Jaluse CTA-nupud kulda */
footer a[href*="register"], footer a[href*="#"] .btn, footer .btn{
  background:linear-gradient(120deg,#c8a04a,#e8cf7a 60%,#d9b85c) !important;
  color:#0a1428 !important;border:0 !important;border-radius:14px !important;
  font-weight:600 !important}
/* Jaluse serif-pealkiri kuldseks nagu hero omal */
footer h2, footer .font-serif{color:#f2e9d6}

/* Menüü: kastid maha, kuldne alajoon hoverile */
header nav a{background:transparent !important;border-radius:0 !important;
  position:relative;transition:color .15s ease}
header nav a:hover{background:transparent !important;color:#e8cf7a !important}
header nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;
  height:1px;background:linear-gradient(90deg,#c8a04a,#e8cf7a);
  transition:right .2s ease}
header nav a:hover::after{right:0}

/* LOGO SUURUS RAUDSELT KINNI. Mõõdetud viga: 160px kõrgune logo-PNG renderdus
   headeris naturaalsuuruses — maskott rippus hiiglasena üle ekraaninurga.
   Konstraint käib SRC järgi, et kehtiks igas kohas, kus logo esineb. */
img[src*="noa-logo-v2"]{height:52px !important;width:auto !important;max-width:none}
img[src*="noa-mascot"]:not(.noa-mascot-stage img){height:44px !important;width:auto !important}
footer img[src*="noa-logo-v2"]{height:44px !important}
@media (max-width:760px){ img[src*="noa-logo-v2"]{height:40px !important} }