/* ===================================================================
   PiHunter — 2026 refresh (loaded last on every page)
   1) Lahzeh typography tuning (both themes)
   2) Light theme redesign — the primary theme. Clean white canvas,
      soft elevation, navy ink, AA-contrast brand green.
   3) Mobile pass — denser rhythm, real touch targets, simpler menu.
   Everything here is token-driven; dark theme only receives the
   typography + mobile layout parts.
   =================================================================== */

/* ---------- 1. TYPOGRAPHY (Lahzeh) ---------- */
body{ font-family:var(--font-fa); font-weight:400; font-feature-settings:"kern"; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,h5{ letter-spacing:0; }               /* negative tracking breaks Persian joins */
.hero-copy h1,.page-hero h1,.hero-copy .hero-tagline{ letter-spacing:0; }
.section-head h2,.cta-card h2,.order-pitch h2{ font-weight:800; line-height:1.35; }
.prose h2,.prose h3{ line-height:1.5; }
.btn,.seg button,.faq-q,.field input,.field textarea,.field select,.shop-filters a,.shop-filters button,.tag.fa{ font-family:var(--font-fa); }
.btn{ font-weight:600; }
.lede,.section-head p,.prose > p{ font-weight:400; }

/* ===================================================================
   2. LIGHT THEME
   =================================================================== */
:root[data-theme="light"] body{ background:var(--bg); color:var(--ink); }
:root[data-theme="light"] body::before{
  opacity:.5;
  background-size:56px 56px,56px 56px;
  -webkit-mask-image:radial-gradient(90% 46% at 50% 0%, #000 0%, transparent 72%);
          mask-image:radial-gradient(90% 46% at 50% 0%, #000 0%, transparent 72%);
}
:root[data-theme="light"] ::selection{ background:oklch(0.5 0.12 158 / .18); color:var(--ink); }

/* --- nav --- */
:root[data-theme="light"] .nav{ background:var(--nav-bg); border-bottom-color:var(--line); }
:root[data-theme="light"] .nav.scrolled{ border-bottom-color:var(--line); box-shadow:0 6px 24px -14px rgb(15 23 42 / .18); }
:root[data-theme="light"] .nav-links a{ color:oklch(0.36 0.03 258); }
:root[data-theme="light"] .nav-links a:hover{ color:var(--ink); background:var(--bg-2); }
:root[data-theme="light"] .nav-links a.current{ color:var(--accent); background:var(--accent-soft); }
:root[data-theme="light"] .brand .emblem{ filter:none; }
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .nav-burger{ background:#fff; border-color:var(--line-2); color:var(--ink); }
:root[data-theme="light"] .theme-toggle:hover{ background:var(--bg-1); }

/* --- buttons --- */
:root[data-theme="light"] .btn-primary{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 1px 1px rgb(0 60 30 / .12), 0 8px 20px -10px oklch(0.5 0.12 158 / .7);
}
:root[data-theme="light"] .btn-primary:hover{ background:oklch(0.45 0.115 158); border-color:oklch(0.45 0.115 158); box-shadow:0 0 0 4px var(--accent-soft), 0 10px 24px -10px oklch(0.5 0.12 158 / .8); }
:root[data-theme="light"] .btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); box-shadow:var(--shadow-sm); }
:root[data-theme="light"] .btn-ghost:hover{ color:var(--accent); border-color:var(--accent-line); background:#fff; }
:root[data-theme="light"] :where(a,button,input,textarea,select,[tabindex]):focus-visible{ outline:3px solid oklch(0.5 0.12 158 / .45); }

/* --- labels / chips --- */
:root[data-theme="light"] .eyebrow{ color:var(--accent); font-weight:600; }
:root[data-theme="light"] .eyebrow::before{ background:var(--accent); opacity:.5; }
:root[data-theme="light"] .tag{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); font-weight:600; }

/* --- surfaces: cards get iranserver-style soft elevation --- */
:root[data-theme="light"] .card,
:root[data-theme="light"] .order-card,
:root[data-theme="light"] .news-card,
:root[data-theme="light"] .intent-card,
:root[data-theme="light"] .service-guide,
:root[data-theme="light"] .member,
:root[data-theme="light"] .toc,
:root[data-theme="light"] .author-box,
:root[data-theme="light"] .contact-card,
:root[data-theme="light"] .info-item,
:root[data-theme="light"] .proof-wall,
:root[data-theme="light"] .stats,
:root[data-theme="light"] .bb-card,
:root[data-theme="light"] .exp,
:root[data-theme="light"] .case,
:root[data-theme="light"] .operator{
  background:var(--card); border-color:var(--line); box-shadow:var(--shadow-sm);
}
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .intent-card:hover,
:root[data-theme="light"] .service-guide:hover,
:root[data-theme="light"] .member:hover{ border-color:var(--accent-line); box-shadow:var(--shadow-md); }
:root[data-theme="light"] .svc::before{ width:100%; height:3px; inset:0 0 auto 0; transform:scaleX(0); transform-origin:right; }
:root[data-theme="light"] .svc:hover::before{ transform:scaleX(1); }
:root[data-theme="light"] .svc .ico{ background:var(--accent-soft); border-color:transparent; color:var(--accent); }

/* alternating section bands — rhythm instead of one flat tint */
:root[data-theme="light"] .intent-section,
:root[data-theme="light"] #proof,
:root[data-theme="light"] #process,
:root[data-theme="light"] #faq,
:root[data-theme="light"] .service-guides{ background:var(--bg-1); border-color:var(--line); }
:root[data-theme="light"] .clients{ background:#fff; }
:root[data-theme="light"] .intent-card{ border-color:var(--line); }
:root[data-theme="light"] .proof-item{ background:#fff; border-top-color:var(--accent); box-shadow:var(--shadow-sm); border-radius:0 0 14px 14px; }

/* --- hero --- */
:root[data-theme="light"] .hero{ background:radial-gradient(80% 60% at 50% -10%, oklch(0.5 0.12 158 / .07), transparent 70%); }
:root[data-theme="light"] .hero-radar{ opacity:.42; filter:none; }
:root[data-theme="light"] .hero-glow{ opacity:.6; }
:root[data-theme="light"] .hero-copy h1,
:root[data-theme="light"] .hero-copy .hero-tagline{ color:var(--ink); }
:root[data-theme="light"] .hero-copy .hero-tagline .hl,
:root[data-theme="light"] .hero-copy h1 .hl{ color:var(--accent); }
:root[data-theme="light"] .hero-copy .lede{ color:var(--muted); }
:root[data-theme="light"] .hero-cmd{ background:#fff; border-color:var(--line-2); box-shadow:var(--shadow-sm); }
:root[data-theme="light"] .hero-trust .ti b{ color:var(--ink); }
:root[data-theme="light"] .radar-blip{ color:oklch(0.5 0.08 158); }
:root[data-theme="light"] .hero-copy .hero-logo img{ filter:invert(.88); }

/* --- inner page hero --- */
:root[data-theme="light"] .page-hero{ background:linear-gradient(180deg, var(--bg-1), #fff); border-bottom-color:var(--line); }
:root[data-theme="light"] .page-hero::before{ background:radial-gradient(55% 110% at 90% -20%, oklch(0.5 0.12 158 / .09), transparent 62%); }
:root[data-theme="light"] .fx-grid{ opacity:.35; }
:root[data-theme="light"] .fx-chip{ color:oklch(0.5 0.12 158); opacity:.22; }
:root[data-theme="light"] .breadcrumb,
:root[data-theme="light"] .breadcrumb a{ color:var(--faint); }
:root[data-theme="light"] .breadcrumb a:hover{ color:var(--accent); }

/* --- forms --- */
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .blog-search{ background:#fff; border-color:var(--line-2); color:var(--ink); }
:root[data-theme="light"] .seg button{ background:#fff; color:var(--muted); border-color:var(--line-2); }
:root[data-theme="light"] .seg button.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600; }
:root[data-theme="light"] .field-err{ color:var(--crit); }

/* --- prose / articles --- */
:root[data-theme="light"] .prose > p,
:root[data-theme="light"] .prose li{ color:oklch(0.36 0.025 258); }
:root[data-theme="light"] .prose code{ color:oklch(0.42 0.11 158); background:var(--bg-2); border:1px solid var(--line); }
:root[data-theme="light"] .prose pre{ background:oklch(0.21 0.025 255); border-color:oklch(0.3 0.03 255); color:oklch(0.9 0.09 152); }
:root[data-theme="light"] .prose pre code{ border:0; background:none; color:inherit; }
:root[data-theme="light"] .prose blockquote{ background:var(--bg-1); }
:root[data-theme="light"] .prose .tbl-wrap{ background:#fff; box-shadow:var(--shadow-sm); }
:root[data-theme="light"] .prose thead th{ background:var(--bg-2); }
:root[data-theme="light"] .prose .note--warn{ border-inline-start-color:var(--crit); }
:root[data-theme="light"] .prose .note--warn > b:first-child{ color:var(--crit); }
:root[data-theme="light"] .quick-answer{ background:var(--accent-soft); }
:root[data-theme="light"] .quick-answer strong{ color:var(--accent); }
:root[data-theme="light"] .reading-path{ background:var(--bg-1); }

/* generated covers: lighter, cleaner on white */
:root[data-theme="light"] .auto-cover{
  background:
    radial-gradient(circle at 12% 18%, hsl(var(--cover-h,150) 70% 50% / .16), transparent 38%),
    linear-gradient(135deg, hsl(var(--cover-h,150) 40% 96%), #f3f6f9);
  border-color:var(--line);
}
:root[data-theme="light"] .auto-cover::before{ opacity:.28; }
:root[data-theme="light"] .auto-cover b{ color:var(--ink); }
:root[data-theme="light"] .acover{ background-color:var(--bg-1); }

/* image placeholder (blog featured etc.) — no dark pill on white */
:root[data-theme="light"] .ph::after{ background:#fff; color:var(--faint); border-color:var(--line-2); }
.ph[data-label=""]::after{ display:none; }
.blog-featured .ph{
  background:
    radial-gradient(circle at 20% 20%, var(--accent-soft), transparent 45%),
    repeating-radial-gradient(circle at 80% 120%, transparent 0 26px, var(--line) 26px 27px),
    var(--bg-1);
}

/* --- FAQ --- */
:root[data-theme="light"] .faq-q{ color:var(--ink); }
:root[data-theme="light"] .faq-q .pm{ background:#fff; }

/* --- timeline --- */
:root[data-theme="light"] .tl-node{ background:#fff; }
:root[data-theme="light"] .tl-chips span{ background:#fff; border-color:var(--line-2); }

/* --- stats / awards --- */
:root[data-theme="light"] .stat b{ color:var(--accent); }

/* --- footer: calm light-grey band (like iranserver) --- */
:root[data-theme="light"] .footer{ background:var(--bg-1); border-top-color:var(--line); }
:root[data-theme="light"] .footer::before{ background:linear-gradient(90deg, transparent, var(--accent-line) 30%, var(--accent) 50%, var(--accent-line) 70%, transparent); opacity:.6; }
:root[data-theme="light"] .footer::after{ opacity:.035; }
:root[data-theme="light"] .footer-status{ background:#fff; }
:root[data-theme="light"] .footer-bottom .socials a{ background:#fff; }

/* --- mobile sticky action bar --- */
:root[data-theme="light"] .mobile-action-bar{ background:rgb(255 255 255 / .94); border-color:var(--line-2); box-shadow:0 12px 36px -8px rgb(15 23 42 / .22); }

/* --- toast --- */
:root[data-theme="light"] .toast{ background:#fff; box-shadow:var(--shadow-md); }

/* --- dark islands that stay dark in light mode get readable text --- */
:root[data-theme="light"] .pt-engine{ box-shadow:0 30px 70px -40px rgb(15 23 42 / .55), 0 0 0 1px var(--line-2); }
:root[data-theme="light"] .pt-engine,
:root[data-theme="light"] .pt-engine *{ --ink:oklch(0.95 0.005 250); --muted:oklch(0.78 0.012 250); --faint:oklch(0.68 0.012 250); --line:oklch(1 0 0 / .08); --line-2:oklch(1 0 0 / .14); --accent:oklch(0.84 0.175 152); --accent-soft:oklch(0.84 0.175 152 / .14); --accent-line:oklch(0.84 0.175 152 / .4); --accent-ink:oklch(0.22 0.06 152); --bg-1:oklch(0.22 0.016 248); --bg-2:oklch(0.25 0.016 248); }

/* ===================================================================
   3. MOBILE PASS (both themes; light-specific bits are scoped)
   =================================================================== */

/* menu: light theme drops the scanline/terminal chrome for a clean sheet */
@media (max-width:940px){
  :root[data-theme="light"] .nav.open{ background:#fff; border-bottom-color:var(--line); }
  :root[data-theme="light"] .nav-links{ background:#fff; border-top:1px solid var(--line); backdrop-filter:none; -webkit-backdrop-filter:none; }
  :root[data-theme="light"] .nav-links::before,
  :root[data-theme="light"] .nav-links::after{ display:none; }
  :root[data-theme="light"] .nav-links li.mi{ border-bottom:1px solid var(--line); }
  :root[data-theme="light"] .nav-links li.mi a{ color:var(--ink); font-weight:600; }
  :root[data-theme="light"] .nav-links li.mi a:hover,
  :root[data-theme="light"] .nav-links li.mi a:active{ background:var(--bg-1); color:var(--accent); text-shadow:none; }
  :root[data-theme="light"] .nav-links li.mi a.current{ color:var(--accent); }
  :root[data-theme="light"] .nav.open .nav-burger{ box-shadow:none; border-color:var(--accent); color:var(--accent); }
  :root[data-theme="light"] .mobile-cta-li .btn-primary{ box-shadow:0 10px 24px -12px oklch(0.5 0.12 158 / .8); }
  :root[data-theme="light"] .nav-term{ color:var(--faint); }
  .nav-links li.mi a{ font-size:clamp(1.08rem, 4.6vw, 1.28rem); padding:.62em 6px; }
  .nav-links li.mi a::before{ font-size:.62em; }
  .nav-links li.mi a::after{ font-size:.52em; }
  .theme-toggle,.nav-burger{ width:44px; height:44px; }
}

@media (max-width:720px){
  :root{ --gutter:18px; }
  body{ font-size:16px; line-height:1.9; }

  /* rhythm — the homepage was ~20 000px tall on a phone */
  .section{ padding-block:44px; }
  .section--roomy{ padding-block:52px; }
  .section-head{ margin-bottom:22px; }
  .section-head h2{ font-size:clamp(1.5rem, 6.6vw, 1.9rem); }
  .section-head p{ font-size:.98rem; margin-top:.6rem; }
  .eyebrow{ font-size:.72rem; letter-spacing:.14em; }

  /* hero */
  .hero{ padding-top:30px; padding-bottom:40px; }
  .hero-copy h1{ font-size:clamp(1.9rem, 8.6vw, 2.4rem); line-height:1.3; }
  .hero-copy .hero-tagline{ font-size:clamp(1.55rem, 7.4vw, 2rem); line-height:1.35; }
  .hero-copy .hero-tagline .h1-sub{ font-size:.72rem; line-height:1.8; }
  .hero-copy .lede{ font-size:1rem; line-height:1.95; margin-top:1rem; }
  .hero-actions{ margin-top:1.5rem; gap:10px; }
  .hero-actions .btn{ min-height:52px; }
  .hero-trust{ margin-top:1.6rem; }

  /* cards: less padding, tighter gaps */
  .grid{ gap:14px; }
  .card{ padding:22px 20px; border-radius:14px; }
  .svc{ padding:22px 20px; gap:10px; }
  .svc .ico{ width:44px; height:44px; border-radius:11px; font-size:.92rem; }
  .svc h3{ font-size:1.12rem; }
  .svc p{ font-size:.95rem; line-height:1.85; }
  .intent-grid{ gap:10px; }
  .intent-card{ padding:18px 18px 16px; gap:6px; border-radius:14px; }
  .intent-card h3{ font-size:1.02rem; }
  .proof-grid{ gap:12px; }
  .proof-item{ padding:18px; }
  .order-card{ padding:22px 18px; border-radius:16px; }
  .cta-card{ padding:34px 20px; border-radius:18px; }
  .cta-card h2{ font-size:clamp(1.45rem, 6.4vw, 1.85rem); }
  .cta-card p{ font-size:.98rem; }
  .quote p{ font-size:1.02rem; line-height:1.95; }
  .faq-q{ font-size:1rem; padding:18px 0; line-height:1.7; }
  .tl-item{ padding-bottom:26px; }
  .page-hero h1{ font-size:clamp(1.65rem, 7.4vw, 2.2rem); line-height:1.4; }
  .page-hero .lead{ font-size:1rem; line-height:1.95; }
  .prose > p{ font-size:1.02rem; line-height:2; }
  .prose h2{ font-size:1.32rem; margin:2rem 0 .8rem; }
  .prose h3{ font-size:1.12rem; }

  /* hero trust chips — were reading as disabled inputs */
  :root[data-theme="light"] .hero-trust .ti{ background:#fff; border-color:var(--line); box-shadow:var(--shadow-sm); }
  .hero-trust .ti b{ color:var(--accent); }

  /* footer: brand row full width, links in two columns, centred legal */
  .footer{ padding-block:40px 24px; margin-top:0; }
  .footer-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 18px; }
  .footer-grid > :first-child{ grid-column:1 / -1; }
  .footer .brand .emblem{ height:52px; }
  .footer .brand .wordmark{ height:32px; }
  .footer p{ max-width:none; font-size:.93rem; }
  .footer-status{ display:inline-flex; align-items:center; gap:.5em; white-space:normal; line-height:1.6; border-radius:12px; padding:.55em .9em; }
  .footer-status .dot{ margin:0; flex:none; }
  .footer h5{ margin-bottom:10px; }
  .footer ul{ gap:2px; }
  .footer ul a{ font-size:.93rem; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px; margin-top:26px; }
  .footer-legal{ gap:6px 18px; }

  /* blog / lists */
  .blog-featured .fbody{ padding:22px 20px; }
  .blog-featured .fbody h2{ font-size:1.3rem; line-height:1.5; }
  .shop-filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); }
  .shop-filters::-webkit-scrollbar{ display:none; }
  .article .meta{ padding:18px; }
  .article h4{ font-size:1.06rem; }
}

@media (max-width:480px){
  .hero-trust{ gap:8px; }
  .hero-trust .ti{ padding:10px 14px; }
}

/* tap feedback where hover doesn't exist */
@media (hover:none){
  .card:hover,.intent-card:hover,.member:hover,.svc:hover,.article:hover{ transform:none; }
  .card:active,.intent-card:active,.article:active{ transform:scale(.995); }
}

/* ---------- hero fixes ---------- */
.nw{ white-space:nowrap; }
/* Persian sub-line was set in JetBrains Mono → wide Latin spaces between Persian words */
.hero-copy .hero-tagline .h1-sub{ font-family:var(--font-fa); font-weight:500; letter-spacing:0; font-size:clamp(.82rem,1.1vw,.95rem); }

/* ---------- folded long-form copy ---------- */
.seo-copy.is-folded{ position:relative; max-height:440px; overflow:hidden; }
.seo-copy.is-folded::after{ content:""; position:absolute; inset:auto 0 0 0; height:160px; background:linear-gradient(to bottom, transparent, var(--bg) 88%); pointer-events:none; }
.seo-copy.is-folded.is-open{ max-height:none; overflow:visible; }
.seo-copy.is-folded.is-open::after{ display:none; }
.fold-btn{ display:inline-flex; align-items:center; gap:.45em; margin-top:10px; padding:.6em 1.2em; min-height:44px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--accent); font:600 .95rem var(--font-fa); cursor:pointer; box-shadow:var(--shadow-sm); transition:.2s ease; }
.fold-btn:hover{ border-color:var(--accent-line); }
.fold-btn svg{ transition:transform .25s ease; }
.fold-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.seo-copy-section .wrap{ display:flex; flex-direction:column; align-items:center; }
.seo-copy-section .seo-copy{ width:100%; max-width:860px; }

/* order form: service picker as an even 2-up grid on phones */
@media (max-width:720px){
  .order-card .seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .order-card .seg button{ justify-content:center; flex-direction:column; gap:2px; padding:.7em .5em; text-align:center; line-height:1.5; }
  .order-assure{ gap:12px; margin-top:22px; }
}

/* team: compact horizontal cards on phones (square photos were ~650px tall each) */
@media (max-width:560px){
  .team-grid{ grid-template-columns:1fr; gap:12px; }
  .member{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:0 14px; align-items:start; padding:12px; }
  .member .photo{ width:96px; height:96px; margin:0; grid-row:1 / span 3; }
  .member .meta{ padding:2px 0 0; }
  .member p{ font-size:.86rem; margin-top:6px; line-height:1.8; }
  .member .socials{ margin-top:8px; }
}

/* client names: quiet wordmarks, not buttons */
:root[data-theme="light"] .client-chip{ background:var(--bg-1); border-color:transparent; color:oklch(0.45 0.02 258); box-shadow:none; }
@media (max-width:720px){
  .clients{ padding-block:30px; }
  .clients .row{ gap:8px; }
  .client-chip{ height:44px; min-width:0; padding:0 16px; font-size:.92rem; }
}

/* mobile menu (light): no terminal prompt, list starts at the top, CTA text stays white */
@media (max-width:940px){
  :root[data-theme="light"] .nav-term{ display:none; }
  :root[data-theme="light"] .nav-links{ padding-top:8px; }
  :root[data-theme="light"] .nav-links .mobile-cta-li .btn-primary{ color:#fff; }
  :root[data-theme="light"] .nav-term-foot{ margin-bottom:0; }
}

/* blog featured cover (was an empty striped placeholder) */
.blog-featured .feat-cover{ border:0; border-radius:0; min-height:360px; height:100%; aspect-ratio:auto; display:flex; place-items:initial; }
.blog-featured .feat-cover::after{ content:""; display:block; position:absolute; inset:auto -10% -48% 32%; height:90%; border:1px solid var(--accent-line); border-radius:50%; background:none; padding:0; box-shadow:0 0 0 32px color-mix(in oklab,var(--accent) 6%,transparent),0 0 0 64px color-mix(in oklab,var(--accent) 4%,transparent); }
@media (max-width:860px){ .blog-featured .feat-cover{ min-height:200px; } }

/* about visual: soft brand panel instead of grey stripes in light */
:root[data-theme="light"] .about-visual{ background:radial-gradient(90% 90% at 50% 10%, oklch(0.5 0.12 158 / .1), transparent 65%), var(--bg-1); border-color:var(--line); }

/* inline-styled multi-column grids must stack on phones */
@media (max-width:720px){
  .grid[style*="grid-template-columns"],
  [style*="display:grid"][style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
}

/* about: operator cards stack (photo strip on top) on phones */
@media (max-width:560px){
  .operator{ grid-template-columns:1fr; }
  .op-photo{ height:220px; border-inline-end:0; border-bottom:1px solid var(--line); }
}
@media (max-width:860px){ .logo-wall{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px){ .logo-wall{ grid-template-columns:repeat(2,minmax(0,1fr)); } .logo-wall .lw{ aspect-ratio:auto; padding:18px 10px; } }

/* article TOC: collapsible block above the first heading on phones */
.toc-mobile{ display:none; }
@media (max-width:860px){
  .toc-mobile{ display:block; margin:0 0 26px; border:1px solid var(--line-2); border-radius:14px; background:var(--card); box-shadow:var(--shadow-sm); overflow:hidden; }
  .toc-mobile summary{ list-style:none; cursor:pointer; padding:14px 18px; min-height:48px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:10px; }
  .toc-mobile summary::-webkit-details-marker{ display:none; }
  .toc-mobile summary::after{ content:""; margin-inline-start:auto; width:9px; height:9px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:translateY(-3px) rotate(45deg); transition:transform .2s; }
  .toc-mobile[open] summary::after{ transform:translateY(2px) rotate(-135deg); }
  .toc-mobile .toc{ border:0; border-top:1px solid var(--line); border-radius:0; padding:8px 12px 12px; box-shadow:none; }
  .article-aside .toc{ display:none; }
}

.hero-copy h1 .hl::after{ bottom:.04em; height:3px; opacity:.45; }

/* Persian text never in JetBrains Mono (its wide Latin spaces tear Persian phrases apart) */
.breadcrumb, .breadcrumb a, .breadcrumb span,
.author-box .ab-links a, .toc h5, .wiki-relchip,
.exp .everdict, .exp .etarget, .hero-stat-date, .st b{ font-family:var(--font-fa); letter-spacing:0; }
.toc h5{ font-size:.9rem; font-weight:700; color:var(--ink); direction:rtl; }
:root[data-theme="light"] .fx-scan{ display:none; }
.hero-copy .hero-tagline{ line-height:1.38; }
.pe-phase{ opacity:.66; }
:root[data-theme="light"] .c-concept{ color:oklch(0.48 0.12 240); background:oklch(0.48 0.12 240 / .08); border-color:oklch(0.48 0.12 240 / .3); }

/* testimonial avatars: initial badge instead of an empty striped placeholder */
.av-initial{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; flex:none; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-weight:800; font-size:1.15rem; }

/* academy tool pages: neutral monogram tile until official logos are added to assets/tools/ */
.tool-logo.noimg{ display:grid; background:var(--accent-soft); border-color:var(--accent-line); }
.tool-logo.noimg::before{ content:attr(data-mono); font:700 1.25rem/1 var(--font-mono); color:var(--accent); letter-spacing:.02em; direction:ltr; }
.tool-logo.noimg img{ display:none; }
.wiki-meta{ margin-top:14px; font-size:.86rem; color:var(--faint); }

/* ===================================================================
   4. PERFORMANCE — keep the page cheap for the CPU/GPU while idle
   =================================================================== */
/* frosted-glass blur over the whole page width is re-rendered on every scroll frame;
   an almost-opaque bar looks the same and costs nothing */
.nav, .nav.scrolled, .nav-links{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.nav{ background:color-mix(in oklab, var(--bg) 96%, transparent); }
.nav.scrolled{ background:color-mix(in oklab, var(--bg) 98%, transparent); }
/* big static blur → the radial gradient is already soft */
.hero-glow{ filter:none; }
/* radar: beam spins on the compositor; blips only fade their opacity (no animated glow) */
@keyframes phRadarSpin{ to{ transform:rotate(360deg); } }
.radar-blip{ text-shadow:none !important; transition:opacity .18s linear; }
/* decorative loops stop while their section is off screen (class set by app.js) */
.ph-off, .ph-off *, .ph-off ::before, .ph-off ::after,
.ph-off::before, .ph-off::after{ animation-play-state:paused !important; }
/* timeline pulse animated `top` (layout every frame) → transform */
.timeline::after{ animation-name:phTlPulse; filter:none; }
@keyframes phTlPulse{ 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:.9; } 85%{ opacity:.9; } 100%{ transform:translateY(var(--tl-travel, 300px)); opacity:0; } }

/* ===================================================================
   5. BRAND v2 — sharp corners · P-box frames · pro nav · glitch · radar
   =================================================================== */

/* ---- 5.1 sharp corners everywhere (the emblem is all straight cuts) ---- */
*, *::before, *::after{ border-radius:0 !important; }
/* things that are genuinely round keep it */
.hero-radar::after, .radar-rings, .radar-rings::before, .radar-rings::after, .radar-sweep, .radar-ping,
.author-chip .av, .author-box .ab-photo, .comment .c-av, .quote .by .av, .member .photo, .av-initial,
.term-bar i{ border-radius:50% !important; }
/* small status dots become diamonds — the brand shape */
.footer-status .dot, .op-status i, .pe-bar .live::before, .doc-updated .dot, .nav-term-foot .dot,
.blog-meta .d, .radar-blip::before{ transform:rotate(45deg); }

/* ---- 5.2 P-box frame: corner cuts taken from the emblem's P stroke ---- */
.card, .cta-card, .intent-card, .order-card, .contact-card, .news-card, .dl-card{ position:relative; }
.card::after, .cta-card::after, .intent-card::after, .order-card::after, .contact-card::after, .news-card::after, .dl-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  --pb:var(--accent); --pl:14px; --pw:2px;
  background:
    linear-gradient(var(--pb),var(--pb)) top right / var(--pl) var(--pw) no-repeat,
    linear-gradient(var(--pb),var(--pb)) top right / var(--pw) var(--pl) no-repeat,
    linear-gradient(var(--pb),var(--pb)) bottom left / var(--pl) var(--pw) no-repeat,
    linear-gradient(var(--pb),var(--pb)) bottom left / var(--pw) var(--pl) no-repeat;
  opacity:.55; transition:opacity .2s ease, background-size .25s ease;
}
.card:hover::after, .cta-card:hover::after, .intent-card:hover::after, .news-card:hover::after, .dl-card:hover::after{ opacity:1; --pl:22px; }
/* diamond rivet in the frame corner (the emblem itself) */
.cta-card::before{
  content:""; position:absolute; top:16px; left:16px; width:9px; height:9px; z-index:3;
  border:2px solid var(--accent); transform:rotate(45deg); pointer-events:none; opacity:.8;
}

/* ---- 5.3 buttons: tighter, sharp, mono arrow ---- */
.btn{ letter-spacing:0; }
.btn-primary{ box-shadow:none; }
.btn-primary:hover{ box-shadow:0 0 0 3px var(--accent-soft); }

/* ---- 5.4 navigation ---- */
@media (min-width: 941px){
  .nav{ --navh:64px; }
  .brand .emblem{ height:34px; }
  .nav-links{ gap:2px; }
  .nav-links a{
    position:relative; font-size:.86rem; font-weight:400; padding:.55em .8em; color:var(--muted);
    background:none !important;
  }
  /* diamond marker + hairline, both from the emblem */
  .nav-links a::before{
    content:""; position:absolute; left:50%; bottom:2px; width:5px; height:5px; margin-left:-2.5px;
    background:var(--accent); transform:rotate(45deg) scale(0); transition:transform .18s ease;
  }
  .nav-links a::after{
    content:""; position:absolute; left:.8em; right:.8em; bottom:4px; height:1px;
    background:linear-gradient(90deg, transparent, var(--accent-line), transparent);
    opacity:0; transition:opacity .18s ease;
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a:hover::after{ opacity:1; }
  .nav-links a.current{ color:var(--accent) !important; font-weight:500; }
  .nav-links a.current::before, .nav-links a:hover::before{ transform:rotate(45deg) scale(1); }
  .nav-cta{ gap:8px; }
  .nav-cta .btn-primary{ padding:.5em 1.05em; font-size:.84rem; font-weight:600; gap:.5em; }
  .theme-toggle{ width:36px; height:36px; }
}
/* hairline with an accent core under the bar */
.nav{ border-bottom-color:transparent; }
.nav::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, var(--line) 0%, var(--accent-line) 35%, var(--accent) 50%, var(--accent-line) 65%, var(--line) 100%);
}

/* ---- 5.5 emblem visibility: dark-green mark on light backgrounds ---- */
:root[data-theme="light"] .brand .emblem,
:root[data-theme="light"] .footer .emblem,
:root[data-theme="light"] .radar-core{ content:url(/assets/logo-mark2-dark.svg?v=1); }
:root[data-theme="light"] .brand .emblem{ filter:none; }

/* ---- 5.6 glitch (one-shot bursts triggered by app.js, ~0.45s) ---- */
@keyframes phGlitch{
  0%   { text-shadow:none; transform:none; clip-path:none; }
  10%  { text-shadow:-3px 0 #ff2d6f, 3px 0 #18e0ff; transform:translate(2px,-1px) skewX(-6deg); clip-path:polygon(0 0,100% 0,100% 38%,0 38%,0 46%,100% 46%,100% 100%,0 100%); }
  22%  { text-shadow:3px 0 #ff2d6f, -3px 0 #18e0ff; transform:translate(-3px,1px); clip-path:polygon(0 12%,100% 12%,100% 64%,0 64%); }
  34%  { text-shadow:-2px 0 #ff2d6f, 2px 0 #18e0ff; transform:translate(3px,0) skewX(4deg); clip-path:none; }
  48%  { text-shadow:2px 0 #ff2d6f, -2px 0 #18e0ff; transform:translate(-1px,0); clip-path:polygon(0 0,100% 0,100% 72%,0 72%,0 80%,100% 80%,100% 100%,0 100%); }
  62%  { text-shadow:-1px 0 #ff2d6f, 1px 0 #18e0ff; transform:translate(1px,0); clip-path:none; }
  100% { text-shadow:none; transform:none; clip-path:none; }
}
@keyframes phGlitchImg{
  0%,100%{ transform:none; filter:none; }
  15%{ transform:translate(-3px,1px); filter:drop-shadow(3px 0 0 #ff2d6f) drop-shadow(-3px 0 0 #18e0ff); }
  30%{ transform:translate(3px,-1px) skewX(-8deg); filter:drop-shadow(-3px 0 0 #ff2d6f) drop-shadow(3px 0 0 #18e0ff); }
  50%{ transform:translate(-1px,0); filter:drop-shadow(2px 0 0 #ff2d6f); clip-path:inset(30% 0 22% 0); }
  70%{ transform:translate(2px,0); filter:drop-shadow(-2px 0 0 #18e0ff); clip-path:none; }
}
.is-glitching{ animation:phGlitch .45s steps(1, end) 1; }
img.is-glitching, .is-glitching > img{ animation:phGlitchImg .45s steps(1, end) 1; }
@media (prefers-reduced-motion: reduce){ .is-glitching, img.is-glitching, .is-glitching > img{ animation:none !important; } }

/* ---- 5.7 radar — light theme as a crisp HUD instrument ---- */
:root[data-theme="light"] .hero-radar{ opacity:1; }
:root[data-theme="light"] .radar-rings{
  opacity:1;
  background:
    radial-gradient(circle at center, oklch(0.5 0.12 158) 0 2px, transparent 2.5px),
    repeating-radial-gradient(circle at center, transparent 0 calc(12.5% - 1px), oklch(0.5 0.12 158 / .07) calc(12.5% - 1px) 12.5%),
    repeating-radial-gradient(circle at center, transparent 0 calc(25% - 1px), oklch(0.5 0.12 158 / .2) calc(25% - 1px) 25%),
    linear-gradient(oklch(0.5 0.12 158 / .14), oklch(0.5 0.12 158 / .14)) center/1px 100% no-repeat,
    linear-gradient(oklch(0.5 0.12 158 / .14), oklch(0.5 0.12 158 / .14)) center/100% 1px no-repeat,
    radial-gradient(circle at center, oklch(0.5 0.12 158 / .05), transparent 70%);
}
:root[data-theme="light"] .radar-rings::before{ border:1px solid oklch(0.5 0.12 158 / .35); }
:root[data-theme="light"] .radar-rings::after{
  opacity:1;
  background:repeating-conic-gradient(from 0deg, oklch(0.5 0.12 158 / .5) 0deg .4deg, transparent .4deg 5deg);
  -webkit-mask:radial-gradient(circle at center, transparent 0 calc(50% - 7px), #000 calc(50% - 7px) 50%, transparent 50%);
          mask:radial-gradient(circle at center, transparent 0 calc(50% - 7px), #000 calc(50% - 7px) 50%, transparent 50%);
}
:root[data-theme="light"] .radar-sweep{ opacity:1; }
:root[data-theme="light"] .radar-sweep::before{
  background:conic-gradient(from 0deg, transparent 0deg 312deg, oklch(0.5 0.12 158 / .05) 330deg, oklch(0.5 0.12 158 / .1) 354deg, oklch(0.5 0.12 158 / .3) 359.4deg, oklch(0.5 0.12 158 / .6) 360deg);
}
:root[data-theme="light"] .radar-core{ opacity:.9; animation:none; filter:none; }
:root[data-theme="light"] .radar-blip{ color:oklch(0.42 0.1 158); font-weight:500; opacity:calc(.28 + .72 * var(--lit, 0)); }
:root[data-theme="light"] .radar-ping{ border-color:oklch(0.5 0.12 158); }
:root[data-theme="light"] .hero-radar::after{ background:radial-gradient(circle at center, transparent 62%, var(--bg) 86%); }
/* dark theme: the mark at the centre should read, not whisper */
.radar-core{ opacity:.75; animation:none; }
@media (max-width: 940px){ :root[data-theme="light"] .hero-radar{ opacity:.5; } }

/* ---- 5.8 light theme terminal: mint "paper" console instead of a dark slab ---- */
:root[data-theme="light"] .terminal{
  --term-ink: oklch(0.27 0.03 255); --term-faint: oklch(0.53 0.02 255); --term-accent: oklch(0.47 0.12 158);
  --term-warn: oklch(0.55 0.13 65); --term-crit: oklch(0.55 0.2 25);
  --term-bg-2: oklch(0.9 0.025 158); --term-line: oklch(0.5 0.12 158 / .14); --term-line-2: oklch(0.5 0.12 158 / .3);
  background:linear-gradient(180deg, oklch(0.985 0.008 158), oklch(0.965 0.016 158));
  border-color:oklch(0.5 0.12 158 / .32);
  box-shadow:0 1px 0 #fff inset, 0 30px 60px -40px oklch(0.4 0.09 158 / .45);
}
:root[data-theme="light"] .term-bar{ background:oklch(0.94 0.022 158); border-bottom-color:oklch(0.5 0.12 158 / .16); }
:root[data-theme="light"] .term-bar span{ color:oklch(0.45 0.05 158); }
:root[data-theme="light"] .terminal::after{ background:linear-gradient(180deg, oklch(0.5 0.12 158 / .08), transparent); }
@keyframes phGlitchCore{
  0%,100%{ transform:translate(-50%,-50%); filter:none; }
  15%{ transform:translate(calc(-50% - 3px),-50%); filter:drop-shadow(3px 0 0 #ff2d6f) drop-shadow(-3px 0 0 #18e0ff); }
  30%{ transform:translate(calc(-50% + 3px),-50%) skewX(-8deg); filter:drop-shadow(-3px 0 0 #ff2d6f) drop-shadow(3px 0 0 #18e0ff); }
  55%{ transform:translate(-50%,-50%); clip-path:inset(30% 0 22% 0); }
  70%{ transform:translate(calc(-50% + 1px),-50%); clip-path:none; filter:drop-shadow(-2px 0 0 #18e0ff); }
}
.radar-core.is-glitching{ animation:phGlitchCore .45s steps(1, end) 1; }
@media (min-width: 941px){ .hero-radar{ width:min(640px, 46vw); } }

/* ---- 5.9 radar, light theme: quieter — an instrument in the background, not a banner ---- */
:root[data-theme="light"] .radar-rings{
  background:
    radial-gradient(circle at center, oklch(0.5 0.12 158 / .6) 0 2px, transparent 2.5px),
    repeating-radial-gradient(circle at center, transparent 0 calc(25% - 1px), oklch(0.5 0.12 158 / .11) calc(25% - 1px) 25%),
    linear-gradient(oklch(0.5 0.12 158 / .07), oklch(0.5 0.12 158 / .07)) center/1px 100% no-repeat,
    linear-gradient(oklch(0.5 0.12 158 / .07), oklch(0.5 0.12 158 / .07)) center/100% 1px no-repeat;
}
:root[data-theme="light"] .radar-rings::before{ border-color:oklch(0.5 0.12 158 / .16); }
:root[data-theme="light"] .radar-rings::after{ opacity:.45; }
:root[data-theme="light"] .radar-sweep::before{
  background:conic-gradient(from 0deg, transparent 0deg 320deg, oklch(0.5 0.12 158 / .04) 340deg, oklch(0.5 0.12 158 / .1) 358deg, oklch(0.5 0.12 158 / .28) 360deg);
}
:root[data-theme="light"] .radar-core{ opacity:.6; }
:root[data-theme="light"] .radar-blip{ color:oklch(0.5 0.06 158); font-weight:400; opacity:calc(.22 + .6 * var(--lit, 0)); }
:root[data-theme="light"] .radar-ping{ border-color:oklch(0.5 0.12 158 / .5); }
@media (max-width: 940px){ .radar-core{ display:none; } :root[data-theme="light"] .hero-radar{ opacity:.35; } }

/* ===================================================================
   6. CONSISTENCY — every box speaks the same P-box language
   =================================================================== */
.proof-item, .quote, .service-guide{ position:relative; }
.proof-item::after, .quote::after, .service-guide::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  --pb:var(--accent); --pl:14px; --pw:2px;
  background:
    linear-gradient(var(--pb),var(--pb)) top right / var(--pl) var(--pw) no-repeat,
    linear-gradient(var(--pb),var(--pb)) top right / var(--pw) var(--pl) no-repeat,
    linear-gradient(var(--pb),var(--pb)) bottom left / var(--pl) var(--pw) no-repeat,
    linear-gradient(var(--pb),var(--pb)) bottom left / var(--pw) var(--pl) no-repeat;
  opacity:.55; transition:opacity .2s ease;
}
.proof-item:hover::after, .quote:hover::after, .service-guide:hover::after{ opacity:1; }
/* proof: one border system, no special top bar */
.proof-item{ border:1px solid var(--line) !important; background:var(--card) !important; box-shadow:none !important; }
/* testimonials: real boxes instead of loose text */
.quotes{ gap:20px; }
.quote{ border:1px solid var(--line) !important; background:var(--card) !important; padding:28px 28px 24px !important; }
/* client names: outlined like the rest */
.client-chip{ background:transparent !important; border:1px solid var(--line) !important; }
.client-chip:hover{ border-color:var(--accent-line) !important; color:var(--ink) !important; }

/* ===================================================================
   7. GLITCH MARKS — the brand mark beside section labels, Ravin-style:
      still most of the time, a short stepped jitter every few seconds
   =================================================================== */
.section-head .eyebrow::after{
  content:""; display:inline-block; width:15px; height:18px; margin-inline-start:.6em; vertical-align:-4px;
  background:url(/assets/logo-mark2.svg?v=3) center/contain no-repeat;
  animation:phMarkGlitch 3.2s steps(2) infinite;
}
:root[data-theme="light"] .section-head .eyebrow::after{ background-image:url(/assets/logo-mark2-dark.svg?v=1); }
.section-head:nth-of-type(odd) .eyebrow::after{ animation-delay:-1.4s; }
@keyframes phMarkGlitch{
  0%, 74%, 100%{ transform:none; filter:none; }
  78%{ transform:translate(2px,-1px); filter:drop-shadow(2px 0 0 #ff2d6f) drop-shadow(-2px 0 0 #18e0ff); }
  82%{ transform:translate(-2px,1px) skewX(-10deg); filter:drop-shadow(-2px 0 0 #ff2d6f) drop-shadow(2px 0 0 #18e0ff); }
  86%{ transform:translate(1px,0); filter:drop-shadow(1px 0 0 #18e0ff); }
}
@media (prefers-reduced-motion: reduce){ .section-head .eyebrow::after{ animation:none; } }
.quote .by b{ margin-inline-end:.45em; }

/* ===================================================================
   8. HOME LAYOUT FIXES
   =================================================================== */
/* intent: title breathes before the four cards */
.intent-head{ margin-bottom:clamp(32px, 4vw, 48px); }

/* "what is web pentest" — anchored as a framed two-column block instead of a floating column */
.seo-copy-section .wrap{ display:block; }
.seo-copy-section .seo-copy{
  max-width:none; width:100%; position:relative;
  border:1px solid var(--line); background:var(--card);
  padding:clamp(28px, 4vw, 52px) clamp(22px, 4vw, 56px);
}
.seo-copy-section .seo-copy::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    linear-gradient(var(--accent),var(--accent)) top right / 14px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) top right / 2px 14px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom left / 2px 14px no-repeat;
  opacity:.6;
}
.seo-copy-section .seo-copy.is-folded::after{ background:linear-gradient(to bottom, transparent, var(--card) 88%); }
.seo-eyebrow{ display:flex; margin-bottom:.9rem; font-size:.74rem; }
@media (min-width: 941px){
  .seo-copy-section .seo-copy{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2.3fr); column-gap:clamp(32px, 5vw, 72px); align-items:start; }
  .seo-copy-section .seo-copy > *{ grid-column:2; }
  .seo-copy-section .seo-copy > h2:first-of-type{
    grid-column:1; grid-row:1 / span 60; margin:0; font-size:clamp(1.6rem, 2.4vw, 2.1rem); line-height:1.45;
    padding-inline-start:20px; border-inline-start:2px solid var(--accent);
  }
  .seo-copy-section .seo-copy > h2:first-of-type + *{ margin-top:0; }
}

/* order: the promise list spans the form's height, evenly spaced */
@media (min-width: 941px){
  .order-grid{ align-items:stretch; }
  .order-pitch{ display:flex; flex-direction:column; }
  .order-assure{ flex:1; justify-content:space-between; gap:0; margin-top:40px; }
  .order-assure li{ padding:18px 0; border-bottom:1px solid var(--line); }
  .order-assure li:last-child{ border-bottom:0; }
}