/* ============================================================
معهد القلم — Qalam · shared styles (v3 «المزيج» blend design)
Light base + starry night bands as the accent. Glass pill nav,
pill buttons, ghost section numbers, spotlight/pop cards. Accent text = blue with a periodic SHINE
sweep on light backgrounds, gold shine on dark bands (no
color-cycling gradient text). Important notices sit in a
rectangle whose frame is swept by a light every few seconds.
RTL, mobile-first.
============================================================ */
/* ---------- self-hosted IBM Plex Sans Arabic (assets/fonts/) ----------
Replaces the Google Fonts CDN (removed 07/2026 for mobile LCP — the
render-blocking googleapis/gstatic chain was the FCP/LCP bottleneck).
Subsets: arabic + latin + latin-ext (latin-ext carries ₪ U+20AA).
Weights 400/500/600/700 — do NOT re-add the Google . */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
src:url("../assets/fonts/ibm-plex-sans-arabic-400-arabic.woff2") format("woff2");
unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
src:url("../assets/fonts/ibm-plex-sans-arabic-400-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
src:url("../assets/fonts/ibm-plex-sans-arabic-400-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;
src:url("../assets/fonts/ibm-plex-sans-arabic-500-arabic.woff2") format("woff2");
unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;
src:url("../assets/fonts/ibm-plex-sans-arabic-500-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;
src:url("../assets/fonts/ibm-plex-sans-arabic-500-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
src:url("../assets/fonts/ibm-plex-sans-arabic-600-arabic.woff2") format("woff2");
unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
src:url("../assets/fonts/ibm-plex-sans-arabic-600-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
src:url("../assets/fonts/ibm-plex-sans-arabic-600-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;
src:url("../assets/fonts/ibm-plex-sans-arabic-700-arabic.woff2") format("woff2");
unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;
src:url("../assets/fonts/ibm-plex-sans-arabic-700-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;
src:url("../assets/fonts/ibm-plex-sans-arabic-700-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
--blue:#4AB3E2; --blue-deep:#1f7699; --blue-ink:#0f4d6b; /* blue-deep/ink kept ≥4.5:1 on light bg */
--blue-b:#6fc9f0;
--gold:#C8972A; --gold-soft:#E4B547; --gold-deep:#86610f; /* gold-deep is the TEXT gold — kept ≥4.5:1 on light bg (WAVE) */
--teal:#23B5A6; --purple:#9B6FD0; --orange:#E08A3C;
--ink:#15202e; --ink-2:#5c6b7a;
--paper:#F5F4F0; --paper-2:#efeee9; --white:#fff;
--night:#0a1322; --night2:#0e1a2e; --nmuted:#93a7bd; --nbrd:rgba(255,255,255,.12);
--line:rgba(15,77,107,.10); --line-soft:rgba(15,77,107,.06);
--shadow-sm:0 2px 6px rgba(21,32,46,.05), 0 16px 40px -18px rgba(21,32,46,.12);
--shadow-md:0 6px 14px rgba(21,32,46,.07), 0 30px 60px -20px rgba(21,32,46,.22);
--maxw:1100px; --r:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* keyboard navigation: a clear focus ring, only for :focus-visible (no mouse noise) */
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:8px}
[tabindex="-1"]{outline:none}
/* skip link — hidden off-screen until it receives keyboard focus */
.skiplink{position:fixed;top:10px;inset-inline-start:10px;z-index:1000;background:var(--blue-ink);color:#fff;
padding:12px 20px;border-radius:999px;font-weight:700;box-shadow:var(--shadow-md);
transform:translateY(-200%);transition:transform .15s}
.skiplink:focus{transform:none}
/* plain light background — no decoration at all on it: no orbs, no logo
watermark, no ghost numbers (the golden scroll thread was removed 07/2026) */
body{font-family:"IBM Plex Sans Arabic",sans-serif;color:var(--ink);background:var(--paper);line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
/* phone/email links in running text: same inline look, but a ≥44px tap box —
the vertical padding is cancelled by a matching negative margin so the line
box does not grow */
a.ltr{padding-block:9px;margin-block:-9px;line-height:1.75}
section{padding:64px 0;position:relative}
a{color:var(--blue-deep);text-decoration:none}
p{margin-bottom:12px}
img{max-width:100%}
::selection{background:var(--blue);color:#04121f}
section > .wrap{position:relative;z-index:1}
/* eyebrow: gold kicker (المزيج) */
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--gold-deep);font-weight:700;font-size:.85rem;letter-spacing:.03em;margin-bottom:14px}
.eyebrow::before{content:"✦";font-size:.72rem;color:var(--gold)}
.band .eyebrow,.teaser .eyebrow{color:var(--gold-soft)}
h2.title{font-weight:700;font-size:clamp(1.55rem,4.4vw,2.3rem);line-height:1.45;color:var(--ink);margin-bottom:14px;max-width:32ch;letter-spacing:-.01em}
.lead{font-size:1.06rem;color:var(--ink-2);max-width:64ch;line-height:1.85}
.subhead{margin:36px 0 12px;color:var(--ink);font-size:1.22rem;font-weight:700;letter-spacing:-.01em}
.subhead::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-inline-end:10px;vertical-align:middle}
/* ============================================================
SHINE accent text — replaces the old gold underline mark AND
the mock's color-cycling text. Base color stays put (blue on
light, gold on dark); a bright band sweeps through the letters
once every few seconds, then rests.
============================================================ */
.mark{display:inline-block;white-space:nowrap;color:var(--blue-deep);
background-image:linear-gradient(105deg,var(--blue-deep) 40%,var(--blue) 47%,#cdeeff 51%,var(--blue) 55%,var(--blue-deep) 62%);
/* the gradient's two ends are the base color, so the repeating tiles are
seamless and the text ALWAYS has a painted background (text-fill is
transparent — an unpainted area would make the words disappear) */
background-size:340% auto;background-position:135% center;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
animation:markshine 7s ease-in-out 1.4s infinite}
/* the sweep must END with the bright band fully OFF the text, so the words
rest at their solid base color. With size 340% the highlight (40–62% of
the image) is out of view only near positions 135% and 0% — ending at
-105% used to park the shine on part of the phrase. */
@keyframes markshine{
0%{background-position:135% center}
26%{background-position:0% center}
100%{background-position:0% center}
}
/* on dark surfaces the shining accent is GOLD */
.band .mark,.chero .mark,footer .mark,.teaser .mark,.tile.feature .mark,.hero .mark{color:var(--gold-soft);
background-image:linear-gradient(105deg,var(--gold-soft) 40%,#f2cd70 47%,#fff3d1 51%,#f2cd70 55%,var(--gold-soft) 62%)}
@media(prefers-reduced-motion:reduce){.mark{animation:none}}
/* ============================================================
ANIMATED-FRAME NOTICE — important/warning messages live in a
rectangle whose border is swept by a swift light every few
seconds. Applied to .callout / .equity / .whyus.
============================================================ */
@property --fa{syntax:"";initial-value:0deg;inherits:false}
.callout,.equity,.whyus{position:relative}
.callout::before,.equity::before,.whyus::before{
content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;
background:conic-gradient(from var(--fa),transparent 0deg,transparent 308deg,var(--gold-soft) 330deg,#fff0c9 342deg,var(--gold-soft) 352deg,transparent 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask-composite:exclude;
animation:framesweep 8s linear 1s infinite}
@keyframes framesweep{
0%,58%{--fa:0deg;opacity:0}
60%{--fa:36deg;opacity:1}
78%{--fa:324deg;opacity:1}
80%,100%{--fa:360deg;opacity:0}
}
@media(prefers-reduced-motion:reduce){
.callout::before,.equity::before,.whyus::before{animation:none}
}
/* ---------- «قريباً» chip — marks features not yet launched ----------
A small gold pill in the brand accent, instead of a bare word in the
title. Gold-deep on light surfaces, gold-soft on the dark bands. */
.soon{display:inline-block;font-style:normal;font-size:.72rem;font-weight:700;line-height:1;
color:var(--gold-deep);background:rgba(200,151,42,.10);border:1px solid rgba(200,151,42,.45);
border-radius:999px;padding:.38em .85em;vertical-align:middle;margin-inline-start:.55em;
white-space:nowrap;letter-spacing:.02em}
.band .soon,.hero .soon,.marquee .soon,.chero .soon,.teaser .soon,footer .soon{
color:var(--gold-soft);background:rgba(228,181,71,.10);border-color:rgba(228,181,71,.5)}
/* ---------- header / nav: floating glass pill ---------- */
header{position:fixed;top:14px;right:0;left:0;z-index:50;padding:0 14px;pointer-events:none}
/* max-width matches --maxw so the pill lines up with the page content below it
(it was 1080 against a 1100 content column). The extra 20px also buys back
part of the room the 9-item nav needs — see nav.links below. */
.bar{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:var(--maxw);margin:0 auto;padding:8px 14px;
background:rgba(255,255,255,.78);border:1px solid rgba(21,32,46,.09);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-radius:999px;box-shadow:0 10px 34px -14px rgba(21,32,46,.25)}
/* flex:none is load-bearing: the wordmark is white-space:nowrap, so with the
default flex-shrink:1 the brand box got squeezed narrower than its own text
and the text spilled out underneath the nav. Never let it shrink. */
.brand{flex:none;display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);font-size:.98rem;letter-spacing:-.01em}
.brand span{white-space:nowrap}
.brand img{height:38px;width:auto}
/* phones: the logo alone identifies the brand — keeps the pill to one line */
@media(max-width:679px){
.brand span{display:none}
.navcta{font-size:.78rem;padding:9px 13px}
}
nav.links{display:none;gap:2px;margin-inline-start:auto;font-size:.86rem;font-weight:500}
nav.links a{color:var(--ink-2);padding:8px 8px;border-radius:999px;white-space:nowrap;transition:.25s}
nav.links a:hover{color:var(--ink);background:rgba(74,179,226,.1)}
nav.links a.active{color:var(--blue-ink);font-weight:700;background:rgba(74,179,226,.14);box-shadow:inset 0 0 0 1px rgba(74,179,226,.4)}
.navcta{margin-inline-start:auto;background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;font-weight:700;font-size:.84rem;
padding:10px 17px;border-radius:999px;white-space:nowrap;transition:transform .18s,box-shadow .18s;
box-shadow:0 6px 20px -6px rgba(74,179,226,.7)}
.navcta:hover{transform:translateY(-1px);box-shadow:0 10px 28px -6px rgba(74,179,226,.9)}
.burger{pointer-events:auto;margin-inline-start:6px;width:42px;height:42px;border:none;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;position:relative;flex:none}
.burger span,.burger span::before,.burger span::after{content:"";display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.burger span::before{position:absolute;transform:translateY(-6px)}
.burger span::after{position:absolute;transform:translateY(6px)}
.mobnav{pointer-events:auto;display:none;position:absolute;top:calc(100% + 8px);inset-inline:14px;z-index:49;
flex-direction:column;padding:14px 16px;max-width:1080px;margin:0 auto;
background:rgba(255,255,255,.96);border:1px solid rgba(21,32,46,.09);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-radius:24px;box-shadow:0 20px 60px -12px rgba(21,32,46,.35)}
.mobnav a{padding:12px 14px;border-radius:14px;color:var(--ink)}
.mobnav a:hover{background:rgba(74,179,226,.08)}
.mobnav a.active{color:var(--blue-ink);font-weight:700;background:rgba(74,179,226,.12)}
.mobnav.open{display:flex}
/* 1130, not 1040: the brand + 9 nav links + the CTA need ~1043px of content
width, and the pill caps at --maxw. Below this the burger menu takes over —
switching earlier is what forced the nav on top of the wordmark. */
@media(min-width:1130px){nav.links{display:flex}.navcta{margin-inline-start:10px}.burger{display:none}}
/* ---------- buttons: pills only ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;cursor:pointer;border:none;border-radius:999px;transition:transform .25s,box-shadow .25s;font-family:inherit}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;padding:15px 30px;font-size:1rem;
box-shadow:0 10px 30px -8px rgba(74,179,226,.75)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(74,179,226,.95)}
.btn-gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:#fff;padding:14px 28px;font-weight:700;
box-shadow:0 10px 30px -8px rgba(200,151,42,.7)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(200,151,42,.9)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(21,32,46,.2);padding:13px 26px;font-weight:600}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-deep)}
.band .btn-ghost,.teaser .btn-ghost{color:#eef4fa;border-color:var(--nbrd)}
.band .btn-ghost:hover,.teaser .btn-ghost:hover{border-color:var(--blue);color:var(--blue-b)}
/* ============================================================
DARK BAND — the design accent. Starry canvas + glow blobs are
injected by script.js into every .band / .chero / .teaser /
.tile.feature / footer.
============================================================ */
.band{background:linear-gradient(160deg,var(--night),var(--night2));color:#eef4fa}
.band,.chero,.teaser,.tile.feature,footer{position:relative;overflow:hidden}
.band > .wrap,.chero .wrap,footer > .wrap,
.teaser > :not(.glowblob):not(.stars),.tile.feature > :not(.glowblob):not(.stars){position:relative;z-index:1}
/* the injected decorations must stay OUT of the layout flow — a stray
position:relative here once made the bento grid 8000px tall */
canvas.stars{position:absolute;inset:0;pointer-events:none;z-index:0}
.glowblob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;pointer-events:none;z-index:0}
.glowblob.g1{width:44vmax;height:44vmax;top:-20vmax;right:-10vmax;background:radial-gradient(circle,#1d5f86,transparent 65%)}
.glowblob.g2{width:26vmax;height:26vmax;bottom:-10vmax;left:16%;background:radial-gradient(circle,rgba(200,151,42,.55),transparent 65%);opacity:.25}
.band h1,.band h2,.band h2.title,.band h3,.band h4,.band .subhead{color:#eef4fa}
.band .lead,.band p{color:var(--nmuted)}
/* ---------- page hero (inner pages, light) ---------- */
.phero{position:relative;overflow:hidden;padding:136px 0 34px;background:
radial-gradient(680px 380px at 88% -30%, rgba(74,179,226,.16), transparent 62%),
linear-gradient(180deg,#fff, var(--paper) 90%)}
.phero::after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;width:160px;height:3px;background:linear-gradient(90deg,var(--gold),transparent)}
.phero h1{font-weight:700;font-size:clamp(1.75rem,5vw,2.9rem);line-height:1.4;color:var(--ink);margin-bottom:14px;max-width:26ch;letter-spacing:-.015em}
.phero .lead{font-size:clamp(1rem,2.2vw,1.14rem);color:var(--ink-2);max-width:62ch}
/* ---------- home intro-zoom wrapper (hero + marquee, pinned by JS) ---------- */
.introzoom{position:relative;overflow:hidden}
.introzoom .hero h1{transform-origin:center} /* JS grows it to screen center */
/* ---------- seamless hero → skyfade hand-off (home only) ----------
Two things used to break the night→day blend at the hero's bottom edge:
1. the gold .glowblob.g2 sits at the band's bottom, and the hero's
overflow:hidden sliced it off mid-glow — a lit half-circle cut by a
hard horizontal line, right where the fade is supposed to start;
2. the shared .band gradient runs at 160deg, so its bottom edge is not one
flat colour and could never line up with the 180deg .skyfade below it.
So: drop the gold blob here, and run this hero's gradient straight down so
its last row is exactly --night2 — the colour .skyfade opens on. */
.introzoom .hero .glowblob.g2{display:none}
.introzoom .hero.band{background:linear-gradient(180deg,var(--night),var(--night2))}
/* ---------- home hero: full dark band with stars ----------
exactly one screen tall — anything shorter lets the light page
background peek out under the sky while the intro is pinned */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:130px 0 84px;text-align:center}
.hero .wrap{display:flex;flex-direction:column;align-items:center}
.hero h1{font-weight:700;font-size:clamp(1.95rem,5.8vw,3.5rem);line-height:1.45;color:#eef4fa;margin-bottom:18px;max-width:20ch;letter-spacing:-.02em}
.hero p{font-size:clamp(1rem,2.4vw,1.2rem);color:var(--nmuted);max-width:56ch;margin-bottom:30px}
.scroll-hint{position:absolute;bottom:16px;right:50%;transform:translateX(50%);z-index:1;pointer-events:none}
.scroll-hint svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.6;animation:bobArrow 1.6s ease-in-out infinite}
@keyframes bobArrow{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(prefers-reduced-motion:reduce){.scroll-hint svg{animation:none}}
/* ---------- marquee strip (home, under the hero) ----------
The phrase list is rendered TWICE and the track slides by exactly 50%
of its own width per loop. The 44px spacing therefore lives on each
item (margin), NOT as flex gap on the track: a track-level gap makes
the halfway point miss by half a gap, so every cycle ended with a
visible snap/split. */
.marquee{overflow:hidden;padding:15px 0;background:var(--night);border-block:1px solid var(--nbrd)}
.marquee-track{display:flex;width:max-content;animation:mq 32s linear infinite}
.marquee span{font-size:.95rem;color:var(--nmuted);white-space:nowrap;display:flex;align-items:center;gap:10px;margin-inline-start:44px}
.marquee span::after{content:"✦";color:var(--gold-soft);font-size:.8rem}
@keyframes mq{to{transform:translateX(50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* ---------- night→day transition (home only, after the hero) ----------
The dark sky brightens into the paper background; the injected stars
canvas continues into it and is masked away before the light zone.
The first stop MUST match the colour the hero's 160deg gradient ends on
(--night2). It used to start on the darker --night, and the marquee strip
in between hid the resulting lighter→darker→lighter step; with the strip
gone that step showed up as a hard seam under the hero. */
.skyfade{position:relative;overflow:hidden;height:min(30vh,300px);pointer-events:none;
/* many small steps easing into the paper color — a coarse ramp read as
visible bands, especially where the light end met the background */
background:linear-gradient(180deg,
var(--night2) 0%, #15253c 16%, #1c3049 32%, #2f4a63 46%,
#4c657c 58%, #6f8395 68%, #93a0aa 77%, #b4bab8 85%,
#d9d9d1 93%, var(--paper) 100%)}
.skyfade canvas.stars{-webkit-mask-image:linear-gradient(180deg,#000 26%,transparent 78%);
mask-image:linear-gradient(180deg,#000 26%,transparent 78%)}
/* the fade IS the gap: the next section starts 90px after the slider,
floating OVER the gradient (z-index guarantees it paints on top) */
.skyfade + section{padding-top:0;margin-top:calc(180px - min(30vh,300px));position:relative;z-index:1}
/* phones: a 300px sky under the (capped) grown headline read as an empty gap —
shorter fade, same overlap ratio for the section that floats over it */
@media(max-width:560px){
.skyfade{height:min(18vh,170px)}
.skyfade + section{margin-top:calc(110px - min(18vh,170px))}
}
/* ---------- "why us" statement — animated-frame banner ---------- */
.whyus{background:linear-gradient(140deg,rgba(74,179,226,.12),rgba(200,151,42,.12));background-color:var(--paper);color:var(--ink);
/* solid paper underlayer: the card floats over the skyfade gradient on the
home page — without it the dark sky bleeds through the translucent tints */
border:1.5px solid rgba(74,179,226,.35);border-radius:28px;padding:46px 40px;overflow:visible;box-shadow:var(--shadow-sm)}
.whyus h2{position:relative;font-weight:700;font-size:clamp(1.5rem,4.4vw,2.15rem);line-height:1.45;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em}
.whyus p{position:relative;color:var(--ink);font-size:clamp(1.1rem,2.6vw,1.38rem);max-width:60ch;margin:0;line-height:1.9;font-weight:500}
@media(max-width:560px){.whyus{padding:32px 24px}}
/* ---------- الفيديو التعريفي في الصفحة الرئيسية (assets/qalam-intro.mp4) ----------
إطار «باسبارتو»: حافة بيضاء حول الفيديو داخل مستطيل بزوايا ناعمة،
وحدود بلون العلامة (أزرق سماوي) كما في بطاقة "لماذا نحن". */
.videobox{border-radius:28px;padding:10px;background:#fff;border:1.5px solid rgba(74,179,226,.45);
box-shadow:var(--shadow-md);margin-top:18px;max-width:860px;margin-inline:auto}
.videobox video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:19px;background:#000}
/* ---------- generic cards / grids: spotlight + pop ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr}.g3{grid-template-columns:1fr}
@media(min-width:680px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
.card,.tile,.tmember,.infocard{position:relative;overflow:hidden}
.card::after,.tile::after,.ccard::after,.tmember::after,.formcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(74,179,226,.14),transparent 65%)}
.card:hover::after,.tile:hover::after,.ccard:hover::after,.tmember:hover::after,.formcard:hover::after{opacity:1}
.card{background:var(--white);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-sm);border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.card h3,.card h4{font-weight:700;color:var(--ink);margin-bottom:6px;font-size:1.1rem}
.card p{color:var(--ink-2);margin:0;font-size:.96rem}
.card.pop{background:linear-gradient(160deg,#fff,#f4fafd);border-color:rgba(74,179,226,.18)}
.chip{display:inline-block;background:rgba(74,179,226,.1);color:var(--blue-deep);font-weight:700;font-size:.74rem;padding:4px 11px;border-radius:999px;margin-bottom:10px}
.callout{background:#fff;border:1.5px solid rgba(200,151,42,.4);border-radius:20px;padding:22px 24px;margin:20px 0;box-shadow:var(--shadow-sm)}
.callout h3,.callout h4{color:var(--gold-deep);font-weight:700;margin-bottom:6px}
.callout p{margin:0;color:var(--ink-2)}
.quote{text-align:center;font-weight:700;font-size:1.3rem;color:var(--ink);margin-top:28px;letter-spacing:-.01em}
.soft{background:linear-gradient(180deg,#fff,var(--paper))}
/* method cards — on the dark band they POP (المزيج) */
.methods-bg{padding-top:80px;padding-bottom:80px}
.mcard{background:rgba(255,255,255,.05);border:1px solid var(--nbrd);border-radius:20px;padding:26px 22px;
transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .3s,background .3s}
.mcard .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.6rem;background:rgba(74,179,226,.12);margin-bottom:14px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.mcard h3,.mcard h4{font-weight:700;color:#eef4fa;margin-bottom:6px;font-size:1.05rem}
.mcard p{color:var(--nmuted);font-size:.93rem;margin:0}
.mcard:hover{transform:translateY(-10px) scale(1.02);border-color:rgba(74,179,226,.55);
background:rgba(74,179,226,.09);box-shadow:0 18px 50px -16px rgba(74,179,226,.5)}
.mcard:hover .ic{transform:scale(1.25) rotate(-8deg)}
/* light fallback when an .mcard is used outside a dark band */
:not(.band) > .wrap > .grid > .mcard{background:#fff;border-color:var(--line)}
/* ---------- home explore bento ---------- */
.bento{display:grid;gap:14px;grid-template-columns:1fr;margin-top:24px}
@media(min-width:640px){.bento{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(158px,1fr)}}
.tile{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s;overflow:hidden}
.tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.tile .ticon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(74,179,226,.1);color:var(--blue-deep);flex:0 0 auto}
.tile .ticon svg{width:22px;height:22px;stroke-width:1.7;fill:none;stroke:currentColor}
.tile h3{color:var(--ink);font-weight:700;font-size:1.12rem;letter-spacing:-.01em}
.tile p{color:var(--ink-2);font-size:.92rem;margin:0}
.tile .arrow{margin-top:auto;color:var(--blue-deep);font-weight:700;font-size:.88rem;opacity:.85}
.tile .arrow::after{content:" ←"}
.tile.feature{background:linear-gradient(160deg,var(--night),var(--night2));color:#fff;border:1px solid var(--nbrd)}
.tile.feature .ticon{background:rgba(255,255,255,.12);color:var(--blue-b);position:relative}
.tile.feature h3{color:#fff;font-size:clamp(1.4rem,3.4vw,1.8rem);position:relative}
.tile.feature p{color:var(--nmuted);font-size:1.02rem;max-width:36ch;position:relative}
.tile.feature .arrow{color:var(--gold-soft);position:relative}
@media(min-width:960px){.tile.feature{grid-column:span 2;grid-row:span 2;justify-content:flex-end}}
/* ---------- courses teaser: starry night card ---------- */
.teaser{background:linear-gradient(160deg,var(--night),var(--night2));color:#eef4fa;border:1px solid var(--nbrd);border-radius:28px;padding:44px 34px;box-shadow:var(--shadow-md)}
.teaser h2{font-size:clamp(1.4rem,3.6vw,1.8rem);font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.teaser p{color:var(--nmuted);max-width:52ch}
.teaser .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
/* ---------- forms ---------- */
.formcard{position:relative;background:#fff;border-radius:28px;padding:32px 28px;margin-top:24px;box-shadow:var(--shadow-md);border:1px solid var(--line)}
@media(max-width:560px){.formcard{padding:26px 20px}}
/* honeypot spam-trap field — invisible + unreachable for real visitors, but a
plain form field bots auto-fill. Never remove: script.js/courses.js key off it.
Hidden via clip, NOT left:-9999px: in an RTL page an element pushed off the
LEFT edge extends the scrollable overflow area, which gave every form page
~10,000px of horizontal scroll on mobile. */
.hp{position:absolute;width:1px;height:1px;padding:0;border:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.field{margin-bottom:16px}
.field .hint{font-size:.8rem;color:var(--ink-2);font-weight:400;margin-bottom:7px}
label{display:block;font-size:.9rem;font-weight:600;margin-bottom:6px;color:var(--ink)}
label .req{color:var(--gold-deep)}
/* a checkbox group is a