/* ==========================================================================
   PK116 - pk116.asia
   Direction: "Lit Gates". Everything lives between two hard turquoise rules,
   so the page reads as a stack of lit gates rather than a stack of cards.
   Palette locked to the client reference pk116app.com.pk.
   Authored with logical properties throughout. The whole site is dir="ltr":
   the source DOCX are LTR paragraphs carrying RTL (Arabic-script) runs, with
   zero w:bidi and zero w:jc="right", so the pages follow the source.
   ========================================================================== */

:root{
  /* --- brand, from the reference + the wordmark ------------------------- */
  --brand:#00E6CC;
  --brand-dark:#00A392;
  --brand-light:#6BFFEE;
  --brand-ink:#04221E;              /* text that sits ON a turquoise fill */

  --accent:#FCF86C;                 /* lemon: the only thing that glows */
  --accent-gloss:linear-gradient(180deg,#FFFEC9 0%,#FCF86C 48%,#E6DF2B 100%);
  --accent-ink:#15180B;             /* text that sits ON lemon */
  --accent-warm:#F76A0C;            /* rationed: highlight marker only */
  --accent-soft:rgba(252,248,108,.13);

  /* --- ground ----------------------------------------------------------- */
  --bg:#0E131C;
  --bg-card:#161D29;
  --bg-elevated:#1E2634;
  --bg-panel:#121823;
  --bg-deep:#090D14;                /* header + footer chrome */

  /* --- text ------------------------------------------------------------- */
  --text:#E8EDF4;
  --text-muted:#A3AFC0;
  --text-dim:#808DA3;
  --text-on-dark:#F7FAFD;

  /* --- lines ------------------------------------------------------------ */
  --border:rgba(255,255,255,.085);
  --border-strong:rgba(0,230,204,.34);
  --border-soft:rgba(255,255,255,.045);

  /* --- type ------------------------------------------------------------- */
  --font-urdu:'Noto Nastaliq Urdu',serif;
  --font-ui:'Noto Sans Arabic','Chivo',system-ui,sans-serif;
  --font-latin:'Chivo',system-ui,sans-serif;
  --font-body:var(--font-urdu);
  --font-heading:var(--font-urdu);

  /* --- shape: buttons are pills, cards 18px, inputs 8px ----------------- */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --card-radius:18px;

  /* --- depth: shadows tinted to the ground, never pure black ------------ */
  --shadow-soft:0 6px 18px rgba(4,10,18,.42);
  --shadow-card:0 14px 34px rgba(4,10,18,.52), 0 2px 6px rgba(0,0,0,.28);
  --shadow-card-hover:0 22px 52px rgba(4,10,18,.62), 0 0 0 1px var(--border-strong);
  --shadow-cta:0 12px 28px rgba(252,248,108,.20);

  /* --- measure ---------------------------------------------------------- */
  --container:1200px;
  --container-wide:1320px;
  --header-top-h:2.25rem;
  --header-main-h:4.5rem;
  --header-h:calc(var(--header-top-h) + var(--header-main-h));
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:2.05;                 /* Nastaliq needs the air */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* the mirror is Latin: tighter leading, Chivo everywhere */
[lang="en"] body,body[data-locale="en"]{
  --font-body:var(--font-latin);
  --font-heading:var(--font-latin);
  --font-ui:var(--font-latin);
  line-height:1.72;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-light)}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;margin:0;color:var(--text-on-dark)}
p{margin:0 0 1.15rem}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}

/* numerals and Latin tokens inside Urdu prose keep Chivo */
.num,.lat{font-family:var(--font-latin);font-feature-settings:"tnum" 1}

/* park the skip link with transform, never a negative offset (RTL overflow) */
.skip-link{
  position:fixed;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:200;
  background:var(--accent);color:var(--accent-ink);font-family:var(--font-ui);
  font-size:.85rem;font-weight:700;padding:.6rem 1.1rem;border-radius:var(--r-pill);
  transform:translateY(-180%);transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0)}

