/* The landing page (index.php → includes/views/home.php). */
/* ------------------------------------------------------------------
   Teoriklar landing — visual language modelled on teoriklar.dk:
   near-monochrome (black / white) with a single lime-green accent,
   large light-weight centred headings, generous whitespace and
   fully pill-shaped, uppercase, outlined buttons.
   ------------------------------------------------------------------ */
:root{
  --accent:#FC5F40; --accent-d:#e8492b; --accent-tint:#fff3f0;
  --ink:#0e0e0e; --ink-2:#191919; --text:#171717; --muted:#6b6b6b;
  --line:#e7e7e4; --soft:#f7f7f4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,system-ui,sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.65;font-weight:400}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
a{text-decoration:none;color:inherit}
img{max-width:100%}
h1,h2,h3,h4{color:var(--ink);font-weight:300;letter-spacing:-.01em;line-height:1.1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* --- Pill buttons (the .dk signature control) --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:14px 26px;border-radius:999px;border:1.6px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.btn-solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-solid:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff}
.btn-line{background:transparent;border-color:#111;color:#111}
.btn-line:hover{background:#111;color:#fff}
.btn-line-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-line-light:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.btn-line-light.is-active{background:#fff;border-color:#fff;color:#111}

/* --- Header: transparent, sits over the hero and scrolls away --- */
header.site-head{position:absolute;top:0;left:0;right:0;z-index:50;padding-top:6px}
.head-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.site-head .logo{flex:0 0 auto;line-height:0}
.site-head .logo img{height:34px;width:auto;max-width:none;display:block;filter:brightness(0) invert(1)}
.head-menu{display:flex;align-items:center;gap:30px}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:4px 6px}
.head-links{display:flex;gap:30px;font-weight:500;font-size:14px;letter-spacing:.02em;color:rgba(255,255,255,.9)}
.head-links a{padding-bottom:3px;border-bottom:1.5px solid transparent}
.head-links a:hover{border-color:var(--accent)}
.head-right{display:flex;align-items:center;gap:14px}
.head-right .btn{padding:11px 22px}
/* Language toggle — light pills for the dark hero header */
.lang-switcher{display:inline-flex;gap:4px}
.lang-switcher .lang-link{padding:6px 11px;font-size:.7rem;font-weight:600;color:rgba(255,255,255,.85);border:1.4px solid rgba(255,255,255,.4);border-radius:999px;text-transform:uppercase;letter-spacing:.08em;line-height:1}
.lang-switcher .lang-link:hover{border-color:#fff;color:#fff}
.lang-switcher .lang-link.active{background:#fff;color:#111;border-color:#fff}
@media(max-width:900px){
  .nav-toggle{display:inline-flex;align-items:center}
  .head-menu{position:absolute;top:82px;left:16px;right:16px;background:#141414;border:1px solid #262626;border-radius:16px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);flex-direction:column;align-items:stretch;gap:18px;padding:22px;display:none}
  .head-menu.open{display:flex}
  .head-links{flex-direction:column;gap:16px;font-size:16px}
  .head-right{justify-content:space-between;gap:14px}
  .head-right .btn{flex:1;justify-content:center}
}

/* --- Hero: full-bleed dark photo, centred white text --- */
.hero{position:relative;min-height:640px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:150px 24px 90px}  /* background: inline in the template */
.hero-inner{max-width:900px;margin:0 auto}
.hero .eyebrow{color:rgba(255,255,255,.82);justify-content:center;margin-bottom:18px}
.hero h1{color:#fff;font-size:clamp(40px,6.4vw,78px);font-weight:300;line-height:1.02;letter-spacing:-.02em;margin-bottom:34px}
.hero-pills{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:16px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:30px}
.hero-meta{display:inline-flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;font-size:13px;font-weight:500;color:rgba(255,255,255,.82)}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}

/* --- Generic section + centred head --- */
section.block{padding:96px 0}
.head{text-align:center;max-width:760px;margin:0 auto 56px}
.head .eyebrow{justify-content:center;color:var(--accent);margin-bottom:16px}
.head h2{font-size:clamp(32px,4.6vw,56px);margin-bottom:16px}
.head p{color:var(--muted);font-size:17px;font-weight:400}

/* --- Two-column intro with sticky left rail --- */
.intro{padding:96px 0}
.intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.intro-left{position:sticky;top:40px}
.intro-left .mark{width:70px;height:70px;margin-bottom:22px}
.intro-left h2{font-size:clamp(34px,4.4vw,52px);margin-bottom:28px}
.intro-right p{font-size:17.5px;color:#3a3a3a;margin-bottom:22px;font-weight:400}
.intro-right p:last-child{margin-bottom:0}
@media(max-width:900px){.intro-grid{grid-template-columns:1fr;gap:34px}.intro-left{position:static}}

/* --- Pillars (how it works) --- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.pillar{padding:8px 6px}
.pillar .pic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--accent);border:1.6px solid var(--accent);margin-bottom:22px}
.pillar .step{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pillar h3{font-size:22px;font-weight:400;margin:10px 0 10px}
.pillar p{color:var(--muted);font-size:15px}
/* Stacked in one column they read as a centred list, not a left rail. */
@media(max-width:860px){
  .pillars{grid-template-columns:1fr;gap:36px}
  .pillar{text-align:center}
  .pillar .pic{margin-left:auto;margin-right:auto}
  .pillar p{max-width:44ch;margin-left:auto;margin-right:auto}
}

/* --- Licence class cards --- */
.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cls{display:block;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;transition:.18s}
.cls:hover{transform:translateY(-4px);box-shadow:0 24px 46px -28px rgba(0,0,0,.45);border-color:#dcdcd8}
.cls-soon{cursor:default}
.cls-soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
.cls-soon .cls-media{opacity:.72;filter:saturate(.85)}
.cls-media{position:relative;aspect-ratio:3/2;background:linear-gradient(165deg,#eff5fc 0%,#d9e6f4 100%);overflow:hidden}
.cls-media img{width:100%;height:100%;object-fit:cover;display:block}
.cls-media svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cls-badge{position:absolute;top:14px;left:14px;background:#fff;color:#111;font-weight:700;font-size:13px;letter-spacing:.04em;padding:5px 13px;border-radius:999px;box-shadow:0 2px 8px rgba(19,33,60,.16)}
.cls-body{padding:22px;display:flex;align-items:center;justify-content:space-between}
.cls-body h3{font-size:19px;font-weight:400}
.cls-body .cnt{font-size:12.5px;color:var(--muted);font-weight:500;display:inline-flex;align-items:center;gap:6px}
.cls-body .cnt i{color:var(--accent)}
.cls-body .cnt.soon{color:var(--muted)}
.cls-body .cnt.soon i{color:var(--muted)}
@media(max-width:860px){.classes{grid-template-columns:1fr}}

/* --- Dark stats band --- */
.band{background:var(--ink);color:#fff}
.band .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:74px 24px;text-align:center}
.band b{display:block;font-size:clamp(40px,5vw,58px);font-weight:300;color:#fff;line-height:1}
.band .o{color:var(--accent)}
.band span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8f8f8f;font-weight:600;margin-top:12px;display:block}
@media(max-width:680px){.band .wrap{grid-template-columns:repeat(2,1fr);gap:40px 20px}}

/* --- Steps --- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.step-c{padding:6px 6px}
.step-c .n{width:46px;height:46px;border-radius:50%;background:transparent;color:var(--accent);border:1.6px solid var(--accent);font-weight:400;font-size:20px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.step-c h4{font-size:20px;font-weight:400;margin-bottom:9px}
.step-c p{font-size:15px;color:var(--muted)}
/* Same treatment as .pillars — stacked, they should read as a centred list. */
@media(max-width:860px){
  .steps{grid-template-columns:1fr;gap:36px}
  .step-c{text-align:center}
  .step-c .n{margin-left:auto;margin-right:auto}
  .step-c p{max-width:44ch;margin-left:auto;margin-right:auto}
}

/* --- Sample question cards --- */
.qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.qc{border:1px solid var(--line);border-radius:6px;padding:26px;background:#fff}
.qc .pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1.4px solid var(--accent);padding:4px 12px;border-radius:999px;margin-bottom:16px}
.qc p{font-size:16px;color:#2a2a2a;font-weight:400}
@media(max-width:860px){.qcards{grid-template-columns:1fr}}

/* --- CTA --- */
.cta{background:#fff;text-align:center;padding:100px 24px}
.cta h2{font-size:clamp(34px,4.6vw,56px);margin-bottom:18px}
.cta p{color:var(--muted);font-size:18px;margin-bottom:34px;font-weight:400}

/* Footer styles live in includes/site_footer.php — it is self-contained and
   shared with every other public page. */

/* ------------------------------------------------------------------
   Phones. The desktop rhythm (96px section padding, a 640px-tall hero,
   96px floating blob) turned into an enormous scroll on a 390px screen,
   so everything below is a compaction pass — no layout is restructured.
   ------------------------------------------------------------------ */
@media(max-width:640px){
  .wrap{padding:0 18px}
  .btn{padding:13px 20px;font-size:11.5px;letter-spacing:.1em}

  .hero{min-height:auto;padding:118px 18px 56px}
  .hero .eyebrow{font-size:11.5px;margin-bottom:12px}
  .hero h1{font-size:clamp(30px,8.2vw,42px);margin-bottom:24px}
  .hero-pills,.hero-actions{gap:10px;margin-bottom:14px}
  .hero-meta{font-size:12px;gap:6px 16px}

  section.block,.intro{padding:56px 0}
  .cta{padding:60px 18px}
  .head{margin-bottom:34px}
  .head h2{font-size:clamp(26px,7vw,34px)}
  .head p{font-size:15.5px}
  .cta h2{font-size:clamp(26px,7vw,34px)}
  .cta p{font-size:16px;margin-bottom:26px}

  .intro-left .mark{width:54px;height:54px;margin-bottom:16px}
  .intro-left h2{font-size:clamp(26px,7vw,34px);margin-bottom:18px}
  .intro-right p{font-size:16px;margin-bottom:18px}
  .pillar h3,.step-c h4{font-size:19px}
  .band .wrap{padding:44px 18px;gap:30px 16px}
  .qc{padding:20px}

}