:root{
    --bg:#12161d;
    --bg-2:#182231;
    --panel:#1a3552;
    --panel-soft:#16283b;
    --cream:#efece4;
    --cream-2:#e3ded2;
    --ink:#efece4;
    --ink-dim:#aab0c4;

    --gold:#c9a24a;
    --gold-light:#e2c583;
    --rust:#b8412a;
    --clay:#c17c3a;
    --wine:#8f3220;
    --forest:#2f6b4f;
    --navy2:#264a73;

    --font-display:'Fraunces', serif;
    --font-body:'Work Sans', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;

    --r-lg:26px;
    --r-md:16px;
    --r-sm:10px;
    --maxw:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
  body{
    margin:0;
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(201,162,74,0.10), transparent 60%),
      radial-gradient(ellipse 700px 500px at 90% 10%, rgba(38,74,115,0.25), transparent 60%),
      var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.08; margin:0 0 .4em; letter-spacing:-0.01em; color:var(--cream); }
  p{margin:0 0 1.1em; color:var(--ink-dim);}
  a{color:inherit;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
  .eyebrow{
    font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gold-light); display:inline-flex; align-items:center; gap:10px; margin-bottom:16px;
  }
  .eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);}

  /* corner emblem (echoes the card icon) */
  .emblem{ display:inline-flex; align-items:center; justify-content:center; }
  .emblem svg{ display:block; }

  /* dotted path divider (echoes the card path motif) */
  .path-divider{ display:flex; align-items:center; gap:0; height:20px; }
  .path-divider svg{ width:100%; height:20px; }
  .path-divider path{ fill:none; stroke:var(--gold); stroke-width:1.4; opacity:.55; }
  .path-divider circle{ fill:var(--gold); }

  /* ---------- HEADER ---------- */
  header.site{
    position:sticky; top:0; z-index:60;
    background:rgba(18,22,29,0.82);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(239,236,228,0.08);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
  .logo{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--cream); }
  .nav-links{ display:flex; gap:30px; font-size:.9rem; font-weight:500; font-family:var(--font-body); }
  .nav-links a{ text-decoration:none; color:var(--ink-dim); transition:color .15s; }
  .nav-links a:hover{ color:var(--gold-light); }
  .nav-cta{ background:var(--gold); color:#1a1108; padding:10px 20px; border-radius:999px; font-weight:600; font-size:.86rem; text-decoration:none; white-space:nowrap; transition:background .15s; }
  .nav-cta:hover{ background:var(--gold-light); }
  .nav-toggle{ display:none; background:none; border:none; color:var(--cream); font-size:1.6rem; cursor:pointer; }
  @media (max-width:840px){ .nav-links{display:none;} .nav-toggle{display:block;} }

  /* ---------- HERO ---------- */
  .hero{ padding:80px 0 56px; }
  .hero-grid{ display:grid; grid-template-columns:1fr .78fr; gap:64px; align-items:center; }
  .hero h1{ font-size:clamp(2.5rem, 4.6vw, 3.9rem); }
  .hero h1 .accent{ font-style:italic; color:var(--gold-light); font-weight:500; }
  .hero .lede{ font-size:1.14rem; max-width:48ch; color:var(--ink-dim); }
  .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
  .btn{ font-family:var(--font-body); font-weight:600; font-size:.96rem; padding:14px 26px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .15s, background .15s, border-color .15s, color .15s; }
  .btn-primary{ background:var(--gold); color:#1a1108; }
  .btn-primary:hover{ background:var(--gold-light); transform:translateY(-1px); }
  .btn-ghost{ background:transparent; color:var(--cream); border:1.5px solid rgba(239,236,228,0.28); }
  .btn-ghost:hover{ border-color:var(--gold-light); color:var(--gold-light); }

  .cover-frame{ position:relative; }
  .cover-frame::before{
    content:''; position:absolute; inset:-30px; z-index:-1;
    background:radial-gradient(circle, rgba(201,162,74,0.22), transparent 68%);
    filter:blur(6px);
  }
  .cover-frame img{
    width:100%; display:block; border-radius:22px;
    box-shadow:0 40px 80px -24px rgba(0,0,0,0.65), 0 0 0 1px rgba(239,236,228,0.06);
    transform:rotate(1.6deg);
  }

  @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } .cover-frame{ max-width:340px; margin:0 auto;} }

  /* ---------- DUAL PATH STRIP ---------- */
  .dual-path{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:56px; }
  .path-card{ border-radius:var(--r-lg); padding:32px; position:relative; overflow:hidden; }
  .path-card.play{ background:var(--cream); color:#1c1a14; }
  .path-card.play h3, .path-card.play p{ color:#1c1a14; }
  .path-card.play p{ opacity:.72; }
  .path-card.teach{ background:linear-gradient(155deg, var(--panel), var(--panel-soft)); border:1px solid rgba(239,236,228,0.08); }

  .field-label{ font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#6b6656; margin:16px 0 6px; }
  .field{ width:100%; padding:13px 16px; border-radius:var(--r-sm); border:1.5px solid #d9d3bf; font-family:var(--font-mono); font-size:1rem; background:#fff; color:#1c1a14; }
  .field:focus{ outline:2px solid var(--navy2); outline-offset:1px; border-color:var(--navy2); }
  select.field{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235b5c78' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
  textarea.field{ resize:vertical; min-height:100px; font-family:var(--font-body); }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
  .honeypot{ position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; }
  .form-status{ margin-top:16px; padding:12px 16px; border-radius:var(--r-sm); font-size:.88rem; display:none; }
  .form-status.show{ display:block; }
  .form-status.ok{ background:rgba(47,107,79,0.12); color:#1d4a35; border:1px solid rgba(47,107,79,0.35); }
  .form-status.err{ background:rgba(184,65,42,0.1); color:#7a2c1c; border:1px solid rgba(184,65,42,0.3); }
  .path-card.play .btn-primary{ width:100%; justify-content:center; margin-top:18px; padding:14px; background:#1a3552; color:var(--cream); }
  .path-card.play .btn-primary:hover{ background:#20456b; }
  .join-hint{ font-size:.78rem; color:#8a8570; margin-top:10px; margin-bottom:0; }

  .teach-list{ list-style:none; padding:0; margin:18px 0 22px; display:flex; flex-direction:column; gap:10px; }
  .teach-list li{ display:flex; gap:10px; font-size:.92rem; color:var(--ink-dim); align-items:flex-start; }
  .teach-list li::before{ content:'—'; color:var(--gold); flex:none; }

  @media (max-width:780px){ .dual-path{ grid-template-columns:1fr; } }

  /* ---------- SECTIONS ---------- */
  .section{ padding:80px 0; }
  .section-tight{ padding:56px 0; }
  .section-head{ max-width:620px; margin-bottom:48px; }
  .section-head h2{ font-size:clamp(1.8rem,3vw,2.4rem); }

  /* ---------- STEPS ---------- */
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
  .step{ border-top:2px solid rgba(201,162,74,0.35); padding-top:18px; }
  .step-num{ font-family:var(--font-mono); font-size:.82rem; color:var(--gold-light); margin-bottom:12px; display:block; }
  .step h4{ font-size:1.12rem; margin-bottom:8px; font-weight:600;}
  .step p{ font-size:.92rem; margin:0; }
  @media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

  /* ---------- CARD TYPES ---------- */
  .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .card-type{ border-radius:var(--r-md); padding:24px; background:var(--bg-2); border:1px solid rgba(239,236,228,0.06); position:relative; transition:transform .18s, border-color .18s; }
  .card-type:hover{ transform:translateY(-4px); border-color:var(--c-tag); }
  .card-type .swatch{ width:34px; height:34px; border-radius:9px; background:var(--c-tag); margin-bottom:16px; }
  .card-type .tag{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--c-tag); margin-bottom:8px; display:block; }
  .card-type h4{ font-size:1.08rem; margin-bottom:6px; font-weight:600; }
  .card-type p{ font-size:.88rem; margin:0; }
  @media (max-width:820px){ .card-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .card-grid{ grid-template-columns:1fr; } }

  /* ---------- BILD-ECHO GALLERY ---------- */
  .echo-section{ background:var(--bg-2); }
  .echo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
  .echo-fan{ position:relative; height:340px; }
  .echo-fan img{
    position:absolute; width:190px; border-radius:16px;
    box-shadow:0 24px 48px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(239,236,228,0.08);
  }
  .echo-fan img:nth-child(1){ left:0; top:26px; transform:rotate(-9deg); z-index:1; }
  .echo-fan img:nth-child(2){ left:50%; top:0; transform:translateX(-50%) rotate(2deg); z-index:2; }
  .echo-fan img:nth-child(3){ right:0; top:26px; transform:rotate(9deg); z-index:1; }
  @media (max-width:900px){ .echo-grid{ grid-template-columns:1fr; } .echo-fan{ max-width:420px; margin:0 auto; } }
  @media (max-width:520px){ .echo-fan{ height:260px; } .echo-fan img{ width:140px; } }

  /* ---------- VR CONNECT ---------- */
  .vr-connect{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
  .vr-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(47,107,79,0.16); border:1px solid rgba(47,107,79,0.5); color:#7fcba5; font-family:var(--font-mono); font-size:.76rem; padding:7px 14px; border-radius:999px; margin-bottom:18px; }
  .vr-panel{ background:linear-gradient(155deg, var(--panel), var(--panel-soft)); border-radius:var(--r-lg); padding:34px; border:1px solid rgba(239,236,228,0.08); }
  .vr-panel h3{ font-size:1.3rem; }
  .vr-panel p:last-child{ margin-bottom:0; }
  @media (max-width:900px){ .vr-connect{ grid-template-columns:1fr; } }

  /* ---------- TEACHERS ---------- */
  .teacher-section{ background:var(--cream); color:#1c1a14; border-radius:32px; margin:0 24px; padding:60px 44px; }
  .teacher-section .eyebrow{ color:var(--rust); }
  .teacher-section h2{ color:#1c1a14; }
  .teacher-section p{ color:#615c4c; }

  .formats{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:34px 0; }
  .format-card{ background:#fff; border-radius:var(--r-md); padding:26px; border:1.5px solid #e2dcc9; }
  .format-card .fmt-label{ font-family:var(--font-mono); font-size:.74rem; color:var(--rust); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; display:block; }
  .format-card h4{ font-size:1.18rem; color:#1c1a14; margin-bottom:10px; font-weight:600; }
  .meta-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
  .meta-pill{ font-size:.78rem; font-weight:600; background:#f2ede0; color:#615c4c; padding:5px 13px; border-radius:999px; }
  @media (max-width:820px){ .formats{ grid-template-columns:1fr; } .teacher-section{ margin:0 12px; padding:44px 24px; } }

  .contact-strip{ display:flex; align-items:center; justify-content:space-between; gap:20px; background:#1c1a14; color:var(--cream); border-radius:var(--r-md); padding:26px 28px; flex-wrap:wrap; }
  .contact-strip a.mail{ color:var(--gold-light); font-weight:600; text-decoration:none; }
  .contact-strip p{ color:var(--ink-dim); }

  /* ---------- PARTNERS ---------- */
  .partner-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
  .partner-chip{ font-size:.85rem; font-weight:500; color:var(--ink-dim); border:1px solid rgba(239,236,228,0.14); padding:9px 17px; border-radius:999px; }

  .logo-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; align-items:center; }
  .logo-card{ background:var(--cream); border-radius:12px; padding:14px 18px; display:flex; align-items:center; justify-content:center; height:60px; transition:transform .15s; }
  .logo-card:hover{ transform:translateY(-3px); }
  .logo-card img{ max-height:32px; max-width:140px; object-fit:contain; display:block; }
  .logo-group-label{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-dim); margin:28px 0 4px; display:block; }
  .logo-group-label:first-child{ margin-top:0; }

  /* ---------- FOOTER ---------- */
  footer{ padding:52px 0 36px; border-top:1px solid rgba(239,236,228,0.08); font-size:.85rem; color:var(--ink-dim); }
  footer .foot-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; align-items:center; }
  footer a{ color:var(--ink-dim); text-decoration:none; }
  footer a:hover{ color:var(--gold-light); }
  .foot-links{ display:flex; gap:22px; flex-wrap:wrap; }

  ::selection{ background:var(--gold); color:#1a1108; }