/* --------------------------------------------------------------------------
   THE WIDTH LAW (D1): one pair of guide lines down the whole page.
   The container cap is the ONLY max-width on this site.
   -------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 1.5rem}

/* --------------------------------------------------------------------------
   THE GATE RULE - the site's signature ornament.
   A 3px turquoise bar with a lemon square cap. Kicker mark, list bullet,
   card top stripe, footer column bar, divider anchor. One glyph, five jobs.
   -------------------------------------------------------------------------- */
.gate-rule{display:block;inline-size:58px;block-size:3px;background:var(--brand);position:relative;border-radius:1px}
.gate-rule::after{content:"";position:absolute;inset-block-start:-2px;inset-inline-start:0;inline-size:7px;block-size:7px;background:var(--accent)}

/* ==========================================================================
   HEADER - sticky, two rows, both dark (the wordmark is light-on-transparent)
   ========================================================================== */
.site-header{position:sticky;inset-block-start:0;z-index:90;background:var(--bg-deep);transition:box-shadow .25s ease}
.site-header.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.55)}

.header-top{background:#05080D;border-block-end:1px solid var(--border-soft);font-family:var(--font-ui)}
.header-top .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-block-size:var(--header-top-h)}
.trust-line{display:flex;align-items:center;gap:.5rem;font-size:.74rem;color:var(--text-muted);letter-spacing:.01em}
.trust-dot{inline-size:7px;block-size:7px;border-radius:50%;background:var(--accent);flex:none}
@media (prefers-reduced-motion:no-preference){
  .trust-dot{animation:dotPulse 2.4s ease-in-out infinite}
  @keyframes dotPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(252,248,108,.55)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(252,248,108,0)}}
}
.util-nav{display:flex;align-items:center;gap:1.25rem}
.util-nav a{color:var(--text-muted);font-size:.76rem}
.util-nav a:hover{color:var(--brand-light)}

.header-main .container{display:flex;align-items:center;gap:1.5rem;min-block-size:var(--header-main-h)}
.brand-link{display:flex;align-items:center;flex:none}
.brand-link img{block-size:42px;inline-size:auto;object-fit:contain}
@media (max-width:560px){.brand-link img{block-size:34px}}

.primary-nav{margin-inline-start:auto;position:relative}
.nav-list{display:flex;align-items:center;gap:1.45rem;font-family:var(--font-ui)}
.nav-list a{color:var(--text);font-size:.86rem;font-weight:500;white-space:nowrap;padding-block:.35rem;display:block}
.nav-list a:hover,.nav-list a.active{color:var(--brand)}
.nav-indicator{position:absolute;inset-block-end:-2px;block-size:3px;background:var(--brand);inline-size:0;opacity:0;transition:all .3s cubic-bezier(.16,1,.3,1);pointer-events:none;border-radius:2px}
@media (prefers-reduced-motion:reduce){.nav-indicator{transition:none}}

.cta-pill{
  font-family:var(--font-ui);font-size:.85rem;font-weight:700;
  padding:.7rem 1.5rem;border-radius:var(--r-pill);
  background:var(--accent-gloss);color:var(--accent-ink);
  box-shadow:var(--shadow-cta);border:0;cursor:pointer;flex:none;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease;
}
.cta-pill:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(252,248,108,.3);color:var(--accent-ink)}
.cta-pill:active{transform:translateY(0) scale(.98)}
.header-cta{margin-inline-start:.25rem}

