/* ══════════════════════════════════════════════════
   Palette: evening blue → morning light.
   Friendly, high contrast, generous sizing — this is
   read by people who don't want to squint.
   ══════════════════════════════════════════════════ */
:root{
  --navy:#0F2742;
  --navy-2:#173453;
  --navy-3:#1F4368;
  --navy-line:#2E5075;

  --sky:#F2F7FC;
  --white:#FFFFFF;
  --sky-line:#D7E4F0;

  --blue:#2A6FD4;
  --blue-deep:#1A55AC;
  --blue-soft:#E5EFFC;

  --green:#17825A;
  --green-soft:#E1F3EB;
  --amber:#B87510;
  --amber-soft:#FBF0DA;

  --on-navy:#EDF4FB;
  --on-navy-2:#AFC7DE;
  --ink:#122740;
  --ink-2:#47617B;
  --ink-3:#54708C;

  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --shell:min(1120px,100% - 2.5rem);
  --r:10px;
  --r-sm:7px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--navy);color:var(--on-navy);
  font-family:var(--sans);font-size:1.125rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--sans);font-weight:800;line-height:1.14;letter-spacing:-.022em}
.shell{width:var(--shell);margin-inline:auto}

.d1{font-size:clamp(2.3rem,5.2vw,3.9rem);line-height:1.08;letter-spacing:-.03em}
.d2{font-size:clamp(1.75rem,3.4vw,2.6rem);letter-spacing:-.026em}
.d3{font-size:1.3rem;font-weight:700;letter-spacing:-.015em}

.kicker{
  font-size:.9rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 1.15rem;
}

