/* ========================================================================
   Dar Al-Bayan Schools — Site Stylesheet (2026)
   Author: Claude Code (professional refresh)
   Self-contained, zero external dependencies. Used by all pages
   in both Arabic (RTL) and English (LTR) versions.
   ======================================================================== */

:root{
  /* INK */
  --ink:      #0A1F2E;
  --ink-2:    #324A5A;
  --muted:    #6F8290;

  /* BRAND — refined navy + warm sun (Dar Al-Bayan heritage palette) */
  --brand:    #134B7E;
  --brand-2:  #1E6FB5;
  --brand-700:#0E3A66;
  --brand-50: #E8F0F9;
  --brand-100:#D4E2F1;

  /* ACCENTS */
  --gold:     #D4A53D;
  --gold-700: #A8821E;
  --coral:    #E76F51;
  --coral-2:  #F2A488;
  --rose:     #DB6388;
  --mint:     #06B6A2;
  --plum:     #6B3FA0;
  --sky:      #4DA8DA;
  --leaf:     #16A34A;

  /* SURFACE */
  --bg:       #FBF8F1;
  --bg-2:     #F5EFDF;
  --surface:  #FFFFFF;
  --line:     #E8E1D2;
  --line-2:   #EFE8D7;

  /* SHADOWS */
  --shadow-xs: 0 1px 2px rgba(15,40,60,.06);
  --shadow-sm: 0 4px 12px rgba(15,40,60,.06);
  --shadow:    0 18px 42px -22px rgba(15,40,60,.30);
  --shadow-lg: 0 36px 72px -32px rgba(15,40,60,.42);

  /* GEOMETRY */
  --radius:     20px;
  --radius-sm:  14px;
  --radius-xs:  10px;
  --maxw:       1200px;

  /* FONT STACKS */
  --font-ar: "Segoe UI","SF Arabic","Tajawal","Noto Sans Arabic","Noto Naskh Arabic",Tahoma,system-ui,Arial,sans-serif;
  --font-en: "Inter","SF Pro Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}

html[lang="ar"] body{ font-family: var(--font-ar) }
html[lang="en"] body{ font-family: var(--font-en) }

/* ----------- RESET ----------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;
}

/* Accessible focus indicator (keyboard users) */
:focus{ outline: none }
:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible, .btn:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: none; /* the box-shadow ring in .field is enough */
}
img{max-width:100%; display:block; height:auto}
a{color:var(--brand); text-decoration:none; transition: color .2s}
a:hover{color:var(--brand-700)}
h1,h2,h3,h4,h5{margin:0 0 .5em; line-height:1.2; color:var(--ink); font-weight:800; letter-spacing:-.015em}
p{margin:0 0 1em; color:var(--ink-2)}
button{font-family:inherit; cursor:pointer}

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

::selection{background: var(--brand); color: #fff}

.container{max-width: var(--maxw); margin-inline:auto; padding-inline: clamp(16px, 3vw, 32px)}

.skip-link{
  position:absolute; right:-9999px; top:0;
  background: var(--ink); color:#fff; padding:10px 16px; z-index:9999;
  border-radius:0 0 8px 8px; font-weight:700;
}
.skip-link:focus{right:50%; transform:translateX(50%)}
html[dir="ltr"] .skip-link{right:auto; left:-9999px; border-radius:0 0 8px 8px}
html[dir="ltr"] .skip-link:focus{left:50%; right:auto; transform:translateX(-50%)}

/* ----------- SCROLL PROGRESS ----------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120;
  background: linear-gradient(90deg, var(--brand), var(--gold), var(--coral));
  transform-origin: left; transform: scaleX(0);
  transition: transform .15s linear;
}
html[dir="rtl"] .scroll-progress{transform-origin: right}

/* ----------- MARQUEE / ANNOUNCEMENT BAR ----------- */
.announce{
  background: var(--ink); color:#FBF6E5;
  font-size: 13px; font-weight:600; padding: 8px 0;
  overflow:hidden; position:relative;
}
.announce .track{
  display:flex; gap: 60px; white-space:nowrap; animation: marquee 32s linear infinite;
  padding-left: 60px;
}
.announce .item{display:inline-flex; align-items:center; gap:10px}
.announce .item .pulse{
  width:8px; height:8px; border-radius:50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(212,165,61,.6); animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(212,165,61,.6)} 70%{box-shadow:0 0 0 10px rgba(212,165,61,0)} 100%{box-shadow:0 0 0 0 rgba(212,165,61,0)} }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
html[dir="rtl"] .announce .track{ animation-name: marquee-rtl }
@keyframes marquee-rtl{ from{transform:translateX(0)} to{transform:translateX(50%)} }