.burger{display:none;flex:none;inline-size:44px;block-size:44px;background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;inset-inline:11px;block-size:2px;background:var(--text);transition:transform .25s ease,opacity .2s ease}
.burger span:nth-child(1){inset-block-start:15px}
.burger span:nth-child(2){inset-block-start:21px}
.burger span:nth-child(3){inset-block-start:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   HERO - "THE GATE BAND" (invented archetype)
   The headline stands outside the gate; the invitation sits inside it.
   Row 1: kicker + H1 on the page ground, full container measure.
   Row 2: an art band clamped by two 3px turquoise rules, carrying the lede
          and both CTAs on a scrim, with the trophy straddling the far rule.
   Row 3: the stat strip, in normal flow, pulled up over the closing rule.
   Nothing depends on where the Urdu headline wraps, so it survives RTL.
   ========================================================================== */
.hero{padding-block-start:3.25rem;position:relative;overflow-x:clip;overflow-y:visible}
.hero > .container{position:relative;z-index:1}
.hero::before{
  content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-18%;
  inline-size:60vw;block-size:60vw;max-inline-size:760px;max-block-size:760px;
  background:radial-gradient(circle,rgba(0,230,204,.14) 0%,rgba(0,230,204,0) 68%);
  pointer-events:none;z-index:0;
}
.hero .container{position:relative;z-index:1}

.hero-kicker{display:flex;align-items:center;gap:.8rem;font-family:var(--font-ui);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-block-end:1.1rem}
.hero h1{
  font-size:clamp(1.9rem,1.15rem + 3.2vw,3.35rem);
  line-height:1.75;                 /* Nastaliq: never tighter */
  margin-block-end:1.6rem;
  letter-spacing:0;
}
[lang="en"] .hero h1{line-height:1.12;font-weight:900;letter-spacing:-.02em}
/* keep the headline clear of the trophy, which stands on the inline-end side
   of the gate in both directions. Desktop only: the trophy is hidden below 560. */
@media (min-width:901px){ .hero h1{padding-inline-end:168px} }

/* D3.3 - exactly one accent word, with a translucent underline marker.
   Nastaliq has no italic and a synthetic oblique is illegible, so on the
   Urdu tree the accent is carried by colour + the marker alone. The /en/
   mirror uses Chivo's true italic, with descender clearance. */
.highlight{
  color:var(--brand);
  background-image:linear-gradient(rgba(0,230,204,.17),rgba(0,230,204,.17));
  background-size:100% .5em;
  background-position:0 64%;
  background-repeat:no-repeat;
  padding:0 .12em;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}
/* the Latin mirror can carry the true italic and a real underline marker */
[lang="en"] .highlight{
  font-style:italic;line-height:1.1;padding-block-end:.1em;
  background:linear-gradient(to top,rgba(0,230,204,.22) 0 .34em,transparent .34em);
}

/* ---- the gate band ---- */
/* The band sits INSIDE the container, so its two turquoise rules land exactly
   on the page's guide lines rather than running past them (D1). The copy is a
   grid TRACK, not a capped card, so it fills its column edge to edge. */
.gate-band{
  position:relative;
  border-block-start:3px solid var(--brand);
  border-block-end:3px solid var(--brand);
  background:var(--bg-panel);
  min-block-size:360px;display:flex;align-items:flex-end;
  isolation:isolate;
}
.gate-band__art{position:absolute;inset:0;z-index:0;overflow:hidden}
.gate-band__art img{inline-size:100%;block-size:100%;object-fit:cover}
.gate-band__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right,rgba(14,19,28,.94) 0%,rgba(14,19,28,.78) 46%,rgba(14,19,28,.24) 80%,rgba(14,19,28,.1) 100%),
    linear-gradient(to top,rgba(9,13,20,.86) 0%,rgba(9,13,20,0) 55%);
}
.gate-band__inner{
  position:relative;z-index:2;inline-size:100%;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  padding:2.6rem 2rem 5.6rem;
}
.gate-band__copy{grid-column:1}
.gate-band__lede{font-size:1.02rem;color:var(--text);margin-block-end:1.7rem;line-height:2.1}
[lang="en"] .gate-band__lede{line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* three CTA variants, one intent each */
.btn{font-family:var(--font-ui);font-size:.9rem;font-weight:700;border-radius:var(--r-pill);padding:.85rem 1.75rem;display:inline-block;border:0;cursor:pointer;line-height:1.5;text-align:center;transition:transform .18s ease,box-shadow .18s ease,background .2s ease,color .2s ease;white-space:nowrap}
.btn:active{transform:translateY(0) scale(.98)}
.btn--primary{background:var(--accent-gloss);color:var(--accent-ink);box-shadow:var(--shadow-cta)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(252,248,108,.3);color:var(--accent-ink)}
.btn--outline{background:rgba(14,19,28,.55);color:var(--brand-light);box-shadow:inset 0 0 0 2px var(--brand)}
.btn--outline:hover{background:var(--brand);color:var(--brand-ink);transform:translateY(-2px)}
.btn--plate{background:var(--bg-elevated);color:var(--text);border-block-end:3px solid var(--brand);border-radius:var(--r-md)}
.btn--plate:hover{background:#273145;color:var(--text);transform:translateY(-2px)}

/* ---- the trophy cup: pure CSS, straddling the gate's opening rule ----
   The bowl is a border-radius shape, NOT a clip-path: clip-path on the cup
   would also clip its own ::before/::after, which is what hides the handles.
   Handles use PHYSICAL sides, so the symmetric composition does not mirror
   itself when the document direction flips. */
.trophy{
  position:absolute;z-index:3;inset-block-start:-96px;inset-inline-end:6%;
  inline-size:122px;pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(4,10,18,.6));
}
.trophy::before{                       /* the lip */
  content:"";display:block;inline-size:100px;block-size:10px;margin:0 auto;
  background:var(--accent-gloss);border-radius:4px 4px 2px 2px;
}
.trophy__cup{
  position:relative;inline-size:80px;block-size:62px;margin:0 auto;
  background:var(--accent-gloss);
  border-radius:0 0 46% 46% / 0 0 80% 80%;
}
.trophy__cup::before,.trophy__cup::after{   /* the handles */
  content:"";position:absolute;top:0;width:28px;height:40px;
  border:6px solid var(--brand);border-radius:50%;
}
.trophy__cup::before{left:-24px;border-right-color:transparent}
.trophy__cup::after{right:-24px;border-left-color:transparent}
.trophy__stem{inline-size:15px;block-size:17px;margin:0 auto;background:var(--brand-dark)}
.trophy__base{inline-size:54px;block-size:9px;margin:0 auto;background:var(--brand);border-radius:0 0 3px 3px}
.trophy__plinth{
  inline-size:98px;block-size:18px;margin:3px auto 0;
  background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:4px;
}
@media (prefers-reduced-motion:no-preference){
  .trophy{animation:trophyFloat 7s ease-in-out infinite}
  @keyframes trophyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
}

/* ==========================================================================
   STAT STRIP - normal flow, pulled up. Never absolute (absolute clips).
   ========================================================================== */
.stat-strip{position:relative;z-index:4;margin-block-start:-3.25rem;margin-block-end:3.5rem}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.stat-tile{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--card-radius);padding:1.3rem 1.25rem;box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.stat-tile::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:5px;background:linear-gradient(90deg,var(--brand),var(--accent))}
.stat-tile b{display:block;font-family:var(--font-latin);font-size:1.65rem;font-weight:900;color:var(--brand);line-height:1.15;margin-block-end:.3rem;font-feature-settings:"tnum" 1}
.stat-tile span{display:block;font-family:var(--font-ui);font-size:.8rem;color:var(--text-muted);line-height:1.6}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{padding-block:3.4rem}
.section--panel{background:var(--bg-panel)}
.section-head{margin-block-end:2.1rem}
.section-head .gate-rule{margin-block-end:1.1rem}
.section-kicker{display:block;font-family:var(--font-ui);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-block-end:.7rem}
.section h2{font-size:clamp(1.4rem,1.05rem + 1.4vw,2.1rem);line-height:1.85;margin-block-end:.85rem}
[lang="en"] .section h2{line-height:1.2}
.section-sub{color:var(--text-muted);margin:0}

