/* ============================================================
   RAQEEB — Design Tokens
   ============================================================ */
:root{
  /* Color: base */
  --c-bg: #1a1a1b;
  --c-bg-alt: #202021;
  --c-surface: #232324;
  --c-surface-2: #2b2b2d;
  --c-border: #3a3a3c;
  --c-border-bright: #4a4a4d;

  /* Color: text */
  --c-text: #e9f2ec;
  --c-text-dim: #93a3a0;
  --c-text-faint: #5c6a68;

  /* Color: brand */
  --c-green: #2f9fe0;
  --c-green-dim: #0d2733;
  --c-green-glow: rgba(47,159,224,.35);
  --c-gold: #8c8c87;
  --c-gold-bright: #b6b6b0;
  --c-gold-dim: #2a2a27;

  /* Color: glitch RGB split */
  --c-glitch-a: #ff2a6d;
  --c-glitch-b: #05d9e8;

  /* Color: semantic */
  --c-danger: #ff4d5e;
  --c-success: var(--c-green);

  /* Type */
  --f-display: 'Reem Kufi', 'Noto Kufi Arabic', sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', 'Space Mono', ui-monospace, monospace;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4.25rem;
  --fs-5xl: 6rem;

  /* Spacing (8pt rhythm) */
  --sp-1: .5rem;
  --sp-2: .75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;
  --sp-9: 8rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --container: 1200px;
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;

  color-scheme: dark;
}

/* ============================================================
   Ancient backdrop — persistent girih tessellation + torch vignette
   ============================================================ */
.ancient-bg{
  position: fixed; inset:0; z-index:-10; pointer-events:none;
  background-color: var(--c-bg);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(140,140,135,.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(47,159,224,.05), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%238c8c87' stroke-opacity='0.065' stroke-width='1'%3E%3Cpath d='M120 6 L154 40 L188 40 L188 74 L222 108 L188 142 L188 176 L154 176 L120 210 L86 176 L52 176 L52 142 L18 108 L52 74 L52 40 L86 40 Z'/%3E%3Cpath d='M120 40 L146 66 L146 108 L120 134 L94 108 L94 66 Z'/%3E%3Ccircle cx='120' cy='120' r='96' stroke-opacity='0.04'/%3E%3Ccircle cx='120' cy='120' r='58' stroke-opacity='0.05'/%3E%3Cpath d='M0 120h240M120 0v240' stroke-opacity='0.02'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%232f9fe0' stroke-opacity='0.03' stroke-width='1'%3E%3Cpath d='M32 2 44 20 32 38 20 20Z'/%3E%3Cpath d='M2 32 20 20 38 32 20 44Z'/%3E%3Cpath d='M32 26 44 44 32 62 20 44Z'/%3E%3Cpath d='M26 32 44 20 62 32 44 44Z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' viewBox='0 0 96 16'%3E%3Cg fill='none' stroke='%238c8c87' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 8h8v-8h8v8h8v8h8v-8h8v-8h8v8h8v8h8v-8h8v-8h8v8h8v8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, auto, 240px 240px, 64px 64px, 96px 16px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat-x;
  background-position: center, center, center, center, center, top 0 left 0;
}

/* Scanlines + CRT flicker */
.scanlines{
  position: fixed; inset:0; z-index: 9998; pointer-events:none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(47,159,224,.05) 0px,
    rgba(47,159,224,.05) 1px,
    transparent 2px,
    transparent 3px
  );
  animation: crt-flicker 6.5s ease-in-out infinite;
  will-change: opacity;
}
.scan-bar{
  position: fixed; left:0; top:-120px; right:0; height:120px; z-index:9997; pointer-events:none;
  background: linear-gradient(to bottom, transparent, rgba(47,159,224,.05) 45%, rgba(47,159,224,.09) 50%, rgba(47,159,224,.05) 55%, transparent);
  animation: scan-sweep 9s linear infinite;
  will-change: transform;
}
@keyframes scan-sweep{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(calc(100vh + 120px)); }
}
@keyframes crt-flicker{
  0%, 96%, 100%{ opacity:1; }
  97%{ opacity:.85; }
  98%{ opacity:1; }
  98.5%{ opacity:.9; }
}
@media (prefers-reduced-motion: reduce){
  .scan-bar{ animation:none; display:none; }
  .scanlines{ animation:none; }
}

