/* Marketing landing page (apex host). Standalone — not loaded with app.css.
   Design matched 1:1 to wilke-it.consulting: light translucent header, night-blue
   hero, white <-> off-white section rhythm with night-blue dark bands, tile/card
   layout throughout, Noto Sans, red-orange pill CTAs. CSP-safe (self-hosted font,
   no inline styles/scripts). */

@font-face{
  font-family:"Noto Sans";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../fonts/noto-sans-var.woff2") format("woff2");
}

:root{
  /* Palette — lifted verbatim from wilke-it.consulting */
  --nachtblau:#122945; --nachtblau-700:#1a3759; --nachtblau-900:#0b1c30;
  --rot:#e94e32; --rot-600:#c8361d; --rot-700:#a63019;
  --azur:#56a8dd; --azur-700:#2e7eb5; --azur-200:#b9dcf2;
  --weiss:#ffffff; --offwhite:#f6f8fb; --grau-100:#eef0f3; --grau-200:#dadada;
  --grau-500:#5b6776; --grau-700:#33414f; --grau-900:#1f2a36;

  --font:"Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-sm:clamp(.88rem,.82rem + .25vw,.95rem);
  --fs-base:clamp(1rem,.95rem + .25vw,1.075rem);
  --fs-md:clamp(1.1rem,1rem + .5vw,1.25rem);
  --fs-lg:clamp(1.35rem,1.15rem + 1vw,1.7rem);
  --fs-xl:clamp(1.8rem,1.4rem + 1.6vw,2.4rem);
  --fs-2xl:clamp(2.3rem,1.8rem + 2.6vw,3.4rem);

  --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-pill:999px;
  --wrap:1160px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;}
.dr{
  font-family:var(--font); color:var(--grau-700); background:var(--weiss);
  line-height:1.6; font-size:var(--fs-base); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.dr img{max-width:100%;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.1rem,4vw,2rem);}
h1,h2,h3{font-weight:700; line-height:1.15; letter-spacing:-.01em; text-wrap:balance; margin:0; color:var(--nachtblau);}
a{color:inherit;}
.eyebrow{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--azur-700); font-weight:700; margin:0 0 var(--sp-4);
}
.eyebrow.on-dark{color:var(--azur);}

/* --- Buttons (pill, matched to the homepage) --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:.85rem 1.5rem; font:inherit; font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.01em; border-radius:var(--radius-pill); border:2px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .14s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:focus-visible{outline:2px solid var(--azur); outline-offset:3px;}
.btn-primary{background:var(--rot-600); color:#fff; border-color:var(--rot-600);}
.btn-primary:hover{background:var(--rot-700); border-color:var(--rot-700); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--nachtblau); border-color:var(--nachtblau);}
.btn-outline:hover{background:var(--nachtblau); color:#fff;}
.btn-on-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.5);}
.btn-on-dark:hover{background:rgba(255,255,255,.12); border-color:#fff;}
.btn-lg{padding:.95rem 1.7rem; font-size:var(--fs-base);}

/* --- Header (light, translucent) --- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(218,218,218,.6);
}
.nav-in{display:flex; align-items:center; gap:var(--sp-5); height:70px;}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:0 0 auto;}
.brand .logo{height:30px; width:auto; display:block;}
.brand .tag{
  font-size:.9rem; font-weight:700; color:var(--nachtblau);
  padding-left:.7rem; border-left:1px solid var(--grau-200);
}
.nav-links{display:flex; gap:var(--sp-5); margin-left:auto;}
.nav-links a{color:var(--grau-700); text-decoration:none; font-size:.92rem; font-weight:600; transition:color .18s;}
.nav-links a:hover{color:var(--nachtblau);}
.nav-cta{display:flex; gap:.6rem; align-items:center;}

/* --- Hero (solid night-blue) --- */
.hero{
  position:relative; overflow:hidden; color:#fff; background:var(--nachtblau);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(closest-side at 82% 8%, rgba(86,168,221,.38), transparent 66%),
    radial-gradient(closest-side at 6% 96%, rgba(233,78,50,.14), transparent 66%);
}
.hero-in{position:relative; z-index:1; padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem); max-width:820px;}
.hero h1{color:#fff; font-size:var(--fs-2xl); line-height:1.05; margin:.4rem 0 1.2rem;}
.hero h1 em{font-style:normal; color:var(--azur);}
.hero .lead{font-size:var(--fs-md); color:rgba(255,255,255,.82); max-width:58ch; margin:0 0 var(--sp-6);}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:var(--sp-6);}
.trust{display:flex; flex-wrap:wrap; gap:.55rem;}
.chip{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; color:#fff;
  background:rgba(86,168,221,.14); border:1px solid rgba(86,168,221,.34);
  border-radius:var(--radius-pill); padding:.36rem .8rem; display:inline-flex; align-items:center; gap:.4rem;
}
.chip svg{color:var(--azur);}

