/* === Diwari — Kurdish typeface (Built on Noto Sans Arabic, SIL OFL 1.1) ===
   Restricted to Arabic-script ranges so Latin tokens (Binjori, BRL, XP,
   NPS, CSAT) fall back to the Sora brand sans. */
@font-face{font-family:'Diwari';src:url('fonts/Diwari-Regular.woff2') format('woff2'),url('fonts/Diwari-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200D;}
@font-face{font-family:'Diwari';src:url('fonts/Diwari-Medium.woff2') format('woff2'),url('fonts/Diwari-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200D;}
@font-face{font-family:'Diwari';src:url('fonts/Diwari-Bold.woff2') format('woff2'),url('fonts/Diwari-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200D;}


:root{
  --sky:#30A6CA; --sky-deep:#1B6F87; --sky-soft:#EAF6FA; --sky-tint:#8FD3E6;
  --sand:#F5B301; --gold:#F5B301; --sand-soft:#FEF3D6;
  --teal:#103D4A; --teal-2:#16404C;
  --paper:#F4F6F7; --paper-2:#FAFBFC; --white:#FFFFFF;
  --ink:#40606B; --muted:#5E7177; --line:#E1E7EA;
  --maxw:1160px; --r:16px; --r-lg:22px;
  --shadow:0 2px 8px rgba(16,61,74,.05), 0 22px 50px -26px rgba(16,61,74,.22);

  /* Brand book v3.0 page 13 contract. Canonical names alias the working ones
     so the published token list is honoured without rewriting the stylesheet. */
  --deep-teal:#103D4A; --sky-teal:#30A6CA; --kurdistan-gold:#F5B301;
  --light-sky:#8FD3E6; --mist:#F4F6F7; --slate:#40606B;
  --radius-sm:8px; --radius-md:14px; --radius-pill:999px;
  --ease:cubic-bezier(0.22,1,0.36,1); --dur-fast:180ms; --dur-base:280ms;
  --maxw-prose:68ch;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--paper); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block} a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.2rem)}
.lens-dot{transform-origin:44px 42px}

/* type */
h1,h2,h3{font-weight:600;color:var(--teal);line-height:1.14;letter-spacing:-.01em}
.display{font-size:clamp(2.5rem,6.2vw,4.6rem)}
.h2{font-size:clamp(1.9rem,4.2vw,2.9rem)}
.h3{font-size:clamp(1.25rem,2vw,1.6rem)}
.lede{font-size:clamp(1.08rem,1.5vw,1.28rem);color:var(--ink);max-width:58ch}
.muted{color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sky-deep)}
.eyebrow .lens{width:22px;height:22px}
em,i{font-style:italic}

/* header */
header.site{position:sticky;top:0;z-index:60;background:rgba(244,246,247,.92);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(8px)}
.nav{display:flex;align-items:center;gap:1rem;height:74px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.4rem;letter-spacing:-.01em}
.brand .lens{width:34px;height:34px;flex:none}
.brand .sub{display:block;font-size:.56rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--sky-deep);line-height:1;margin-top:.42em}
.brand .name{display:flex;flex-direction:column;line-height:1.05}
html[lang="ku"] .brand .sub,html[lang="ar"] .brand .sub{margin-top:.5em;line-height:1.4}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:.2rem}
.navlinks a{padding:.55rem .85rem;border-radius:10px;font-size:1.02rem;color:var(--ink);transition:.18s}
.navlinks a:hover{background:var(--sky-soft);color:var(--sky-deep)}
.navlinks a.active{color:var(--sky-deep);font-weight:700}
.navlinks a.cta{background:var(--teal);color:#fff;font-weight:700}
.navlinks a.cta:hover{background:var(--teal-2);color:#fff}
.lang{position:relative}
.lang-btn{font-family:inherit;font-size:1rem;font-weight:700;color:var(--teal);background:transparent;border:1.5px solid var(--line);border-radius:10px;padding:.5rem .7rem;cursor:pointer}
.lang-btn:hover{border-color:var(--sky)}
.lang-menu{position:absolute;right:0;top:calc(100% + .4rem);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);min-width:180px;padding:.4rem;display:none;z-index:70}
.lang-menu.open{display:block}
.lang-menu button{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;text-align:left;font-family:inherit;font-size:1rem;color:var(--ink);background:transparent;border:none;border-radius:8px;padding:.55rem .7rem;cursor:pointer}
.lang-menu button:hover:not([disabled]){background:var(--sky-soft);color:var(--sky-deep)}
.lang-menu button.active{font-weight:700;color:var(--sky-deep)}
.lang-menu button[disabled]{color:var(--muted);cursor:default}
.lang-menu .soon{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);padding:.12rem .45rem;border-radius:99px}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:10px;width:46px;height:42px;font-size:1.4rem;color:var(--teal);cursor:pointer}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--teal);color:#fff;
  border:none;border-radius:13px;padding:.85rem 1.5rem;font-family:inherit;font-size:1.05rem;
  font-weight:700;cursor:pointer;transition:.18s}
.btn:hover{background:var(--teal-2);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--teal);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--sky);color:var(--sky-deep);background:#fff}
.btn .arr{transition:transform .2s}.btn:hover .arr{transform:translateX(4px)}

/* sections */
section{padding:clamp(3.4rem,7vw,6rem) 0}
.section-head{max-width:62ch;margin-bottom:2.4rem}
.section-head .h2{margin:.7rem 0 .8rem}

/* hero */
.hero{background:var(--teal);color:#fff;padding:clamp(3.6rem,8vw,6.5rem) 0 clamp(3.6rem,8vw,6rem);position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:2.4rem;align-items:center}
.hero .eyebrow{color:var(--sand)}
.hero .display{margin:1.1rem 0 1.2rem;color:#fff}
.hero .display .focus{color:var(--sky)}
.hero p.lede{color:#D9ECF1;max-width:52ch}
.hero .actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.32)}
.hero .btn.ghost:hover{border-color:var(--sand);color:var(--sand);background:transparent}
.hero .note{margin-top:1.4rem;font-size:.95rem;color:#9FC2CC}
.hero-lens{display:grid;place-items:center}
.hero-lens .lens{width:min(78%,300px)}
.hero-halo{position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(48,166,202,.30),transparent 66%);
  right:-8%;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none}

/* stat chips */
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.chip{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.4rem}
.chip b{font-size:2.5rem;color:var(--sky-deep);display:block;line-height:1}
.chip span{color:var(--ink);font-size:1rem}

/* cards / grid */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.4rem}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.7rem 1.7rem;box-shadow:var(--shadow);transition:.2s}
.card:hover{transform:translateY(-4px)}
.card .marker{width:54px;height:54px;border-radius:14px;background:var(--teal);
  display:grid;place-items:center;color:var(--sand);font-size:1.5rem;font-weight:700;margin-bottom:1rem}
.card h3{margin:.2rem 0 .5rem}
.card .pill{display:inline-block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sky-deep);font-weight:700;margin-top:.9rem}
.card ul{list-style:none;margin:.9rem 0 0}
.card li{position:relative;padding:.34rem 0 .34rem 1.5rem;border-top:1px solid var(--line);font-size:1.02rem}
.card li:first-child{border-top:none}
.card li::before{content:"";position:absolute;left:0;top:.78rem;width:11px;height:11px;border-radius:50%;
  background:var(--sand);box-shadow:0 0 0 2px var(--sky)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;box-shadow:var(--shadow)}
.step .n{font-size:2.6rem;color:var(--sky-deep);font-weight:700;line-height:1}
.step h3{margin:.5rem 0 .45rem}
.step p{color:var(--ink);font-size:1.02rem}