@media (max-width: 767px){
  :root{
    --fs-3xl: 2.25rem;
    --fs-4xl: 2.75rem;
    --fs-5xl: 3.25rem;
    --sp-8: 4rem;
    --sp-9: 5rem;
  }
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body{ height: 100%; }
body{
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas, video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; }
input, textarea, select{ font: inherit; color: inherit; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-family: var(--f-display); font-weight:400; line-height:1.15; letter-spacing:.01em; }

:focus-visible{
  outline: 2px solid var(--c-green);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Layout helpers
   ============================================================ */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 768px){ .container{ padding-inline: var(--sp-6); } }

[id]{ scroll-margin-top: 88px; }
.section{ position: relative; padding-block: var(--sp-8); }
.section-head{ max-width: 640px; margin-bottom: var(--sp-6); }
.section-eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing:.18em;
  text-transform: uppercase; color: var(--c-green); margin-bottom: var(--sp-2);
}
.section-eyebrow::before{ content:''; width:8px; height:8px; background: var(--c-green); box-shadow:0 0 8px var(--c-green-glow); transform: rotate(45deg); }
.section-title{ font-size: var(--fs-3xl); color: var(--c-text); }
.section-title .accent{ color: var(--c-gold); }
.section-desc{ margin-top: var(--sp-3); color: var(--c-text-dim); font-size: var(--fs-md); max-width: 56ch; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; top:-100%; left: var(--sp-3);
  background: var(--c-green); color:#04140c; font-family: var(--f-mono);
  padding:.75em 1.2em; z-index: 1000; border-radius: var(--radius-sm);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus{ top: var(--sp-3); }

/* Geometric divider strip (8-point star tessellation) */
.geo-strip{
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%232f9fe0' stroke-opacity='0.35' stroke-width='1'%3E%3Cpath d='M14 0 L21 7 L14 14 L7 7 Z'/%3E%3Cpath d='M42 0 L49 7 L42 14 L35 7 Z'/%3E%3Cpath d='M0 14 L7 21 L0 28 L-7 21 Z'/%3E%3Cpath d='M28 14 L35 21 L28 28 L21 21 Z'/%3E%3Cpath d='M56 14 L63 21 L56 28 L49 21 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 56px 28px;
  opacity:.6;
}

.geo-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%238c8c87' stroke-opacity='0.08' stroke-width='1'%3E%3Cpath d='M60 4 L82 26 L104 26 L104 48 L116 60 L104 72 L104 94 L82 94 L60 116 L38 94 L16 94 L16 72 L4 60 L16 48 L16 26 L38 26 Z'/%3E%3Ccircle cx='60' cy='60' r='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --btn-fg: #04140c;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:48px; padding: 0 1.5em;
  font-family: var(--f-mono); font-size: var(--fs-sm); letter-spacing:.06em;
  text-transform: uppercase; white-space:nowrap;
  border-radius: var(--radius-sm);
  cursor:pointer; position:relative; isolation:isolate;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn:active{ transform: translateY(1px); }

.btn-primary{ background: var(--c-green); color: var(--btn-fg); box-shadow: 0 0 0 1px var(--c-green), 0 8px 24px -8px var(--c-green-glow); }
.btn-primary:hover{ background: var(--c-gold-bright); box-shadow: 0 0 0 1px var(--c-gold-bright), 0 8px 28px -6px rgba(236,207,142,.4); }

.btn-ghost{ background: transparent; color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-border-bright); }
.btn-ghost:hover{ box-shadow: inset 0 0 0 1px var(--c-green); color: var(--c-green); }

.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ============================================================
   Nav
   ============================================================ */
