/* =============================================================================
   SyberX Fortress Academy — styles (light theme)
   Color tokens copied from assets/css/site.css :root (same names/values).
   site.css is not linked here: its layout classes collide with this page.
   Fonts: self-hosted Tajawal (AR default) + Inter (EN toggle) via fonts-*.css.
   Logical properties mirror RTL/LTR automatically.
   ========================================================================== */
:root{
  /* Identical to assets/css/site.css color tokens — do not rename. */
  --surface-paper: #f4f7fa;
  --surface-paper-2: #ffffff;
  --surface-panel: #edf3f7;
  --ink: #07131f;
  --ink-navy: #06182c;
  --navy-mid: #0d3a60;
  --text-muted: #50606f;
  --text-muted-sm: #45525f;
  --text-on-dark: #c5d4e0;
  --signal-blue: #0877e6;
  --signal-blue-text: #065fb8;
  --signal-cyan: #20cbed;
  --state-error: #9B3D52;
  --line: #d8e2ea;
  --muted: var(--text-muted);
  --accent-tint: color-mix(in srgb, var(--signal-blue) 10%, transparent);

  /* Page-layout aliases → site tokens */
  --bg: var(--surface-paper);
  --surface: var(--surface-paper-2);
  --navy: var(--ink-navy);
  --blue: var(--signal-blue);
  --cyan: var(--signal-cyan);

  /* No matching site token — kept as page-local values; see Phase 3 report. */
  --surface-2: #EAF1F8;
  --muted-2: #8494A6;
  --blue-hi: #2B8CEE;
  --cyan-soft: #E3F7FC;

  --radius:10px; --radius-lg:16px; --maxw:1080px;
  --ff-ar:"Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-en:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff-ar);font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
html[lang="en"] body{font-family:var(--ff-en);line-height:1.6;}
img,svg{max-width:100%;} a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;}
.skip{position:absolute;inset-inline-start:12px;inset-block-start:-60px;z-index:100;background:var(--blue);color:var(--surface-paper-2);
  padding:10px 16px;border-radius:8px;font-weight:700;transition:inset-block-start .15s;}
.skip:focus{inset-block-start:12px;}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px;}
.hidden{display:none!important;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:12px 20px;
  font:inherit;font-weight:700;font-size:15px;cursor:pointer;border:1px solid transparent;transition:.15s;}
.btn-primary{background:var(--blue);color:var(--surface-paper-2);}
.btn-primary:hover{background:var(--blue-hi);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
.btn-sm{padding:9px 15px;font-size:13.5px;} .btn-block{width:100%;}

/* header */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--surface-paper) 85%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
header .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-height:64px;}
.brand{display:flex;align-items:center;gap:11px;color:var(--navy);flex:none;}
.brand img{display:block;height:30px;width:auto;flex:none;}
.brand-sub{color:var(--muted);font-weight:700;font-size:13px;padding-inline-start:11px;border-inline-start:1px solid var(--line);white-space:nowrap;}
.header-actions{margin-inline-start:auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0;}
.lang{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:6px 13px;
  font:inherit;font-weight:700;font-size:13px;cursor:pointer;}
.lang:hover{border-color:var(--blue);color:var(--blue);}
.menu-btn{display:none;}

/* hero */
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding-block:60px 54px;}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-weight:700;font-size:13.5px;margin-bottom:16px;}
.eyebrow::before{content:"";width:30px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));}
.hero h1{font-size:clamp(30px,5vw,50px);font-weight:800;line-height:1.13;letter-spacing:-.01em;margin:0 0 16px;color:var(--navy);}
.hero p.lede{font-size:clamp(16px,2.1vw,19px);color:var(--muted);max-width:48ch;margin:0 0 24px;}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.hero .tag{margin-top:24px;color:var(--cyan);font-size:13px;font-weight:700;letter-spacing:.03em;}
.radar-wrap{position:relative;justify-self:center;width:min(380px,84vw);aspect-ratio:1;}
.radar-wrap canvas{position:absolute;inset:0;width:100%;height:100%;}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr;gap:10px;padding-block:40px;}.radar-wrap{order:-1;width:min(280px,66vw);}}

/* blocks */
section{scroll-margin-top:80px;} .block{padding-block:56px;}
.block-head h2{font-size:clamp(22px,3vw,30px);font-weight:800;margin:0 0 12px;color:var(--navy);}
.block-head h2::after{content:"";display:block;width:44px;height:3px;border-radius:3px;margin-top:12px;background:linear-gradient(90deg,var(--blue),var(--cyan));}
.block-head p{color:var(--muted);margin:0;}