/* ----------- TOP UTILITY BAR ----------- */
.utilbar{
  background:#fff; border-bottom:1px solid var(--line);
  font-size:13px; color: var(--ink-2);
}
.utilbar .container{display:flex; flex-wrap:wrap; gap:6px 24px; align-items:center; justify-content:space-between; padding-block:8px}
.utilbar .info{display:flex; flex-wrap:wrap; gap:6px 22px; align-items:center}
.utilbar span{display:inline-flex; align-items:center; gap:8px}
.utilbar svg{width:14px; height:14px; flex-shrink:0; color: var(--brand); opacity:.85}
.utilbar a{color: var(--ink-2)}
.utilbar a:hover{color: var(--brand)}
.utilbar .lang{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 12px; border:1px solid var(--line); border-radius:999px; font-weight:700; color: var(--brand);
  background: var(--brand-50);
}
.utilbar .lang:hover{ background: var(--brand); color:#fff; border-color: var(--brand) }
.utilbar .lang svg{color:inherit}
@media (max-width:680px){
  .utilbar{font-size:12px}
  .utilbar .info > span:nth-child(3){display:none}
}

/* ----------- STICKY HEADER / NAV ----------- */
header.site{
  position:sticky; top:0; z-index:90;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(232,225,210,.6);
}
.nav{display:flex; align-items:center; gap:16px; padding-block:14px}
.logo{display:flex; align-items:center; gap:10px; flex-shrink:0}
.logo img{height:54px; width:auto; transition: transform .3s}
.logo:hover img{transform:scale(1.03)}

.nav-list{display:flex; gap:4px; list-style:none; padding:0; margin:0 auto}
.nav-list a{
  display:inline-block; padding: 10px 14px; border-radius:10px;
  color: var(--ink); font-weight:700; font-size:15px;
  position:relative;
}
.nav-list a:hover{color: var(--brand); background: var(--brand-50)}
.nav-list a.active{color: var(--brand)}
.nav-list a.active::after{
  content:""; position:absolute;
  inset-inline:14px; bottom:5px; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--gold), var(--coral));
}

.nav-cta{display:flex; gap:8px; align-items:center}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 22px; border-radius:12px;
  font-weight:800; font-size: 15px; line-height:1;
  cursor:pointer; transition: transform .2s, box-shadow .25s, background .2s, color .2s, border-color .2s;
  border:none; text-decoration:none; white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn svg{width:18px; height:18px}
.btn::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s;
}
.btn:hover::before{transform: translateX(120%)}