.site-nav{
  position: fixed; inset-inline:0; top:0; z-index: var(--z-nav);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline: var(--sp-4); height:72px;
  background: rgba(26,26,27,.7);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.site-nav.is-scrolled{ border-bottom-color: var(--c-border); }
@media (min-width: 768px){ .site-nav{ padding-inline: var(--sp-6); } }

.brand{ display:flex; align-items:center; gap:.65em; font-family: var(--f-display); font-size: var(--fs-lg); letter-spacing:.02em; }
.brand-mark{ width:34px; height:34px; flex-shrink:0; }
.brand-ar{ font-family: var(--f-display); direction: rtl; font-size: var(--fs-sm); color: var(--c-text-faint); }

.nav-links{ display:none; align-items:center; gap: var(--sp-5); }
@media (min-width: 900px){ .nav-links{ display:flex; } }
.nav-links a{
  font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-text-dim);
  position:relative; padding:.4em 0; transition: color var(--dur-fast);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background: var(--c-green); transition: right var(--dur-base) var(--ease-out);
}
.nav-links a:hover, .nav-links a.is-active{ color: var(--c-text); }
.nav-links a:hover::after, .nav-links a.is-active::after{ right:0; }

.nav-cta{ display:none; }
@media (min-width: 900px){ .nav-cta{ display:inline-flex; } }

.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius: var(--radius-sm);
}
@media (min-width: 900px){ .nav-toggle{ display:none; } }
.nav-toggle-bars{ position:relative; width:20px; height:14px; }
.nav-toggle-bars span{
  position:absolute; left:0; width:100%; height:2px; background: var(--c-text);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.nav-toggle-bars span:nth-child(1){ top:0; }
.nav-toggle-bars span:nth-child(2){ top:6px; }
.nav-toggle-bars span:nth-child(3){ top:12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset:72px 0 0 0; z-index: calc(var(--z-nav) - 1);
  background: var(--c-bg); border-top: 1px solid var(--c-border);
  display:flex; flex-direction:column; padding: var(--sp-6) var(--sp-4);
  gap: var(--sp-4);
  transform: translateY(-8px); opacity:0; visibility:hidden;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow), visibility 0s var(--dur-slow);
}
.mobile-menu.is-open{ transform: translateY(0); opacity:1; visibility:visible; transition-delay:0s; }
.mobile-menu a{ font-family: var(--f-mono); font-size: var(--fs-lg); color: var(--c-text); padding: .5em 0; border-bottom:1px solid var(--c-border); }
@media (min-width: 900px){ .mobile-menu{ display:none; } }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position: relative; min-height: 100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: calc(72px + var(--sp-6)) var(--sp-4) var(--sp-8);
  overflow:hidden; isolation:isolate;
}
.hero-canvas{ position:absolute; inset:0; z-index:-2; opacity:.85; }
.hero-vignette{
  position:absolute; inset:0; z-index:-1;
  background: radial-gradient(ellipse at 50% 35%, transparent 0%, var(--c-bg) 78%),
              linear-gradient(180deg, rgba(26,26,27,.2), var(--c-bg) 90%);
}
.hero-kicker{
  font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing:.3em; text-transform:uppercase;
  color: var(--c-gold); margin-bottom: var(--sp-4);
}
.hero-title{
  font-size: clamp(3rem, 12vw, var(--fs-5xl));
  color: var(--c-text);
  line-height:1;
  margin-bottom: var(--sp-3);
}
.hero-title-ar{
  display:block; font-family: var(--f-display); direction: rtl;
  font-size: clamp(1.5rem, 5vw, var(--fs-2xl)); color: var(--c-text-dim);
  margin-top: var(--sp-2);
}
.hero-sub{
  font-family: var(--f-mono); font-size: clamp(var(--fs-sm), 2vw, var(--fs-md));
  color: var(--c-text-dim); max-width: 46ch; margin: var(--sp-4) auto var(--sp-6);
  min-height: 1.6em;
}
.hero-sub .cursor{ display:inline-block; width:.55em; background: var(--c-green); margin-left:.15em; animation: blink 1s steps(1) infinite; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: var(--sp-3); justify-content:center; }
.hero-scroll{
  position:absolute; bottom: var(--sp-5); left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5em;
  font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text-faint);
  letter-spacing:.2em;
}
.hero-scroll-line{ width:1px; height:36px; background: linear-gradient(var(--c-green), transparent); animation: scrolldown 1.8s ease-in-out infinite; }

/* On short viewports the hero content can run right up against the
   bottom-anchored scroll hint — hide it rather than risk overlap. */
@media (max-height: 700px){
  .hero-scroll{ display:none; }
}

