*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#1E1B4B;--yellow:#FFB400;--orange:#FF6B35;--text:#24223f;--muted:#5f5d78;--line:#e6e4f0;--soft:#f6f5fb}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);line-height:1.6;background:#fff}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
a{color:var(--ink);text-decoration-color:var(--orange);text-underline-offset:2px}
a:hover{color:var(--orange)}
.nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:10}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.logo{display:flex;align-items:center}
.logo img{height:40px;width:auto;display:block}
nav a{margin-left:18px;text-decoration:none;color:var(--ink);font-size:.95rem;font-weight:500}
nav a:hover{color:var(--orange)}
.btn-sm{background:var(--yellow);color:var(--ink)!important;padding:8px 14px;border-radius:8px;font-weight:700}
.btn-sm:hover{background:var(--orange)}
.hero{background:linear-gradient(135deg,#fff5d6,#f3f2ff);padding:80px 0;text-align:center}
.hero h1{font-size:2.5rem;line-height:1.2;max-width:780px;margin:0 auto 18px}
.hero em{color:var(--ink);font-style:normal;background:linear-gradient(transparent 60%,var(--yellow) 60%);padding:0 4px}
.kicker{display:inline-block;background:var(--ink);color:var(--yellow);font-weight:700;font-size:.9rem;padding:6px 14px;border-radius:20px;margin-bottom:18px}
.lead{font-size:1.15rem;max-width:640px;margin:0 auto 28px;color:var(--muted)}
.signup{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:560px;margin:0 auto}
.signup input{flex:1;min-width:220px;padding:14px;border:1px solid #cdd6df;border-radius:10px;font-size:1rem}
.signup button{padding:14px 20px;background:var(--ink);color:#fff;border:0;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer}
@media(hover:hover){.signup button:hover{background:var(--orange);color:var(--ink)}}
.signup input:focus{outline:3px solid var(--yellow);border-color:var(--ink)}
.small{font-size:.85rem;color:var(--muted);margin-top:10px}
section{padding:64px 0}
h2{font-size:1.8rem;margin-bottom:28px;text-align:center}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
.grid5{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.card{display:block;padding:24px;border:1px solid var(--line);border-radius:12px;text-align:center;text-decoration:none;color:var(--ink);font-weight:600;transition:.2s;background:#fff}
.card:hover{border-color:var(--orange);box-shadow:0 4px 0 var(--yellow);transform:translateY(-2px)}
.alt{background:var(--soft)}
.prompt{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px}
.prompt h4{margin-bottom:10px}
.prompt pre{white-space:pre-wrap;font-family:inherit;background:var(--soft);border-left:3px solid var(--yellow);padding:14px;border-radius:8px;font-size:.95rem}
details{border-bottom:1px solid var(--line);padding:16px 0;max-width:720px;margin:0 auto}
summary{font-weight:600;cursor:pointer}
details p{margin-top:8px;color:var(--muted)}
.cta{text-align:center}
footer{padding:40px 0;text-align:center;font-size:.9rem;color:#cfcde6;background:var(--ink)}
footer a{color:#fff}
footer a:hover{color:var(--yellow)}
.flogo img{height:36px;width:auto}
.fslogan{color:var(--yellow);font-weight:600;margin:10px 0 6px}
@media(max-width:640px){.hero h1{font-size:1.8rem}nav a:not(.btn-sm){display:none}}
/* --- podstrani --- */
.page-hero{background:linear-gradient(135deg,#fff5d6,#f3f2ff);padding:56px 0 48px;text-align:center}
.page-hero h1{font-size:2.2rem;line-height:1.2;max-width:820px;margin:0 auto 16px}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.intro{max-width:720px;margin:0 auto 28px;color:var(--muted);font-size:1.05rem}
.prompt .num{display:inline-block;background:var(--ink);color:var(--yellow);font-weight:700;border-radius:50%;width:26px;height:26px;text-align:center;line-height:26px;font-size:.85rem;margin-right:8px}
.prompt .tip{font-size:.88rem;color:var(--muted);margin-top:8px}
.auto{background:#fff;border:1px solid var(--line);border-left:4px solid var(--yellow);border-radius:12px;padding:24px;margin-bottom:22px}
.auto h3{margin-bottom:6px}
.auto .meta{font-size:.88rem;color:var(--muted);margin-bottom:12px}
.auto ol{padding-left:22px}
.auto li{margin-bottom:6px}
.content{max-width:760px;margin:0 auto}
.content h2{text-align:left;font-size:1.4rem;margin:32px 0 12px}
.content p,.content li{margin-bottom:10px;color:var(--text)}
.content ul{padding-left:22px}
.note{background:#fff8e6;border:1px solid #f1d68a;border-radius:10px;padding:14px 16px;font-size:.92rem;margin-bottom:24px}
.related{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.related a{padding:8px 14px;border:1px solid var(--line);border-radius:20px;text-decoration:none;color:var(--ink);font-size:.92rem;background:#fff}
.related a:hover{border-color:var(--orange)}
.prompt h3{font-size:1.05rem;margin-bottom:10px;text-align:left}
/* --- hero video --- */
.hero-media{width:100%;max-width:560px;aspect-ratio:720/220;margin:0 auto 24px;border-radius:16px;overflow:hidden;background:#000 url(assets/brihtaai-intro-poster.jpg) center/cover no-repeat;box-shadow:0 10px 30px rgba(30,27,75,.18)}
.hero-video{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.hero{padding:44px 0}.hero-media{border-radius:12px;margin-bottom:18px}.kicker{margin-bottom:14px}.lead{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
/* --- animacije --- */
/* Pravilo: barvni prehodi, mehki fade in sij žarnice delujejo vedno (tudi ob "reduce motion");
   večji premiki (drsenje, poskakovanje, plavanje madežev) samo pri prefers-reduced-motion: no-preference. */
.prompt{position:relative}
.prompt h3,.prompt h4{padding-right:96px}
section[id]{scroll-margin-top:72px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* izbira jezika */
.lang{display:inline-flex;align-items:center;gap:6px;margin-left:18px;font-size:.85rem;font-weight:600;color:var(--muted)}
nav .lang a{margin-left:0;padding:2px 6px;border-radius:6px;color:var(--muted)}
nav .lang a[aria-current]{background:var(--ink);color:var(--yellow)}
nav .lang a:hover{color:var(--orange)}
@media(max-width:640px){nav .lang a{display:inline-block}.lang{margin-left:0;margin-right:10px}}
/* hero ozadje: barvni madeži */
.hero,.page-hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before,.hero::after,.page-hero::before,.page-hero::after,.hero .wrap::before,.page-hero .wrap::before{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.hero::before,.page-hero::before{width:560px;height:560px;background:radial-gradient(circle,rgba(255,180,0,.55),rgba(255,180,0,0) 66%);top:-200px;left:-170px}
.hero::after,.page-hero::after{width:560px;height:560px;background:radial-gradient(circle,rgba(255,107,53,.40),rgba(255,107,53,0) 66%);bottom:-240px;right:-170px}
.hero .wrap,.page-hero .wrap{position:relative}
.hero .wrap::before,.page-hero .wrap::before{width:440px;height:440px;left:52%;top:-60px;background:radial-gradient(circle,rgba(130,118,255,.32),rgba(130,118,255,0) 66%)}
/* naslovni poudarek: izris + lesketanje */
.hero em{background-color:transparent;background-image:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 80%),linear-gradient(90deg,var(--yellow),#ffc93a 50%,var(--orange));background-repeat:no-repeat;background-size:30% 40%,100% 40%;background-position:-60% 100%,0 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* kartice panog: animirana barvna obroba */
.card{position:relative;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--line) 0%,var(--yellow) 30%,var(--orange) 50%,var(--line) 75%,var(--line) 100%) border-box;background-size:100% 100%,300% 100%;background-position:0 0,0% 0;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.card:hover{border-color:transparent;box-shadow:0 14px 30px rgba(30,27,75,.16);transform:translateY(-6px)}
.prompt,.auto{transition:box-shadow .25s,transform .25s}
.prompt:hover,.auto:hover{box-shadow:0 10px 24px rgba(30,27,75,.10);transform:translateY(-3px)}
.ico{display:inline-block;will-change:transform}
/* gumbi */
.signup button,.btn-sm{position:relative;overflow:hidden;transition:background .2s,color .2s,transform .15s}
.signup button:active,.btn-sm:active{transform:scale(.97)}
.signup button::after,.btn-sm::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:skewX(-20deg);pointer-events:none;opacity:0}
/* logo: sij žarnice */
.logo{position:relative;isolation:isolate}
.logo::before{content:"";position:absolute;left:-12px;top:-12px;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,rgba(255,180,0,.9),rgba(255,180,0,.35) 40%,rgba(255,180,0,0) 70%);opacity:.3;pointer-events:none;z-index:-1}
.logo img{position:relative}
/* kopiraj */
.copy{position:absolute;top:16px;right:16px;font:600 .8rem/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:7px 11px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .2s,border-color .2s,transform .15s}
.copy:hover{border-color:var(--yellow);background:#fff8e6}
.copy:active{transform:scale(.95)}
.copy.done{background:var(--yellow);border-color:var(--yellow)}
.toast{position:fixed;left:50%;bottom:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:50;background:var(--ink);color:#fff;font-weight:600;padding:10px 18px;border-radius:999px;box-shadow:0 10px 28px rgba(30,27,75,.3);border-bottom:3px solid var(--yellow);-webkit-transform:translate(-50%,20px);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
.toast.show{opacity:1;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}
/* FAQ */
summary{list-style:none;position:relative;padding-right:28px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:-2px;font-size:1.3rem;color:var(--orange);transition:transform .25s}
details[open]:not(.closing) summary::after{transform:rotate(45deg)}

/* --- vedno (tudi reduce motion): fade, barve, sij --- */
.hero::before,.page-hero::before{animation:breathe 7s ease-in-out infinite alternate}
.hero::after,.page-hero::after{animation:breathe 9s ease-in-out -3s infinite alternate}
.hero .wrap::before,.page-hero .wrap::before{animation:breathe 11s ease-in-out -5s infinite alternate}
.logo::before{animation:glowFade 2.8s ease-in-out infinite}
.card{animation:borderflow 7s ease-in-out infinite alternate}
.hero em{animation:shimmer 3.2s ease-in-out 1.6s infinite}
details[open] p{animation:fadeIn .35s ease both}
.anim .hero .wrap>*,.anim .page-hero .wrap>*{animation:fade .8s ease both}
.anim .rv{opacity:0;transition:opacity .5s ease var(--rd,0ms)}
.anim .rv.in{opacity:1}

/* --- samo brez reduce motion: premiki --- */
@media(prefers-reduced-motion:no-preference){
  .hero::before,.page-hero::before{animation:drift1 14s ease-in-out infinite alternate}
  .hero::after,.page-hero::after{animation:drift2 17s ease-in-out infinite alternate}
  .hero .wrap::before,.page-hero .wrap::before{animation:drift3 19s ease-in-out infinite alternate}
  .logo::before{animation:glow 2.6s ease-in-out infinite}
  .signup button::after,.btn-sm::after{animation:shine 4.5s ease-in-out 1.8s infinite}
  .btn-sm::after{animation-delay:3s}
  .benefits .ico{animation:bob 3.2s ease-in-out infinite}
  .benefits div:nth-child(2) .ico{animation-delay:-1.1s}
  .benefits div:nth-child(3) .ico{animation-delay:-2.2s}
  .card:hover .ico{animation:bob 1s ease-in-out infinite}
  .anim .hero .wrap>*,.anim .page-hero .wrap>*{animation:up .8s cubic-bezier(.2,.7,.2,1) both}
  .anim .hero em{background-size:0% 40%,0% 40%;animation:hl 1s cubic-bezier(.6,0,.2,1) .6s forwards,shimmer 3.2s ease-in-out 1.8s infinite}
  .anim .rv{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .5s ease var(--rd,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--rd,0ms)}
  .anim .rv.in{opacity:1;transform:none}
  .anim .card.rv.in:hover{transform:translateY(-6px);transition-delay:0ms}
  .anim .prompt.rv.in:hover,.anim .auto.rv.in:hover{transform:translateY(-3px);transition-delay:0ms}
}
/* zamik vstopa hero elementov */
.anim .hero .wrap>:nth-child(2),.anim .page-hero .wrap>:nth-child(2){animation-delay:.1s}
.anim .hero .wrap>:nth-child(3),.anim .page-hero .wrap>:nth-child(3){animation-delay:.2s}
.anim .hero .wrap>:nth-child(4),.anim .page-hero .wrap>:nth-child(4){animation-delay:.3s}
.anim .hero .wrap>:nth-child(5){animation-delay:.4s}
.anim .hero .wrap>:nth-child(6){animation-delay:.5s}
.anim .hero .wrap>:nth-child(n+7){animation-delay:.58s}
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes hl{to{background-size:30% 40%,100% 40%}}
@keyframes shimmer{0%{background-position:-60% 100%,0 100%}60%,100%{background-position:160% 100%,0 100%}}
@keyframes borderflow{from{background-position:0 0,0% 0}to{background-position:0 0,100% 0}}
@keyframes breathe{from{opacity:.55}to{opacity:1}}
@keyframes drift1{0%{transform:translate(0,0) scale(1);opacity:.75}50%{opacity:1}100%{transform:translate(300px,140px) scale(1.25);opacity:.8}}
@keyframes drift2{0%{transform:translate(0,0) scale(1);opacity:.8}50%{opacity:1}100%{transform:translate(-320px,-120px) scale(1.2);opacity:.75}}
@keyframes drift3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-360px,110px) scale(.85)}}
@keyframes glowFade{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes glow{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-6deg)}}
@keyframes shine{0%{opacity:0;transform:skewX(-20deg) translateX(0)}8%{opacity:1}22%{opacity:1;transform:skewX(-20deg) translateX(420%)}23%,100%{opacity:0;transform:skewX(-20deg) translateX(420%)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(max-width:640px){.hero::before,.hero::after,.page-hero::before,.page-hero::after{width:380px;height:380px}.hero .wrap::before,.page-hero .wrap::before{width:300px;height:300px;left:30%}.prompt h3,.prompt h4{padding-right:0;margin-top:30px}.copy{top:12px;right:12px}}
@media(max-width:380px){.logo img{height:32px}.lang{margin-right:6px;gap:3px}nav .lang a{padding:2px 4px}.btn-sm{padding:7px 10px}}
/* --- animiran logotip (inline SVG) --- */
.logo svg{height:40px;width:129.25px;display:block;position:relative;overflow:visible}
.flogo{position:relative;display:inline-block;isolation:isolate;line-height:0}
.flogo svg{height:36px;width:116.33px;overflow:visible}
.flogo::before{content:"";position:absolute;left:-11px;top:-11px;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,rgba(255,180,0,.8),rgba(255,180,0,.3) 40%,rgba(255,180,0,0) 70%);opacity:.3;pointer-events:none;z-index:-1;animation:glowFade 2.8s ease-in-out infinite}
.logo-svg .l,.logo-svg .l>path{transform-box:fill-box;transform-origin:50% 100%}
.logo-svg .bulb{transform-box:fill-box;transform-origin:50% 50%}
.logo-svg .shine{animation:wsweep 5s ease-in-out 1.2s infinite}
@keyframes wsweep{0%{transform:translateX(0)}32%{transform:translateX(420px)}100%{transform:translateX(420px)}}
.logo-svg .wglow{opacity:0;animation:wglow 2.8s ease-in-out infinite}
@keyframes wglow{0%,100%{opacity:.08}50%{opacity:.75}}
@keyframes lrise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes bpop{0%{opacity:0;transform:scale(.4) rotate(-120deg)}65%{opacity:1;transform:scale(1.1) rotate(8deg)}100%{opacity:1;transform:none}}
@keyframes lwave{0%,100%{transform:none}40%{transform:translateY(-16px)}}
@media(prefers-reduced-motion:no-preference){
  .flogo::before{animation:glow 2.6s ease-in-out infinite}
  .logo-svg .wglow{animation-duration:2.6s}
  .anim .logo .l{animation:lrise .55s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 40ms + .2s) both}
  .anim .logo .bulb{animation:bpop .8s cubic-bezier(.3,1.4,.5,1) .05s both}
  .anim .flogo:not(.play) .l,.anim .flogo:not(.play) .bulb{opacity:0}
  .anim .flogo.play .l{animation:lrise .55s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 40ms + .2s) both}
  .anim .flogo.play .bulb{animation:bpop .8s cubic-bezier(.3,1.4,.5,1) .05s both}
  .logo:hover .l>path,.logo:focus-visible .l>path,.flogo:hover .l>path,.flogo:focus-visible .l>path{animation:lwave .55s ease-in-out calc(var(--i) * 40ms)}
}
@media(max-width:380px){.logo svg{height:32px;width:103.4px}}

/* --- mobilni meni --- */
.nlinks{display:contents}
.menu-btn{display:none;width:40px;height:40px;margin-left:8px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.nav.open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .menu-btn span:nth-child(2){opacity:0}
.nav.open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
nav{display:flex;align-items:center}
@media(max-width:640px){
  .js .menu-btn{display:inline-flex}
  .nlinks{display:none}
  .nav.open .nlinks{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(30,27,75,.12);padding:6px 20px 12px}
  .nav.open .nlinks a{display:block;margin:0;padding:12px 4px;font-size:1.05rem;font-weight:600;border-bottom:1px solid var(--line)}
  .nav.open .nlinks a:last-child{border-bottom:0}
  .nav .wrap{position:relative}
}
@media(max-width:380px){.nav .wrap{padding:0 12px}.menu-btn{width:36px;height:36px;margin-left:6px}.lang{margin-right:2px}}
@media(max-width:340px){.logo svg{height:28px;width:90.5px}.btn-sm{padding:6px 8px;font-size:.88rem}}
/* --- sporočilo ob prijavi (dokler Brevo ni povezan) --- */
.form-msg{max-width:560px;margin:12px auto 0;padding:12px 16px;border-radius:10px;background:#fff8e6;border:1px solid #f1d68a;color:var(--ink);font-weight:600;font-size:.95rem;text-align:center}
.form-msg.show{animation:fadeIn .35s ease both}
/* --- tisk: vse vsebine vidne, brez animacij in videa --- */
@media print{
  .anim .rv,.anim .hero .wrap>*,.anim .page-hero .wrap>*,.logo-svg .l,.logo-svg .bulb,.anim .flogo .l,.anim .flogo .bulb{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .hero::before,.hero::after,.page-hero::before,.page-hero::after,.hero .wrap::before,.page-hero .wrap::before,.logo-svg .shine,.logo-svg .wglow,.copy,.menu-btn,.toast,.hero-media,form.signup{display:none!important}
  .nav{position:static}
}
@media(max-width:640px){nav .btn-sm{margin-left:0}.lang{margin-left:10px}}
nav a,.lang{white-space:nowrap}.nav .logo{flex-shrink:0}