/* ============================================================================
   PROTOCOL — protocolkrd.com
   Liquid Glass, dark, blue-lit. The wordmark carries a light streak; the whole
   site is built around that beam and around layered frosted glass.
   Shared by every page.
   ========================================================================== */

/* Kurdish is set in Sarchia Nayab, self-hosted. swap = text shows immediately in the
   fallback and re-renders when the face arrives, so Kurdish is never invisible. */
@font-face{
  font-family: "Sarchia Nayab";
  src: url("/assets/fonts/sarchia-nayab.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{
  color-scheme: dark;

  /* ground + glass */
  --ground:      #000000;
  --ground-2:    #04060A;
  --glass:       rgba(34,37,48,.52);
  --glass-2:     rgba(30,33,43,.72);
  --glass-hi:    rgba(255,255,255,.22);
  --glass-edge:  rgba(255,255,255,.13);
  --glass-edge-2:rgba(255,255,255,.28);
  --blur:        blur(30px) saturate(175%);
  --blur-lite:   blur(16px) saturate(160%);

  /* ink */
  --ink:    #F3F5FA;
  --ink-2:  #AEB4C1;
  --ink-3:  #7E8698;

  /* brand light */
  --accent:      #3987E5;
  --accent-lift: #6FB0F5;
  --accent-pale: #CFE6FF;
  --accent-deep: #1B5FB0;

  --hair:   rgba(255,255,255,.09);
  --hair-2: rgba(255,255,255,.05);

  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;

  --col: 76rem;
  --gut: 20px;

  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mark: "Michroma", "IBM Plex Sans", system-ui, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --f-ckb:  "Sarchia Nayab", "Segoe UI", Tahoma, sans-serif;

  --ease: cubic-bezier(.22,.7,.2,1);
}

*,*::before,*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100%;
}
:root[lang="ckb"] body{ font-family: var(--f-ckb); line-height: 1.95; }
:root[lang="ckb"] .eyebrow,
:root[lang="ckb"] .label,
:root[lang="ckb"] .navmark{ font-family: var(--f-ckb); letter-spacing:0; }

/* height:auto matters — the logo carries width/height attributes, and without this
   a narrow screen squashes it instead of scaling it. */
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
:focus-visible{ outline:2px solid var(--accent-lift); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width: var(--col); margin-inline:auto; padding-inline: var(--gut); }
.narrow{ max-width: 58rem; }

/* ============================================================================
   1. LIVING BACKGROUND — drifting aurora + engineered grid + sweeping beams
   ========================================================================== */

.bg{ position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none; }
.bg i{ position:absolute; display:block; border-radius:50%; will-change: transform; }
/* Kept faint on purpose: the ground is black, and the light only hints at blue. */
.bg .b1{
  width:78vmax; height:78vmax; left:-26vmax; top:-30vmax;
  background: radial-gradient(circle at 50% 50%, rgba(57,135,229,.11), transparent 60%);
  animation: drift-a 30s var(--ease) infinite alternate;
}
.bg .b2{
  width:64vmax; height:64vmax; right:-22vmax; top:18vmax;
  background: radial-gradient(circle at 50% 50%, rgba(111,176,245,.07), transparent 62%);
  animation: drift-b 38s var(--ease) infinite alternate;
}
.bg .b3{
  width:58vmax; height:58vmax; left:12vmax; bottom:-28vmax;
  background: radial-gradient(circle at 50% 50%, rgba(27,95,176,.09), transparent 64%);
  animation: drift-c 34s var(--ease) infinite alternate;
}
@keyframes drift-a{ to{ transform: translate3d(14vmax, 9vmax, 0) scale(1.14); } }
@keyframes drift-b{ to{ transform: translate3d(-12vmax, 12vmax, 0) scale(1.2); } }
@keyframes drift-c{ to{ transform: translate3d(10vmax, -12vmax, 0) scale(1.1); } }