@keyframes blink{ 50%{ opacity:0; } }
@keyframes scrolldown{ 0%{ transform: scaleY(0); transform-origin: top; } 50%{ transform: scaleY(1); transform-origin: top; } 51%{ transform-origin: bottom; } 100%{ transform: scaleY(0); transform-origin: bottom; } }

/* ============================================================
   Glitch text
   ============================================================ */
.glitch{ position:relative; display:inline-block; }
.glitch::before, .glitch::after{
  content: attr(data-text); position:absolute; inset:0; opacity:0;
}
.glitch.is-glitching::before{
  color: var(--c-glitch-a); opacity:.85; transform: translate(-3px,1px);
  clip-path: polygon(0 10%, 100% 10%, 100% 32%, 0 32%);
  animation: glitch-shift 340ms steps(2,end);
}
.glitch.is-glitching::after{
  color: var(--c-glitch-b); opacity:.85; transform: translate(3px,-1px);
  clip-path: polygon(0 62%, 100% 62%, 100% 84%, 0 84%);
  animation: glitch-shift 340ms steps(2,end) reverse;
}
@keyframes glitch-shift{
  0%{ transform: translate(0,0); }
  20%{ transform: translate(-4px,1px); }
  40%{ transform: translate(4px,-1px); }
  60%{ transform: translate(-2px,2px); }
  80%{ transform: translate(2px,-2px); }
  100%{ transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce){
  .glitch::before, .glitch::after{ display:none; }
}

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
[data-reveal]{ opacity:0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal].is-visible{ opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   Mission
   ============================================================ */
.mission{ position:relative; }
.mission::before{
  content:''; position:absolute; top:0; left:0; right:0; height:220px;
  background: linear-gradient(180deg, var(--c-bg), transparent);
  pointer-events:none;
}
.mission-grid{ display:grid; gap: var(--sp-6); }
@media (min-width: 900px){ .mission-grid{ grid-template-columns: 1fr 1fr; align-items:center; gap: var(--sp-8); } }
.mission-copy p{ color: var(--c-text-dim); margin-top: var(--sp-3); max-width: 58ch; }
.mission-copy p:first-of-type{ margin-top: var(--sp-4); }
.mission-emblem{ position:relative; aspect-ratio:1; max-width:360px; margin-inline:auto; }
.mission-emblem svg{ width:100%; height:100%; }

.mission-values{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); margin-top: var(--sp-6); }
.value-chip{
  border:1px solid var(--c-border); border-radius: var(--radius-md);
  padding: var(--sp-3); background: var(--c-surface);
}
.value-chip strong{ display:block; font-family: var(--f-mono); color: var(--c-green); font-size: var(--fs-sm); margin-bottom:.35em; }
.value-chip span{ color: var(--c-text-dim); font-size: var(--fs-sm); }

/* ============================================================
   Services
   ============================================================ */
.services-grid{ display:flex; flex-direction:column; border-top:1px solid var(--c-border); }

.service-card{
  position:relative; padding: var(--sp-4) 0; cursor:pointer;
  border-bottom:1px solid var(--c-border);
  transition: border-color var(--dur-base);
}
.service-card:hover, .service-card:focus-visible{ border-color: var(--c-border-bright); }

.service-row-head{ display:flex; align-items:center; gap: var(--sp-3); }
.service-icon{ width:26px; height:26px; color: var(--c-green); flex-shrink:0; }
.service-label{
  font-family: var(--f-mono); font-size: var(--fs-lg); letter-spacing:.08em; text-transform:uppercase;
  color: var(--c-text); transition: color var(--dur-fast);
}
.service-card:hover .service-label,
.service-card:focus-visible .service-label,
.service-card.is-open .service-label{ color: var(--c-green); }

.service-detail{
  max-height:0; opacity:0; margin-top:0; overflow:hidden;
  margin-left: calc(26px + var(--sp-3));
  transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--dur-base), margin-top var(--dur-slow);
}
.service-card:hover .service-detail,
.service-card:focus-visible .service-detail,
.service-card.is-open .service-detail{ max-height:200px; opacity:1; margin-top: var(--sp-2); }
.service-card h3{ font-size: var(--fs-md); color: var(--c-text); margin-bottom: var(--sp-1); font-family: var(--f-body); font-weight:600; }
.service-card p{ color: var(--c-text-dim); font-size: var(--fs-sm); }
@media (prefers-reduced-motion: reduce){
  .service-detail{ max-height:none; opacity:1; margin-top: var(--sp-2); }
}