/* ---- intro block (R8: every lede after the first) ---- */
.intro-block{background:var(--bg-card);border:1px solid var(--border);border-inline-start:4px solid var(--brand);border-radius:var(--card-radius);padding:1.6rem 1.8rem;margin-block-end:2.2rem;box-shadow:var(--shadow-soft)}
.intro-block p:last-child{margin-block-end:0}

/* ---- card chrome: 5px gradient stripe + italic watermark ---- */
.card{
  position:relative;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--card-radius);box-shadow:var(--shadow-card);overflow:hidden;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease;
}
.card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:5px;background:linear-gradient(90deg,var(--brand),var(--accent));z-index:1}
.card::after{
  content:"116";position:absolute;inset-block-end:.1rem;inset-inline-end:.7rem;
  font-family:var(--font-latin);font-style:italic;font-weight:900;font-size:3.6rem;
  line-height:1;color:rgba(255,255,255,.028);pointer-events:none;transition:color .25s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover)}
.card:hover::after{color:rgba(0,230,204,.075)}

/* ---- plain-card (paragraphs only) ---- */
.plain-card{padding:2rem 2.1rem}
.plain-card p:last-child{margin-block-end:0}

/* ---- floor grid (R3 column count follows item count) ---- */
.floor-grid{display:grid;gap:1.25rem}
.floor-grid--cols-1{grid-template-columns:minmax(0,1fr)}
.floor-grid--cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.floor-grid--cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.floor-grid--cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.floor-tile{padding:1.7rem 1.75rem}
.floor-tile h3{font-size:1.1rem;line-height:1.9;margin-block-end:.7rem;color:var(--text-on-dark)}
[lang="en"] .floor-tile h3{line-height:1.3}
.floor-tile p:last-child{margin-block-end:0}
.floor-tile p{color:var(--text-muted)}