.btn-primary{background: linear-gradient(135deg, var(--brand-2), var(--brand)); color:#fff; box-shadow: 0 6px 18px -8px rgba(19,75,126,.5)}
.btn-primary:hover{color:#fff; transform:translateY(-2px); box-shadow: 0 14px 30px -10px rgba(19,75,126,.6)}
.btn-gold{background: linear-gradient(135deg, var(--gold), #c89231); color: #1B1300}
.btn-gold:hover{color:#1B1300; transform:translateY(-2px); box-shadow: 0 14px 30px -10px rgba(212,165,61,.55)}
.btn-coral{background: linear-gradient(135deg, var(--coral), #d65a3c); color:#fff}
.btn-coral:hover{color:#fff; transform:translateY(-2px); box-shadow: 0 14px 30px -10px rgba(231,111,81,.55)}
.btn-ghost{background: transparent; color: var(--brand); border:2px solid var(--brand); padding:10px 20px}
.btn-ghost:hover{background: var(--brand); color:#fff}
.btn-light{background: #fff; color: var(--brand); border:1px solid var(--line)}
.btn-light:hover{background: var(--brand-50); color: var(--brand)}

.menu-toggle{
  display:none; background:transparent; border:1px solid var(--line);
  width:46px; height:46px; border-radius:12px; cursor:pointer;
  align-items:center; justify-content:center; color: var(--ink);
}
.menu-toggle:hover{border-color: var(--brand); color: var(--brand)}
.menu-toggle svg{width:22px; height:22px}

@media (max-width:1000px){
  .nav-list{display:none}
  .menu-toggle{display:inline-flex}
  .nav-cta .btn-ghost,
  .nav-cta .btn-light{display:none}
}

.mobile-menu{display:none; background:#fff; border-top:1px solid var(--line)}
.mobile-menu.open{display:block; animation: slideDown .25s ease}
@keyframes slideDown{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
.mobile-menu ul{list-style:none; margin:0; padding:8px 0}
.mobile-menu a{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:14px 22px; color: var(--ink); font-weight:700;
  border-bottom:1px solid var(--bg-2);
}
.mobile-menu a:hover{background: var(--brand-50); color: var(--brand)}

/* ----------- EYEBROW / LABELS ----------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand);
  font-weight: 800; font-size: 12px; letter-spacing:.6px;
  text-transform: uppercase;
  border: 1px solid rgba(19,75,126,.16);
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background: var(--gold); display:inline-block}

.section-num{
  font-family: var(--font-en);
  font-size: 12px; letter-spacing:.4em; font-weight:700;
  color: var(--gold-700); text-transform: uppercase;
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom: 12px;
}
.section-num::before, .section-num::after{
  content:""; width: 24px; height: 1px; background: var(--gold);
}

/* ----------- SECTIONS BASE ----------- */
section{padding: 96px 0; position:relative}
.sec-head{text-align:center; max-width: 760px; margin: 0 auto 56px}
.sec-head h2{
  font-size: clamp(28px, 3.6vw, 46px);
  letter-spacing:-.02em;
}
.sec-head h2 .grad{
  background: linear-gradient(120deg, var(--brand), var(--brand-2) 40%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-head p{color: var(--ink-2); font-size: 17px; line-height: 1.75}

/* curved divider */
.curve{
  width:100%; height: 80px;
  background: var(--bg);
  -webkit-mask: radial-gradient(50% 80px at 50% 0, transparent 99%, #000 100%);
  mask: radial-gradient(50% 80px at 50% 0, transparent 99%, #000 100%);
}

/* ----------- HERO ----------- */
.hero{
  position:relative; padding: 80px 0 120px; overflow:hidden;
  background:
    radial-gradient(1100px 600px at 90% -10%, rgba(212,165,61,.16), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(19,75,126,.18), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(19,75,126,.10) 1px, transparent 0);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.hero-grid{display:grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items:center; position:relative; z-index:1}
.hero-text h1{
  font-size: clamp(36px, 5.2vw, 64px); letter-spacing:-.025em;
  margin: 16px 0 18px; font-weight:900;
}
.hero-text h1 .grad{
  background: linear-gradient(120deg, var(--brand), var(--brand-2) 45%, var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-text p.lead{font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); max-width: 56ch; line-height:1.7}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top: 32px}
.hero-mini{display:flex; gap:14px; flex-wrap:wrap; margin-top: 36px}
.hero-mini .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 14px; background:#fff;
  border: 1px solid var(--line); border-radius: 999px;
  font-size:13px; color: var(--ink-2); font-weight:600;
  box-shadow: var(--shadow-xs);
}
.hero-mini .pill svg{width:16px; height:16px; color: var(--brand)}

/* Hero collage */
.collage{position:relative; aspect-ratio: 1/1; max-width: 580px; margin-inline-start:auto}
.collage .frame{
  position:absolute; border-radius: 28px; overflow:hidden;
  box-shadow: var(--shadow-lg); border: 6px solid #fff;
  background: var(--bg);
}
.collage .f1{ width:60%; aspect-ratio:1/1.15; right:0; top:6%; transform:rotate(3deg) }
.collage .f2{ width:48%; aspect-ratio:1/1.1; left:0; top:28%; transform:rotate(-4deg) }
.collage .f3{ width:42%; aspect-ratio:1/1; right:18%; bottom:0; transform:rotate(2deg) }
html[dir="ltr"] .collage .f1{right:auto; left:0; transform:rotate(-3deg)}
html[dir="ltr"] .collage .f2{left:auto; right:0; transform:rotate(4deg)}
html[dir="ltr"] .collage .f3{right:auto; left:18%; transform:rotate(-2deg)}
.collage img{width:100%; height:100%; object-fit:cover}
.collage .blob{position:absolute; border-radius:50%; filter:blur(50px); opacity:.55; z-index:-1}
.collage .b1{width:280px; height:280px; background: var(--gold); top:-30px; right:18%}
.collage .b2{width:300px; height:300px; background: var(--brand); bottom:-40px; left:0}
.floaty{position:absolute; z-index:3; background:#fff; padding:12px 18px; border-radius:16px; box-shadow: var(--shadow); display:flex; gap:10px; align-items:center; font-weight:800; font-size:13px; color: var(--ink); animation: floaty 6s ease-in-out infinite}
.floaty .icon-circle{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0}
.floaty .icon-circle svg{width:18px; height:18px}
.floaty .num{font-size:22px; color: var(--brand); font-weight:900; line-height:1}
.floaty .lab{font-size:11px; color: var(--muted); font-weight:700; margin-top:2px}
.floaty.a{top:8%; left:-6%; animation-delay: 0s}
.floaty.a .icon-circle{background: linear-gradient(135deg, var(--coral), var(--gold))}
.floaty.b{bottom:6%; right:-4%; animation-delay: -3s}
.floaty.b .icon-circle{background: linear-gradient(135deg, var(--plum), var(--brand-2))}
html[dir="ltr"] .floaty.a{left:auto; right:-6%}
html[dir="ltr"] .floaty.b{right:auto; left:-4%}
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

@media (max-width: 940px){
  .hero{padding: 50px 0 80px}
  .hero-grid{grid-template-columns: 1fr; gap: 50px}
  .collage{margin-inline:auto; max-width: 460px}
  .floaty.a{left:0} html[dir="ltr"] .floaty.a{right:0}
  .floaty.b{right:0} html[dir="ltr"] .floaty.b{left:0}
}

/* ----------- STATS ----------- */
.stats{margin-top:-60px; position:relative; z-index:5}
.stats-card{
  background:#fff; border-radius:24px;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  overflow:hidden; border:1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.stat{padding: 30px 22px; text-align:center}
.stat + .stat{border-inline-start:1px solid var(--line)}
.stat .num{
  font-size: clamp(28px, 3.4vw, 44px); font-weight:900; line-height:1;
  color: var(--brand);
  display:flex; align-items:baseline; justify-content:center; gap:4px;
  font-feature-settings: "tnum";
}
.stat .num small{color: var(--gold-700); font-size:.55em; font-weight:800; margin-inline-start:4px}
.stat .lab{margin-top:10px; color: var(--ink-2); font-weight:700; font-size:14.5px}
@media (max-width: 760px){
  .stats-card{grid-template-columns: repeat(2,1fr)}
  .stat:nth-child(2n+1){border-inline-start:none}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ----------- FEATURES (about) ----------- */
.features{display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px}
.feat{
  background:#fff; border-radius: var(--radius); padding: 32px 26px;
  border:1px solid var(--line); box-shadow: var(--shadow-xs);
  transition: transform .35s, box-shadow .35s, border-color .35s;
  position:relative; overflow:hidden;
}
.feat::before{
  content:""; position:absolute; inset-inline:0; top:0; height:5px;
  background: linear-gradient(90deg, var(--brand-2), var(--gold), var(--coral));
  transform: scaleX(0); transform-origin: var(--corigin, right);
  transition: transform .4s ease;
}
html[dir="ltr"] .feat{--corigin: left}
.feat:hover{transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent}
.feat:hover::before{transform: scaleX(1)}
.feat .ic{
  width:64px; height:64px; border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; margin-bottom: 18px; box-shadow: 0 12px 24px -10px rgba(15,40,60,.35);
}
.feat .ic svg{width:30px; height:30px}
.feat:nth-child(4n+1) .ic{background: linear-gradient(135deg, var(--brand), var(--brand-2))}
.feat:nth-child(4n+2) .ic{background: linear-gradient(135deg, var(--coral), var(--gold))}
.feat:nth-child(4n+3) .ic{background: linear-gradient(135deg, var(--plum), var(--rose))}
.feat:nth-child(4n+4) .ic{background: linear-gradient(135deg, var(--mint), var(--sky))}
.feat h3{font-size:18.5px; margin-bottom:10px}
.feat p{font-size:14.5px; margin:0; color: var(--ink-2)}
@media (max-width: 1000px){ .features{grid-template-columns: repeat(2,1fr)} }
@media (max-width: 540px){ .features{grid-template-columns: 1fr} }

/* ----------- STAGES ----------- */
.stages-section{
  background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
}
.stages{display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px}
.stage{
  background:#fff; border-radius: var(--radius);
  border:1px solid var(--line); overflow:hidden;
  box-shadow: var(--shadow-xs);
  transition: transform .4s, box-shadow .4s;
  position:relative;
}
.stage:hover{transform: translateY(-8px); box-shadow: var(--shadow-lg)}
.stage .head{
  height:170px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.stage .head::before{
  content:""; position:absolute; inset:0; opacity:.18;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.5) 1px, transparent 1.5px),
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.4) 1px, transparent 1.5px);
  background-size: 28px 28px;
}
.stage .head .em{font-size: 68px; line-height:1; position:relative; z-index:1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.18))}
.stage .head .stage-icon{
  width: 72px; height: 72px;
  color: #fff; stroke-width: 1.75;
  position: relative; z-index: 1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.22));
}
.stage-detail .visual .stage-icon{
  width: 96px; height: 96px;
  color: #fff; stroke-width: 1.55;
  position: relative; z-index: 1;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
}
.stage:nth-child(1) .head{background: linear-gradient(135deg, var(--rose), var(--coral))}
.stage:nth-child(2) .head{background: linear-gradient(135deg, var(--sky), var(--brand-2))}
.stage:nth-child(3) .head{background: linear-gradient(135deg, var(--plum), #a374f0)}
.stage:nth-child(4) .head{background: linear-gradient(135deg, var(--leaf), #38c172)}
.stage .body{padding: 24px 24px 28px}
.stage h3{font-size: 21px; margin-bottom: 6px}
.stage .when{color: var(--muted); font-size: 13.5px; margin-bottom:14px; display:flex; align-items:center; gap:6px}
.stage .when svg{width:14px; height:14px}
.stage .row{display:flex; align-items:flex-end; justify-content:space-between; padding-top:14px; border-top:1px dashed var(--line)}
.stage .label{font-size:11px; color: var(--muted); font-weight:700; display:block; margin-bottom:2px; text-transform: uppercase; letter-spacing:.2px}
.stage .price{font-size:24px; font-weight:900; color: var(--ink)}
.stage .price small{font-size:13px; color: var(--ink-2); font-weight:700; margin-inline-start:4px}
.stage .more{display:inline-flex; align-items:center; gap:6px; font-weight:800; color: var(--brand); font-size:14px}
.stage .more:hover{color: var(--brand-700)}
@media (max-width: 1000px){ .stages{grid-template-columns: repeat(2,1fr)} }
@media (max-width: 560px){ .stages{grid-template-columns: 1fr} }

/* ----------- WHY ----------- */
.why-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px}
.why{
  background:#fff; border-radius: var(--radius);
  padding: 28px; border:1px solid var(--line);
  display:flex; gap:18px; align-items:flex-start;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.why:hover{transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow)}
.why .ic{
  width: 52px; height: 52px; border-radius: 14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.why .ic svg{width:24px; height:24px}
.why h3{font-size:17px; margin: 0 0 8px}
.why p{font-size:14px; margin:0; color: var(--ink-2); line-height:1.6}
@media (max-width: 900px){ .why-grid{grid-template-columns: 1fr} }

/* ----------- GALLERY ----------- */
.gallery-section{background: var(--bg)}
.gallery{
  display:grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px; gap: 14px;
}
.g-item{
  position:relative; overflow:hidden; border-radius: 18px;
  box-shadow: var(--shadow-xs); background:#ddd;
}
.g-item img{width:100%; height:100%; object-fit:cover; transition: transform .8s}
.g-item:hover img{transform: scale(1.06)}
.g-item::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,31,46,.55));
  opacity:0; transition: opacity .35s;
}
.g-item:hover::after{opacity:1}
.g-1{grid-column: span 2; grid-row: span 2}
.g-4{grid-column: span 2}
.g-7{grid-row: span 2}
@media (max-width: 900px){
  .gallery{grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px}
  .g-1{grid-column: span 2; grid-row: span 2}
  .g-4{grid-column: span 2}
  .g-7{grid-row: span 1}
}

/* ----------- CTA BAND ----------- */
.cta-section{padding: 0 0 96px}
.cta-band{
  background:
    radial-gradient(700px 320px at 0% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(700px 400px at 100% 100%, rgba(212,165,61,.32), transparent 60%),
    linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 100%);
  color:#fff; border-radius: 28px; padding: 60px clamp(28px, 4vw, 64px);
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap: 32px;
  box-shadow: var(--shadow-lg); position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:auto -60px -60px auto;
  width:280px; height:280px; border-radius:50%; background: rgba(255,255,255,.06);
}
html[dir="ltr"] .cta-band::before{inset:auto auto -60px -60px}
.cta-band h2{color:#fff; font-size: clamp(24px, 2.8vw, 36px); margin-bottom: 8px}
.cta-band p{color: rgba(255,255,255,.86); margin: 0; font-size:16.5px; line-height:1.7}
@media (max-width: 760px){
  .cta-band{grid-template-columns: 1fr; text-align:center}
}

/* ----------- CONTACT / FORMS ----------- */
.contact-section{background: linear-gradient(180deg, var(--bg-2) 0%, #fff 100%)}
.contact-grid{display:grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items:start}
@media (max-width: 1000px){ .contact-grid{grid-template-columns: 1fr} }

.info-card, .form-card{
  background:#fff; border-radius: var(--radius);
  border:1px solid var(--line); padding: 32px;
  box-shadow: var(--shadow-xs);
}
.info-list{list-style:none; padding:0; margin: 0 0 24px}
.info-list li{display:flex; gap:14px; padding: 16px 0; border-bottom: 1px solid var(--bg-2)}
.info-list li:last-child{border-bottom: 0}
.info-list .ic{
  width:46px; height:46px; flex-shrink:0; border-radius: 12px;
  background: var(--brand-50); color: var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.info-list .ic svg{width:20px; height:20px}
.info-list h4{margin:0; font-size:13.5px; color: var(--muted); font-weight:700; text-transform: uppercase; letter-spacing:.3px}
.info-list p{margin: 4px 0 0; color: var(--ink); font-weight:700}

.map-wrap{
  position:relative; aspect-ratio: 16/11;
  border-radius: var(--radius); overflow:hidden;
  border:1px solid var(--line); background: var(--bg-2);
}
.map-wrap iframe{width:100%; height:100%; border:0; display:block}

.form-card h3{font-size: 24px; margin-bottom: 4px}
.form-card .sub{color: var(--muted); font-size: 14.5px; margin-bottom: 22px}
.field{margin-bottom: 16px}
.field label{display:block; font-weight:700; font-size:13.5px; margin-bottom: 6px; color: var(--ink)}
.field label .req{color: var(--coral); margin-inline-start: 2px}
.field input, .field select, .field textarea{
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background:#fff; font-family: inherit; font-size:15px;
  color: var(--ink); transition: border-color .2s, box-shadow .2s;
  appearance: none; -webkit-appearance: none;
}
.field textarea{min-height: 130px; resize: vertical; line-height:1.6}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(19,75,126,.14);
}
.field-row{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}
.field-row.three{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 600px){ .field-row, .field-row.three{grid-template-columns: 1fr} }
.field .hint{font-size:12px; color: var(--muted); margin-top:4px}
.field-error{color: var(--coral); font-size:12.5px; margin-top:4px; display:none}
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color: var(--coral); box-shadow: 0 0 0 4px rgba(231,111,81,.16) }
.field.invalid .field-error{display:block}

/* file inputs */
.file-input{
  display:flex; align-items:center; gap:10px;
  border:1px dashed var(--line); border-radius:12px; padding: 12px 14px;
  background: var(--bg); cursor:pointer;
  transition: border-color .2s, background .2s;
}
.file-input:hover{border-color: var(--brand); background: var(--brand-50)}
.file-input input{display:none}
.file-input .ic{
  width:36px; height:36px; flex-shrink:0; border-radius:10px;
  background: var(--brand-50); color: var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.file-input .ic svg{width:18px; height:18px}
.file-input .lbl{font-size: 13.5px; font-weight:700; color: var(--ink)}
.file-input .lbl small{display:block; color: var(--muted); font-size: 11.5px; font-weight: 600; margin-top:2px}
.file-input.has-file{border-style: solid; border-color: var(--mint); background: rgba(6,182,162,.08)}
.file-input.has-file .ic{background: var(--mint); color:#fff}

.form-msg{
  margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  font-size: 14.5px; font-weight:700; display:none; line-height:1.55;
}
.form-msg.ok{display:block; background: #E6F7EE; color: #0F6E3F; border:1px solid #A7E1BF}
.form-msg.err{display:block; background: #FDECEE; color: #9F1C2A; border:1px solid #F0B6BB}

/* ----------- FOOTER ----------- */
footer.site{
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(212,165,61,.10), transparent 50%),
    linear-gradient(180deg, #0E2A3F 0%, #081B29 100%);
  color: #BFD0DA; padding: 72px 0 0;
}
footer.site .grid{display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px}
footer.site h4{
  color:#fff; font-size: 16px; letter-spacing: .3px;
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 2px solid rgba(212,165,61,.45);
  display: inline-block;
}
footer.site p{color: #9FB1BC; font-size: 14.5px; margin: 0 0 14px; line-height: 1.75}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site ul li{margin-bottom: 10px}
footer.site ul a{
  color: #BFD0DA; font-size: 14.5px;
  display: inline-flex; align-items:center; gap:8px;
}
footer.site ul a::before{
  content:""; width:6px; height:6px; border-radius:50%; background: var(--gold); flex-shrink:0;
  transition: transform .2s;
}
footer.site ul a:hover{color:#fff}
footer.site ul a:hover::before{transform: scale(1.4)}
footer.site .brand-foot .logo-plate{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; padding: 12px 18px; border-radius: 14px;
  box-shadow: 0 10px 28px -12px rgba(0,0,0,.45);
  margin-bottom: 18px;
}
footer.site .brand-foot .logo-plate img{height: 52px; width:auto; display:block}
/* legacy fallback if a page still uses a bare <img> without the plate */
footer.site .brand-foot > img{height: 52px; margin-bottom: 18px; background:#fff; padding:10px 16px; border-radius:14px; box-shadow:0 10px 28px -12px rgba(0,0,0,.45)}
.social{display:flex; gap:10px; margin-top: 6px}
.social a{
  width: 42px; height: 42px; border-radius:50%;
  background: rgba(255,255,255,.06); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s, transform .2s, color .2s;
}
.social a:hover{background: var(--gold); color: #1B1300; transform: translateY(-3px)}
.social a svg{width:18px; height:18px}
.copy{
  margin-top: 56px; padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:13.5px; color:#7E94A0;
}
@media (max-width: 900px){
  footer.site .grid{grid-template-columns: 1fr 1fr}
  footer.site .brand-foot{grid-column: 1 / -1}
}
@media (max-width: 540px){ footer.site .grid{grid-template-columns: 1fr} }

/* ----------- BACK TO TOP ----------- */
.back-top{
  position: fixed; bottom: 24px; left: 24px; z-index: 95;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--brand); color:#fff; border:none;
  box-shadow: var(--shadow); cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform: translateY(10px);
  transition: opacity .3s, transform .3s, background .2s;
}
.back-top.show{opacity:1; pointer-events:auto; transform:translateY(0)}
.back-top:hover{background: var(--brand-700)}
.back-top svg{width:20px; height:20px}

/* ----------- WHATSAPP FLOATING BUTTON ----------- */
.whatsapp-fab{
  position: fixed; bottom: 24px; right: 24px; z-index: 96;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 32px -10px rgba(37,211,102,.6);
  transition: transform .25s, box-shadow .25s;
  animation: wa-pulse 2.6s ease-out infinite;
}
.whatsapp-fab:hover{
  transform: scale(1.08); color:#fff;
  box-shadow: 0 18px 38px -10px rgba(37,211,102,.75);
}
.whatsapp-fab svg{ width: 32px; height: 32px }
.whatsapp-fab .lbl{
  position: absolute; right: 72px; top: 50%; transform: translateY(-50%);
  background: #0E2A3F; color:#fff; font-size: 13px; font-weight:700;
  padding: 8px 12px; border-radius: 10px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  box-shadow: 0 10px 20px -8px rgba(0,0,0,.3);
}
.whatsapp-fab .lbl::after{
  content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-style: solid; border-width: 5px 6px 5px 0;
  border-color: transparent #0E2A3F transparent transparent;
}
html[dir="rtl"] .whatsapp-fab .lbl{ right: auto; left: 72px }
html[dir="rtl"] .whatsapp-fab .lbl::after{ left: auto; right: -5px; border-width: 5px 0 5px 6px; border-color: transparent transparent transparent #0E2A3F }
@media (hover: hover){
  .whatsapp-fab:hover .lbl{ opacity: 1; transform: translateY(-50%) translateX(-4px) }
  html[dir="rtl"] .whatsapp-fab:hover .lbl{ transform: translateY(-50%) translateX(4px) }
}
@keyframes wa-pulse{
  0%, 100%{ box-shadow: 0 14px 32px -10px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.55); }
  50%{ box-shadow: 0 14px 32px -10px rgba(37,211,102,.6), 0 0 0 14px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce){ .whatsapp-fab{ animation: none } }
@media (max-width: 540px){
  .whatsapp-fab{ width: 54px; height: 54px; bottom: 18px; right: 18px }
  .whatsapp-fab svg{ width: 28px; height: 28px }
  .whatsapp-fab .lbl{ display: none }
}

/* ----------- REVEAL ANIMATION ----------- */
.reveal{opacity:0; transform: translateY(24px); transition: opacity .8s, transform .8s}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none} }

/* ----------- PAGE HEADER (interior pages) ----------- */
.page-head{
  padding: 70px 0 80px; position:relative; overflow:hidden;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(212,165,61,.18), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(19,75,126,.16), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
  text-align:center;
}
.page-head h1{font-size: clamp(34px, 5vw, 56px); margin-bottom: 10px; letter-spacing:-.02em}
.page-head h1 .grad{background: linear-gradient(120deg, var(--brand), var(--brand-2) 50%, var(--coral)); -webkit-background-clip:text; background-clip:text; color: transparent}
.page-head .crumb{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--muted); font-size:14px; font-weight:600;
}
.page-head .crumb a{color: var(--brand)}
.page-head .crumb svg{width:14px; height:14px}

/* ----------- TIMELINE (about page) ----------- */
.timeline{position: relative; max-width: 880px; margin: 0 auto}
.timeline::before{
  content:""; position:absolute; top: 0; bottom:0;
  inset-inline-start: 50%;
  width: 2px; background: linear-gradient(180deg, var(--gold), var(--brand-2), var(--brand));
  transform: translateX(-50%);
}
.t-item{position: relative; width: 50%; padding: 12px 36px; margin-bottom: 20px}
.t-item:nth-child(odd){inset-inline-start: 0}
.t-item:nth-child(even){inset-inline-start: 50%}
.t-item .dot{
  position:absolute; top: 26px; width: 16px; height:16px;
  border-radius:50%; background: var(--gold); border:3px solid #fff;
  box-shadow: 0 0 0 3px var(--brand);
}
.t-item:nth-child(odd) .dot{inset-inline-end: -8px}
.t-item:nth-child(even) .dot{inset-inline-start: -8px}
.t-card{background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow-xs)}
.t-card h3{font-size: 18px; margin-bottom: 4px}
.t-card .yr{font-weight:900; color: var(--gold-700); font-size: 13px; letter-spacing:.3px}
.t-card p{margin: 6px 0 0; font-size:14.5px}
@media (max-width: 760px){
  .timeline::before{inset-inline-start: 16px; transform:none}
  .t-item, .t-item:nth-child(odd), .t-item:nth-child(even){ width: 100%; inset-inline-start: 0; padding-inline-start: 48px; padding-inline-end: 8px }
  .t-item .dot{inset-inline-start: 8px !important; inset-inline-end: auto !important}
}

/* ----------- VALUES GRID (about) ----------- */
.values{display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px}
.val{
  background:#fff; border-radius: var(--radius);
  border:1px solid var(--line); padding: 28px;
  position:relative; overflow:hidden;
  transition: transform .3s, box-shadow .3s;
}
.val:hover{transform: translateY(-4px); box-shadow: var(--shadow)}
.val .num{
  font-family: var(--font-en); font-size: 56px; font-weight: 900;
  color: var(--brand-50); line-height:1; position: absolute;
  top: 14px; inset-inline-end: 18px; pointer-events:none;
  letter-spacing:-.04em;
}
.val h3{font-size:20px; margin-bottom: 10px}
.val p{font-size: 14.5px; margin: 0}
@media (max-width: 900px){ .values{grid-template-columns: 1fr} }

/* ----------- LEADERSHIP / VISION-MISSION ----------- */
.vm-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 26px}
.vm-card{
  background:#fff; border-radius: var(--radius);
  border:1px solid var(--line); padding: 32px;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-xs);
}
.vm-card .ic{
  width: 56px; height: 56px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; margin-bottom: 18px;
}
.vm-card.vision .ic{background: linear-gradient(135deg, var(--brand-2), var(--brand))}
.vm-card.mission .ic{background: linear-gradient(135deg, var(--gold), var(--coral))}
.vm-card .ic svg{width:26px; height:26px}
.vm-card h3{font-size:22px; margin-bottom: 10px}
.vm-card p{font-size: 15.5px; line-height: 1.8}
@media (max-width: 760px){ .vm-grid{grid-template-columns: 1fr} }

/* ----------- STAGES DETAIL (stages page) ----------- */
.stage-detail{
  display:grid; grid-template-columns: 320px 1fr; gap: 30px;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; margin-bottom: 26px;
}
.stage-detail + .stage-detail{margin-top: 26px}
.stage-detail .visual{
  position: relative; min-height: 240px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; padding: 30px;
}
.stage-detail .visual::before{
  content:""; position: absolute; inset: 0; opacity: .2;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.5) 1px, transparent 1.5px),
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.4) 1px, transparent 1.5px);
  background-size: 30px 30px;
}
.stage-detail .visual .em{font-size: 96px; line-height:1; position:relative; z-index:1; filter: drop-shadow(0 8px 12px rgba(0,0,0,.2))}
.stage-detail.kg  .visual{background: linear-gradient(135deg, var(--rose), var(--coral))}
.stage-detail.pri .visual{background: linear-gradient(135deg, var(--sky), var(--brand-2))}
.stage-detail.mid .visual{background: linear-gradient(135deg, var(--plum), #a374f0)}
.stage-detail.sec .visual{background: linear-gradient(135deg, var(--leaf), #38c172)}
.stage-detail .body{padding: 30px 32px; display:flex; flex-direction:column}
.stage-detail h2{font-size: 26px; margin-bottom: 6px}
.stage-detail .meta{display:flex; gap: 20px; flex-wrap:wrap; color: var(--muted); font-size: 13.5px; margin-bottom: 14px}
.stage-detail .meta span{display:inline-flex; align-items:center; gap:6px}
.stage-detail .meta svg{width:14px; height:14px}
.stage-detail ul.feat-list{list-style:none; padding:0; margin: 14px 0; display:grid; grid-template-columns: 1fr 1fr; gap: 8px 18px}
.stage-detail ul.feat-list li{display:flex; gap:8px; align-items:flex-start; font-size: 14px; color: var(--ink-2)}
.stage-detail ul.feat-list svg{width:16px; height:16px; color: var(--mint); flex-shrink:0; margin-top:3px}
.stage-detail .footer-row{margin-top: auto; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px; padding-top: 18px; border-top:1px dashed var(--line)}
.stage-detail .price-box .label{display:block; font-size:11px; color: var(--muted); font-weight:700; text-transform: uppercase; letter-spacing:.3px}
.stage-detail .price-box .price{font-size: 28px; font-weight: 900; color: var(--ink)}
.stage-detail .price-box .price small{font-size: 14px; color: var(--ink-2); font-weight:700; margin-inline-start: 4px}
@media (max-width: 800px){
  .stage-detail{grid-template-columns: 1fr}
  .stage-detail .visual{min-height: 180px}
  .stage-detail ul.feat-list{grid-template-columns: 1fr}
}

/* ----------- GALLERY MASONRY (gallery page) ----------- */
.masonry{
  column-count: 3; column-gap: 16px;
}
@media (max-width: 900px){ .masonry{column-count: 2} }
@media (max-width: 540px){ .masonry{column-count: 1} }
.masonry .m-item{
  break-inside: avoid; margin-bottom: 16px;
  border-radius: 18px; overflow:hidden; position:relative;
  box-shadow: var(--shadow-xs);
}
.masonry .m-item img{width:100%; transition: transform .8s}
.masonry .m-item:hover img{transform: scale(1.04)}
.masonry .m-item::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 60%, rgba(10,31,46,.45)); opacity:0; transition: opacity .35s}
.masonry .m-item:hover::after{opacity:1}

/* ----------- REGISTRATION WIZARD ----------- */
.wizard{max-width: 880px; margin: 0 auto}
.wizard-steps{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;
  background:#fff; padding: 14px; border-radius: 14px;
  border:1px solid var(--line); box-shadow: var(--shadow-xs);
}
.wizard-steps .step{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius: 10px;
  font-size:13px; font-weight:700; color: var(--muted);
  background: transparent; flex: 1; min-width: max-content;
}
.wizard-steps .step .n{
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-2); color: var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  font-size: 12px; font-weight: 800; flex-shrink:0;
  transition: background .25s, color .25s;
}
.wizard-steps .step.active{color: var(--brand); background: var(--brand-50)}
.wizard-steps .step.active .n{background: var(--brand); color:#fff}
.wizard-steps .step.done .n{background: var(--mint); color:#fff}
.wizard-steps .step.done{color: var(--mint)}

.wiz-card{
  background:#fff; border-radius: var(--radius);
  border:1px solid var(--line); padding: 32px;
  box-shadow: var(--shadow-xs);
}
.wiz-card h2{font-size: 22px; margin-bottom: 4px}
.wiz-card .sub{color: var(--muted); font-size: 14.5px; margin-bottom: 22px}

.wiz-actions{display:flex; gap:10px; justify-content:space-between; margin-top: 14px; flex-wrap:wrap}
.wiz-actions .right{display:flex; gap:10px; flex-wrap:wrap}

.wiz-step{display:none}
.wiz-step.active{display:block; animation: fadeIn .35s ease}
@keyframes fadeIn{ from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none} }

.consent{
  display:flex; gap:10px; align-items:flex-start;
  background: var(--bg); border:1px solid var(--line);
  padding: 14px 16px; border-radius: 12px;
}
.consent input{margin-top:4px; flex-shrink:0; width:18px; height:18px; accent-color: var(--brand)}
.consent label{font-size:13.5px; color: var(--ink-2); font-weight: 600; line-height:1.7}

/* ----------- FLOATING CTA (mobile) ----------- */
.float-cta{
  position: fixed; bottom: 16px; inset-inline-end: 16px; z-index: 95;
  display:none;
}
@media (max-width: 720px){
  .float-cta{display:inline-flex}
}

/* ----------- UTILITY ----------- */
.text-center{text-align:center}
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.is-hidden{display:none !important}

/* ============== 404 PAGE ============== */
.not-found{
  padding: 80px 0 100px;
  min-height: 60vh;
  display: flex; align-items: center;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(212,165,61,.16), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(19,75,126,.14), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
.nf-card{
  max-width: 640px; margin: 0 auto; text-align: center;
  padding: 24px;
}
.nf-num{
  font-family: var(--font-en);
  font-size: clamp(96px, 16vw, 180px);
  font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 40%, var(--coral) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -.05em;
  margin-bottom: 8px;
  filter: drop-shadow(0 6px 18px rgba(19,75,126,.15));
}
.nf-card h1{
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 12px;
}
.nf-card > p{
  color: var(--ink-2); font-size: 17px; line-height: 1.7;
  max-width: 520px; margin: 0 auto 28px;
}
.nf-actions{
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 40px;
}
.nf-links{
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  text-align: start;
}
.nf-links h2{
  font-size: 15px; color: var(--muted); margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: .4px;
  font-weight: 700;
}
.nf-links ul{
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px;
}
.nf-links ul a{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0; font-weight: 700;
}
.nf-links ul a::before{
  content: "→"; color: var(--gold); font-weight: 900;
  transition: transform .2s;
}
html[dir="rtl"] .nf-links ul a::before{ content: "←" }
.nf-links ul a:hover::before{ transform: translateX(2px) }
html[dir="rtl"] .nf-links ul a:hover::before{ transform: translateX(-2px) }
@media (max-width: 540px){
  .nf-links ul{ grid-template-columns: 1fr }
}

/* ============== PRINT STYLES ============== */
@media print{
  .topbar, .utilbar, .announce, .scroll-progress,
  header.site, .mobile-menu, .back-top, .whatsapp-fab,
  .cta-section, .cta-band, footer.site .grid > div:not(.brand-foot),
  .nav-cta, .hero-actions, .nf-actions, .nf-links,
  .form-card, .map-wrap, .wizard-steps, .wiz-actions{
    display: none !important;
  }
  body{ background: #fff; color: #000; font-size: 12pt; line-height: 1.5 }
  a{ color: inherit; text-decoration: none }
  a[href]:after{ content: " (" attr(href) ")"; font-size: 10pt; color: #555 }
  a[href^="#"]:after, a[href^="javascript:"]:after, a[href^="mailto:"]:after, a[href^="tel:"]:after{ content: "" }
  .container{ max-width: 100% }
  img{ max-width: 100% !important; page-break-inside: avoid }
  h1, h2, h3{ page-break-after: avoid }
  section{ padding: 12pt 0 }
  .stage-detail, .feat, .why, .val, .vm-card, .t-card{
    border: 1px solid #ccc; break-inside: avoid;
  }
  footer.site{
    background: #fff !important; color: #000 !important;
    border-top: 1px solid #ccc; padding: 12pt 0 !important;
  }
  footer.site h4, footer.site ul a{ color: #000 !important }
}

/* ============== HIGH-CONTRAST MODE ============== */
@media (prefers-contrast: more){
  :root{
    --line: #888;
    --ink-2: #1a2a33;
    --muted: #3a4a52;
  }
  .btn-primary, .btn-gold, .btn-coral{ outline: 2px solid #000 }
  .feat, .why, .val, .stage, .stage-detail, .vm-card, .info-card, .form-card{
    border-width: 2px;
  }
}