/* Ornate corner brackets — manuscript-illumination style HUD corners */
.ornate-frame{ position:relative; }
.ornate-frame::before, .ornate-frame::after{
  content:''; position:absolute; width:28px; height:28px; pointer-events:none;
  border: 2px solid var(--c-gold-bright); opacity:.8;
  filter: drop-shadow(0 0 4px rgba(236,207,142,.5));
  transition: opacity 80ms, border-color 80ms, filter 80ms;
}
.ornate-frame::before{ top:-2px; left:-2px; border-right:none; border-bottom:none; }
.ornate-frame::after{ bottom:-2px; right:-2px; border-left:none; border-top:none; }

/* ============================================================
   Academy (featured, high-contrast panel)
   ============================================================ */
.academy{
  position:relative; border-radius: var(--radius-lg);
  background: var(--c-surface-2); border:1px solid var(--c-border-bright);
  padding: var(--sp-7) var(--sp-4); overflow:hidden;
}
@media (min-width: 768px){ .academy{ padding: var(--sp-8) var(--sp-7); } }
.academy-grid{ position:relative; z-index:1; display:grid; gap: var(--sp-5); }
@media (min-width: 900px){ .academy-grid{ grid-template-columns: 1.1fr .9fr; gap: var(--sp-8); align-items:start; } }
.academy h2{ font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.academy p{ color: var(--c-text-dim); max-width: 58ch; }
.academy-points{ margin-top: var(--sp-4); display:grid; gap: var(--sp-2); }
.academy-points li{ display:flex; gap:.75em; align-items:flex-start; font-size: var(--fs-sm); color: var(--c-text); }
.academy-points svg{ width:18px; height:18px; flex-shrink:0; margin-top:3px; color: var(--c-green); }
.academy-card{
  background: var(--c-bg); border:1px solid var(--c-border); border-radius: var(--radius-md);
  padding: var(--sp-5);
}
.academy-card .course-tag{ font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-green); letter-spacing:.15em; text-transform:uppercase; }
.academy-card h4{ font-family: var(--f-body); font-weight:600; font-size: var(--fs-md); margin: var(--sp-2) 0 var(--sp-1); }
.academy-card p{ font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

/* ============================================================
   Approach / timeline
   ============================================================ */
.timeline{ display:grid; gap: var(--sp-4); counter-reset: step; }
@media (min-width: 900px){ .timeline{ grid-template-columns: repeat(4,1fr); gap: var(--sp-3); } }
.timeline-step{ position:relative; padding: var(--sp-4); border-left:2px solid var(--c-border); }
@media (min-width: 900px){ .timeline-step{ border-left:none; border-top:2px solid var(--c-border); padding-top: var(--sp-4); } }
.timeline-step::before{
  counter-increment: step; content: "0" counter(step);
  font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-green);
  display:block; margin-bottom: var(--sp-2);
}
.timeline-step h3{ font-family: var(--f-body); font-weight:600; font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.timeline-step p{ color: var(--c-text-dim); font-size: var(--fs-sm); }

/* ============================================================
   Trust / standards
   ============================================================ */
.standards-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); }
@media (min-width: 768px){ .standards-grid{ grid-template-columns: repeat(4,1fr); } }
.standard-badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--sp-2);
  text-align:center; padding: var(--sp-5) var(--sp-3);
  border:1px dashed var(--c-border-bright); border-radius: var(--radius-md);
  color: var(--c-text-dim); font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing:.08em;
}
.standard-badge svg{ width:28px; height:28px; color: var(--c-gold); }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{ display:grid; gap: var(--sp-6); }
@media (min-width: 900px){ .contact-grid{ grid-template-columns: .9fr 1.1fr; gap: var(--sp-8); } }
.contact-info-list{ margin-top: var(--sp-5); display:grid; gap: var(--sp-4); }
.contact-info-item{ display:flex; gap: var(--sp-3); align-items:flex-start; }
.contact-info-item svg{ width:20px; height:20px; color: var(--c-green); flex-shrink:0; margin-top:3px; }
.contact-info-item strong{ display:block; font-size: var(--fs-sm); color: var(--c-text); }
.contact-info-item span, .contact-info-item a{ color: var(--c-text-dim); font-size: var(--fs-sm); }
.contact-info-item a:hover{ color: var(--c-green); }

