:root{
  --ink:    #1B1F2A;
  --ink-2:  #242A38;
  --ink-3:  #2E3545;
  --line:   #39414F;
  --paper:  #F3F1E9;
  --muted:  #99A2B2;
  --muted-2:#6E7585;
  --accent: #5E28FF;
  --accent-press:#4E1FE0;
  --accent-soft: rgba(94,40,255,.18);
  --accent-bright:#8B5CFF;
  --radius: 18px;
  --maxw: 1120px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

/* Visually hidden ale dostępne dla wyszukiwarek i czytników ekranu */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}
body{
  margin:0;
  min-height:100svh;
  background:
    radial-gradient(1200px 800px at 80% -10%, #221350 0%, transparent 55%),
    radial-gradient(900px 700px at -10% 110%, #0a2752 0%, transparent 60%),
    linear-gradient(180deg, #0A0D17 0%, #06080F 100%);
  background-attachment:fixed;
  color:var(--paper);
  font-family:"Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(16px,1.1vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
}

/* ---------- Background atmosphere (school notebook + doodles) ---------- */
.bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}

/* Papier w kratkę (notatnik szkolny) */
.bg__paper{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px;
  mask-image:radial-gradient(130% 110% at 50% 40%, #000 35%, transparent 90%);
  -webkit-mask-image:radial-gradient(130% 110% at 50% 40%, #000 35%, transparent 90%);
}

/* Aurorowe poświaty (delikatne, dla głębi) */
.bg__glow{
  position:absolute; border-radius:50%;
  filter:blur(80px);
  mix-blend-mode:screen;
}
.bg__glow--1{
  top:-15%; right:-10%;
  width:min(720px,75vw); height:min(720px,75vw);
  background:radial-gradient(circle, rgba(139,92,255,.40), transparent 65%);
  animation:bgdrift1 26s ease-in-out infinite;
}
.bg__glow--2{
  bottom:-18%; left:-12%;
  width:min(680px,70vw); height:min(680px,70vw);
  background:radial-gradient(circle, rgba(40,150,255,.32), transparent 65%);
  animation:bgdrift2 32s ease-in-out infinite;
}

/* Doodle wrapper */
.bg__doodles{position:absolute; inset:0;}

/* Pojedyncze doodle */
.doodle{
  position:absolute;
  width:64px; height:64px;
  color:var(--accent-bright);
  opacity:.13;
  will-change:transform, opacity;
  filter:drop-shadow(0 0 8px rgba(139,92,255,.25));
}
.doodle--txt{
  font-family:"Poppins", sans-serif;
  font-weight:700;
  font-size:42px;
  line-height:1;
  letter-spacing:-.02em;
  width:auto; height:auto;
  color:#7BB6FF;
  filter:drop-shadow(0 0 10px rgba(80,150,255,.30));
}

/* Animacje pływania — kilka wariantów, miksowanych przez delay */
@keyframes floatA{
  0%,100%{transform:translate(0,0) rotate(-6deg); opacity:.10;}
  50%   {transform:translate(14px,-18px) rotate(4deg); opacity:.22;}
}
@keyframes floatB{
  0%,100%{transform:translate(0,0) rotate(8deg); opacity:.09;}
  50%   {transform:translate(-16px,12px) rotate(-6deg); opacity:.20;}
}
@keyframes floatC{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1); opacity:.11;}
  50%   {transform:translate(10px,16px) rotate(10deg) scale(1.08); opacity:.22;}
}
@keyframes spinSlow{
  to{transform:rotate(360deg);}
}

/* Pozycje + animacje (rozsiane po viewporcie) */
.doodle.d1 { top:8%;  left:6%;   animation:floatA 14s ease-in-out infinite;}
.doodle.d2 { top:12%; left:78%;  animation:floatB 18s ease-in-out infinite; animation-delay:-3s;}
.doodle.d3 { top:22%; left:42%;  animation:floatC 16s ease-in-out infinite; animation-delay:-7s;}
.doodle.d4 { top:35%; left:88%;  animation:floatA 22s ease-in-out infinite; animation-delay:-5s; width:78px; height:78px;}
.doodle.d5 { top:48%; left:4%;   animation:floatB 17s ease-in-out infinite; animation-delay:-2s;}
.doodle.d6 { top:58%; left:62%;  animation:floatC 20s ease-in-out infinite; animation-delay:-9s; width:72px; height:72px;}
.doodle.d7 { top:70%; left:14%;  animation:floatA 19s ease-in-out infinite; animation-delay:-6s;}
.doodle.d8 { top:78%; left:50%;  animation:floatB 21s ease-in-out infinite; animation-delay:-1s; width:70px; height:70px;}
.doodle.d9 { top:86%; left:80%;  animation:floatC 18s ease-in-out infinite; animation-delay:-4s;}
.doodle.d10{ top:6%;  left:38%;  animation:floatB 16s ease-in-out infinite; animation-delay:-8s;}
.doodle.d11{ top:42%; left:30%;  animation:floatA 23s ease-in-out infinite; animation-delay:-11s; width:60px; height:60px;}
.doodle.d12{ top:64%; left:34%;  animation:floatC 24s ease-in-out infinite, spinSlow 60s linear infinite; animation-delay:-12s; width:80px; height:80px;}

/* Doodle tekstowe */
.doodle.d13{ top:18%; left:22%;  animation:floatA 18s ease-in-out infinite;}
.doodle.d14{ top:30%; left:66%;  animation:floatB 20s ease-in-out infinite; animation-delay:-5s;}
.doodle.d15{ top:52%; left:48%;  animation:floatC 17s ease-in-out infinite; font-size:60px;}
.doodle.d16{ top:74%; left:70%;  animation:floatA 19s ease-in-out infinite; animation-delay:-3s; font-size:54px;}
.doodle.d17{ top:90%; left:20%;  animation:floatB 22s ease-in-out infinite; animation-delay:-8s; font-size:66px;}
.doodle.d18{ top:38%; left:14%;  animation:floatC 21s ease-in-out infinite; animation-delay:-10s; font-size:32px;}

.bg__vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 22%, transparent 70%, rgba(0,0,0,.65) 100%),
    radial-gradient(130% 100% at 50% 50%, transparent 45%, rgba(0,0,0,.75) 100%);
}

