*{box-sizing:border-box}body{margin:0;font:1.05rem/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;color:#1b2430}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.wrap{max-width:1000px;margin:auto;padding:0 20px}
header{border-bottom:1px solid #e4e6ea}header .wrap{display:flex;justify-content:space-between;align-items:center;padding:12px 20px}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;color:var(--primary);text-decoration:none}.brand img{width:40px;height:40px}
nav a{margin-left:18px;color:var(--primary);font-weight:600}
h1,h2,h3{line-height:1.2;color:var(--primary)}h1{font-size:clamp(2rem,5vw,3.2rem)}
.hero{background:linear-gradient(135deg,#f4f5f7,#fff4ec);padding:72px 0}
.btn{display:inline-block;background:var(--accent);color:#1b2430;font-weight:700;padding:12px 24px;border:0;border-radius:8px;text-decoration:none;cursor:pointer;font-size:1rem}
section{padding:56px 0}.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{border:1px solid #e4e6ea;border-radius:12px;padding:20px;background:#fff;display:block;color:inherit;text-decoration:none}.card img{width:100%;height:auto;border-radius:8px}
a{color:var(--primary)}form label{display:block;margin:14px 0 4px;font-weight:600}
input,textarea{width:100%;padding:10px;border:1px solid #6b7785;border-radius:6px;font:inherit}
.hp{position:absolute;left:-9999px}
footer{background:#1d1f23;color:#e8eef6;padding:36px 0;margin-top:40px;font-size:.95rem}footer a{color:#fff;margin:0 14px 0 0}
footer .pw{margin-top:14px;opacity:.85}
#cb{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:3px solid var(--accent);padding:16px;z-index:50;box-shadow:0 -4px 16px #0002}
#cb[hidden]{display:none}#cb .btn{margin:8px 8px 0 0}.note{background:#fff4ec;border-left:4px solid var(--accent);padding:10px 14px;margin:16px 0}
/* ===== Animaties ===== */
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#f4f5f7,#fff4ec,#eceef1,#ffe9d9);background-size:300% 300%;animation:bg 14s ease-in-out infinite}
.hero .wrap{position:relative;z-index:1}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.35;pointer-events:none}
.b1{width:320px;height:320px;background:var(--accent);top:-90px;right:-60px;animation:float 9s ease-in-out infinite}
.b2{width:220px;height:220px;background:var(--primary);bottom:-80px;left:8%;animation:float 11s ease-in-out infinite reverse}
.b3{width:110px;height:110px;background:var(--accent);bottom:30px;right:28%;animation:float 7s ease-in-out infinite .8s}
.hero h1,.hero p,.hero .btn{opacity:0;animation:up .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1{animation-delay:.1s}.hero p{animation-delay:.35s}.hero .btn{animation-delay:.6s}
.hero h1 em{color:var(--accent);font-style:normal}
.btn{transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 8px 20px #f26b1d55}
.hero .btn{animation:up .8s .6s cubic-bezier(.2,.7,.2,1) forwards,pulse 2.6s 1.8s infinite}
.brand img{transition:transform .5s}.brand:hover img{transform:rotate(-8deg) scale(1.12)}
nav a{text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 3px no-repeat;transition:background-size .3s;padding-bottom:3px}
nav a:hover{background-size:100% 3px}
.card{transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 16px 32px #1d1f2326;border-color:var(--accent)}
.card img{transition:transform .5s}.card:hover img{transform:scale(1.05)}
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .grid .reveal:nth-child(2){transition-delay:.12s}.js .grid .reveal:nth-child(3){transition-delay:.24s}
.js .reveal.in.card:hover{transform:translateY(-8px) rotate(-.4deg);transition-delay:0s}
#cb{animation:slide .5s cubic-bezier(.2,.7,.2,1)}
footer{border-top:4px solid var(--accent)}
@keyframes bg{50%{background-position:100% 50%}}
@keyframes float{50%{transform:translate(-18px,24px) scale(1.08)}}
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #f26b1d66}50%{box-shadow:0 0 0 14px #f26b1d00}}
@keyframes slide{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero h1,.hero p,.hero .btn,.js .reveal{opacity:1!important;transform:none!important}}