.grid-tex{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(80% 62% at 50% 24%, #000 10%, transparent 78%);
          mask-image: radial-gradient(80% 62% at 50% 24%, #000 10%, transparent 78%);
}

/* Light streaks sweeping across, continuing the streak inside the wordmark. */
.streaks{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.streaks i{
  position:absolute; height:1px; left:-45%; width:45%;
  background: linear-gradient(90deg, transparent, rgba(111,176,245,.5), rgba(207,230,255,.85), rgba(111,176,245,.5), transparent);
  filter: drop-shadow(0 0 6px rgba(57,135,229,.7));
  animation: sweep 9s linear infinite;
  opacity:0;
}
.streaks i:nth-child(1){ top:14%; animation-duration:11s; animation-delay:0s;   width:38%; }
.streaks i:nth-child(2){ top:29%; animation-duration:15s; animation-delay:2.4s; width:52%; }
.streaks i:nth-child(3){ top:47%; animation-duration:9s;  animation-delay:5.1s; width:30%; }
.streaks i:nth-child(4){ top:63%; animation-duration:17s; animation-delay:1.2s; width:60%; }
.streaks i:nth-child(5){ top:78%; animation-duration:12s; animation-delay:6.8s; width:42%; }
.streaks i:nth-child(6){ top:90%; animation-duration:14s; animation-delay:3.6s; width:34%; }
@keyframes sweep{
  0%   { transform: translate3d(0,0,0);     opacity:0; }
  8%   { opacity:.9; }
  85%  { opacity:.55; }
  100% { transform: translate3d(340vw,0,0); opacity:0; }
}
:root[dir="rtl"] .streaks i{ animation-name: sweep-rtl; left:auto; right:-45%; }
@keyframes sweep-rtl{
  0%   { transform: translate3d(0,0,0);      opacity:0; }
  8%   { opacity:.9; }
  85%  { opacity:.55; }
  100% { transform: translate3d(-340vw,0,0); opacity:0; }
}

/* ============================================================================
   2. GLASS — the material everything sits on
   ========================================================================== */

.glass{
  position:relative;
  background: linear-gradient(150deg, rgba(255,255,255,.085), rgba(255,255,255,.022) 42%, rgba(255,255,255,.045));
  -webkit-backdrop-filter: var(--blur);
          backdrop-filter: var(--blur);
  border:1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 24px 60px rgba(0,0,0,.5);
  overflow:hidden;
}
/* the wet edge highlight that makes glass read as glass */
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 26%, transparent 76%, rgba(255,255,255,.05));
  -webkit-mask-image: linear-gradient(#000,#000);
}
/* spotlight that follows the pointer across a card */
.glass.lit::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,0%), rgba(111,176,245,.20), transparent 62%);
  opacity:0; transition: opacity .35s var(--ease);
  z-index:0;
}
.glass.lit:hover::before{ opacity:1; }
.glass > *{ position:relative; z-index:1; }

/* ============================================================================
   3. NAVIGATION — floating glass pill
   ========================================================================== */

.nav{
  position: fixed; z-index: 60;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 28px), 64rem);
  view-transition-name: nav;
}
.nav-in{
  display:flex; align-items:center; gap:14px;
  padding: 9px 9px 9px 18px;
  border-radius: 999px;
  background: rgba(12,15,24,.58);
  -webkit-backdrop-filter: var(--blur);
          backdrop-filter: var(--blur);
  border:1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 40px rgba(0,0,0,.5);
}
.navmark{
  font-family: var(--f-mark); font-size:.82rem; letter-spacing:.14em;
  white-space:nowrap; color:var(--ink);
}
.navmark span{ color: var(--accent-lift); }