@keyframes bgdrift1{
  0%,100%{transform:translate(0,0);}
  50%   {transform:translate(-5%,5%);}
}
@keyframes bgdrift2{
  0%,100%{transform:translate(0,0);}
  50%   {transform:translate(6%,-4%);}
}

@media (max-width:640px){
  .doodle{transform-origin:center;}
  /* Schowaj kilka ikon na mobile, by nie zaśmiecać */
  .doodle.d4,.doodle.d6,.doodle.d8,.doodle.d11,.doodle.d18{display:none;}
}
/* big faint reset arrow */
.bg__mark{
  position:absolute; top:50%; right:-9%; transform:translateY(-50%) rotate(-12deg);
  width:min(640px,70vw); color:var(--accent); opacity:.05;
}
.bg__mark svg{width:100%; height:auto; display:block;}
/* grain */
.bg__grain{
  position:absolute; inset:0; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

@keyframes breathe{
  0%,100%{transform:scale(1); opacity:.95;}
  50%{transform:scale(1.08); opacity:1;}
}

/* ---------- Layout shell ---------- */
.wrap{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(22px,4vw,40px) clamp(22px,5vw,56px);
  min-height:100svh;
  display:flex; flex-direction:column;
  gap:clamp(40px,7vh,80px);
}

/* ---------- Header ---------- */
header{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--paper);}
.brand__mark{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:11px;
  background:linear-gradient(180deg, var(--ink-2), var(--ink));
}
.brand__mark svg{width:21px; height:21px; color:var(--accent-bright); animation:spin 9s linear infinite;}
.brand__name{font-weight:700; font-size:1.02rem; letter-spacing:-.01em;}
.brand__name b{font-weight:700;}
.brand__name span{color:var(--muted); font-weight:500;}