.social-row{ display:flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.social-link{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-text-dim);
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.social-link:hover{ color: var(--c-green); border-color: var(--c-green); transform: translateY(-2px); }
.social-link svg{ width:18px; height:18px; }

.form-card{ background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); }
@media (min-width: 640px){ .form-card{ padding: var(--sp-6); } }
.field{ margin-bottom: var(--sp-4); }
.field label{ display:block; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color: var(--c-text-dim); margin-bottom: var(--sp-2); }
.field .required{ color: var(--c-gold); }
.field input, .field textarea, .field select{
  width:100%; min-height:48px; padding: .8em 1em;
  background: var(--c-bg); border:1px solid var(--c-border); border-radius: var(--radius-sm);
  color: var(--c-text); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--c-green); box-shadow: 0 0 0 3px var(--c-green-glow); outline:none;
}
.field-error{ display:none; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-danger); font-family: var(--f-mono); }
.field.has-error input, .field.has-error textarea, .field.has-error select{ border-color: var(--c-danger); }
.field.has-error .field-error{ display:block; }
.field-row{ display:grid; gap: var(--sp-4); }
@media (min-width: 560px){ .field-row{ grid-template-columns: 1fr 1fr; } }

.form-status{ margin-top: var(--sp-3); font-family: var(--f-mono); font-size: var(--fs-sm); display:none; align-items:center; gap:.6em; }
.form-status[data-state="success"]{ display:flex; color: var(--c-green); }
.form-status[data-state="error"]{ display:flex; color: var(--c-danger); }
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ border-top:1px solid var(--c-border); padding-block: var(--sp-6) var(--sp-5); }
.footer-grid{ display:grid; gap: var(--sp-6); }
@media (min-width: 768px){ .footer-grid{ grid-template-columns: 1.2fr repeat(3, .8fr); } }
.footer-brand p{ margin-top: var(--sp-3); color: var(--c-text-dim); font-size: var(--fs-sm); max-width: 34ch; }
.footer-col h5{ font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color: var(--c-text-faint); margin-bottom: var(--sp-3); }
.footer-col a{ display:block; padding-block:.4em; color: var(--c-text-dim); font-size: var(--fs-sm); transition: color var(--dur-fast); }
.footer-col a:hover{ color: var(--c-green); }
.footer-bottom{
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top:1px solid var(--c-border);
  display:flex; flex-wrap:wrap; gap: var(--sp-3); align-items:center; justify-content:space-between;
  font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text-faint);
}

/* ============================================================
   Misc
   ============================================================ */
::selection{ background: var(--c-green); color:#04140c; }

.scroll-progress{
  position: fixed; top:0; left:0; height:2px; width:100%; z-index: calc(var(--z-nav) + 1);
  background: linear-gradient(90deg, var(--c-green), var(--c-gold));
  transform-origin: left; transform: scaleX(0);
}

.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.back-to-top{
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-overlay);
  width:48px; height:48px; border-radius:50%;
  background: var(--c-surface); border:1px solid var(--c-border-bright); color: var(--c-green);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity var(--dur-base), transform var(--dur-base), visibility 0s var(--dur-base);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; }
.back-to-top svg{ width:20px; height:20px; }

/* ============================================================
   Preloader
   ============================================================ */
#preloader{
  position: fixed; inset:0; z-index: 10000;
  background: var(--c-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--sp-3);
  transition: opacity .6s var(--ease-out), visibility 0s .6s;
}
#preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{ width:72px; height:72px; color: var(--c-green); animation: pulse-scale 1.4s ease-in-out infinite; }
.preloader-ring{ transform-origin: 50px 50px; stroke: var(--c-gold); stroke-opacity:.4; stroke-dasharray: 4 6; animation: ring-spin 4s linear infinite; }
@keyframes ring-spin{ to{ transform: rotate(360deg); } }
.preloader-text{ font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing:.3em; color: var(--c-text-dim); text-transform:uppercase; }
@keyframes pulse-scale{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.08); opacity:.7;} }
@media (prefers-reduced-motion: reduce){
  #preloader{ display:none; }
}