/* ---- R4b rich tiles: 1 column, generous padding, NO inner max-width ---- */
.floor-grid--rich{grid-template-columns:minmax(0,1fr);gap:1.4rem}
.floor-grid--rich .floor-tile{padding:2.4rem}
.floor-grid--rich .floor-tile h3{font-size:1.25rem;margin-block-end:1rem}
.rich-kicker{
  display:block;font-family:var(--font-ui);font-size:.74rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand);
  border-block-start:2px solid var(--brand);padding-block-start:.85rem;margin-block:1.4rem .8rem;
}
.rich-list{display:grid;gap:.8rem;margin-block-start:1.1rem}
.rich-list li{
  position:relative;background:var(--bg);border:1px solid var(--border-soft);
  border-radius:var(--r-md);padding:1rem 1.15rem 1rem 1.45rem;
  padding-inline-start:1.45rem;color:var(--text-muted);overflow:hidden;
}
.rich-list li::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:3px;background:linear-gradient(180deg,var(--brand),var(--accent))}

/* ---- feature check list ---- */
.feature-check-list{display:grid;gap:.9rem}
.feature-check-list li{display:flex;align-items:flex-start;gap:.9rem;color:var(--text-muted)}
.feature-check-list--plain{
  background:linear-gradient(135deg,rgba(252,248,108,.07),rgba(0,230,204,.05));
  border:1px solid var(--border);border-inline-start:4px solid var(--accent);
  border-radius:var(--card-radius);padding:1.9rem 2rem;
}
.check-tick{position:relative;flex:none;inline-size:24px;block-size:24px;margin-block-start:.5rem;border-radius:50%;background:var(--accent-gloss)}
.check-tick::after{content:"";position:absolute;inset-block-start:7px;inset-inline-start:8px;inline-size:6px;block-size:11px;border:solid var(--accent-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* ---- split layout (list + paragraphs + an image) ---- */
.split-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2rem;align-items:center}
.split-layout__media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--border)}
.split-layout__media img{inline-size:100%;aspect-ratio:16/9;object-fit:cover}
.split-layout__body p{color:var(--text-muted)}