@keyframes spin{to{transform:rotate(360deg);}}

.status{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:rgba(20,23,31,.6); backdrop-filter:blur(6px);
}
.dot{width:8px; height:8px; border-radius:50%; background:#FFC93C; position:relative;}
.dot::after{content:""; position:absolute; inset:-5px; border-radius:50%;
  background:#FFC93C; opacity:.45; animation:ping 1.8s var(--ease) infinite;}
@keyframes ping{0%{transform:scale(.6); opacity:.5;} 80%,100%{transform:scale(2.2); opacity:0;}}

/* ---------- Hero ---------- */
main{flex:1; display:flex; align-items:center;}
.hero{max-width:880px;}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(.72rem,1.4vw,.84rem); letter-spacing:.08em;
  color:var(--accent-bright);
  margin-bottom:clamp(20px,3vw,30px);
}
.eyebrow .slash{color:var(--muted-2);}
.cur{display:inline-block; width:9px; height:1.05em; background:var(--accent-bright);
  transform:translateY(2px); animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

h1{
  font-family:"Poppins", sans-serif;
  font-weight:800;
  font-size:clamp(2.7rem,7.4vw,5.6rem);
  line-height:.98;
  letter-spacing:-.025em;
  margin:0 0 clamp(22px,3vw,30px);
  color:var(--paper);
  text-wrap:balance;
}
h1 .hl{position:relative; color:var(--accent-bright); white-space:nowrap;}
h1 .hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.08em; height:.09em;
  background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left; opacity:.55;
  animation:draw .8s var(--ease) 1.05s forwards;
}
@keyframes draw{to{transform:scaleX(1);}}

.lead{
  font-size:clamp(1.06rem,1.9vw,1.32rem);
  line-height:1.55; color:var(--muted);
  max-width:60ch; margin:0 0 clamp(34px,5vw,46px);
}
.lead b{color:var(--paper); font-weight:600;}

/* ---------- Newsletter card ---------- */
.signup{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(27,32,41,.72), rgba(20,23,31,.72));
  backdrop-filter:blur(10px);
  border-radius:var(--radius);
  padding:clamp(22px,3.2vw,32px);
  max-width:600px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8);
}
.signup__label{
  font-family:"Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-bright); margin:0 0 10px;
}
.signup__title{
  font-family:"Poppins", sans-serif;
  font-weight:700; font-size:clamp(1.3rem,2.4vw,1.6rem);
  line-height:1.12; letter-spacing:-.01em; margin:0 0 8px; color:var(--paper);
}
.signup__text{font-size:.98rem; color:var(--muted); margin:0 0 20px; max-width:46ch;}

form{display:flex; gap:10px; flex-wrap:wrap;}
.field{flex:1 1 240px; position:relative;}
input[type="email"]{
  width:100%; height:54px;
  padding:0 16px;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--line); border-radius:12px;
  font-family:inherit; font-size:1rem;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
input[type="email"]::placeholder{color:var(--muted-2);}
input[type="email"]:focus{
  outline:none; border-color:var(--accent-bright);
  box-shadow:0 0 0 4px var(--accent-soft);
  background:#15181F;
}
input[type="email"][aria-invalid="true"]{
  border-color:#FF7A6B; box-shadow:0 0 0 4px rgba(255,122,107,.16);
}

button{
  height:54px; flex:0 0 auto;
  padding:0 26px;
  font-family:inherit; font-weight:700; font-size:1rem; letter-spacing:-.01em;
  color:var(--paper); background:var(--accent);
  border:none; border-radius:12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px;
  transition:transform .14s var(--ease), background .18s, box-shadow .18s;
  box-shadow:0 10px 24px -10px rgba(94,40,255,.55);
}
button:hover{background:var(--accent-press); transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(94,40,255,.6);}
button:active{transform:translateY(0);}
button:focus-visible{outline:3px solid var(--paper); outline-offset:3px;}
button svg{width:17px; height:17px;}