/* band */
.band{background:var(--teal);color:#fff;border-radius:var(--r-lg);padding:clamp(2rem,5vw,3.4rem)}
.band.weight{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.band h2{color:#fff}.band p{color:#D9ECF1}
.wbars{display:flex;flex-direction:column;gap:.55rem}
.wbar{display:flex;justify-content:space-between;background:rgba(255,255,255,.08);
  border-radius:9px;padding:.6rem .9rem}
.wbar b{color:var(--sand)}

/* learning */
.gameframe-wrap{margin-top:2rem;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);background:#fff}
.gameframe-bar{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.1rem;background:var(--paper-2);border-bottom:1px solid var(--line)}
.gameframe-bar .dot{width:11px;height:11px;border-radius:50%;background:var(--sand);box-shadow:0 0 0 2px var(--sky)}
.gameframe-bar .ttl{font-weight:700}
.gameframe-bar a{margin-left:auto;font-weight:700;color:var(--sky-deep)}
.gameframe-wrap iframe{width:100%;height:760px;border:0;display:block;background:#F4F6F7}
.coming{opacity:.72}
.coming .marker{background:var(--paper-2);color:var(--sky-deep);border:1px dashed var(--sky)}
.tag-soon{display:inline-block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);
  padding:.25rem .7rem;border-radius:99px;margin-bottom:.7rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.2rem}
.cinfo a{color:var(--sky-deep);font-weight:700}
.cinfo .row{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 0;border-top:1px solid var(--line)}
.cinfo .row:first-of-type{border-top:none}
.cinfo .ic{width:44px;height:44px;border-radius:12px;background:var(--sky-soft);color:var(--sky-deep);
  display:grid;place-items:center;font-size:1.2rem;flex:none}
.form label{display:block;font-weight:700;margin:.9rem 0 .35rem}
.form input,.form textarea,.form select{width:100%;font-family:inherit;font-size:1.02rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:.75rem .9rem}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--sky)}
.form input[type="file"]{padding:.55rem .7rem;background:var(--paper-2)}
.form input[type="file"]::file-selector-button{font-family:inherit;font-weight:700;color:var(--sky-deep);
  background:var(--sky-soft);border:1.5px solid var(--sky);border-radius:9px;padding:.45rem .9rem;margin-right:.8rem;cursor:pointer}
.form .checks{display:flex;flex-wrap:wrap;gap:.5rem .9rem}
.form label.check{display:flex;align-items:center;gap:.5rem;font-weight:500;margin:.2rem 0;cursor:pointer}
.form label.check input{width:auto;accent-color:var(--sky)}
html[dir="rtl"] .form input[type="file"]::file-selector-button{margin-right:0;margin-left:.8rem}
.form textarea{min-height:130px;resize:vertical}
.note{font-size:.92rem;color:var(--muted);margin-top:.8rem}

/* AI section, verification rules */
.airules{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1rem}
.airule{display:flex;gap:.9rem;align-items:flex-start;background:rgba(255,255,255,.08);border-radius:14px;padding:1rem 1.1rem}
.airule .rn{flex:none;width:34px;height:34px;border-radius:10px;background:var(--sand);color:var(--teal);font-weight:700;display:grid;place-items:center;font-size:1.05rem}
.airule p{color:#D9ECF1;font-size:.98rem;line-height:1.6}
html[dir="rtl"] .airule{flex-direction:row-reverse;text-align:right}

/* footer */
footer.site{background:var(--teal-2);color:#CFE6EC;padding:3rem 0 2rem;margin-top:2rem}
footer.site .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
footer.site .brand{color:#fff}footer.site .brand .sub{color:var(--sand)}
footer.site h4,footer.site .fh{color:#fff;font-size:1rem;letter-spacing:.06em;margin-bottom:.8rem}
footer.site a{color:#CFE6EC}footer.site a:hover{color:var(--sand)}
footer.site .links{display:flex;flex-direction:column;gap:.45rem}
footer.site .tagline{font-style:italic;color:var(--sand);margin:.9rem 0 0;font-size:1.15rem}
footer.site .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.3rem;
  font-size:.88rem;color:#8FB7C0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

/* reveal */
body.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
body.js .reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width:880px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-lens{order:-1;justify-content:flex-start}.hero-lens .lens{width:150px}
  .band.weight,.contact-grid,footer.site .top{grid-template-columns:1fr}
  .navlinks{position:absolute;top:74px;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:.2rem;padding:.8rem clamp(1.1rem,4vw,2.2rem) 1.2rem;display:none}
  .navlinks.open{display:flex}
  .navlinks a{padding:.8rem .6rem}
  .lang{width:100%;margin:.3rem 0}
  .lang-btn{width:100%;text-align:left}
  .lang-menu{position:static;box-shadow:none;border:none;padding:.2rem 0;min-width:0}
  .navtoggle{display:block}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}
@media (min-width:881px){
  .lens-dot{animation:breathe 4.5s ease-in-out infinite}
  @keyframes breathe{0%,100%{r:4.2}50%{r:3.2}}
}
@media print{header.site,footer.site,.navtoggle{display:none}}

/* ===== i18n / RTL ===== */
.lang-cur{font-weight:700}
.lang-menu button.active{font-weight:700;color:var(--sky-deep)}
.navlinks{flex-wrap:wrap}
.btn,.navlinks a,.h2,.display,h1,h2,h3,p,li{overflow-wrap:break-word}
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .navlinks{margin-left:0;margin-right:auto}
html[dir="rtl"] .lang-menu{right:auto;left:0}
html[dir="rtl"] .btn .arr{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .hero-halo{right:auto;left:-8%}
html[dir="rtl"] .card li{padding:.34rem 1.5rem .34rem 0}
html[dir="rtl"] .card li::before{left:auto;right:0}
html[dir="rtl"] .eyebrow{flex-direction:row-reverse}
html[dir="rtl"] .cinfo .row{flex-direction:row-reverse}
html[dir="rtl"] .form input,html[dir="rtl"] .form textarea{text-align:right}
/* Latin numerals stay readable in RTL views */
html[dir="rtl"] .wbar b,html[dir="rtl"] .chip b{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .step .n,html[dir="rtl"] .card .marker{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"]{overflow-x:hidden}
.hero .wrap>*{min-width:0}
.grid3>*,.grid2>*,.chips>*,.steps>*{min-width:0}
html[dir="rtl"] .hero p.lede{margin-left:0;margin-right:auto}


/* === Kurdish (Sorani) + Arabic typography — Diwari ===
   Scoped to lang="ku" and lang="ar"; English keeps Times New Roman.
   Body 500 (Medium): the sturdy, Rudaw-like reading weight. */
html[lang="ku"] body,html[lang="ar"] body{
  font-family:'Diwari','Sora',ui-sans-serif,system-ui,sans-serif;
  font-weight:500;
  line-height:1.85;
  font-feature-settings:"liga" 1,"calt" 1,"kern" 1,"dlig" 0;
  -webkit-font-feature-settings:"liga" 1,"calt" 1,"kern" 1,"dlig" 0;
}
html[lang="ku"] h1,html[lang="ku"] h2,html[lang="ku"] h3,
html[lang="ku"] h4,html[lang="ku"] h5,html[lang="ku"] h6,
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,
html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] h6{
  font-weight:700;
  letter-spacing:0;           /* never letter-space Arabic script */
  line-height:1.35;
}
/* Kurdish reads better with a touch more leading in flowing copy */
html[lang="ku"] p,html[lang="ku"] li,
html[lang="ar"] p,html[lang="ar"] li{line-height:1.95;}

/* Arabic script is never letter-spaced (brand rule) */
html[lang="ku"] .eyebrow,html[lang="ar"] .eyebrow,
html[lang="ku"] .pill,html[lang="ar"] .pill,
html[lang="ku"] .brand .sub,html[lang="ar"] .brand .sub,
html[lang="ku"] .tag-soon,html[lang="ar"] .tag-soon{letter-spacing:0;text-transform:none}

/* ===== Brand artwork layer (vector, Brand Book v2.0) ===== */
.hero{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%3E%3Ccircle%20cx%3D%222%22%20cy%3D%222%22%20r%3D%221.4%22%20fill%3D%22%238FD3E6%22%20opacity%3D%220.28%22%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(circle at 82% 40%, rgba(48,166,202,.28), transparent 58%),
    var(--teal);
}
.hero::after{
  content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2230.5%2028.5%2027%2027%22%3E%3Cg%20opacity%3D%220.16%22%3E%3Cpath%20d%3D%22M44.00%2C31.50%20L44.92%2C35.87%20L47.09%2C31.97%20L46.69%2C36.41%20L49.91%2C33.32%20L48.22%2C37.46%20L52.21%2C35.45%20L49.37%2C38.90%20L53.77%2C38.16%20L50.04%2C40.62%20L54.47%2C41.22%20L50.18%2C42.46%20L54.24%2C44.34%20L49.77%2C44.27%20L53.09%2C47.25%20L48.85%2C45.87%20L51.14%2C49.70%20L47.49%2C47.12%20L48.56%2C51.46%20L45.83%2C47.92%20L45.56%2C52.38%20L44.00%2C48.20%20L42.44%2C52.38%20L42.17%2C47.92%20L39.44%2C51.46%20L40.51%2C47.12%20L36.86%2C49.70%20L39.15%2C45.87%20L34.91%2C47.25%20L38.23%2C44.27%20L33.76%2C44.34%20L37.82%2C42.46%20L33.53%2C41.22%20L37.96%2C40.62%20L34.23%2C38.16%20L38.63%2C38.90%20L35.79%2C35.45%20L39.78%2C37.46%20L38.09%2C33.32%20L41.31%2C36.41%20L40.91%2C31.97%20L43.08%2C35.87%20Z%22%20fill%3D%22%23F5B301%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2242%22%20r%3D%224.2%22%20fill%3D%22%23F5B301%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center/contain;
  pointer-events:none;z-index:1;
}
.hero .wrap{z-index:2}
section{position:relative}
body[data-page] main section:first-of-type::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20720%20720%22%3E%3Cg%20opacity%3D%220.10%22%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%220%22%20r%3D%22120%22%20fill%3D%22none%22%20stroke%3D%22%2330A6CA%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%220%22%20r%3D%22210%22%20fill%3D%22none%22%20stroke%3D%22%2330A6CA%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%220%22%20r%3D%22300%22%20fill%3D%22none%22%20stroke%3D%22%2330A6CA%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%220%22%20r%3D%22390%22%20fill%3D%22none%22%20stroke%3D%22%2330A6CA%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%220%22%20r%3D%22480%22%20fill%3D%22none%22%20stroke%3D%22%2330A6CA%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%220%22%20r%3D%22570%22%20fill%3D%22none%22%20stroke%3D%22%2330A6CA%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%220%22%20r%3D%22660%22%20fill%3D%22none%22%20stroke%3D%22%2330A6CA%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat right top/min(52vw,560px);
  pointer-events:none;opacity:.9;
}
body[data-page] main section:first-of-type .wrap{position:relative}
.band{position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;left:-120px;bottom:-160px;width:420px;height:420px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2230.5%2028.5%2027%2027%22%3E%3Cg%20opacity%3D%220.16%22%3E%3Cpath%20d%3D%22M44.00%2C31.50%20L44.92%2C35.87%20L47.09%2C31.97%20L46.69%2C36.41%20L49.91%2C33.32%20L48.22%2C37.46%20L52.21%2C35.45%20L49.37%2C38.90%20L53.77%2C38.16%20L50.04%2C40.62%20L54.47%2C41.22%20L50.18%2C42.46%20L54.24%2C44.34%20L49.77%2C44.27%20L53.09%2C47.25%20L48.85%2C45.87%20L51.14%2C49.70%20L47.49%2C47.12%20L48.56%2C51.46%20L45.83%2C47.92%20L45.56%2C52.38%20L44.00%2C48.20%20L42.44%2C52.38%20L42.17%2C47.92%20L39.44%2C51.46%20L40.51%2C47.12%20L36.86%2C49.70%20L39.15%2C45.87%20L34.91%2C47.25%20L38.23%2C44.27%20L33.76%2C44.34%20L37.82%2C42.46%20L33.53%2C41.22%20L37.96%2C40.62%20L34.23%2C38.16%20L38.63%2C38.90%20L35.79%2C35.45%20L39.78%2C37.46%20L38.09%2C33.32%20L41.31%2C36.41%20L40.91%2C31.97%20L43.08%2C35.87%20Z%22%20fill%3D%22%23F5B301%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2242%22%20r%3D%224.2%22%20fill%3D%22%23F5B301%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center/contain;
  pointer-events:none;opacity:.8;
}
.band>*{position:relative}
.card{position:relative;overflow:hidden}
.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--gold),var(--sky));
  opacity:0;transition:opacity .2s;
}
.card:hover::after{opacity:1}
footer.site{position:relative;overflow:hidden}
footer.site::before{
  content:"";position:absolute;right:-160px;bottom:-200px;width:480px;height:480px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2230.5%2028.5%2027%2027%22%3E%3Cg%20opacity%3D%220.16%22%3E%3Cpath%20d%3D%22M44.00%2C31.50%20L44.92%2C35.87%20L47.09%2C31.97%20L46.69%2C36.41%20L49.91%2C33.32%20L48.22%2C37.46%20L52.21%2C35.45%20L49.37%2C38.90%20L53.77%2C38.16%20L50.04%2C40.62%20L54.47%2C41.22%20L50.18%2C42.46%20L54.24%2C44.34%20L49.77%2C44.27%20L53.09%2C47.25%20L48.85%2C45.87%20L51.14%2C49.70%20L47.49%2C47.12%20L48.56%2C51.46%20L45.83%2C47.92%20L45.56%2C52.38%20L44.00%2C48.20%20L42.44%2C52.38%20L42.17%2C47.92%20L39.44%2C51.46%20L40.51%2C47.12%20L36.86%2C49.70%20L39.15%2C45.87%20L34.91%2C47.25%20L38.23%2C44.27%20L33.76%2C44.34%20L37.82%2C42.46%20L33.53%2C41.22%20L37.96%2C40.62%20L34.23%2C38.16%20L38.63%2C38.90%20L35.79%2C35.45%20L39.78%2C37.46%20L38.09%2C33.32%20L41.31%2C36.41%20L40.91%2C31.97%20L43.08%2C35.87%20Z%22%20fill%3D%22%23F5B301%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2242%22%20r%3D%224.2%22%20fill%3D%22%23F5B301%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center/contain;
  pointer-events:none;opacity:.5;
}
footer.site .wrap{position:relative}
.gameframe-wrap{position:relative}
.section-head{position:relative}
.section-head::before{
  content:"";position:absolute;left:-70px;top:-34px;width:150px;height:150px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20opacity%3D%220.10%22%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2242%22%20r%3D%2227%22%20fill%3D%22none%22%20stroke%3D%22%2330A6CA%22%20stroke-width%3D%229%22%2F%3E%3Cline%20x1%3D%2266.27%22%20y1%3D%2264.27%22%20x2%3D%2282%22%20y2%3D%2280%22%20stroke%3D%22%2330A6CA%22%20stroke-width%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.14%22%3E%3Cpath%20d%3D%22M44.00%2C31.50%20L44.92%2C35.87%20L47.09%2C31.97%20L46.69%2C36.41%20L49.91%2C33.32%20L48.22%2C37.46%20L52.21%2C35.45%20L49.37%2C38.90%20L53.77%2C38.16%20L50.04%2C40.62%20L54.47%2C41.22%20L50.18%2C42.46%20L54.24%2C44.34%20L49.77%2C44.27%20L53.09%2C47.25%20L48.85%2C45.87%20L51.14%2C49.70%20L47.49%2C47.12%20L48.56%2C51.46%20L45.83%2C47.92%20L45.56%2C52.38%20L44.00%2C48.20%20L42.44%2C52.38%20L42.17%2C47.92%20L39.44%2C51.46%20L40.51%2C47.12%20L36.86%2C49.70%20L39.15%2C45.87%20L34.91%2C47.25%20L38.23%2C44.27%20L33.76%2C44.34%20L37.82%2C42.46%20L33.53%2C41.22%20L37.96%2C40.62%20L34.23%2C38.16%20L38.63%2C38.90%20L35.79%2C35.45%20L39.78%2C37.46%20L38.09%2C33.32%20L41.31%2C36.41%20L40.91%2C31.97%20L43.08%2C35.87%20Z%22%20fill%3D%22%23F5B301%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2242%22%20r%3D%224.2%22%20fill%3D%22%23F5B301%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center/contain;
  pointer-events:none;
}
html[dir="rtl"] .hero::after{right:auto;left:-140px}
html[dir="rtl"] body[data-page] main section:first-of-type::before{background-position:left top}
html[dir="rtl"] .section-head::before{left:auto;right:-70px}
html[dir="rtl"] .band::before{left:auto;right:-120px}
html[dir="rtl"] footer.site::before{right:auto;left:-160px}
@media (max-width:880px){
  .hero::after{width:300px;height:300px;right:-90px;top:-90px}
  .section-head::before{display:none}
}
@media print{.hero::after,.band::before,footer.site::before{display:none}}

/* join form status states */
.note.st-ok{color:#1E7B4F;font-weight:700;background:#E3F3EA;border:1px solid #BFE3CD;border-radius:10px;padding:.7rem .9rem}
.note.st-err{color:#B3352B;font-weight:700;background:#FBEAE8;border:1px solid #E9B6B1;border-radius:10px;padding:.7rem .9rem}
.note.st-wait{color:#8A5A00;font-weight:700;background:#FFF6E2;border:1px solid #FFE6B0;border-radius:10px;padding:.7rem .9rem}

/* ============================================================
   ===== v5 layer — premium hero, motion, meaning, process =====
   ============================================================ */

/* --- page enter / leave transitions --- */
body.js main{animation:pagein .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes pagein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.js.leaving main{opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease}

/* --- logo micro-interaction: the Kurdistan sun grows --- */
.lens .lens-rays,.lens .lens-dot{transform-box:view-box;transform-origin:44px 42px;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.brand:hover .lens-rays,.brand:focus-visible .lens-rays{transform:scale(1.30) rotate(20deg)}
.brand:hover .lens-dot,.brand:focus-visible .lens-dot{transform:scale(1.45)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:10px}

/* --- reveal variants + stagger --- */
body.js .reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.grid3 .reveal:nth-child(2),.steps .reveal:nth-child(2),.chips .reveal:nth-child(2),.grid2 .reveal:nth-child(2){transition-delay:.08s}
.grid3 .reveal:nth-child(3),.steps .reveal:nth-child(3),.chips .reveal:nth-child(3),.grid2 .reveal:nth-child(3){transition-delay:.16s}
.grid3 .reveal:nth-child(4),.steps .reveal:nth-child(4),.grid2 .reveal:nth-child(4){transition-delay:.24s}

/* ============ HERO v2 — the sunrise instrument ============ */
.hero{isolation:isolate}
.hero::after{display:none}                      /* retire the old line burst */
.hero.v2{
  padding:clamp(4rem,9vw,7.2rem) 0 clamp(4.4rem,9vw,7rem);
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%3E%3Ccircle%20cx%3D%222%22%20cy%3D%222%22%20r%3D%221.4%22%20fill%3D%22%238FD3E6%22%20opacity%3D%220.22%22%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(120% 90% at 12% 112%, rgba(245,179,1,.16), transparent 52%),
    radial-gradient(90% 70% at 86% -10%, rgba(48,166,202,.32), transparent 58%),
    linear-gradient(180deg,#0D3440 0%, var(--teal) 58%, #0C2F3A 100%);
}
.hero.v2 .wrap{grid-template-columns:1.06fr .94fr;gap:clamp(2rem,4.5vw,3.6rem)}
.hero-sun{position:absolute;left:-14%;bottom:-46%;width:min(62vw,900px);aspect-ratio:1/1;
  z-index:0;pointer-events:none;opacity:.17;filter:drop-shadow(0 0 60px rgba(245,179,1,.35))}
.hero-sun svg{width:100%;height:100%}
.sunspin{animation:sunspin 240s linear infinite}
@keyframes sunspin{to{transform:rotate(360deg)}}
.hero.v2 .display{font-weight:700;letter-spacing:-.022em;margin:1.15rem 0 1.25rem}
.hero.v2 .display .focus{color:var(--sand);position:relative;white-space:nowrap}
.hero.v2 .display .focus::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;
  background:linear-gradient(90deg,var(--sand),rgba(245,179,1,.15));border-radius:99px;opacity:.5}
.hero-metrics{display:flex;flex-wrap:wrap;gap:0 2.1rem;margin-top:2.3rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.14)}
.hero-metrics .m{padding:.35rem 0}
.hero-metrics b{display:block;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.1;color:var(--sand);font-weight:700}
.hero-metrics span{font-size:.86rem;color:#AFD0D9;letter-spacing:.02em}
.num,.count{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}

/* the instrument — a live weighted scorecard */
.instrument{position:relative;z-index:2}
.inst-card{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:1.35rem 1.45rem 1.5rem;
  backdrop-filter:blur(10px);box-shadow:0 30px 70px -30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14)}
.inst-head{display:flex;align-items:center;gap:.6rem;margin-bottom:1.05rem}
.inst-head .dot{width:10px;height:10px;border-radius:50%;background:var(--sand);box-shadow:0 0 0 3px rgba(245,179,1,.22);animation:blink 2.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
.inst-head b{color:#fff;font-size:.95rem;letter-spacing:.03em}
.inst-head .lens{margin-left:auto;width:24px;height:24px}
.inst-top{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center;margin-bottom:1.1rem}
.ring{width:128px;height:128px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .tr{stroke:rgba(255,255,255,.12)}
.ring .pr{stroke:var(--sand);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3;
  transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .35s}
.in .ring .pr,.instrument.in .ring .pr{stroke-dashoffset:44.1}   /* 87/100 */
.ring .rc{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .rc b{font-size:2.15rem;color:#fff;line-height:1}
.ring .rc span{font-size:.68rem;color:#9FC2CC;letter-spacing:.12em;text-transform:uppercase}
.hbars{display:flex;flex-direction:column;gap:.5rem}
.hbar{display:grid;grid-template-columns:1fr auto;gap:.7rem;align-items:center;font-size:.85rem;color:#D9ECF1}
.hbar .tr2{grid-column:1/-1;height:7px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden}
.hbar .tr2 i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--sky),var(--sand));transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.hbar b{color:var(--sand);font-weight:700;font-size:.85rem}
.inst-foot{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.15rem}
.inst-foot .tagc{font-size:.74rem;font-weight:700;letter-spacing:.06em;color:#DCEFF4;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:.32rem .7rem}
.inst-foot .tagc.ko{color:var(--teal);background:var(--sand);border-color:var(--sand)}
html[dir="rtl"] .inst-head .lens{margin-left:0;margin-right:auto}
html[dir="rtl"] .hero-sun{left:auto;right:-14%}

/* ============ Meaning of Binjori ============ */
.meaning{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meaning-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3rem);align-items:center;margin-bottom:2.4rem}
.meaning .section-head{margin-bottom:0;max-width:none}
.meaning .section-head p+p{margin-top:.9rem}
.wordmark{position:relative;background:linear-gradient(160deg,#0E3541,var(--teal) 60%,#0C2F3A);
  border-radius:var(--r-lg);padding:clamp(2.2rem,5vw,3.4rem) 1.6rem;display:grid;place-items:center;
  overflow:hidden;box-shadow:var(--shadow)}
.wordmark .wsun{position:absolute;right:-18%;top:-30%;width:70%;opacity:.14;pointer-events:none}
.wordmark .kword{font-family:'Diwari','Sora',sans-serif;font-weight:700;color:var(--sand);
  font-size:clamp(3.6rem,8vw,6.2rem);line-height:1.25;direction:rtl;text-shadow:0 12px 40px rgba(0,0,0,.35)}
.wordmark .klat{color:#BFE0E9;letter-spacing:.42em;text-transform:uppercase;font-size:.8rem;font-weight:700;margin-top:.9rem}
html[lang="ku"] .wordmark .klat,html[lang="ar"] .wordmark .klat{letter-spacing:.42em} /* Latin token, spacing kept */
.dict-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.4rem}
.dict{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease;margin:0}
.dict:hover{transform:translateY(-5px)}
.dict .frame{position:relative;background:#FAF6EC;border-bottom:1px solid var(--line)}
.dict .frame::after{content:"";position:absolute;inset:10px;border:1px solid rgba(30,43,48,.14);border-radius:8px;pointer-events:none}
.dict img{width:100%;height:auto;display:block}
.dict figcaption{padding:1rem 1.2rem 1.1rem}
.dict figcaption b{display:block;color:var(--teal);font-size:1.02rem;line-height:1.5}
.dict figcaption span{display:block;color:var(--muted);font-size:.9rem;margin-top:.15rem;line-height:1.5}
.dict .badge{position:absolute;top:14px;inset-inline-start:14px;background:var(--teal);color:var(--sand);
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:99px;padding:.3rem .7rem}
html[lang="ku"] .dict .badge,html[lang="ar"] .dict .badge{letter-spacing:0;text-transform:none}

/* ============ interactive process steps ============ */
a.step{display:flex;flex-direction:column;cursor:pointer}
a.step .golink{margin-top:auto;padding-top:1rem;font-weight:700;color:var(--sky-deep);
  display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem}
a.step .golink .arr{transition:transform .22s}
a.step:hover{transform:translateY(-5px);border-color:var(--sky)}
a.step:hover .golink .arr{transform:translateX(5px)}
a.step{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
a.step:hover{box-shadow:0 8px 14px rgba(16,61,74,.06),0 30px 60px -28px rgba(16,61,74,.3)}
html[dir="rtl"] a.step:hover .golink .arr{transform:translateX(-5px)}

/* card CTA baseline alignment (Learning Lab & elsewhere) */
.grid3>.card,.grid2>.card{display:flex;flex-direction:column}
.card .cardcta{margin-top:auto;padding-top:1.2rem}

/* animated weight bars inside bands */
.wbar{position:relative;overflow:hidden}
.wbar::before{content:"";position:absolute;inset:0;width:0;background:rgba(245,179,1,.13);transition:width 1.1s cubic-bezier(.2,.7,.2,1) .25s}
.in .wbar::before,.band.in .wbar::before{width:var(--w,0%)}
.wbar>*{position:relative}

/* ============ shared page-hero for inner pages ============ */
.phero{background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%3E%3Ccircle%20cx%3D%222%22%20cy%3D%222%22%20r%3D%221.4%22%20fill%3D%22%238FD3E6%22%20opacity%3D%220.22%22%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(100% 80% at 88% -20%, rgba(48,166,202,.30), transparent 60%),
    linear-gradient(180deg,#0D3440, var(--teal) 70%);
  color:#fff;padding:clamp(3rem,7vw,5rem) 0;position:relative;overflow:hidden}
.phero .eyebrow{color:var(--sand)}
.phero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.4rem);margin:.8rem 0 .9rem;font-weight:700;letter-spacing:-.02em}
.phero .lede{color:#D9ECF1}
.phero .psun{position:absolute;right:-7%;bottom:-58%;width:min(46vw,560px);opacity:.15;pointer-events:none}
html[dir="rtl"] .phero .psun{right:auto;left:-7%}
.phero .wrap{position:relative;z-index:2}
.stagenum{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:18px;
  background:var(--sand);color:var(--teal);font-weight:700;font-size:1.7rem;margin-bottom:1.1rem;
  box-shadow:0 14px 34px -12px rgba(245,179,1,.55)}

/* stage tracker */
.tracker{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:2rem;position:relative;z-index:2}
.tracker a{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:.75rem .9rem;display:flex;align-items:center;gap:.65rem;transition:.2s}
.tracker a:hover{background:rgba(255,255,255,.14)}
.tracker .tn{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.12);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none}
.tracker span.tl{font-size:.92rem;color:#D9ECF1;font-weight:600}
.tracker a.cur{background:var(--sand);border-color:var(--sand)}
.tracker a.cur .tn{background:var(--teal);color:var(--sand)}
.tracker a.cur span.tl{color:var(--teal)}
@media(max-width:760px){.tracker{grid-template-columns:repeat(2,1fr)}}

/* icon cards */
.icards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.3rem}
.icard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;box-shadow:var(--shadow);
  transition:transform .25s ease}
.icard:hover{transform:translateY(-4px)}
.icard .ic{width:52px;height:52px;border-radius:14px;background:var(--sky-soft);display:grid;place-items:center;margin-bottom:1rem;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.icard:hover .ic{transform:rotate(-6deg) scale(1.08)}
.icard .ic svg{width:26px;height:26px;stroke:var(--sky-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icard h3{font-size:1.12rem;margin-bottom:.4rem}
.icard p{color:var(--muted);font-size:.98rem}

/* figure blocks (infographics) */
.figblock{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:clamp(1.5rem,4vw,2.4rem);position:relative;overflow:hidden}
.figblock .fig-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sky-deep)}
html[lang="ku"] .figblock .fig-eyebrow,html[lang="ar"] .figblock .fig-eyebrow{letter-spacing:0;text-transform:none}
.figblock h3{margin:.45rem 0 1.3rem}
.fig-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,2.6rem);align-items:center}
@media(max-width:760px){.fig-grid{grid-template-columns:1fr}}

/* donut */
.donut{width:min(240px,60vw);height:auto}
.donut circle.seg{fill:none;stroke-width:26;stroke-dasharray:0 502.7;transition:stroke-dasharray 1.3s cubic-bezier(.2,.7,.2,1)}
.donut text{font-family:inherit;font-weight:700;fill:var(--teal)}
.legend{display:flex;flex-direction:column;gap:.55rem}
.lrow{display:grid;grid-template-columns:14px 1fr auto;gap:.7rem;align-items:center;font-size:.96rem}
.lrow .sw{width:14px;height:14px;border-radius:4px}
.lrow b{color:var(--teal);font-variant-numeric:tabular-nums}
.lrow .lb{height:6px;grid-column:2/3;border-radius:99px;background:var(--paper);overflow:hidden;margin-top:.2rem}
.lrow .lb i{display:block;height:100%;width:0;border-radius:99px;transition:width 1.2s cubic-bezier(.2,.7,.2,1) .3s}

/* KO note */
.konote{display:flex;gap:.9rem;align-items:flex-start;background:var(--sand-soft);border:1px solid #F1DFA8;
  border-radius:14px;padding:1rem 1.1rem;margin-top:1.4rem}
.konote .kb{flex:none;background:var(--teal);color:var(--sand);font-weight:700;border-radius:9px;padding:.3rem .55rem;font-size:.8rem;letter-spacing:.08em}
.konote p{font-size:.95rem;color:#6B5A22}

/* field map */
.mapviz{width:100%;height:auto}
.mapviz .terr{fill:var(--sky-soft);stroke:var(--line)}
.mapviz .route{fill:none;stroke:var(--sky);stroke-width:2.4;stroke-dasharray:7 7;opacity:.65;animation:dashmove 26s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-700}}
.mapviz .cityd{fill:var(--sand);stroke:#fff;stroke-width:2.5}
.mapviz .halo2{fill:var(--sand);opacity:.35;transform-box:fill-box;transform-origin:center;animation:cpulse 2.6s ease-out infinite}
@keyframes cpulse{0%{transform:scale(.4);opacity:.5}80%{transform:scale(2.4);opacity:0}100%{opacity:0}}
.mapviz text{font-family:inherit;font-size:12.5px;font-weight:700;fill:var(--teal)}
.evrow{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.evchip{display:inline-flex;align-items:center;gap:.5rem;background:var(--paper-2);border:1px solid var(--line);
  border-radius:99px;padding:.5rem .95rem;font-size:.9rem;font-weight:600;color:var(--teal);transition:.2s}
.evchip:hover{border-color:var(--sky);transform:translateY(-2px)}
.evchip svg{width:17px;height:17px;stroke:var(--sky-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* score pipeline */
.pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin:1.4rem 0 .4rem}
.pipe::before{content:"";position:absolute;top:26px;left:9%;right:9%;height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--sky) 0%,var(--sky) var(--p,0%),var(--line) var(--p,0%));transition:--p 1s;
  background-size:100% 100%}
.in .pipe::before{background:linear-gradient(90deg,var(--sky),var(--sand))}
.pnode{text-align:center;padding:0 .5rem;position:relative}
.pnode .pc{width:52px;height:52px;border-radius:50%;background:#fff;border:3px solid var(--sky);color:var(--sky-deep);
  display:grid;place-items:center;margin:0 auto .7rem;font-weight:700;position:relative;z-index:1;transition:transform .3s}
.pnode:hover .pc{transform:scale(1.12)}
.pnode.gold .pc{border-color:var(--sand);background:var(--sand);color:var(--teal)}
.pnode b{display:block;color:var(--teal);font-size:.98rem;margin-bottom:.25rem}
.pnode p{font-size:.85rem;color:var(--muted);line-height:1.5}
@media(max-width:760px){.pipe{grid-template-columns:1fr 1fr;gap:1.4rem}.pipe::before{display:none}}

/* twin check panel */
.twin{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;margin-top:1.6rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.4rem}
.twin .tcell{text-align:center}
.twin .tcell b{display:block;font-size:2.3rem;color:var(--teal);line-height:1}
.twin .tcell span{font-size:.82rem;color:var(--muted)}
.twin .teq{width:46px;height:46px;border-radius:50%;background:#E3F3EA;color:#1E7B4F;display:grid;place-items:center;font-size:1.3rem;font-weight:700}
@media(max-width:560px){.twin{grid-template-columns:1fr}}

/* report stack */
.stackviz{display:flex;flex-direction:column;gap:.55rem}
.stackviz .lvl{border-radius:12px;padding:.85rem 1.1rem;color:#fff;display:flex;justify-content:space-between;gap:1rem;
  align-items:center;transform:translateX(-14px);opacity:0;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s}
.in .stackviz .lvl{transform:none;opacity:1}
.stackviz .lvl:nth-child(2){transition-delay:.12s}.stackviz .lvl:nth-child(3){transition-delay:.24s}.stackviz .lvl:nth-child(4){transition-delay:.36s}
.stackviz .lvl b{font-size:.98rem}.stackviz .lvl span{font-size:.8rem;opacity:.85}
.l1{background:var(--teal)}.l2{background:#1B6F87}.l3{background:#2E93B4;width:92%}.l4{background:var(--sand);color:var(--teal)!important;width:84%}
.l4 span{color:#6B5A22!important}
html[dir="rtl"] .stackviz .lvl{transform:translateX(14px)}
html[dir="rtl"] .in .stackviz .lvl{transform:none}

/* mini dashboard */
.dashmini{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.dtile{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:.95rem 1rem}
.dtile .dl{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
html[lang="ku"] .dtile .dl,html[lang="ar"] .dtile .dl{letter-spacing:0;text-transform:none}
.dtile b{font-size:1.7rem;color:var(--teal)}
.dtile .spark{width:100%;height:34px;margin-top:.3rem}
.dtile .spark path{fill:none;stroke:var(--sky);stroke-width:2.4;stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1.5s ease .4s}
.in .dtile .spark path{stroke-dashoffset:0}
.dtile .vb{display:flex;align-items:flex-end;gap:5px;height:36px;margin-top:.3rem}
.dtile .vb i{flex:1;background:linear-gradient(180deg,var(--sky),var(--sky-deep));border-radius:4px 4px 0 0;height:8%;transition:height 1s cubic-bezier(.2,.7,.2,1) .3s}
@media(max-width:640px){.dashmini{grid-template-columns:1fr}}

/* deliverables band */
.dlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;margin-top:1.4rem}
.ditem{display:flex;gap:.75rem;align-items:flex-start;background:rgba(255,255,255,.08);border-radius:13px;padding:.95rem 1.05rem}
.ditem .ck{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sand);color:var(--teal);display:grid;place-items:center;font-weight:700;font-size:.85rem}
.ditem p{color:#D9ECF1;font-size:.95rem;line-height:1.55}

/* prev / next */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.2rem}
.pn a{display:flex;flex-direction:column;gap:.25rem;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:1.1rem 1.3rem;transition:.2s;box-shadow:var(--shadow)}
.pn a:hover{border-color:var(--sky);transform:translateY(-3px)}
.pn .k{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html[lang="ku"] .pn .k,html[lang="ar"] .pn .k{letter-spacing:0;text-transform:none}
.pn b{color:var(--sky-deep);font-size:1.08rem}
.pn a.nx{text-align:right;align-items:flex-end}
html[dir="rtl"] .pn a.nx{text-align:left;align-items:flex-start}
@media(max-width:560px){.pn{grid-template-columns:1fr}}

/* ============ AI page ============ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
.privflow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.8rem;align-items:center;margin-top:1.4rem}
.privflow .pf{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:1rem;text-align:center}
.privflow .pf b{display:block;color:var(--teal);font-size:.95rem;margin-bottom:.2rem}
.privflow .pf span{font-size:.82rem;color:var(--muted)}
.privflow .pf.gate{background:var(--teal);border-color:var(--teal)}
.privflow .pf.gate b{color:var(--sand)}.privflow .pf.gate span{color:#BFE0E9}
.privflow .par{color:var(--sky-deep);font-weight:700;font-size:1.2rem}
html[dir="rtl"] .privflow .par{transform:scaleX(-1)}
@media(max-width:760px){.privflow{grid-template-columns:1fr}.privflow .par{transform:rotate(90deg);justify-self:center}
  html[dir="rtl"] .privflow .par{transform:rotate(90deg)}}
.trustlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.9rem}

/* responsive hero v2 */
@media(max-width:960px){
  .hero.v2 .wrap{grid-template-columns:1fr}
  .instrument{max-width:520px}
  .hero-sun{width:110vw;left:-30%;bottom:-30%}
}
@media(max-width:880px){.meaning-grid{grid-template-columns:1fr}}
.pline::before{content:"";position:absolute;left:0;top:.82rem;width:11px;height:11px;border-radius:50%;
  background:var(--sand);box-shadow:0 0 0 2px var(--sky)}
html[dir="rtl"] .pline{padding:.34rem 1.5rem .34rem 0!important}
html[dir="rtl"] .pline::before{left:auto;right:0}

/* ============================================================
   ===== v6 layer — logo hero, cases, insights, FAQ, sound =====
   ============================================================ */

/* --- HERO v3: the logo is the hero --- */
.hero.v3{min-height:min(88vh,760px);display:flex;align-items:center;text-align:center;
  padding:clamp(4rem,8vw,6rem) 0}
.hero.v3 .wrap{grid-template-columns:1fr;justify-items:center;position:relative;z-index:2}
.megalogo{display:flex;flex-direction:column;align-items:center;gap:1.6rem;cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none}
.megalens{width:clamp(190px,30vw,300px);height:auto;filter:drop-shadow(0 24px 70px rgba(0,0,0,.45));
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.megalogo:hover .megalens{transform:scale(1.04)}
.megalens .m-rays,.megalens .m-dot{transform-box:view-box;transform-origin:44px 42px}
.megalens .m-rays{animation:sunspin 90s linear infinite;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.megalogo:hover .m-rays{animation-duration:26s}
.megalens.burst .m-rays{animation:sunburst 1.1s cubic-bezier(.22,1,.36,1)}
.megalens.burst .m-dot{animation:dotburst 1.1s cubic-bezier(.22,1,.36,1)}
@keyframes sunburst{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.55) rotate(200deg)}100%{transform:scale(1) rotate(360deg)}}
@keyframes dotburst{0%{transform:scale(1)}45%{transform:scale(1.8)}100%{transform:scale(1)}}
.megalens .m-halo{opacity:.55;animation:halopulse 5s ease-in-out infinite;transform-box:view-box;transform-origin:44px 42px}
@keyframes halopulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.75;transform:scale(1.06)}}
.meganame{color:#fff;font-weight:700;font-size:clamp(2rem,5vw,3.1rem);letter-spacing:-.02em;line-height:1.15}
.meganame .sub{display:block;font-weight:500;font-size:clamp(1rem,2vw,1.25rem);color:var(--sand);
  letter-spacing:.34em;text-transform:uppercase;margin-top:.55rem}
html[lang="ku"] .meganame .sub,html[lang="ar"] .meganame .sub{letter-spacing:0;text-transform:none}
.megatag{color:#BFE0E9;font-size:clamp(1rem,1.8vw,1.15rem);max-width:46ch}
.scrollcue{margin-top:2.6rem;display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;
  color:#9FC2CC;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase}
html[lang="ku"] .scrollcue,html[lang="ar"] .scrollcue{letter-spacing:0;text-transform:none}
.scrollcue .chev{width:22px;height:22px;border-right:2px solid var(--sand);border-bottom:2px solid var(--sand);
  transform:rotate(45deg);animation:cuedrop 2.2s ease-in-out infinite}
@keyframes cuedrop{0%,100%{transform:translateY(0) rotate(45deg);opacity:.5}50%{transform:translateY(8px) rotate(45deg);opacity:1}}
.hero.v3 .hero-sun{left:50%;bottom:auto;top:50%;width:min(120vw,1150px);transform:translate(-50%,-50%);opacity:.08}
html[dir="rtl"] .hero.v3 .hero-sun{right:auto}

/* --- clickable services --- */
.card .svclinks{list-style:none;margin-top:1rem}
.card .svclinks li{padding:0;margin:0}
.card .svclinks li::before{display:none}
.card .svclinks a{display:flex;align-items:center;gap:.6rem;padding:.52rem .2rem;border-bottom:1px dashed var(--line);
  color:var(--ink);transition:.18s;font-size:.98rem}
.card .svclinks a:last-child{border-bottom:0}
.card .svclinks a .arr{margin-left:auto;color:var(--sky-deep);opacity:0;transform:translateX(-6px);transition:.2s}
.card .svclinks a:hover{color:var(--sky-deep);padding-inline-start:.5rem}
.card .svclinks a:hover .arr{opacity:1;transform:none}
html[dir="rtl"] .card .svclinks a .arr{margin-left:0;margin-right:auto;transform:translateX(6px) scaleX(-1)}
html[dir="rtl"] .card .svclinks a:hover .arr{transform:scaleX(-1)}
.svcdot{width:7px;height:7px;border-radius:50%;background:var(--sand);flex:none}

/* service detail rows on pillar pages */
.svcdetail{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:1.6rem 1.7rem;margin-bottom:1.1rem;scroll-margin-top:90px}
.svcdetail h3{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.svcdetail h3 .sn{flex:none;width:34px;height:34px;border-radius:10px;background:var(--sky-soft);color:var(--sky-deep);
  display:grid;place-items:center;font-size:.9rem;font-weight:700}
.svcdetail .svcgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;margin-top:1rem}
@media(max-width:720px){.svcdetail .svcgrid{grid-template-columns:1fr}}
.svcdetail .sd h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-deep);margin-bottom:.4rem}
html[lang="ku"] .svcdetail .sd h4,html[lang="ar"] .svcdetail .sd h4{letter-spacing:0;text-transform:none}
.svcdetail .sd p{font-size:.96rem;color:var(--muted)}
.caselink{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font-weight:700;color:var(--sky-deep)}
.caselink:hover .arr{transform:translateX(4px)}
.caselink .arr{transition:.2s}

/* --- example study cards --- */
.casegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}
.casecard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:1.6rem;transition:transform .25s ease,border-color .25s,box-shadow .25s}
.casecard:hover{transform:translateY(-5px);border-color:var(--sky);box-shadow:0 8px 14px rgba(16,61,74,.06),0 30px 60px -28px rgba(16,61,74,.3)}
.casecard .ic{width:52px;height:52px;border-radius:14px;background:var(--sky-soft);display:grid;place-items:center;margin-bottom:1rem}
.casecard .ic svg{width:26px;height:26px;stroke:var(--sky-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.casecard .ctag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-deep);margin-bottom:.35rem}
html[lang="ku"] .casecard .ctag,html[lang="ar"] .casecard .ctag{letter-spacing:0;text-transform:none}
.casecard h3{font-size:1.15rem;margin-bottom:.4rem}
.casecard p{color:var(--muted);font-size:.96rem}
.casecard .golink{margin-top:auto;padding-top:1.1rem;font-weight:700;color:var(--sky-deep);display:inline-flex;gap:.4rem;align-items:center}
.casecard:hover .golink .arr{transform:translateX(5px)}
.casecard .golink .arr{transition:.2s}
html[dir="rtl"] .casecard:hover .golink .arr{transform:translateX(-5px)}

/* example badge + context strip on case pages */
.exbadge{display:inline-block;background:rgba(245,179,1,.16);border:1px solid rgba(245,179,1,.5);color:var(--sand);
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border-radius:99px;padding:.34rem .85rem;margin-bottom:1rem}
html[lang="ku"] .exbadge,html[lang="ar"] .exbadge{letter-spacing:0;text-transform:none}
.ctxstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}
.ctx{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.15rem;box-shadow:var(--shadow)}
.ctx h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-deep);margin-bottom:.3rem}
html[lang="ku"] .ctx h4,html[lang="ar"] .ctx h4{letter-spacing:0;text-transform:none}
.ctx p{font-size:.95rem;color:var(--ink)}

/* ring map */
.ringmap{width:100%;height:auto}
.ringmap .ring{fill:none;stroke:var(--sky);stroke-width:1.6;stroke-dasharray:5 6;opacity:.75}
.ringmap .ringfill{fill:var(--sky);opacity:.05}
.ringmap .road{stroke:#B9CCD3;stroke-width:1.2}
.ringmap .cit{fill:var(--teal)}
.ringmap text{font-family:inherit;font-weight:700;fill:var(--teal)}
.ringmap .rlab{fill:var(--sky-deep);font-size:11px;letter-spacing:.06em}
.ringmap .comp{fill:#E4572E;stroke:#fff;stroke-width:1.4}
.ringmap .site{fill:var(--sand);stroke:#fff;stroke-width:2}
.maplegend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.9rem;font-size:.85rem;color:var(--muted)}
.maplegend span{display:inline-flex;align-items:center;gap:.45rem}
.maplegend i{width:11px;height:11px;border-radius:50%;display:inline-block}

/* radar */
.radar{width:100%;max-width:360px;height:auto}
.radar .grid{fill:none;stroke:var(--line)}
.radar .axis{stroke:var(--line)}
.radar text{font-family:inherit;font-size:11.5px;font-weight:700;fill:var(--teal)}
.radar .polyA{fill:rgba(48,166,202,.22);stroke:var(--sky-deep);stroke-width:2}
.radar .polyB{fill:rgba(245,179,1,.18);stroke:var(--sand);stroke-width:2}
.radar .polyA,.radar .polyB{transform-box:fill-box;transform-origin:center;transform:scale(.4);opacity:0;
  transition:transform 1s cubic-bezier(.2,.7,.2,1) .2s,opacity .8s .2s}
.in .radar .polyA,.in .radar .polyB{transform:scale(1);opacity:1}

/* diverging sentiment bars */
.divbars{display:flex;flex-direction:column;gap:.55rem}
.dbrow{display:grid;grid-template-columns:110px 1fr 44px;gap:.7rem;align-items:center;font-size:.9rem}
.dbrow .lab{color:var(--teal);font-weight:600}
.dbrow .tr3{position:relative;height:12px;background:var(--paper);border-radius:99px}
.dbrow .tr3::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1.5px;background:var(--line)}
.dbrow .tr3 i{position:absolute;top:0;bottom:0;border-radius:99px;width:0;transition:width 1s cubic-bezier(.2,.7,.2,1) .25s}
.dbrow .tr3 i.pos{left:50%;background:linear-gradient(90deg,var(--sky),var(--sand))}
.dbrow .tr3 i.neg{right:50%;background:#C46A5A}
.dbrow b{color:var(--teal);text-align:right}
html[dir="rtl"] .dbrow b{text-align:left}

/* gauge */
.gaugeviz{width:100%;max-width:300px;height:auto}
.gaugeviz .garc{fill:none;stroke:var(--paper);stroke-width:18;stroke-linecap:round}
.gaugeviz .gval{fill:none;stroke-width:18;stroke-linecap:round;
  stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) .3s}
.gaugeviz text{font-family:inherit;font-weight:700;fill:var(--teal)}

/* s-curve */
.scurve{width:100%;height:auto}
.scurve .cx{stroke:var(--line);stroke-width:1.2}
.scurve .cpath{fill:none;stroke:var(--sky-deep);stroke-width:3;stroke-dasharray:640;stroke-dashoffset:640;transition:stroke-dashoffset 1.8s ease .3s}
.in .scurve .cpath{stroke-dashoffset:0}
.scurve .cdot{fill:var(--sand);stroke:#fff;stroke-width:2}
.scurve text{font-family:inherit;font-size:11px;font-weight:600;fill:var(--muted)}

/* hour bars */
.hourbars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:.5rem}
.hourbars .hb{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;height:100%;justify-content:flex-end}
.hourbars .hb i{width:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--sky),var(--sky-deep));height:4%;
  transition:height 1s cubic-bezier(.2,.7,.2,1) .2s;min-height:4px}
.hourbars .hb.pk i{background:linear-gradient(180deg,var(--sand),#D89F02)}
.hourbars .hb span{font-size:.62rem;color:var(--muted)}

/* --- FAQ --- */
.faq{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-bottom:.85rem;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;padding:1.15rem 1.4rem;
  font-weight:700;color:var(--teal);font-size:1.04rem;transition:background .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--paper-2)}
.faq summary .pl{flex:none;width:30px;height:30px;border-radius:50%;background:var(--sky-soft);color:var(--sky-deep);
  display:grid;place-items:center;font-weight:700;font-size:1.15rem;transition:transform .3s,background .3s;line-height:1}
.faq[open] summary .pl{transform:rotate(45deg);background:var(--sand);color:var(--teal)}
.faq .fbody{padding:0 1.4rem 1.3rem 4.2rem;color:var(--muted);line-height:1.7}
html[dir="rtl"] .faq .fbody{padding:0 4.2rem 1.3rem 1.4rem}
.faq .fbody a{color:var(--sky-deep);font-weight:600}

/* --- sound toggle --- */
.sndtoggle{background:none;border:1px solid #2E5561;color:#9FC2CC;border-radius:99px;padding:.3rem .95rem;
  font-size:.78rem;cursor:pointer;font-family:inherit;letter-spacing:.04em;transition:.2s}
.sndtoggle:hover{color:#fff;border-color:#9FC2CC}
.sndtoggle .s-off{display:none}
body.muted .sndtoggle .s-on{display:none}
body.muted .sndtoggle .s-off{display:inline}
footer .legal{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;justify-content:space-between}

/* article cards */
.artcard{position:relative}
.artcard .soon{position:absolute;top:1.1rem;inset-inline-end:1.1rem;background:var(--sand-soft);color:#8A6D00;
  border:1px solid #F1DFA8;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:99px;padding:.25rem .65rem}
html[lang="ku"] .artcard .soon,html[lang="ar"] .artcard .soon{letter-spacing:0;text-transform:none}
.artmeta{display:flex;gap:.9rem;font-size:.8rem;color:var(--muted);margin-bottom:.45rem}

/* ============================================================
   ===== v7 layer — capability strip, live pillars, magnifier ==
   ============================================================ */

/* capability strip (replaces plain stats) */
.capstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;margin-top:2.2rem}
.capcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:1.9rem 1.7rem 1.7rem;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.capcard::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--sky));transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
html[dir="rtl"] .capcard::before{transform-origin:right}
.capcard:hover{transform:translateY(-5px);border-color:var(--sky);
  box-shadow:0 8px 14px rgba(16,61,74,.06),0 30px 60px -28px rgba(16,61,74,.28)}
.capcard:hover::before{transform:scaleX(1)}
.capcard .ci{width:54px;height:54px;border-radius:15px;background:var(--sky-soft);display:grid;place-items:center;margin-bottom:1.05rem}
.capcard .ci svg{width:27px;height:27px;stroke:var(--sky-deep);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.capcard .ck{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#B98A00;margin-bottom:.35rem}
html[lang="ku"] .capcard .ck,html[lang="ar"] .capcard .ck{letter-spacing:0;text-transform:none}
.capcard h3{font-size:1.14rem;color:var(--teal);margin-bottom:.4rem}
.capcard p{color:var(--muted);font-size:.95rem}

/* interactive pillar cards */
.pillarcard{cursor:pointer;text-align:inherit;position:relative;transition:transform .3s,border-color .3s,box-shadow .3s}
.pillarcard:hover{transform:translateY(-4px);border-color:var(--sky)}
.pillarcard:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.pillarcard .openhint{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.05rem;
  font-size:.82rem;font-weight:700;color:var(--sky-deep)}
.pillarcard .chevd{width:17px;height:17px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.pillarcard.open{border-color:var(--gold);box-shadow:0 8px 14px rgba(16,61,74,.06),0 26px 52px -26px rgba(16,61,74,.3)}
.pillarcard.open .chevd{transform:rotate(180deg)}
.pillarcard.open .marker{color:rgba(245,179,1,.22)}
.pilpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1),margin-top .55s cubic-bezier(.22,1,.36,1);margin-top:0}
.pilpanel.open{grid-template-rows:1fr;margin-top:1.3rem}
.pilpanel .pp-in{overflow:hidden;min-height:0}
.pilpanel .pp-card{background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--gold);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1.7rem 1.8rem}
.pp-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:1.4rem 2.6rem}
@media(max-width:760px){.pp-grid{grid-template-columns:1fr}}
.pp-card h4{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sky-deep);margin-bottom:.55rem}
html[lang="ku"] .pp-card h4,html[lang="ar"] .pp-card h4{letter-spacing:0;text-transform:none}
.svchips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.2rem}
.svchip{display:inline-flex;align-items:center;gap:.5rem;background:var(--paper);border:1px solid var(--line);
  border-radius:99px;padding:.42rem .95rem;font-size:.88rem;font-weight:600;color:var(--teal);transition:.2s}
.svchip:hover{border-color:var(--sky);color:var(--sky-deep);background:var(--sky-soft);transform:translateY(-2px)}

/* premium explore CTA */
.explorecta{display:flex;align-items:center;gap:1.3rem;margin-top:2rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1.35rem 1.7rem;
  color:var(--teal);position:relative;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.explorecta::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(120deg,var(--gold),var(--sky) 55%,var(--sky-deep));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.explorecta:hover{transform:translateY(-4px);box-shadow:0 8px 14px rgba(16,61,74,.06),0 30px 60px -28px rgba(16,61,74,.3)}
.explorecta:hover::after{opacity:1}
.explorecta:hover .lens-rays{transform:scale(1.3) rotate(20deg)}
.explorecta .xc-lens{flex:none;display:grid;place-items:center;width:66px;height:66px;border-radius:18px;background:var(--sky-soft)}
.explorecta .xc-lens .lens-rays{transform-box:view-box;transform-origin:44px 42px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.explorecta .xc-txt{display:flex;flex-direction:column;gap:.2rem}
.explorecta .xc-txt b{font-size:1.18rem}
.explorecta .xc-txt span{color:var(--muted);font-size:.95rem}
.explorecta .xc-arr{margin-inline-start:auto;font-size:1.6rem;color:var(--sky-deep);transition:transform .3s}
.explorecta:hover .xc-arr{transform:translateX(7px)}
html[dir="rtl"] .explorecta .xc-arr{transform:scaleX(-1)}
html[dir="rtl"] .explorecta:hover .xc-arr{transform:scaleX(-1) translateX(7px)}

/* hero hint + activated sun */
.megahint{margin-top:.4rem;font-size:.8rem;color:#9FC2CC;letter-spacing:.06em}
.megalens .m-glass{transition:opacity .45s ease,transform .45s ease}
.megalens.detached .m-glass{opacity:0;transform:scale(.86)}
.megalens.activated .m-rays{animation-duration:7s}
.megalens.activated .m-halo{animation:halospin 12s linear infinite;opacity:.9}
@keyframes halospin{from{transform:scale(1.24) rotate(0deg)}to{transform:scale(1.24) rotate(360deg)}}

/* the floating magnifying lens */
#maglens{position:fixed;left:0;top:0;width:190px;height:190px;z-index:9999;pointer-events:none;will-change:transform;contain:layout style}
body.magcoarse #maglens{width:150px;height:150px}
body.magcoarse #maglens .mg-clone{filter:none}
#maglens .mg-inner{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--mist);
  box-shadow:inset 0 0 26px rgba(16,61,74,.16), 0 26px 60px -18px rgba(0,0,0,.5)}
#maglens .mg-clone{position:absolute;left:0;top:0;transform-origin:0 0;filter:contrast(1.05) saturate(1.03)}
#maglens .mg-clone *{animation:none!important;transition:none!important;cursor:none!important}
#maglens .mg-ring{position:absolute;left:-31.53%;top:-27.84%;width:185.26%;height:185.26%;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.4))}
#maglens .mg-shine{position:absolute;left:14%;top:9%;width:34%;height:22%;border-radius:50%;
  background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,0));pointer-events:none}
body.maglive, body.maglive *{cursor:none!important}
#lenspill{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:10000;
  display:flex;align-items:center;gap:.6rem;background:var(--teal);color:#fff;border:1px solid #2E5561;
  border-radius:99px;padding:.6rem 1.25rem;font-size:.86rem;font-weight:600;box-shadow:0 16px 40px -12px rgba(0,0,0,.5)}
#lenspill kbd{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:6px;
  padding:.08rem .45rem;font-family:inherit;font-size:.78rem}
#lenspill[hidden]{display:none}

/* learning: fullscreen play */
.gameframe-wrap:fullscreen{background:var(--teal);padding:0;border-radius:0}
.gameframe-wrap:fullscreen iframe{height:calc(100vh - 46px);border-radius:0}
.fsexit{display:none;position:fixed;top:16px;inset-inline-end:16px;z-index:99;align-items:center;gap:.5rem;
  background:rgba(16,61,74,.85);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:99px;
  padding:.55rem 1.2rem;font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}
.fsexit:hover{background:var(--sky-deep)}
.gameframe-wrap:fullscreen .fsexit{display:inline-flex}


/* ===== v9 layer — hero statement, fullscreen fallback, mobile design ===== */
.megah1{color:#fff;font-weight:700;font-size:clamp(1.45rem,3.4vw,2.3rem);line-height:1.22;
  letter-spacing:-.015em;max-width:24ch;margin-top:.4rem}
.svcdetail .sd .sdh,.ctx .ctxh{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-deep);margin-bottom:.4rem}
.ctx .ctxh{font-size:.72rem;margin-bottom:.3rem}
html[lang="ku"] .sdh,html[lang="ar"] .sdh,html[lang="ku"] .ctxh,html[lang="ar"] .ctxh{letter-spacing:0;text-transform:none}

.gameframe-wrap.fsfake{position:fixed;inset:0;z-index:3000;margin:0;border-radius:0;background:var(--teal);
  display:flex;flex-direction:column;padding:0}
.gameframe-wrap.fsfake iframe{flex:1;height:auto;min-height:0;border-radius:0}
.gameframe-wrap.fsfake .fsexit{display:inline-flex}
body.fslock{overflow:hidden}

/* ============ MOBILE, designed not shrunk ============ */
@media (max-width:820px){
  section{padding:3.2rem 0}
  .wrap{padding-inline:1.05rem}
  .h2{font-size:clamp(1.45rem,5.6vw,1.9rem)}
  .lede{font-size:1rem}
  .fig-grid{grid-template-columns:1fr !important;gap:1.3rem}
  .figblock{padding:1.35rem 1.15rem}
  .dashmini{grid-template-columns:repeat(2,1fr) !important;gap:.7rem}
  .pp-card{padding:1.35rem 1.15rem}
  .svcdetail{padding:1.3rem 1.15rem}
  .band{padding:2rem 1.3rem}
  .explorecta{flex-wrap:wrap;gap:1rem;padding:1.2rem 1.25rem}
  .explorecta .xc-arr{display:none}
  .casegrid{grid-template-columns:1fr}
  .ctxstrip{grid-template-columns:1fr 1fr}
  .phero{padding:4rem 0 3rem}
  .phero h1{font-size:clamp(1.7rem,7vw,2.4rem)}
  .phero .stagenum{font-size:5.4rem}
  .faq .fbody{padding:0 1.2rem 1.2rem 1.2rem}
  html[dir="rtl"] .faq .fbody{padding:0 1.2rem 1.2rem 1.2rem}
  .faq summary{padding:1rem 1.2rem;font-size:.98rem}
  .radar{max-width:300px;margin-inline:auto}
  .dbrow{grid-template-columns:88px 1fr 40px;font-size:.83rem}
  .hourbars{gap:3px;height:120px}
  .hourbars .hb span{font-size:.55rem}
  .gameframe-wrap iframe{height:64vh}
  .capcard{padding:1.5rem 1.3rem}
  .maplegend{gap:.6rem 1rem;font-size:.8rem}
  .pipe{grid-template-columns:1fr}
}
@media (max-width:480px){
  .ctxstrip{grid-template-columns:1fr}
  .dashmini{grid-template-columns:1fr 1fr !important}
  .megalens{width:min(52vw,210px)}
  .meganame{font-size:1.75rem}
  .megah1{font-size:1.35rem}
  .megatag{font-size:.95rem}
  .megahint{font-size:.74rem}
  .hero.v3{min-height:78vh;padding:3.4rem 0}
  .scrollcue{margin-top:1.8rem}
  .step{padding:1.2rem 1.1rem}
  .btn{padding:.78rem 1.25rem;font-size:.95rem}
  #lenspill{bottom:14px;font-size:.8rem;padding:.5rem 1rem;max-width:92vw}
  footer .legal{justify-content:center;text-align:center}
}
@supports (min-height:1svh){
  .hero.v3{min-height:min(88svh,760px)}
  @media (max-width:480px){.hero.v3{min-height:78svh}}
}

/* ================================================================
   ===== v10 layer — MOBILE ONLY. Nothing here touches desktop =====
   ================================================================ */

/* touch-device scopes (magcoarse is set only on coarse pointers) */
body.magcoarse #lenspill kbd{display:none}
body.magcoarse #maglens .mg-ring{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}

@media (max-width:900px){
  /* --- no sideways scroll, no broken words, ever --- */
  body{overflow-x:clip}
  h1,h2,h3,h4,.btn,.pill,.eyebrow{overflow-wrap:normal;word-break:normal;hyphens:none}
  .brand .name,.meganame{white-space:nowrap}

  /* --- navigation: a designed mobile panel, not a shrunken bar --- */
  header.site{padding-top:env(safe-area-inset-top)}
  .navlinks{position:absolute;top:70px;left:.7rem;right:.7rem;display:none;flex-direction:column;
    align-items:stretch;gap:.15rem;background:#fff;border:1px solid var(--line);border-radius:18px;
    box-shadow:0 24px 60px -18px rgba(16,61,74,.35);padding:.7rem}
  .navlinks.open{display:flex}
  .navlinks a{padding:.95rem 1.05rem;border-radius:12px;font-size:1.05rem;min-height:48px;display:flex;align-items:center}
  .navlinks a.active{background:var(--sky-soft)}
  .navlinks a.cta{justify-content:center;margin-top:.35rem}
  .navlinks .lang{margin:.35rem .2rem 0;border-top:1px solid var(--line);padding-top:.6rem}
  .navtoggle{width:46px;height:46px;border-radius:12px;font-size:1.25rem}

  /* --- hero: composed for a phone screen --- */
  .hero.v3{padding:3.2rem 0 3.6rem}
  .hero.v3 .hero-sun{width:150vh;max-width:900px;opacity:.06}
  .megalogo{gap:1.15rem}
  .meganame .sub{letter-spacing:.22em;font-size:clamp(.82rem,3.4vw,1rem)}
  .megah1{max-width:20ch}
  .megatag{max-width:34ch}
  .megahint{opacity:.85}

  /* --- meaning: wordmark and plates stacked with room to breathe --- */
  .wordmark,.kword{font-size:clamp(3.2rem,16vw,5rem);line-height:1.25;word-break:keep-all}
  .meaning-grid{gap:1.6rem}
  .meaning figure{margin-inline:0}
  .meaning figcaption{font-size:.85rem}

  /* --- cards and grids: one confident column --- */
  .grid3,.grid2,.icards{grid-template-columns:1fr !important}
  .capstrip{grid-template-columns:1fr;gap:1rem}
  .capcard .ci{width:48px;height:48px}
  .pillarcard .openhint{min-height:44px;align-items:center}
  .svchips{gap:.5rem}
  .svchip{padding:.62rem 1.05rem;min-height:44px}
  .pp-grid{gap:1.5rem}
  .pilpanel .pp-card .btn{width:100%;justify-content:center}
  .explorecta .xc-lens{width:56px;height:56px}
  .explorecta .xc-txt b{font-size:1.08rem}

  /* --- stage tracker: 2 by 2 instead of a squeezed row --- */
  .tracker{grid-template-columns:1fr 1fr;gap:.55rem}
  .tracker a{padding:.75rem .8rem}

  /* --- bands and calls to action: full width, thumb friendly --- */
  .band .btn,.band + p .btn{width:100%;justify-content:center;min-height:50px}
  .btn{min-height:46px}
  .cardcta .btn{width:100%;justify-content:center}
  .svclinks a{padding:.8rem .2rem;min-height:48px}

  /* --- footer: a single calm column --- */
  footer.site{padding-bottom:calc(1.4rem + env(safe-area-inset-bottom))}
  footer.site .top{grid-template-columns:1fr !important;gap:1.9rem}
  footer.site .links a{padding:.34rem 0;min-height:38px;display:inline-flex;align-items:center}

  /* --- lighter rendering on phones --- */
  .card,.casecard,.capcard,.figblock,.svcdetail,.faq{box-shadow:0 6px 18px -10px rgba(16,61,74,.18)}
  .megalens{filter:drop-shadow(0 14px 34px rgba(0,0,0,.4))}
}

@media (max-width:640px){
  .ctxstrip{grid-template-columns:1fr;gap:.7rem}
  .dashmini{grid-template-columns:1fr 1fr !important}
  .dtile b{font-size:1.25rem}
  .figblock .h3{font-size:1.08rem}
  .stackviz .lvl{font-size:.86rem}
  .konote{flex-direction:column;gap:.6rem}
  .ringmap text{font-size:12.5px}
  .maplegend{flex-direction:column;align-items:flex-start;gap:.45rem}
  .legend .lrow{grid-template-columns:14px 1fr 44px;font-size:.86rem}
  .legend .lrow .lb{grid-column:1 / -1}
  .hbar .num{font-size:.92rem}
  .faq summary .pl{width:34px;height:34px}
  .join-band .btn,.contact .btn{width:100%;justify-content:center}
  .gameframe-wrap iframe{height:70svh}
  .fsexit{top:calc(12px + env(safe-area-inset-top))}
}

/* ================================================================
   ===== v10.2 layer — mobile polish pass + hint anchored to icon ==
   ================================================================ */

/* the lens hint now sits directly beneath the icon, with reserved space so it never shifts */
.megahint{margin-top:-1.15rem;min-height:1.35em;line-height:1.35;opacity:.9}

/* global safety: an image can never overflow or distort */
img{max-width:100%;height:auto}

/* smooth in-page scrolling for everyone who allows motion */
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}

@media (max-width:900px){
  .megahint{margin-top:-.8rem;font-size:.76rem}

  /* dictionary plates: one column, never wider than the screen */
  .dict-grid{grid-template-columns:1fr}

  /* language switcher: inline row inside the menu panel, no floating dropdown */
  .navlinks .lang{position:static}
  .navlinks .lang-btn{display:none}
  .navlinks .lang-menu{position:static;display:flex;gap:.25rem;min-width:0;box-shadow:none;
    border:1px solid var(--line);border-radius:12px;padding:.28rem}
  .navlinks .lang-menu button{flex:1;justify-content:center;min-height:44px;font-size:.98rem}

  /* touch feel: no double-tap zoom delay, gentle press feedback */
  a,button,summary,.pillarcard,.casecard{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .btn:active,.svchip:active,.casecard:active,.pillarcard:active,.capcard:active{transform:scale(.985)}
  .btn,.svchip,.casecard,.pillarcard,.capcard{transition-property:transform,box-shadow,border-color;transition-duration:.18s}

  /* pillar panel opens from its own card: joined look, comfortable scroll offset */
  .pilpanel{scroll-margin-top:84px}
  .pilpanel.open{margin-top:.75rem;margin-bottom:.5rem}
  .pilpanel .pp-card{border-inline-start:1px solid var(--line);border-top:4px solid var(--gold)}

  /* quicker, calmer reveals on phones */
  body.js .reveal{transform:translateY(12px);transition-duration:.5s}
  .grid3 .reveal:nth-child(2),.steps .reveal:nth-child(2),.grid2 .reveal:nth-child(2){transition-delay:.06s}
  .grid3 .reveal:nth-child(3),.steps .reveal:nth-child(3),.grid2 .reveal:nth-child(3){transition-delay:.12s}
  .grid3 .reveal:nth-child(4),.steps .reveal:nth-child(4),.grid2 .reveal:nth-child(4){transition-delay:.12s}

  /* comfortable controls everywhere */
  .sndtoggle{min-height:40px;padding:.45rem 1.1rem;font-size:.82rem}
  #lenspill{bottom:calc(14px + env(safe-area-inset-bottom));min-height:44px;align-items:center}
  input,select,textarea{min-height:48px;font-size:1.05rem}
  textarea{min-height:120px}
  .faq summary{min-height:52px}
}

/* ================================================================
   ===== v10.3 layer — vertical phone fixes + native game flow =====
   ================================================================ */
@media (max-width:820px){
  /* THE master fix: any inline multi column grid collapses to one readable column on phones.
     This covers the AI band, the AI page jump pills, the method band, process duos,
     the who-we-are card, and every future inline grid automatically. */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* re-assert the layouts that look better two-up on phones */
  .dashmini{grid-template-columns:1fr 1fr !important}
  .tracker{grid-template-columns:1fr 1fr !important}
  /* AI page jump pills: comfortable full width tap rows in the hero */
  .phero .tracker{grid-template-columns:1fr !important}
  .phero .tracker a{justify-content:flex-start;min-height:52px}

  /* Learning Lab on phones: games open as their own full page, no iframe, no overlay */
  .gameframe-wrap iframe{display:none}
  .gameframe-wrap .fsexit{display:none !important}
  .gameframe-wrap{padding-bottom:1.5rem}
  .m-openbtn{width:100%;justify-content:center;min-height:50px;margin-top:1.1rem}
}

/* ===== v11 layer — specialized programs ===== */
.disc{display:flex;gap:1rem;align-items:flex-start;background:var(--sky-soft);border:1px solid var(--line);
  border-inline-start:4px solid var(--sky-deep);border-radius:14px;padding:1.1rem 1.3rem}
.disc svg{flex:none;width:26px;height:26px;stroke:var(--sky-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:.15rem}
.disc p{color:var(--teal);font-size:.95rem;font-weight:500}


/* ===== v11.1 — hero ambient video and the watch section ===== */
.hero.v3 .hero-video{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero.v3 .hero-video video{width:100%;height:100%;object-fit:cover;opacity:.55;display:block}
.hero.v3 .wrap{position:relative;z-index:2}

.watch{background:var(--paper);padding:clamp(3rem,7vw,5.5rem) 0}
.watchbox{display:grid;place-items:center;margin-top:1.8rem}
.watchbox video{width:min(400px,92vw);aspect-ratio:9/16;border-radius:var(--r-lg);background:var(--teal);box-shadow:0 22px 60px rgba(16,61,74,.30);display:block}

/* =========================================================================
   v11.3 layer — light hero, pointer reactive background, questions, coverage
   ========================================================================= */

/* ---- hero goes light: the video is the ground, type turns Deep Teal ---- */
.hero.v3{background:var(--paper);color:var(--teal)}
.hero.v3 .hero-video{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero.v3 .hero-video video{width:100%;height:100%;object-fit:cover;opacity:1;display:block;
  transform:scale(1.04);will-change:transform}
.hero.v3 .wrap{position:relative;z-index:2}
.hero.v3 .hero-sun{position:absolute;z-index:1;opacity:.05}

/* pointer following light, a soft lens of brightness */
.hero-glow{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle 320px at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.22) 42%, rgba(255,255,255,0) 72%);
  mix-blend-mode:soft-light}

.megaeyebrow{color:var(--ink);font-size:clamp(.66rem,1.5vw,.78rem);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:.2rem;max-width:44ch;line-height:1.7}
html[lang="ku"] .megaeyebrow,html[lang="ar"] .megaeyebrow{letter-spacing:0;text-transform:none;
  font-size:clamp(.8rem,1.9vw,.95rem)}

.hero.v3 .meganame{color:var(--teal)}
.hero.v3 .meganame .sub{color:var(--sky)}
.hero.v3 .megah1{color:var(--teal)}
.hero.v3 .megatag{color:var(--ink)}
.hero.v3 .megahint{color:var(--muted)}
.hero.v3 .scrollcue{color:var(--teal)}
.hero.v3 .scrollcue .chev{border-right-color:var(--sky);border-bottom-color:var(--sky)}
.hero.v3 .megalens{filter:drop-shadow(0 18px 44px rgba(16,61,74,.22))}
.hero.v3 .megalens .m-halo{stroke:var(--gold)}

@media (prefers-reduced-motion:reduce){
  .hero.v3 .hero-video video{display:none}
  .hero.v3 .hero-video{display:block;
    background:url(video/hero-light-poster.jpg) center/cover no-repeat;
    transform:none!important}
  .hero-glow{display:none}
}

/* ---- what we investigate ---- */
.questions{background:var(--white);padding:clamp(3rem,7vw,5.5rem) 0}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1rem;margin-top:1.8rem}
.qcard{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem 1.4rem 1.3rem;overflow:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),
  box-shadow .45s ease,border-color .45s ease}
.qcard:hover{transform:translateY(-4px);border-color:var(--sky);
  box-shadow:0 18px 44px rgba(16,61,74,.10)}
.qcard .qmark{position:absolute;right:.6rem;top:-1.2rem;font-size:6.4rem;font-weight:700;
  color:var(--sky-tint);opacity:.5;line-height:1;pointer-events:none}
.qcard h3{position:relative;font-size:1.06rem;line-height:1.4;color:var(--teal);max-width:22ch}
.qcard .qtag{display:block;margin-top:.9rem;font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
html[lang="ku"] .qcard .qtag,html[lang="ar"] .qcard .qtag{letter-spacing:0;text-transform:none;font-size:.82rem}
.qclose{margin-top:1.8rem;text-align:center;font-weight:700;color:var(--teal);
  font-size:clamp(1.05rem,2.2vw,1.35rem)}












@media (max-width:640px){.qcard .qmark{font-size:5rem}}

/* =========================================================================
   v11.4 — responsive promo player, hero layout hardening for both sizes
   ========================================================================= */

/* One cut per shape: 16:9 for desktop, 9:16 for phones. Both preload none,
   so only the one on screen is ever fetched. */
.watchbox video{display:none;background:var(--teal);border-radius:var(--r-lg);
  box-shadow:0 22px 60px rgba(16,61,74,.30)}
.watchbox video.watch-wide{width:min(980px,100%);aspect-ratio:16/9;height:auto}
.watchbox video.watch-tall{width:min(380px,92vw);aspect-ratio:9/16;height:auto}
.watchbox .watch-wide{display:block}
@media (max-width:820px){
  .watchbox .watch-wide{display:none}
  .watchbox .watch-tall{display:block}
}

/* ---- hero: keep the content centred and inside the frame at every size ---- */
.hero.v3{position:relative;overflow:hidden}
.hero.v3 .wrap{width:100%;max-width:var(--maxw);margin-inline:auto}
.megalogo{max-width:100%}
.megaeyebrow{max-width:min(44ch,100%);text-wrap:balance}
.hero.v3 .megah1,.hero.v3 .megatag{max-width:min(30ch,100%);margin-inline:auto}
.hero.v3 .megatag{max-width:min(46ch,100%)}

/* the decorative sun must never widen the hero on small screens */
.hero.v3 .hero-sun{max-width:100vw;pointer-events:none}
@media (max-width:820px){
  .hero.v3 .hero-sun{width:min(140vw,760px);opacity:.055}
  .megaeyebrow{letter-spacing:.14em;font-size:.66rem;line-height:1.6}
  .hero.v3{min-height:auto;padding:2.6rem 0 3rem}
}
@media (max-width:480px){
  .megaeyebrow{font-size:.6rem;letter-spacing:.12em}
  .hero.v3 .megatag{max-width:32ch}
}

/* on a phone the pointer parallax never runs, so hold the resting scale */
@media (pointer:coarse){
  .hero.v3 .hero-video video{transform:scale(1.02)!important}
  .hero-glow{display:none}
}

/* v11.5 — autoplay refusal fallback: poster instead of a dead player */

.hero.v3 .hero-video.novideo{background:url(video/hero-light-poster.jpg) center/cover no-repeat}


.hero-video.novideo video{display:none}