/* ---- R5b image divider: a contained figure, never a full-bleed strip ---- */
.image-divider{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:1.5rem;align-items:stretch;margin-block:2.6rem}
.image-divider__card{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--border)}
.image-divider__card img{inline-size:100%;block-size:100%;aspect-ratio:4/3;object-fit:cover}
.image-divider__aside{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:1.9rem;display:flex;flex-direction:column;justify-content:center;gap:.9rem;
}
.image-divider__aside .gate-rule{margin-block-end:.3rem}
.image-divider__kicker{font-family:var(--font-ui);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.image-divider__aside h3{font-size:1.1rem;line-height:1.85;color:var(--text-on-dark)}
[lang="en"] .image-divider__aside h3{line-height:1.3}

/* ---- page meta ---- */
.page-meta{font-family:var(--font-ui);font-size:.8rem;color:var(--text-dim);margin-block:1.5rem 0}
.page-meta-author{color:var(--text-muted)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{display:grid;gap:.85rem}
.faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--card-radius);overflow:hidden;transition:box-shadow .22s ease,border-color .22s ease}
.faq-item[open]{box-shadow:var(--shadow-card);border-color:var(--border-strong)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1rem;
  padding:1.25rem 1.5rem;font-weight:700;color:var(--text-on-dark);font-size:1rem;line-height:1.9;
}
[lang="en"] .faq-item summary{line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{
  flex:none;inline-size:26px;block-size:26px;margin-block-start:.35rem;border-radius:50%;
  background:var(--accent-gloss);position:relative;transition:transform .25s ease;
}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;background:var(--accent-ink);transform:translate(-50%,-50%)}
.faq-icon::before{inline-size:12px;block-size:2.5px}
.faq-icon::after{inline-size:2.5px;block-size:12px;transition:opacity .25s ease}
.faq-item[open] .faq-icon{transform:rotate(180deg)}
.faq-item[open] .faq-icon::after{opacity:0}
.faq-answer{padding:0 1.5rem 1.4rem;color:var(--text-muted)}
.faq-answer p:last-child{margin-block-end:0}
@media (prefers-reduced-motion:reduce){.faq-icon{transition:none}}

/* ==========================================================================
   HOME - six bespoke sections
   ========================================================================== */
.home-intro__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:1.6rem;align-items:start}
.home-intro__pull{background:var(--bg-deep);border:1px solid var(--border-strong);border-radius:var(--card-radius);padding:1.9rem;position:relative;overflow:hidden}
.home-intro__pull p{color:var(--text);margin-block-end:0}
.home-intro__pull .gate-rule{margin-block-end:1.1rem}

/* bento game floor: one lead tile + three */
.bento-floor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.bento-floor .floor-tile:first-child{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end}
.bento-floor .floor-tile:first-child h3{font-size:1.35rem}

/* secure: 4-up with a lit rule */
.security-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.security-cell{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--card-radius);padding:1.6rem 1.5rem;position:relative;overflow:hidden}
.security-cell .gate-rule{margin-block-end:1rem}
.security-cell h3{font-size:1rem;line-height:1.85;margin-block-end:.55rem}
[lang="en"] .security-cell h3{line-height:1.35}
.security-cell p{font-size:.92rem;color:var(--text-muted);margin-block-end:0}

/* rewards bento: welcome card top-start, VIP strip spanning the bottom */
.rewards-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.rewards-bento .r-welcome{grid-column:span 2}
.rewards-bento .r-strip{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem}
.rewards-bento .r-strip .btn{flex:none}