.note{
  margin:14px 0 0; font-size:.82rem; color:var(--muted-2);
  display:flex; align-items:center; gap:8px;
}
.note svg{width:14px; height:14px; flex:none; color:var(--muted);}

.msg{
  font-size:.92rem; margin:12px 0 0; min-height:1.2em;
  display:flex; align-items:center; gap:9px;
}
.msg--err{color:#FF9C90;}
.msg svg{width:16px; height:16px; flex:none;}

/* Success state */
.success{display:none; align-items:flex-start; gap:14px;}
.success.is-on{display:flex; animation:rise .5s var(--ease) both;}
.success__icon{
  width:44px; height:44px; flex:none; border-radius:12px;
  display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid rgba(94,40,255,.5);
}
.success__icon svg{width:22px; height:22px; color:var(--accent-bright);}
.success h3{font-family:"Poppins", sans-serif; font-weight:700;
  font-size:1.15rem; margin:2px 0 4px; color:var(--paper);}
.success p{margin:0; color:var(--muted); font-size:.95rem;}
form.is-hidden, .note.is-hidden{display:none;}

/* ---------- Napis "Już niedługo" (zamiast boxa) ---------- */
.soon{
  display:inline-flex; align-items:center; gap:16px;
  font-family:"Poppins", sans-serif;
  font-weight:800;
  font-size:clamp(1.9rem,5vw,3.1rem);
  letter-spacing:-.02em;
  color:#FF4D4D;
  animation:soonPulse 1.7s ease-in-out infinite;
}
.soon__dot{
  width:16px; height:16px; flex:none; border-radius:50%;
  background:#FF4D4D; box-shadow:0 0 18px rgba(255,77,77,.65);
  position:relative;
}
.soon__dot::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  background:#FF4D4D; opacity:.4; animation:ping 1.7s var(--ease) infinite;
}
@keyframes soonPulse{
  0%,100%{opacity:1; text-shadow:0 0 26px rgba(255,77,77,.4);}
  50%{opacity:.5; text-shadow:0 0 6px rgba(255,77,77,.1);}
}

/* ---------- Footer ---------- */
footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px 24px; flex-wrap:wrap;
  padding-top:clamp(20px,3vw,26px);
  border-top:1px solid var(--line);
  font-size:.82rem; color:var(--muted-2);
}
footer .tags{
  font-family:"Poppins", ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.04em; color:var(--muted);
}
footer a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent;}
footer a:hover{color:var(--paper); border-color:var(--accent);}

.foot-info{ display:flex; align-items:center; gap:6px 22px; flex-wrap:wrap; }

.credit{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; border:0; color:var(--muted-2);
  transition:color .18s, transform .18s var(--ease);
}
.credit:hover{ color:var(--paper); transform:translateY(-1px); }
.credit__label{
  font-family:"Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size:.74rem; letter-spacing:.03em; white-space:nowrap;
}
.credit__logo{
  display:inline-grid; place-items:center; line-height:0;
  background:var(--paper); border-radius:8px; padding:5px 9px;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.8);
  transition:transform .18s var(--ease), box-shadow .18s;
}
.credit:hover .credit__logo{ box-shadow:0 12px 24px -12px rgba(0,0,0,.85); }
.credit__logo img{ height:18px; width:auto; display:block; }

/* ---------- Entrance animation ---------- */
.reveal{opacity:0; transform:translateY(22px); animation:rise .85s var(--ease) forwards;}
@keyframes rise{to{opacity:1; transform:none;}}
.d1{animation-delay:.08s;} .d2{animation-delay:.20s;} .d3{animation-delay:.34s;}
.d4{animation-delay:.50s;} .d5{animation-delay:.66s;} .d6{animation-delay:.82s;}

@media (max-width:560px){
  button{flex:1 1 100%;}
  .status{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
  h1 .hl::after{transform:scaleX(1);}
}