/* course cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:26px;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s;}
.card:hover{border-color:var(--blue);box-shadow:0 6px 22px color-mix(in srgb, var(--signal-blue) 8%, transparent);}
.card .track{font-size:12.5px;color:var(--muted-2);font-weight:700;margin-bottom:12px;}
.card h3{font-size:18px;font-weight:700;line-height:1.35;margin:0 0 10px;color:var(--navy);}
.pill{align-self:flex-start;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;margin-bottom:16px;}
.pill.dev{color:var(--signal-blue-text);background:var(--accent-tint);border:1px solid color-mix(in srgb, var(--signal-blue) 28%, transparent);}
.pill.soon{color:#0F7E97;background:var(--cyan-soft);border:1px solid color-mix(in srgb, var(--signal-cyan) 30%, transparent);}
.card .actions{margin-top:auto;display:flex;flex-direction:column;gap:8px;}
.card .interest{background:none;border:none;color:var(--muted);font:inherit;font-weight:700;font-size:13px;cursor:pointer;padding:4px;}
.card .interest:hover{color:var(--blue);}

/* join / registration box */
.reg{background:var(--navy);color:var(--surface-paper-2);border-radius:20px;padding:40px 36px;display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;}
.reg h2{font-size:clamp(22px,3vw,28px);font-weight:800;margin:0 0 12px;color:var(--surface-paper-2);}
.reg p{color:color-mix(in srgb, var(--surface-paper) 72%, transparent);margin:0 0 6px;max-width:52ch;font-size:14.5px;}
.reg .captcha{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-size:12.5px;font-weight:700;margin-top:14px;}
.reg-actions{display:flex;flex-direction:column;gap:10px;}
.reg-actions .btn-ghost{color:var(--surface-paper-2);border-color:color-mix(in srgb, var(--surface-paper-2) 28%, transparent);}
.reg-actions .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}
.reg-soon .note{color:color-mix(in srgb, var(--surface-paper) 60%, transparent);font-size:12.5px;margin:0 0 10px;}
@media (max-width:760px){.reg{grid-template-columns:1fr;padding:30px 24px;}}

/* faq */
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;font-size:16px;display:flex;gap:14px;align-items:center;color:var(--navy);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";margin-inline-start:auto;color:var(--blue);font-size:22px;font-weight:400;}
.faq details[open] summary::after{content:"\2212";}
.faq details p{margin:0 0 20px;color:var(--muted);max-width:72ch;}

/* disclaimer + footer */
.disclaimer{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;color:var(--muted);font-size:13px;line-height:1.8;}
.disclaimer strong{color:var(--ink);font-weight:700;}
footer{border-top:1px solid var(--line);padding-block:32px;margin-top:16px;}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;}
.foot-tag{color:var(--cyan);font-weight:700;font-size:13.5px;}
.foot-links{display:flex;gap:20px;color:var(--muted);font-size:14px;}
.foot-links a:hover{color:var(--ink);}
.foot-copy{color:var(--muted-2);font-size:13px;}

/* dialog + interest form */
dialog{border:none;padding:0;background:transparent;max-width:560px;width:calc(100% - 32px);}
dialog::backdrop{background:color-mix(in srgb, var(--ink-navy) 50%, transparent);backdrop-filter:blur(3px);}
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;max-height:88vh;overflow:auto;position:relative;}
.dcard h3{margin:0 0 4px;font-size:20px;font-weight:800;color:var(--navy);}
.dcard .lede{color:var(--muted);font-size:14px;margin:0 0 16px;}
.close{position:absolute;inset-inline-end:20px;inset-block-start:20px;background:transparent;border:1px solid var(--line);color:var(--muted);width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:18px;}
.close:hover{color:var(--ink);border-color:var(--muted-2);}
.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;}
.field .req{color:var(--blue);} .field .opt{color:var(--muted-2);font-weight:400;}
.field input,.field select{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:11px 12px;font:inherit;font-size:14.5px;}
.field input:focus,.field select:focus{border-color:var(--blue);outline:none;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:480px){.field-row{grid-template-columns:1fr;}}
.field-error{color:var(--state-error);font-size:12.5px;margin-top:6px;display:none;}
.field.invalid .field-error{display:block;}
.field.invalid input,.field.invalid select{border-color:var(--state-error);}
.consent{display:flex;gap:9px;align-items:flex-start;margin:14px 0;}
.consent input{width:auto;margin-top:3px;flex:none;}
.consent label{font-size:12.5px;color:var(--muted);font-weight:400;line-height:1.55;margin:0;}
.consent a{color:var(--blue);}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.form-status{border-radius:9px;padding:12px 14px;font-size:14px;margin-bottom:14px;display:none;}
.form-status.show{display:block;}
.form-status.ok{background:var(--cyan-soft);border:1px solid color-mix(in srgb, var(--signal-cyan) 40%, transparent);color:#0F6E86;}
.form-status.err{background:#FCEBEA;border:1px solid #E7B7B1;color:#B03A2E;}

/* responsive — hamburger stays hidden: it is not a menu, and showing it
   next to the account buttons is what crushed .brand-sub into the mark. */
@media (max-width:820px){
  .hero .wrap{padding-block:40px;}
}
@media (max-width:480px){
  header .wrap{gap:8px;}
}