.nav-links{ display:none; gap:2px; margin-inline-start:auto; }
.nav-links a{
  position:relative; padding:8px 15px; border-radius:999px;
  font-size:.9rem; font-weight:500; color:var(--ink-2);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.nav-links a[aria-current="page"]{ color:var(--ink); background:rgba(255,255,255,.09); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; inset-inline:15px; bottom:3px; height:1px;
  background: linear-gradient(90deg, transparent, var(--accent-lift), transparent);
}
@media (min-width: 900px){
  .nav-links{ display:flex; }
  .nav-toggle{ display:none; }
}

.langs{ display:flex; gap:2px; padding:3px; border-radius:999px;
        border:1px solid var(--hair); background:rgba(255,255,255,.04);
        margin-inline-start:auto; }
@media (min-width:900px){ .langs{ margin-inline-start:10px; } }
.langs button{
  font:inherit; font-size:.76rem; font-weight:500; cursor:pointer;
  padding:5px 12px; border:0; border-radius:999px;
  background:transparent; color:var(--ink-3);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.langs button[aria-pressed="true"]{ background:var(--accent); color:#fff; }
.langs button[aria-pressed="false"]:hover{ color:var(--ink); }

.nav-toggle{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--hair);
  background:rgba(255,255,255,.04); cursor:pointer; color:var(--ink);
}
.nav-toggle i{ display:block; width:16px; height:1.5px; background:currentColor; border-radius:2px;
               position:relative; transition: transform .28s var(--ease), opacity .2s; }
.nav-toggle i::before,.nav-toggle i::after{
  content:""; position:absolute; left:0; width:16px; height:1.5px; background:currentColor; border-radius:2px;
  transition: transform .28s var(--ease);
}
.nav-toggle i::before{ top:-5px; } .nav-toggle i::after{ top:5px; }
.nav-toggle[aria-expanded="true"] i{ background:transparent; }
.nav-toggle[aria-expanded="true"] i::before{ transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i::after{ transform: translateY(-5px) rotate(-45deg); }

/* mobile sheet */
.sheet{
  position:fixed; inset:0; z-index:55; display:grid; place-items:center;
  background: rgba(4,6,11,.72);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  opacity:0; visibility:hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.sheet[data-open="true"]{ opacity:1; visibility:visible; }
.sheet nav{ display:flex; flex-direction:column; gap:6px; text-align:center; }
.sheet a{
  font-size:1.5rem; font-weight:600; padding:14px 40px; border-radius:var(--r-md);
  color:var(--ink-2); transform: translateY(14px); opacity:0;
  transition: color .2s var(--ease), background .2s var(--ease), transform .4s var(--ease), opacity .4s var(--ease);
}
.sheet[data-open="true"] a{ transform:none; opacity:1; }
.sheet[data-open="true"] a:nth-child(1){ transition-delay:.05s; }
.sheet[data-open="true"] a:nth-child(2){ transition-delay:.1s; }
.sheet[data-open="true"] a:nth-child(3){ transition-delay:.15s; }
.sheet[data-open="true"] a:nth-child(4){ transition-delay:.2s; }
.sheet a:hover,.sheet a[aria-current="page"]{ color:var(--ink); background:rgba(255,255,255,.07); }

/* scroll progress — the beam again */
.progress{
  position:fixed; top:0; inset-inline:0; height:2px; z-index:70; transform-origin:left center;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-pale));
  box-shadow: 0 0 12px rgba(57,135,229,.8);
  transform: scaleX(0);
}
:root[dir="rtl"] .progress{ transform-origin:right center; }

/* ============================================================================
   4. TYPE
   ========================================================================== */

.eyebrow{
  font-family: var(--f-mark); font-size:.62rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent-lift); margin:0 0 16px;
}
:root[lang="ckb"] .eyebrow{ font-size:.8rem; text-transform:none; }
.label{
  font-family: var(--f-mark); font-size:.6rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px;
}
:root[lang="ckb"] .label{ font-size:.78rem; text-transform:none; }

h1{
  font-size: clamp(2.1rem, 7vw, 4.2rem); line-height:1.06; font-weight:600;
  letter-spacing:-.03em; margin:0; text-wrap:balance;
}
h2{
  font-size: clamp(1.6rem, 4.6vw, 2.7rem); line-height:1.16; font-weight:600;
  letter-spacing:-.024em; margin:0; text-wrap:balance;
}
h3{ font-size:1.18rem; font-weight:600; letter-spacing:-.012em; margin:0; }
:root[lang="ckb"] h1,
:root[lang="ckb"] h2,
:root[lang="ckb"] h3{ letter-spacing:0; line-height:1.45; }

.lede{ color:var(--ink-2); font-size:1.06rem; max-width:48ch; margin:14px 0 0; }
p{ margin:0; }

.shine{
  background: linear-gradient(100deg, #fff 8%, var(--accent-pale) 34%, var(--accent-lift) 52%, #fff 76%);
  background-size: 260% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation: shine 7s linear infinite;
}
@keyframes shine{ to{ background-position: -260% 0; } }

/* ============================================================================
   5. BUTTONS
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:10px; position:relative; overflow:hidden;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.97rem; cursor:pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.btn svg{ flex:none; }
.btn-go{
  background: linear-gradient(180deg, var(--accent-lift), var(--accent));
  color:#fff; box-shadow: 0 8px 26px rgba(57,135,229,.36), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-go::after{
  content:""; position:absolute; top:0; bottom:0; width:38%; left:-45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
}
.btn-go:hover::after{ animation: gleam .75s var(--ease); }
@keyframes gleam{ to{ left:120%; } }
.btn-go:hover{ transform: translateY(-2px); box-shadow: 0 14px 38px rgba(57,135,229,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-quiet{
  border-color: var(--glass-edge); color:var(--ink);
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
}
.btn-quiet:hover{ transform: translateY(-2px); border-color: var(--glass-edge-2); background: rgba(255,255,255,.09); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* ============================================================================
   5b. GLASS ROWS — text that reads and behaves like a button
   ========================================================================== */

.links{ display:grid; gap:10px; margin-top:20px; }
@media (min-width:640px){ .links.two{ grid-template-columns:1fr 1fr; } }

.linkrow{
  display:flex; align-items:center; gap:14px; text-align:start;
  padding:13px 16px; border-radius:18px;
  background: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  border:1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 26px rgba(0,0,0,.55);
  transition: transform .22s var(--ease), border-color .22s var(--ease),
              background .22s var(--ease), box-shadow .22s var(--ease);
}
.linkrow:hover{
  transform: translateY(-2px);
  border-color: var(--glass-edge-2);
  background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 16px 34px rgba(0,0,0,.6);
}
.linkrow .ic{
  width:40px; height:40px; flex:none; border-radius:13px; display:grid; place-items:center;
  border:1px solid var(--glass-edge); color:#fff;
}
.linkrow .ic.wa{ background: linear-gradient(160deg,#3DDC6A,#17A34A); border-color:rgba(255,255,255,.3); }
.linkrow .ic.ig{ background: linear-gradient(140deg,#F9CE34,#EE2A7B 48%,#6228D7); border-color:rgba(255,255,255,.3); }
.linkrow .ic.pr{ background: linear-gradient(160deg, rgba(111,176,245,.32), rgba(57,135,229,.12)); color:var(--accent-pale); }
.linkrow .tx{ flex:1; min-width:0; }
.linkrow .tx b{ display:block; font-size:.97rem; font-weight:600; }
.linkrow .tx span{ display:block; font-size:.8rem; color:var(--ink-3); }
:root[lang="ckb"] .linkrow .tx span{ font-size:.86rem; }
.linkrow .ch{ color:var(--ink-3); flex:none; transition: transform .22s var(--ease); }
.linkrow:hover .ch{ transform: translateX(3px); }
:root[dir="rtl"] .linkrow .ch{ transform: scaleX(-1); }
:root[dir="rtl"] .linkrow:hover .ch{ transform: scaleX(-1) translateX(3px); }

/* the same glass shape, for statements rather than links */
.facts{ display:grid; gap:9px; margin-top:20px; }
@media (min-width:760px){ .facts{ grid-template-columns:1fr 1fr; } }
.fact{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border-radius:16px;
  background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  border:1px solid var(--hair);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
}
.fact .dot{
  display:block; width:7px; height:7px; border-radius:50%; flex:none; margin-top:9px;
  background:var(--accent); box-shadow:0 0 10px rgba(57,135,229,.9);
}
.fact > div{ flex:1; min-width:0; }
.fact b{ display:block; font-size:.96rem; font-weight:600; }
.fact span{ display:block; font-size:.87rem; color:var(--ink-2); margin-top:2px; }

/* ============================================================================
   6. SCROLL REVEAL  (opt-in: only active once JS confirms support)
   ========================================================================== */

.js-anim [data-rise]{
  opacity:0; transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js-anim [data-rise].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js-anim [data-rise]{ opacity:1 !important; transform:none !important; }
}

/* ============================================================================
   7. SECTIONS
   ========================================================================== */

main{ padding-top: 92px; }
section{ padding-block: clamp(30px, 4.2vw, 56px); position:relative; }
.sec-head{ max-width:44rem; }

/* hero */
.hero{ padding-block: clamp(14px, 2.5vw, 30px) clamp(24px, 4vw, 48px); }

/* The wordmark sits in its own plate, at its true 887x311 shape — never squashed. */
.logo-wrap{
  border:1px solid var(--glass-edge); border-radius: var(--r-md);
  overflow:hidden; background:#000;
  width:100%; max-width:460px;
  box-shadow: 0 18px 50px rgba(0,0,0,.7);
}
.logo-wrap img{ width:100%; height:auto; }
.hero .eyebrow{ margin-top:16px; margin-bottom:0; }
.hero h1{ margin-top:20px; }
.hero .lede{ font-size:1.08rem; margin-top:14px; }
/* inside a centred panel the rows stay a readable column rather than stretching */
.cta .links{ max-width:28rem; margin-inline:auto; }

/* On a phone the page opens like a card: wordmark, then the ways to reach us. */
@media (max-width: 999px){
  .hero{ text-align:center; }
  .logo-wrap{ margin-inline:auto; max-width:min(100%, 420px); }
  .hero .lede{ margin-inline:auto; }
  .hero .eyebrow{ text-align:center; }
  .hero .btn-row{ justify-content:center; }
  .hero .links{ max-width:26rem; margin-inline:auto; }
}

/* home: floating preview panels */
.floaters{ position:relative; min-height:280px; display:none; }
@media (min-width:1000px){ .floaters{ display:block; } }
.floaters .card{
  position:absolute; padding:18px; border-radius:var(--r-md); width:250px;
  will-change: transform;
}
.floaters .c1{ top:8px;   inset-inline-end:8px;   animation: bob 7s ease-in-out infinite; }
.floaters .c2{ top:126px; inset-inline-end:118px; animation: bob 9s ease-in-out .8s infinite; }
.floaters .c3{ top:246px; inset-inline-end:26px;  animation: bob 8s ease-in-out 1.6s infinite; }
@keyframes bob{ 50%{ transform: translateY(-14px); } }
.floaters .k{ font-family:var(--f-data); font-size:.66rem; letter-spacing:.14em;
              text-transform:uppercase; color:var(--ink-3); }
.floaters .v{ font-size:1.32rem; font-weight:600; margin-top:4px; letter-spacing:-.01em; }
.floaters .bar{ height:4px; border-radius:99px; background:rgba(255,255,255,.1); margin-top:12px; overflow:hidden; }
.floaters .bar span{ display:block; height:100%; border-radius:99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-lift)); }

/* split layout */
.split{ display:grid; gap:clamp(30px,5vw,64px); align-items:center; }
@media (min-width:1000px){ .split{ grid-template-columns: 1.05fr .95fr; } }

/* capability marquee */
.marquee{
  overflow:hidden; border-block:1px solid var(--hair); padding-block:13px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee ul{
  display:flex; gap:44px; margin:0; padding:0; list-style:none; width:max-content;
  animation: roll 42s linear infinite;
}
:root[dir="rtl"] .marquee ul{ animation-name: roll-rtl; }
@keyframes roll{ to{ transform: translateX(-50%); } }
@keyframes roll-rtl{ to{ transform: translateX(50%); } }
.marquee:hover ul{ animation-play-state: paused; }
.marquee li{
  font-family:var(--f-data); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap; display:flex; align-items:center; gap:44px;
}
:root[lang="ckb"] .marquee li{ font-family:var(--f-ckb); text-transform:none; letter-spacing:0; }
.marquee li::after{ content:""; width:4px; height:4px; border-radius:50%; background:var(--accent); flex:none; }

/* service cards */
.cards{ display:grid; gap:13px; margin-top:22px; grid-template-columns:1fr; }
@media (min-width:720px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .cards.three{ grid-template-columns:repeat(3,1fr); } }
.card{ padding:20px; display:flex; flex-direction:column; gap:10px; }
.ico{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:none;
  background: linear-gradient(160deg, rgba(111,176,245,.3), rgba(57,135,229,.12));
  border:1px solid var(--glass-edge); color:var(--accent-pale); margin-bottom:6px;
}
.card p{ color:var(--ink-2); font-size:.98rem; }
.card .more{
  margin-top:auto; padding-top:14px; font-size:.87rem; font-weight:600; color:var(--accent-lift);
  display:inline-flex; align-items:center; gap:7px;
}
.card .more svg{ transition: transform .25s var(--ease); }
.card:hover .more svg{ transform: translateX(4px); }
:root[dir="rtl"] .card .more svg{ transform: scaleX(-1); }
:root[dir="rtl"] .card:hover .more svg{ transform: scaleX(-1) translateX(4px); }

.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; padding:0; list-style:none; }
.tags li{
  font-family:var(--f-data); font-size:.72rem; padding:4px 11px; border-radius:999px;
  border:1px solid var(--hair); color:var(--ink-3); background:rgba(255,255,255,.03);
}
:root[lang="ckb"] .tags li{ font-family:var(--f-ckb); font-size:.8rem; }

/* standards list */
.standards{ margin-top:20px; border-top:1px solid var(--hair-2); }
.std{ display:grid; gap:4px 26px; padding-block:14px; border-bottom:1px solid var(--hair-2); }
@media (min-width:700px){ .std{ grid-template-columns:16rem 1fr; align-items:baseline; } }
.std dt{ font-weight:600; }
.std dd{ margin:0; color:var(--ink-2); font-size:.98rem; }

/* numbered process rail */
.rail{ display:grid; gap:0 26px; margin-top:22px;
       grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.step{ border-top:1px solid var(--hair); padding-block:16px 20px; position:relative; }
.step::before{
  content:""; position:absolute; top:-4px; inset-inline-start:0;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 12px rgba(57,135,229,.9);
}
.step .n{ font-family:var(--f-data); font-size:.72rem; letter-spacing:.16em;
          color:var(--accent-lift); display:block; margin-bottom:7px; }
.step p{ color:var(--ink-2); font-size:.93rem; line-height:1.55; margin-top:5px; }

/* a full-width reading panel — same glass, but text runs from the start edge */
.panel{ padding: clamp(22px,3.5vw,38px) clamp(20px,3vw,34px); border-radius:var(--r-xl); }
.panel h2{ margin-top:14px; max-width:26ch; }
.panel .lede{ max-width:64ch; }
.panel .ico{ margin-bottom:4px; }

/* closing call to action */
.cta{ padding: clamp(26px,4vw,44px) clamp(20px,3vw,36px); text-align:center; border-radius:var(--r-xl); }
.cta h2{ margin-inline:auto; max-width:20ch; }
.cta .lede{ margin-inline:auto; text-align:center; }
.cta .btn-row{ justify-content:center; }
.tel{
  display:inline-block; margin-top:22px; font-family:var(--f-data);
  font-size:1.05rem; letter-spacing:.04em; direction:ltr;
  border-bottom:1px solid rgba(57,135,229,.55); padding-bottom:3px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.tel:hover{ border-color:var(--accent-lift); color:var(--accent-pale); }

/* footer */
footer{ padding-block:30px 40px; border-top:1px solid var(--hair-2); margin-top:20px; }
.foot{ display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-start; }
.foot a{ color:var(--ink-2); transition:color .2s var(--ease); }
.foot a:hover{ color:var(--ink); }
.foot nav{ display:flex; flex-wrap:wrap; gap:18px; font-size:.92rem; }
.foot .legal{ color:var(--ink-3); font-size:.82rem; max-width:40ch; margin-top:16px; }
.foot .dom{ font-family:var(--f-data); letter-spacing:.08em; color:var(--ink-2); direction:ltr; }

/* ============================================================================
   8. CROSS-PAGE VIEW TRANSITIONS
   ========================================================================== */

@view-transition{ navigation: auto; }
::view-transition-old(root){ animation: vt-out .28s var(--ease) both; }
::view-transition-new(root){ animation: vt-in .42s var(--ease) both; }
@keyframes vt-out{ to{ opacity:0; transform: translateY(-10px); } }
@keyframes vt-in{ from{ opacity:0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}

@media (prefers-reduced-motion: reduce){
  .bg i,.streaks i,.marquee ul,.floaters .card,.shine{ animation:none !important; }
  .streaks{ display:none; }
  *{ transition-duration:.01ms !important; }
}