/* support: editorial card with an oversized italic watermark */
.support-card{position:relative;background:var(--bg-deep);border:1px solid var(--border-strong);border-radius:var(--r-xl);padding:2.6rem;overflow:hidden}
.support-card::after{
  content:"PK116";position:absolute;inset-block-end:-1.6rem;inset-inline-end:1rem;
  font-family:var(--font-latin);font-style:italic;font-weight:900;font-size:clamp(4rem,11vw,8.5rem);
  line-height:1;color:rgba(0,230,204,.05);pointer-events:none;white-space:nowrap;
}
.support-card__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin-block-start:1.6rem}
.support-cell{background:rgba(255,255,255,.028);border:1px solid var(--border);border-radius:var(--r-md);padding:1.3rem 1.4rem}
.support-cell h3{font-size:.98rem;line-height:1.85;margin-block-end:.5rem}
[lang="en"] .support-cell h3{line-height:1.35}
.support-cell p{font-size:.92rem;color:var(--text-muted);margin-block-end:0}

/* payments pills */
.pay-pills{display:flex;flex-wrap:wrap;gap:.65rem;margin-block-start:1.2rem}
.pay-pill{font-family:var(--font-ui);font-size:.8rem;font-weight:600;color:var(--text);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-pill);padding:.5rem 1.05rem}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--bg-deep);margin-block-start:4rem;padding-block-end:1.5rem}
.footer-cta{
  position:relative;background:var(--accent-gloss);color:var(--accent-ink);
  border-radius:var(--r-xl);padding:2.4rem 2.6rem;margin-block-start:-3rem;
  box-shadow:0 22px 52px rgba(0,0,0,.5);overflow:hidden;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
}
.footer-cta::after{
  content:"PK116";position:absolute;inset-block-end:-2rem;inset-inline-start:1rem;
  font-family:var(--font-latin);font-style:italic;font-weight:900;font-size:clamp(4rem,12vw,9rem);
  line-height:1;color:rgba(21,24,11,.075);pointer-events:none;white-space:nowrap;
}
.footer-cta__text{position:relative;z-index:1;flex:1 1 20rem}
.footer-cta h2{color:var(--accent-ink);font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem);line-height:1.8;margin-block-end:.5rem}
[lang="en"] .footer-cta h2{line-height:1.2}
.footer-cta p{color:rgba(21,24,11,.82);margin-block-end:0}
.footer-cta .btn{position:relative;z-index:1;background:var(--bg-deep);color:var(--accent);box-shadow:none}
.footer-cta .btn:hover{background:#000;color:var(--accent);transform:translateY(-2px)}

.footer-map{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem;padding-block:3rem 2.2rem}
.footer-brand img{block-size:40px;inline-size:auto;object-fit:contain;margin-block-end:1.1rem}
.footer-brand p{color:var(--text-muted);font-size:.92rem}
.footer-col h3{font-family:var(--font-ui);font-style:italic;font-size:.95rem;color:var(--text-on-dark);margin-block-end:.4rem}
.footer-col .gate-rule{margin-block-end:1rem}
.footer-col ul{display:grid;gap:.6rem}
.footer-col a{color:var(--text-muted);font-size:.9rem}
.footer-col a:hover{color:var(--brand)}
.trust-pills{display:flex;flex-wrap:wrap;gap:.6rem;padding-block:1.4rem;border-block-start:1px solid var(--border-soft)}
.trust-pills span{font-family:var(--font-ui);font-size:.75rem;color:var(--text-muted);background:rgba(255,255,255,.03);border:1px solid var(--border-soft);border-radius:var(--r-pill);padding:.4rem .9rem}
.footer-base{border-block-start:1px solid var(--border-soft);padding-block-start:1.3rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center}
.footer-base p{font-family:var(--font-ui);font-size:.78rem;color:var(--text-dim);margin:0;line-height:1.8}

/* ==========================================================================
   404
   ========================================================================== */
.error-page{padding-block:5rem 3rem;text-align:center}
.error-code{font-family:var(--font-latin);font-style:italic;font-weight:900;font-size:clamp(8vw,8vw,22vw);line-height:.9;background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-block-end:1rem;padding-block-end:.06em}
.error-page .hero-actions{justify-content:center}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-mission{font-size:1.06rem;color:var(--text)}
.editorial-block{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--card-radius);padding:2.1rem 2.2rem;box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.editorial-block::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:5px;background:linear-gradient(90deg,var(--brand),var(--accent))}
.editorial-block dl{display:grid;gap:1rem;margin:1.4rem 0 0}
.editorial-block dt{font-family:var(--font-ui);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-block-end:.3rem}
.editorial-block dd{margin:0;color:var(--text-muted)}