.band{padding:clamp(4rem,7.5vw,6.5rem) 0}
.band--night{background:var(--navy)}
.band--day{background:var(--sky);color:var(--ink)}
.band--day .kicker{color:var(--blue-deep)}
.band--night .kicker{color:#7FB2F5}

.intro{max-width:34em;margin-bottom:clamp(2.5rem,4.5vw,3.5rem)}
.intro p{margin:1.1rem 0 0;font-size:1.18rem}
.band--day .intro p{color:var(--ink-2)}
.band--night .intro p{color:var(--on-navy-2)}

/* ── buttons: big and obvious ─────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:700;padding:1.05rem 2rem;
  border-radius:var(--r-sm);text-decoration:none;border:2px solid transparent;
  transition:background .16s,color .16s,border-color .16s,transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn--blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--blue:hover{background:#4B8CE8;border-color:#4B8CE8}
.btn--wire{background:transparent;color:var(--on-navy);border-color:var(--navy-line)}
.btn--wire:hover{border-color:#7FB2F5;background:rgba(127,178,245,.1)}
.btn--ink{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep)}
.btn--ink:hover{background:var(--blue);border-color:var(--blue)}
.fineprint{font-size:.98rem;margin:1.05rem 0 0}
.band--night .fineprint{color:var(--on-navy-2)}
.band--day .fineprint{color:var(--ink-3)}

/* ══ HEADER ══════════════════════════════════════ */
.top{position:sticky;top:0;z-index:20;background:rgba(15,39,66,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--navy-line)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.mark__txt{font-weight:800;font-size:1.35rem;letter-spacing:-.03em}
.top__loc{font-size:.95rem;font-weight:500;color:var(--on-navy-2)}
@media(max-width:700px){.top__loc{display:none}}

/* ══ HERO ════════════════════════════════════════ */
.hero{padding-top:clamp(4rem,8vw,6.5rem);padding-bottom:clamp(4rem,8vw,6.5rem);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto;height:75%;
  background:radial-gradient(60% 100% at 25% 0%,rgba(46,119,221,.28),transparent 70%);
  pointer-events:none;
}
.hero__in{position:relative}
.hero h1{max-width:16ch}
.hero__lede{font-size:clamp(1.15rem,1.9vw,1.35rem);color:var(--on-navy-2);max-width:36em;margin:1.6rem 0 2.2rem}
.hero__lede strong{color:var(--on-navy);font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ══ PROBLEM ═════════════════════════════════════ */
.prob{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(265px,100%),1fr));gap:1.2rem}
.prob__i{background:var(--navy-2);border:1px solid var(--navy-line);border-radius:var(--r);padding:2rem 1.8rem}
.prob__tag{font-size:.85rem;font-weight:700;letter-spacing:.09em;color:#7FB2F5;margin-bottom:1rem}
.prob__i h3{margin-bottom:.7rem}
.prob__i p{margin:0;color:var(--on-navy-2);font-size:1.05rem}

/* ══ DAWN ════════════════════════════════════════ */
.dawn{
  background:linear-gradient(180deg,var(--navy) 0%,#2A4E77 40%,#8AA9C6 72%,var(--sky) 100%);
  padding:4rem 0 3rem;text-align:center;
}
.dawn__t{font-size:1rem;font-weight:700;letter-spacing:.2em;color:#CFE3F8}
.dawn__s{font-weight:800;font-size:clamp(1.4rem,2.7vw,2rem);letter-spacing:-.025em;color:#fff;margin-top:.8rem}

/* ══ HOW IT WORKS ════════════════════════════════ */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1.2rem}
.how__i{
  background:var(--white);border:1px solid var(--sky-line);border-radius:var(--r);
  padding:1.6rem;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;
}
.how__n{
  width:46px;height:46px;border-radius:99px;background:var(--blue-soft);color:var(--blue-deep);
  display:grid;place-items:center;font-weight:800;font-size:1.2rem;
}
.how__i h3{margin:0}
.about .intro{margin-bottom:0}

/* ══ PRICING ═════════════════════════════════════ */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(305px,100%),1fr));gap:1.4rem;align-items:start}
.plan{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--r);padding:clamp(1.9rem,3.4vw,2.5rem)}
.plan__amt{font-weight:800;font-size:3.4rem;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.plan__amt small{font-size:1rem;font-weight:600;color:var(--ink-3);margin-left:.5rem;letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:1.8rem 0}
.plan li{padding:.75rem 0 .75rem 1.9rem;position:relative;font-size:1.05rem;border-bottom:1px solid #EAF0F6;color:var(--ink-2)}
.plan li::before{content:"→";position:absolute;left:0;color:var(--blue);font-weight:700}

.plans--one{max-width:34rem}

/* ══ CLOSE ═══════════════════════════════════════ */
.end{position:relative;overflow:hidden}
.end::before{
  content:"";position:absolute;inset:auto -10% -40% 0;height:85%;
  background:radial-gradient(50% 100% at 30% 100%,rgba(46,119,221,.3),transparent 70%);
  pointer-events:none;
}
.end__in{position:relative}
.end h2{max-width:17ch}
.end__lede{font-size:clamp(1.12rem,1.85vw,1.3rem);color:var(--on-navy-2);max-width:36em;margin:1.5rem 0 2.2rem}
.end__contact{margin-top:3rem;padding-top:1.8rem;border-top:1px solid var(--navy-line);font-size:1.15rem}
.end__contact span{display:block;font-size:.88rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--on-navy-2);margin-bottom:.5rem}
.end__contact a{color:#8FBCF7;text-decoration:none;font-weight:600;border-bottom:2px solid rgba(143,188,247,.35)}
.end__contact a:hover{border-bottom-color:#8FBCF7}

.foot{background:var(--navy);border-top:1px solid var(--navy-line);padding:2rem 0}
.foot__in{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.95rem;color:var(--on-navy-2)}

a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid #7FB2F5;outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ══ SKIP LINK (a11y) ════════════════════════════ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--blue-deep);color:#fff;padding:1rem 1.5rem;
  font-weight:700;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

/* ══ CONTACT FORM ════════════════════════════════ */
.form{
  background:var(--navy-2);border:1px solid var(--navy-line);border-radius:var(--r);
  padding:clamp(1.8rem,3.5vw,2.4rem);max-width:38rem;
}
.field{margin-bottom:1.4rem}
.field:last-of-type{margin-bottom:1.8rem}
.field label{display:block;font-weight:700;font-size:1.05rem;margin-bottom:.5rem}
.field .hint{display:block;font-weight:400;font-size:.95rem;color:var(--on-navy-2);margin-top:.2rem}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--sans);font-size:1.05rem;color:var(--on-navy);
  background:var(--navy);border:2px solid var(--navy-line);border-radius:var(--r-sm);
  padding:.85rem 1rem;transition:border-color .15s;
}
.field textarea{min-height:6.5rem;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:#7FB2F5;
}
.field input:user-invalid,.field textarea:user-invalid{border-color:#F2A0A0}
.field .err{
  display:none;color:#FFB3B3;font-size:.98rem;margin-top:.45rem;font-weight:600;
}
.field.is-bad .err{display:block}
.field.is-bad input,.field.is-bad textarea{border-color:#F2A0A0}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__ok{
  display:none;background:var(--green-soft);color:#0C5138;border-radius:var(--r-sm);
  padding:1.2rem 1.4rem;font-weight:600;font-size:1.05rem;
}
.form.is-sent .form__ok{display:block}
.form.is-sent .form__body{display:none}

/* ══ COOKIE CONSENT ══════════════════════════════ */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--navy-2);border-top:2px solid var(--navy-line);
  padding:1.3rem 0;box-shadow:0 -8px 30px rgba(0,0,0,.3);
}
.cc[hidden]{display:none}
.cc__in{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
.cc__txt{flex:1 1 22rem;font-size:1.02rem;color:var(--on-navy);margin:0}
.cc__txt a{color:#8FBCF7;font-weight:600}
.cc__btns{display:flex;gap:.7rem;flex-wrap:wrap}
.cc .btn{font-size:1rem;padding:.8rem 1.4rem}

/* ══ LEGAL / 404 PAGES ═══════════════════════════ */
.doc{max-width:44rem}
.doc h2{margin:2.6rem 0 .9rem;font-size:1.55rem}
.doc h2:first-of-type{margin-top:1.8rem}
.doc h3{margin:1.8rem 0 .6rem;font-size:1.2rem}
.doc p,.doc li{color:var(--ink-2);font-size:1.05rem}
.doc p{margin:0 0 1.1rem}
.doc ul{padding-left:1.3rem;margin:0 0 1.2rem}
.doc li{margin-bottom:.5rem}
.doc a{color:var(--blue-deep);font-weight:600}
.doc__meta{
  background:var(--blue-soft);border-radius:var(--r-sm);padding:1.1rem 1.3rem;
  font-size:1rem;color:var(--ink-2);margin-bottom:2rem;
}
.doc__meta b{color:var(--ink)}

.nf{text-align:center;padding:clamp(4rem,12vh,8rem) 0}
.nf__code{font-size:clamp(4rem,14vw,8rem);font-weight:800;line-height:1;color:#7FB2F5;letter-spacing:-.05em}
.nf h1{margin:1rem 0 1rem;max-width:none}
.nf p{color:var(--on-navy-2);font-size:1.2rem;max-width:32em;margin:0 auto 2.2rem}
.nf__links{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ══ FOOTER LINKS ════════════════════════════════ */
.foot__nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot__nav a{color:var(--on-navy-2);text-decoration:none;border-bottom:1px solid transparent}
.foot__nav a:hover{color:var(--on-navy);border-bottom-color:var(--on-navy-2)}

/* ══ TARČE ZA PRST (min. ~44 px na dotik) ════════ */
.mark{padding:.35rem 0}
.foot__nav a{display:inline-block;padding:.6rem 0}
.end__contact a{display:inline-block;padding:.4rem 0}
.doc a{padding:.1rem 0}
.cc__txt a{display:inline-block;padding:.55rem 0}