/* --- Section rhythm (white <-> off-white <-> dark) --- */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0;}
.sec-white{background:var(--weiss);}
.sec-alt{background:var(--offwhite);}
.sec-dark{position:relative; overflow:hidden; background:var(--nachtblau); color:rgba(255,255,255,.85);}
.sec-dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(closest-side at 85% 12%, rgba(86,168,221,.20), transparent 68%);
}
.sec-dark .wrap{position:relative; z-index:1;}
.head{max-width:56rem; margin-bottom:var(--sp-7);}
.head h2{font-size:var(--fs-xl); margin:0 0 .6rem;}
.head p{margin:0; font-size:var(--fs-md); color:var(--grau-500);}
.sec-dark .head h2{color:#fff;}
.sec-dark .head p{color:rgba(255,255,255,.7);}

/* --- Cards / tiles (the single reusable block) --- */
.grid{display:grid; gap:var(--sp-5);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.card{
  position:relative; background:var(--weiss); border:1px solid var(--grau-200);
  border-radius:var(--radius-md); padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-3);
}
.card h3{font-size:1.12rem; margin:0;}
.card p{margin:0; font-size:.96rem; color:var(--grau-700);}
.card .ic{
  width:44px; height:44px; display:grid; place-items:center; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,#56a8dd2e,#1229450f); color:var(--nachtblau);
}
.card .role{font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--rot-600);}
.card .num{
  width:38px; height:38px; display:grid; place-items:center; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-weight:700; font-size:1rem; color:#fff;
  background:linear-gradient(135deg,var(--azur-700),var(--nachtblau));
}
/* Cards on a dark band */
.sec-dark .card{background:rgba(255,255,255,.05); border-color:rgba(86,168,221,.26);}
.sec-dark .card h3{color:#fff;}
.sec-dark .card p{color:rgba(255,255,255,.76);}

/* --- Pricing specifics --- */
.tier .t-name{font-family:var(--font-mono); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--azur);}
.tier .t-num{font-size:2.6rem; font-weight:700; line-height:1; color:#fff; font-variant-numeric:tabular-nums;}
.tier .t-num small{font-size:.8rem; color:rgba(255,255,255,.65); font-weight:400; display:block; margin-top:.4rem;}
.tier .t-note{font-size:.86rem; color:rgba(255,255,255,.72); margin-top:auto;}
.card.tier-ent{margin-top:var(--sp-5); border-color:var(--rot); background:rgba(233,78,50,.10); flex-direction:row; flex-wrap:wrap; align-items:center; gap:1rem 2rem;}
.tier-ent .t-name{color:var(--rot);}
.tier-ent h3{color:#fff; font-size:1.18rem;}
.tier-ent p{color:rgba(255,255,255,.78); max-width:52ch;}
.incl{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--sp-6);}
.incl .chip{background:rgba(86,168,221,.12);}
.price-foot{color:rgba(255,255,255,.7); font-size:.9rem; margin-top:var(--sp-5);}

/* --- Start tiles (register + token) --- */
.card-register{background:linear-gradient(150deg,var(--nachtblau),var(--nachtblau-900)); border-color:transparent; color:#fff;}
.card-register h3{color:#fff;}
.card-register p{color:rgba(255,255,255,.78);}
.card-cta{margin-top:auto; padding-top:var(--sp-2);}
.finder{margin-top:var(--sp-4);}
.finder label{display:block; font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--grau-500); margin-bottom:.5rem;}
.finder-row{display:flex; align-items:stretch; flex-wrap:wrap; gap:.6rem;}
.finder-input{flex:1 1 150px; min-width:0; display:flex; align-items:center; overflow:hidden; border:1px solid var(--grau-200); border-radius:var(--radius-pill); background:var(--offwhite);}
.finder-input input{flex:1 1 80px; min-width:0; border:0; background:transparent; outline:none; font-family:var(--font-mono); font-size:.9rem; color:var(--nachtblau); padding:.7rem .3rem .7rem 1rem;}
.finder-input .suffix{font-family:var(--font-mono); font-size:.82rem; color:var(--grau-500); padding:.7rem 1rem .7rem .1rem; white-space:nowrap;}
.finder-input:focus-within{border-color:var(--azur); box-shadow:0 0 0 3px rgba(86,168,221,.2);}
.token-hint{font-size:.86rem; color:var(--grau-500); margin-top:var(--sp-4);}

/* --- Closing CTA band (night-blue -> blue gradient, like the homepage) --- */
.cta-band{background:linear-gradient(135deg,var(--nachtblau) 0%,#1a3a64 55%,#245a91 100%); color:#fff;}
.cta-band-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-5); padding:clamp(2.5rem,5vw,3.5rem) 0;}
.cta-band h2{color:#fff; font-size:var(--fs-lg); max-width:34ch;}
.cta-band .cta-actions{display:flex; flex-wrap:wrap; gap:.7rem;}

/* --- Footer (dark) --- */
.foot{background:var(--nachtblau-900); color:rgba(255,255,255,.75); padding:var(--sp-8) 0 var(--sp-6);}
.foot-in{display:flex; flex-wrap:wrap; gap:var(--sp-5); justify-content:space-between; align-items:center;}
.foot .logo{height:44px; width:auto; display:block;}
.foot .tag{color:rgba(255,255,255,.92); border-left-color:rgba(255,255,255,.25); font-size:1.05rem;}
.foot a{color:rgba(255,255,255,.75); text-decoration:none;}
.foot a:hover{color:#fff;}
.foot-links{display:flex; gap:var(--sp-5); flex-wrap:wrap; font-size:.9rem; font-weight:600;}
.foot-legal{margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; color:rgba(255,255,255,.55); display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:space-between;}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}

@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .nav-links{display:none;}
}
@media (max-width:560px){
  .grid-3,.grid-4{grid-template-columns:1fr;}
  .brand .tag{display:none;}
  .nav-cta .btn-outline{display:none;}
  .card.tier-ent{flex-direction:column; align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}