/* ==========================================================================
   REVEAL - content is visible in CSS; JS only hides what starts below the
   fold, so a slow or failed observer can never blank the page.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .reveal.is-hidden{opacity:0;transform:translateY(22px)}
  .reveal{transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width:1100px){
  .footer-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
  .security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-list{gap:1.05rem}
  .nav-list a{font-size:.82rem}
}
@media (max-width:900px){
  .burger{display:block}
  .primary-nav{
    position:fixed;inset:0;z-index:95;background:rgba(5,8,13,.97);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    margin:0;padding:6rem 1.5rem 2rem;
    visibility:hidden;opacity:0;transform:translateY(-14px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s;
  }
  body.nav-open .primary-nav{visibility:visible;opacity:1;transform:translateY(0)}
  body.nav-open{overflow:hidden}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list li{border-block-end:1px solid var(--border-soft)}
  .nav-list a{font-size:1.05rem;padding:1.05rem .25rem}
  .nav-indicator{display:none}
  .header-cta{display:none}
  .burger{margin-inline-start:auto;z-index:96}
  .floor-grid--cols-3,.floor-grid--cols-4,.bento-floor,.rewards-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-floor .floor-tile:first-child,.rewards-bento .r-welcome{grid-column:span 2;grid-row:auto}
  .split-layout,.image-divider,.home-intro__grid{grid-template-columns:minmax(0,1fr)}
  .image-divider__card img{aspect-ratio:16/9}
  .gate-band{min-block-size:0}
  .gate-band__inner{grid-template-columns:minmax(0,1fr);padding:2.2rem 1.5rem 5.2rem}
  .trophy{inline-size:100px;inset-inline-end:5%;inset-block-start:-80px}
  .trophy::before{inline-size:82px}
  .trophy__cup{inline-size:66px;block-size:50px}
  .trophy__cup::before,.trophy__cup::after{width:22px;height:32px;border-width:5px}
  .trophy__cup::before{left:-19px}
  .trophy__cup::after{right:-19px}
  .trophy__base{inline-size:46px}
  .trophy__plinth{inline-size:82px}
  .trophy__cup{inline-size:72px;block-size:54px}
  .trophy__base{inline-size:76px}
  .trophy__plinth{inline-size:98px}
}
@media (max-width:700px){
  .util-nav{gap:.9rem}
  .util-nav a{font-size:.72rem}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .support-card__grid{grid-template-columns:minmax(0,1fr)}
  .footer-cta{padding:2rem}
  .section{padding-block:2.6rem}
}
@media (max-width:560px){
  .container{padding:0 1.15rem}
  .floor-grid--cols-2,.floor-grid--cols-3,.floor-grid--cols-4,
  .bento-floor,.rewards-bento,.security-grid,.footer-map{grid-template-columns:minmax(0,1fr)}
  .bento-floor .floor-tile:first-child,.rewards-bento .r-welcome,.rewards-bento .r-strip{grid-column:auto}
  .trust-line{display:none}
  .header-top .container{justify-content:center}
  .floor-grid--rich .floor-tile{padding:1.6rem}
  .plain-card{padding:1.6rem}
  .support-card{padding:1.8rem}
  .hero{padding-block-start:2.2rem}
  .trophy{display:none}
  .gate-band__inner{padding:2rem 1.15rem 4.8rem}
}
@media (max-width:480px){
  .stat-grid{grid-template-columns:minmax(0,1fr)}
  .hero-actions .btn{inline-size:100%;text-align:center}
  .footer-base{justify-content:flex-start}
}