/* ================================================================
   ScaiLabs Design System
   ================================================================ */

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
  --color-a1-yellow:#F7F96F; --color-a2-green:#9BD77E; --color-a3-turquoise:#3BB58E;
  --color-b1-turquoise:#099E8E; --color-b2-prussianblue:#197474; --color-b3-darkblue:#2A4959;
  --gradient-light:linear-gradient(135deg,#F7F96F,#3BB58E);
  --gradient-dark:linear-gradient(135deg,#099E8E,#2A4959);
  --gradient-brand:linear-gradient(135deg,#F7F96F,#9BD77E,#3BB58E,#099E8E);
  --gradient-text:linear-gradient(90deg,#F7F96F,#3BB58E);
  --font:'Blogger Sans',system-ui,-apple-system,sans-serif;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1rem; --fs-lg:1.125rem; --fs-xl:1.25rem;
  --fs-2xl:1.5rem; --fs-3xl:1.875rem; --fs-4xl:2.25rem; --fs-5xl:3rem; --fs-6xl:3.75rem;
  --fs-hero:clamp(2.5rem,5vw,4.5rem);
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;
  --max-w:1280px; --narrow:900px; --wide:1440px; --hdr:72px;

  /* Radii */
  --r-xs:3px; --r-sm:5px; --r-md:7px; --r-lg:10px;
  /* Chamfer size for the diagonal cut corner */
  --chamfer:14px;
  --chamfer-sm:10px;

  --ease:cubic-bezier(.4,0,.2,1); --t-fast:150ms var(--ease); --t-base:250ms var(--ease); --t-slow:400ms var(--ease);
}

/* --- DARK --- */
[data-theme="dark"] {
  --bg-0:#0B1A2B; --bg-1:#0F2137; --bg-2:#132A42;
  --bg-card:rgba(15,33,55,.7); --bg-card-h:rgba(20,45,70,.85);
  --bg-glass:rgba(11,26,43,.88); --bg-elev:rgba(25,55,85,.3);
  --tx-1:#E8ECF1; --tx-2:#9BAAB9; --tx-3:#637A8E; --tx-inv:#0B1A2B;
  --bd-1:rgba(59,181,142,.18); --bd-h:rgba(59,181,142,.4); --bd-s:rgba(255,255,255,.07);
  --glow:rgba(59,181,142,.12); --glow-s:rgba(59,181,142,.25);
  --sh-card:0 4px 24px rgba(0,0,0,.3),0 0 0 1px rgba(59,181,142,.08);
  --sh-elev:0 8px 40px rgba(0,0,0,.4),0 0 0 1px rgba(59,181,142,.12);
  --sh-glow:0 0 30px rgba(59,181,142,.15);
  --grid-opacity:.07; --grid-glow:.22; --scanline-opacity:.04;
  --code-fn:#F7F96F; --code-kw:#3BB58E; --code-str:#9BD77E;
}
/* --- LIGHT --- */
[data-theme="light"] {
  --bg-0:#F5F7F8; --bg-1:#FFFFFF; --bg-2:#EDF0F2;
  --bg-card:rgba(255,255,255,.9); --bg-card-h:rgba(255,255,255,1);
  --bg-glass:rgba(245,247,248,.92); --bg-elev:rgba(9,158,142,.05);
  --tx-1:#1A2E3E; --tx-2:#4A6274; --tx-3:#7A94A6; --tx-inv:#F5F7F8;
  --bd-1:rgba(9,158,142,.2); --bd-h:rgba(9,158,142,.45); --bd-s:rgba(0,0,0,.07);
  --glow:rgba(9,158,142,.06); --glow-s:rgba(9,158,142,.12);
  --sh-card:0 2px 16px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
  --sh-elev:0 4px 32px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.06);
  --sh-glow:0 0 30px rgba(9,158,142,.08);
  --grid-opacity:.05; --grid-glow:.1; --scanline-opacity:.02;
  --code-fn:#946B00; --code-kw:#0E7A5E; --code-str:#217A3A;
}
[data-theme="light"] .theme-toggle .icon-sun { display:block; }
[data-theme="light"] .theme-toggle .icon-moon { display:none; }
[data-theme="light"] .hero-orb { opacity:.25; }

/* --- RESET --- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:var(--font); font-weight:400; font-size:var(--fs-base); line-height:1.65; color:var(--tx-1); background:var(--bg-0); overflow-x:hidden; transition:background var(--t-slow),color var(--t-slow); }
a { color:var(--color-a3-turquoise); text-decoration:none; transition:color var(--t-fast); }
a:hover { color:var(--color-a2-green); }
img,svg { display:block; max-width:100%; }
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--sp-6); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.text-gradient { background:var(--gradient-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ================================================================
   BACKGROUND
   ================================================================ */
.bg-grid {
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.bg-grid::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(59,181,142,var(--grid-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,181,142,var(--grid-opacity)) 1px, transparent 1px);
  background-size:60px 60px;
}
.bg-grid::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 800px 600px at 50% 0%, rgba(59,181,142,var(--grid-glow)) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 80% 40%, rgba(9,158,142,.08) 0%, transparent 60%),
    radial-gradient(ellipse 400px 400px at 15% 60%, rgba(155,215,126,.05) 0%, transparent 60%);
}
.bg-scanline {
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.bg-scanline::before {
  content:''; position:absolute; left:0; right:0;
  height:200px;
  background:linear-gradient(180deg, transparent, rgba(59,181,142,var(--scanline-opacity)), transparent);
  animation:scanline 12s ease-in-out infinite;
}
@keyframes scanline {
  0% { top:-200px; }
  100% { top:calc(100vh + 200px); }
}
.bg-nodes {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
}

/* ================================================================
   CHAMFERED CORNER SYSTEM
   ================================================================ */
.chamfer {
  --_c: var(--chamfer);
  clip-path: polygon(0% 0%, calc(100% - var(--_c)) 0%, 100% var(--_c), 100% 100%, 0% 100%);
}
.chamfer-sm {
  --_c: var(--chamfer-sm);
  clip-path: polygon(0% 0%, calc(100% - var(--_c)) 0%, 100% var(--_c), 100% 100%, 0% 100%);
}
.chamfer-border {
  --_c: var(--chamfer);
  position:relative;
}
.chamfer-border::after {
  content:''; position:absolute; top:-1px; right:0;
  width:calc(var(--_c) * 1.42 + 2px);
  height:1px;
  background:var(--bd-1);
  transform-origin:top right;
  transform:rotate(-45deg) translateY(-0.5px);
  pointer-events:none;
}

/* ================================================================
   HEADER
   ================================================================ */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--hdr); display:flex; align-items:center;
  background:var(--bg-glass); backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid var(--bd-s);
  transition:background var(--t-base),border-color var(--t-base),box-shadow var(--t-base);
}
.site-header.scrolled { box-shadow:var(--sh-card); border-bottom-color:var(--bd-1); }
.hdr-inner { width:100%; max-width:var(--wide); margin:0 auto; padding:0 var(--sp-6); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); }
.logo { display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; text-decoration:none; }
.logo-emblem { width:36px; height:38px; }
.logo-text { font-size:var(--fs-xl); font-weight:500; color:var(--tx-1); letter-spacing:-.01em; }

.main-nav { display:flex; align-items:center; gap:var(--sp-1); }
.nav-link {
  position:relative; padding:var(--sp-2) var(--sp-4);
  font-size:var(--fs-sm); font-weight:500; color:var(--tx-2);
  letter-spacing:.01em; border-radius:var(--r-md);
  transition:color var(--t-fast),background var(--t-fast); text-decoration:none;
}
.nav-link:hover { color:var(--tx-1); background:var(--glow); }
.nav-link.active:not(.nav-dd-trigger)::after {
  content:''; position:absolute; bottom:2px; left:var(--sp-4); right:var(--sp-4);
  height:1.5px; background:var(--gradient-light); border-radius:1px;
}

.nav-dd { position:relative; }
.nav-dd-trigger { display:inline-flex; align-items:center; gap:var(--sp-1); cursor:pointer; white-space:nowrap; }
.nav-dd-trigger::after { content:''; display:block; width:6px; height:6px; flex-shrink:0; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform var(--t-fast); }
.nav-dd-trigger.active::after { transform:rotate(45deg) translateY(-2px); }
.nav-dd:hover .nav-dd-trigger::after { transform:rotate(-135deg) translateY(2px); }
.nav-dd-trigger.active::before {
  content:''; position:absolute; bottom:2px; left:var(--sp-4); right:var(--sp-4);
  height:1.5px; background:var(--gradient-light); border-radius:1px;
}
.nav-dd-menu {
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(-4px); opacity:0; pointer-events:none;
  min-width:220px; padding:var(--sp-2); padding-top:calc(var(--sp-2) + 8px);
  background:var(--bg-glass); backdrop-filter:blur(20px);
  border:1px solid var(--bd-1); border-radius:var(--r-lg);
  box-shadow:var(--sh-elev);
  transition:opacity var(--t-fast),transform var(--t-fast);
}
.nav-dd-menu::before {
  content:''; position:absolute; top:-8px; left:0; right:0; height:12px;
}
.nav-dd:hover .nav-dd-menu { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.nav-dd-menu .nav-link { display:block; width:100%; white-space:nowrap; }

.hdr-controls { display:flex; align-items:center; gap:var(--sp-2); }
.lang-sw { display:flex; align-items:center; gap:2px; padding:2px; background:var(--glow); border-radius:var(--r-md); border:1px solid var(--bd-s); }
.lang-sw button { font-family:var(--font); font-size:var(--fs-xs); font-weight:500; padding:var(--sp-1) var(--sp-2); border:none; border-radius:var(--r-sm); background:transparent; color:var(--tx-3); cursor:pointer; transition:all var(--t-fast); letter-spacing:.04em; }
.lang-sw button.active { background:var(--color-b1-turquoise); color:#fff; }
.lang-sw button:hover:not(.active) { color:var(--tx-1); }
.theme-toggle { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--bd-s); border-radius:var(--r-md); cursor:pointer; color:var(--tx-2); transition:all var(--t-fast); }
.theme-toggle:hover { border-color:var(--bd-h); color:var(--tx-1); background:var(--glow); }
.theme-toggle svg { width:16px; height:16px; }
.theme-toggle .icon-sun { display:none; }
.theme-toggle .icon-moon { display:block; }
.mob-toggle { display:none; width:36px; height:36px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--bd-s); border-radius:var(--r-md); cursor:pointer; color:var(--tx-2); }
.mob-toggle svg { width:18px; height:18px; }

/* --- Search trigger button --- */
.hdr-search {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--bd-s); border-radius:var(--r-md);
  cursor:pointer; color:var(--tx-2); transition:all var(--t-fast);
}
.hdr-search svg { width:16px; height:16px; }
.hdr-search:hover { border-color:var(--bd-h); color:var(--tx-1); background:var(--glow); box-shadow:var(--sh-glow); }

/* --- Search modal overlay --- */
.search-overlay {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:min(18vh,160px);
  background:rgba(8,25,34,.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
}
.search-overlay.open { opacity:1; visibility:visible; }
[data-theme="light"] .search-overlay { background:rgba(245,247,248,.7); }

.search-modal {
  width:min(580px,92vw);
  background:var(--bg-1); border:1px solid var(--bd-1);
  border-radius:var(--r-lg) 0 var(--r-lg) var(--r-lg);
  clip-path:polygon(0% 0%, calc(100% - var(--chamfer)) 0%, 100% var(--chamfer), 100% 100%, 0% 100%);
  box-shadow:var(--sh-elev), 0 0 60px rgba(9,158,142,.12);
  transform:translateY(-12px) scale(.97); transition:transform .25s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.search-overlay.open .search-modal { transform:translateY(0) scale(1); }

.search-input-row {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--bd-s);
}
.search-input-row svg { width:20px; height:20px; color:var(--tx-3); flex-shrink:0; }
.search-input-row input {
  flex:1; border:none; outline:none; background:transparent;
  font-family:var(--font); font-size:var(--fs-md); color:var(--tx-1);
  caret-color:var(--color-b1-turquoise);
}
.search-input-row input::placeholder { color:var(--tx-3); opacity:.6; }
.search-input-row .search-esc {
  font-family:var(--font); font-size:10px; font-weight:600;
  padding:2px 6px; background:var(--glow-s); border:1px solid var(--bd-s);
  border-radius:3px; color:var(--tx-3); cursor:pointer; white-space:nowrap;
}

.search-mode-row {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--bd-s);
}
.search-mode-row span { font-size:var(--fs-xs); color:var(--tx-3); font-weight:500; }
.search-mode-sw {
  display:flex; align-items:center; gap:2px;
  padding:2px; background:var(--glow); border-radius:var(--r-md);
  border:1px solid var(--bd-s);
}
.search-mode-sw button {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  font-family:var(--font); font-size:var(--fs-xs); font-weight:500;
  padding:var(--sp-1) var(--sp-3); border:none; border-radius:var(--r-sm);
  background:transparent; color:var(--tx-3); cursor:pointer;
  transition:all var(--t-fast); white-space:nowrap;
}
.search-mode-sw button svg { width:13px; height:13px; }
.search-mode-sw button.active { background:var(--color-b1-turquoise); color:#fff; }
.search-mode-sw button:hover:not(.active) { color:var(--tx-1); }

.search-body {
  padding:var(--sp-5);
  min-height:120px; max-height:min(50vh,380px); overflow-y:auto;
}
.search-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-2); height:120px; color:var(--tx-3); font-size:var(--fs-sm); text-align:center;
}
.search-empty svg { width:28px; height:28px; opacity:.35; }
.search-empty kbd { font-family:var(--font); font-size:10px; font-weight:600; padding:1px 5px; background:var(--glow-s); border:1px solid var(--bd-s); border-radius:3px; color:var(--tx-3); }

.search-result {
  display:block; text-decoration:none; color:inherit;
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm);
  transition:background var(--t-fast); cursor:pointer;
}
.search-result:hover, .search-result.active { background:var(--glow); }
.search-result-title { font-size:var(--fs-sm); font-weight:500; color:var(--tx-1); margin-bottom:2px; }
.search-result-path { font-size:var(--fs-xs); color:var(--tx-3); }
.search-result + .search-result { border-top:1px solid var(--bd-s); }

.search-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-2) var(--sp-5);
  border-top:1px solid var(--bd-s);
  font-size:11px; color:var(--tx-3);
}
.search-footer kbd { font-family:var(--font); font-size:10px; font-weight:600; padding:1px 5px; background:var(--glow-s); border:1px solid var(--bd-s); border-radius:3px; color:var(--tx-3); margin:0 2px; }
.search-footer-hints { display:flex; align-items:center; gap:var(--sp-4); }
.search-footer-brand { display:flex; align-items:center; gap:var(--sp-1); font-weight:500; color:var(--color-b1-turquoise); }
.search-footer-brand svg { width:12px; height:12px; }

@media(max-width:640px){
  .search-footer-hints { display:none; }
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-6);
  font-family:var(--font); font-size:var(--fs-sm); font-weight:500;
  letter-spacing:.02em; border:1px solid transparent;
  cursor:pointer; transition:all var(--t-base); text-decoration:none; white-space:nowrap;
  border-radius:var(--r-md); position:relative;
}
.btn--p, .btn--s {
  padding-left:calc(var(--sp-6) + 4px);
}
.btn--p::before, .btn--s::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:4px;
  border-radius:var(--r-md) 0 0 var(--r-md);
  transition:all var(--t-base);
}
.btn--p {
  background:var(--gradient-light); color:#1A2E3E;
  box-shadow:0 0 20px rgba(59,181,142,.15);
  clip-path:polygon(0% 0%, calc(100% - 12px) 0%, 100% 12px, 100% 100%, 0% 100%);
  border-radius:var(--r-sm);
}
.btn--p::before {
  background:linear-gradient(180deg, var(--color-b2-prussianblue), var(--color-b3-darkblue));
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  opacity:.55;
}
.btn--p:hover { box-shadow:0 0 30px rgba(59,181,142,.3),0 4px 20px rgba(59,181,142,.2); transform:translateY(-1px); color:#1A2E3E; }
.btn--p:hover::before { opacity:.65; }
.btn--s {
  background:transparent; color:var(--tx-1);
  border-color:var(--bd-h); border-radius:var(--r-md);
}
.btn--s::before {
  background:linear-gradient(180deg, var(--color-b2-prussianblue), var(--color-b3-darkblue));
  border-radius:calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px);
}
.btn--s:hover { background:var(--glow); border-color:var(--color-a3-turquoise); color:var(--tx-1); box-shadow:var(--sh-glow); }
.btn--s:hover::before { width:5px; box-shadow:0 0 12px rgba(25,116,116,.4); }
.btn--g { background:transparent; color:var(--color-a3-turquoise); padding:var(--sp-2) 0; border:none; }
.btn--g:hover { color:var(--color-a2-green); }
.btn--g:hover .arrow { transform:translateX(4px); }
.arrow { display:inline-block; transition:transform var(--t-fast); }

/* ================================================================
   SECTIONS
   ================================================================ */
.section { padding:var(--sp-24) 0; position:relative; }
.section--hero { padding-top:calc(var(--hdr) + var(--sp-20)); padding-bottom:var(--sp-24); min-height:85vh; display:flex; align-items:center; }

.s-label {
  display:flex; align-items:center; gap:var(--sp-3); width:fit-content;
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-a3-turquoise); margin-bottom:var(--sp-4);
}
.s-label::before {
  content:''; display:block; width:24px; height:1.5px;
  background:var(--gradient-light); border-radius:1px;
}

.s-title {
  font-size:clamp(var(--fs-3xl),3.5vw,var(--fs-5xl)); font-weight:500;
  line-height:1.15; letter-spacing:-.02em; margin-bottom:var(--sp-4);
  position:relative; display:inline-block;
}
.s-title::after {
  content:''; display:block;
  width:60px; height:2px; margin-top:var(--sp-4);
  background:var(--gradient-light); border-radius:1px;
}
.s-hdr--c .s-title::after { margin-left:auto; margin-right:auto; }

.s-desc { font-size:var(--fs-lg); color:var(--tx-2); max-width:680px; line-height:1.7; margin-top:var(--sp-4); }
.s-hdr { margin-bottom:var(--sp-16); }
.s-hdr--c { text-align:center; }
.s-hdr--c .s-label { margin-left:auto; margin-right:auto; }
.s-hdr--c .s-desc { margin-left:auto; margin-right:auto; }
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--bd-1),transparent); max-width:var(--max-w); margin:0 auto; }

/* ================================================================
   CARDS
   ================================================================ */
.card {
  background:var(--bg-card);
  border:1px solid var(--bd-s);
  border-radius:var(--r-md) 0 var(--r-md) var(--r-md);
  padding:var(--sp-8); padding-left:calc(var(--sp-8) + 5px);
  transition:all var(--t-base);
  position:relative; overflow:hidden;
  text-decoration:none; color:inherit; display:block;
  clip-path:polygon(0% 0%, calc(100% - var(--chamfer)) 0%, 100% var(--chamfer), 100% 100%, 0% 100%);
}
.card::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--color-b2-prussianblue), var(--color-b3-darkblue));
  border-radius:var(--r-md) 0 0 var(--r-md);
  transition:all var(--t-base); z-index:1;
}
.card::after {
  content:''; position:absolute; top:0; right:0;
  width:calc(var(--chamfer) * 1.414);
  height:1px; background:var(--bd-1);
  transform-origin:top right; transform:rotate(-45deg);
  opacity:0; transition:opacity var(--t-base);
}
.card:hover {
  background:var(--bg-card-h);
  border-color:var(--bd-1);
  box-shadow:var(--sh-card);
  transform:translateY(-2px);
  color:inherit;
}
.card:hover::before { width:5px; box-shadow:0 0 10px rgba(25,116,116,.3); }
.card:hover::after { opacity:1; }

.card-icon {
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md);
  background:var(--glow); border:1px solid var(--bd-1);
  margin-bottom:var(--sp-5); color:var(--color-a3-turquoise);
}
.card-icon svg { width:20px; height:20px; }
.c-title {
  font-size:var(--fs-lg); font-weight:500; margin-bottom:var(--sp-3); color:var(--tx-1);
  position:relative; display:inline-block;
}
.c-text { font-size:var(--fs-sm); color:var(--tx-2); line-height:1.7; }
.c-link {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-5); font-size:var(--fs-sm); font-weight:500;
  color:var(--color-a3-turquoise);
  border-bottom:1px solid rgba(59,181,142,.25);
  padding-bottom:2px;
  transition:all var(--t-fast);
}
.c-link:hover { color:var(--color-a2-green); border-bottom-color:var(--color-a2-green); }
.c-link:hover .arrow { transform:translateX(4px); }

/* ================================================================
   HERO
   ================================================================ */
.hero { position:relative; }
.hero-content { max-width:780px; position:relative; z-index:1; }
.hero h1 { font-size:var(--fs-hero); font-weight:500; line-height:1.08; letter-spacing:-.03em; margin-bottom:var(--sp-8); }
.hero h1::after {
  content:''; display:block;
  width:80px; height:2.5px; margin-top:var(--sp-6);
  background:var(--gradient-light); border-radius:1px;
}
.hero-sub { font-size:clamp(var(--fs-lg),2vw,var(--fs-xl)); color:var(--tx-2); max-width:620px; margin-bottom:var(--sp-10); line-height:1.7; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:var(--sp-4); }

/* Decorative orb */
.hero-orb { position:absolute; top:50%; right:-5%; width:520px; height:520px; transform:translateY(-50%); pointer-events:none; opacity:.55; }
.hero-orb-inner {
  width:100%; height:100%; border-radius:50%;
  background:radial-gradient(ellipse at 40% 40%,rgba(155,215,126,.2),rgba(59,181,142,.15) 35%,rgba(9,158,142,.08) 55%,transparent 75%);
  animation:orb-p 8s ease-in-out infinite;
}
.hero-orb-ring { position:absolute; inset:-20px; border-radius:50%; border:1px solid rgba(59,181,142,.12); animation:orb-r 30s linear infinite; }
.hero-orb-ring::before { content:''; position:absolute; top:0; left:50%; width:7px; height:7px; border-radius:50%; background:var(--color-a3-turquoise); transform:translateX(-50%) translateY(-50%); box-shadow:0 0 16px var(--color-a3-turquoise),0 0 40px rgba(59,181,142,.3); }
.hero-orb-ring2 { position:absolute; inset:-60px; border-radius:50%; border:1px dashed rgba(59,181,142,.06); animation:orb-r 50s linear infinite reverse; }
.hero-orb-ring2::before { content:''; position:absolute; bottom:10%; right:5%; width:4px; height:4px; border-radius:50%; background:var(--color-a1-yellow); box-shadow:0 0 10px var(--color-a1-yellow); }
@keyframes orb-p { 0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.06);opacity:.65} }
@keyframes orb-r { from{transform:rotate(0)}to{transform:rotate(360deg)} }

/* ================================================================
   GRIDS
   ================================================================ */
.g-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6); }
.g-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-5); }
.g-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
.g-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-8); align-items:center; }

/* Audience */
.aud-card { text-align:center; padding:var(--sp-8) var(--sp-5); padding-left:calc(var(--sp-5) + 5px); }
.aud-card .card-icon { margin:0 auto var(--sp-5); }
.aud-card .c-title { font-size:var(--fs-base); }
.aud-card .c-link { border-bottom:none; }

/* Differentiators */
.diff-item { position:relative; padding-top:var(--sp-6); }
.diff-item::before {
  content:''; position:absolute; top:0; left:0;
  width:36px; height:2px;
  background:var(--gradient-light); border-radius:1px;
}
.diff-title { font-size:var(--fs-base); font-weight:500; color:var(--tx-1); margin-bottom:var(--sp-3); }
.diff-text { font-size:var(--fs-sm); color:var(--tx-2); line-height:1.7; }

/* Trust */
.trust-badges { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
.trust-badge {
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-5); padding-left:calc(var(--sp-5) + 5px);
  background:var(--bg-card);
  border:1px solid var(--bd-s); border-radius:var(--r-md) 0 var(--r-md) var(--r-md);
  transition:border-color var(--t-base), box-shadow var(--t-base);
  clip-path:polygon(0% 0%, calc(100% - var(--chamfer-sm)) 0%, 100% var(--chamfer-sm), 100% 100%, 0% 100%);
  position:relative;
}
.trust-badge::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--color-b2-prussianblue), var(--color-b3-darkblue));
  border-radius:var(--r-md) 0 0 var(--r-md);
  transition:all var(--t-base);
}
.trust-badge:hover { border-color:var(--bd-1); }
.trust-badge:hover::before { width:5px; box-shadow:0 0 10px rgba(25,116,116,.3); }
.trust-badge-icon { flex-shrink:0; width:20px; height:20px; color:var(--color-a3-turquoise); margin-top:2px; }
.trust-badge-text { font-size:var(--fs-sm); color:var(--tx-2); line-height:1.6; }

/* Ecosystem tiers */
.eco-tiers { display:grid; gap:var(--sp-6); }
.tier-label {
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx-3); padding-bottom:var(--sp-3);
  border-bottom:1.5px solid var(--bd-1); margin-bottom:var(--sp-2);
  position:relative;
}
.tier-label::after {
  content:''; position:absolute; bottom:-1.5px; left:0;
  width:40px; height:1.5px; background:var(--gradient-light);
}
.tier-items { display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.tier-chip {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4);
  font-size:var(--fs-sm); font-weight:500; color:var(--tx-1);
  background:var(--bg-card); border:1px solid var(--bd-s);
  border-radius:var(--r-sm);
  text-decoration:none; transition:all var(--t-fast);
}
.tier-chip:hover { border-color:var(--bd-h); background:var(--glow); color:var(--tx-1); box-shadow:var(--sh-glow); }
.dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dot--core { background:var(--color-a3-turquoise); box-shadow:0 0 8px var(--color-a3-turquoise); }
.dot--app { background:var(--color-a2-green); box-shadow:0 0 8px var(--color-a2-green); }
.dot--mod { background:var(--color-a1-yellow); box-shadow:0 0 8px rgba(247,249,111,.6); }
.dot--inf { background:var(--color-b2-prussianblue); box-shadow:0 0 8px var(--color-b2-prussianblue); }

/* Blog */
.blog-card { padding:var(--sp-6); padding-left:calc(var(--sp-6) + 5px); }
.blog-meta { font-size:var(--fs-xs); color:var(--tx-3); margin-bottom:var(--sp-3); letter-spacing:.02em; }
.blog-title { font-size:var(--fs-lg); font-weight:500; margin-bottom:var(--sp-3); color:var(--tx-1); line-height:1.4; }
.blog-ex { font-size:var(--fs-sm); color:var(--tx-2); line-height:1.7; }

/* CTA Banner */
.cta-b {
  position:relative; padding:var(--sp-16) var(--sp-8);
  background:var(--bg-card); border:1px solid var(--bd-1);
  text-align:center; overflow:hidden;
  border-radius:var(--r-md) 0 var(--r-md) var(--r-md);
  clip-path:polygon(0% 0%, calc(100% - 24px) 0%, 100% 24px, 100% 100%, 0% 100%);
}
.cta-b::before { content:''; position:absolute; top:0; left:0; right:24px; height:1px; background:var(--gradient-light); }
.cta-b::after { content:''; position:absolute; top:-50%; left:50%; width:600px; height:600px; transform:translateX(-50%); background:radial-gradient(ellipse,var(--glow-s) 0%,transparent 70%); pointer-events:none; }
.cta-b-inner { position:relative; z-index:1; }
.cta-b-title { font-size:clamp(var(--fs-2xl),3vw,var(--fs-4xl)); font-weight:500; letter-spacing:-.02em; margin-bottom:var(--sp-4); }
.cta-b-text { font-size:var(--fs-lg); color:var(--tx-2); max-width:600px; margin:0 auto var(--sp-8); }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer { border-top:1px solid var(--bd-s); padding:var(--sp-16) 0 var(--sp-8); margin-top:var(--sp-16); }
.ft-grid { display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:var(--sp-12); margin-bottom:var(--sp-12); }
.ft-brand { max-width:260px; }
.ft-brand .logo { margin-bottom:var(--sp-5); }
.ft-brand-text { font-size:var(--fs-sm); color:var(--tx-3); line-height:1.7; }
.ft-heading {
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx-3); margin-bottom:var(--sp-5); padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--bd-s); position:relative;
}
.ft-heading::after { content:''; position:absolute; bottom:-1px; left:0; width:24px; height:1px; background:var(--gradient-light); }
.ft-links { list-style:none; display:flex; flex-direction:column; gap:var(--sp-3); }
.ft-links a { font-size:var(--fs-sm); color:var(--tx-2); }
.ft-links a:hover { color:var(--color-a3-turquoise); }
.ft-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:var(--sp-8); border-top:1px solid var(--bd-s); }
.ft-copy { font-size:var(--fs-xs); color:var(--tx-3); }
.ft-legal { display:flex; gap:var(--sp-6); }
.ft-legal a { font-size:var(--fs-xs); color:var(--tx-3); }
.ft-legal a:hover { color:var(--tx-2); }

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fade-up { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }
.ai { opacity:0; animation:fade-up .6s cubic-bezier(.16,1,.3,1) forwards; }
.d1{animation-delay:.1s} .d2{animation-delay:.2s} .d3{animation-delay:.3s}
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ================================================================
   MOBILE NAV
   ================================================================ */
.mob-overlay {
  position:fixed; inset:0; z-index:999;
  background:var(--bg-glass); backdrop-filter:blur(24px);
  display:flex; flex-direction:column; padding:var(--sp-8);
  padding-top:calc(var(--hdr) + var(--sp-8));
  opacity:0; pointer-events:none; transition:opacity var(--t-base); overflow-y:auto;
}
.mob-overlay.open { opacity:1; pointer-events:auto; }
.mob-overlay .nav-link { display:block; font-size:var(--fs-xl); padding:var(--sp-4) 0; border-bottom:1px solid var(--bd-s); }
.mob-sub { padding-left:var(--sp-6); }
.mob-sub .nav-link { font-size:var(--fs-base); color:var(--tx-3); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1100px){
  .g-4{grid-template-columns:repeat(2,1fr)} .g-5{grid-template-columns:repeat(3,1fr)}
  .ft-grid{grid-template-columns:repeat(3,1fr)} .ft-brand{grid-column:1/-1;max-width:100%}
}
@media(max-width:860px){
  .main-nav{display:none} .mob-toggle{display:flex}
  .hero-orb{display:none} .g-2{grid-template-columns:1fr;gap:var(--sp-10)}
  .g-5{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:1fr}
}
@media(max-width:640px){
  :root{--sp-24:4rem;--sp-16:3rem;--chamfer:10px;--chamfer-sm:7px}
  .section--hero{min-height:auto;padding-top:calc(var(--hdr) + var(--sp-12));padding-bottom:var(--sp-16)}
  .g-4,.g-5{grid-template-columns:1fr} .trust-badges{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:repeat(2,1fr)} .ft-bottom{flex-direction:column;gap:var(--sp-4);text-align:center}
  .hero-ctas{flex-direction:column} .hero-ctas .btn{width:100%;justify-content:center}
}

/* ================================================================
   SUB-PAGE LAYOUTS
   ================================================================ */

/* --- Page Hero (shorter than home hero) --- */
.section--page-hero {
  padding-top:calc(var(--hdr) + var(--sp-12));
  padding-bottom:var(--sp-16);
  min-height:auto;
  display:block;
}
.page-hero-inner {
  max-width:720px;
}
.page-hero-inner .s-title {
  font-size:clamp(var(--fs-3xl),4vw,var(--fs-5xl));
}
.page-hero-meta {
  display:flex; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-6);
}
.page-hero-meta .btn { font-size:var(--fs-sm); }

/* --- Product badge --- */
.product-badge {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-3);
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.04em;
  color:var(--color-a3-turquoise);
  background:var(--glow); border:1px solid var(--bd-1);
  border-radius:var(--r-sm);
}
.product-badge .dot { width:5px; height:5px; }

/* --- Feature grid --- */
.features-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--sp-6);
}
.feature {
  display:flex; gap:var(--sp-5); align-items:flex-start;
}
.feature-icon {
  flex-shrink:0; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md);
  background:var(--glow); border:1px solid var(--bd-1);
  color:var(--color-a3-turquoise);
}
.feature-icon svg { width:18px; height:18px; }
.feature-body {}
.feature-title {
  font-size:var(--fs-base); font-weight:500; color:var(--tx-1);
  margin-bottom:var(--sp-2);
}
.feature-text {
  font-size:var(--fs-sm); color:var(--tx-2); line-height:1.7;
}

/* --- Code snippet block --- */
.code-block {
  background:var(--bg-card); border:1px solid var(--bd-s);
  border-radius:var(--r-md) 0 var(--r-md) var(--r-md);
  clip-path:polygon(0% 0%, calc(100% - var(--chamfer-sm)) 0%, 100% var(--chamfer-sm), 100% 100%, 0% 100%);
  overflow:hidden; position:relative;
}
.code-block::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--color-b2-prussianblue), var(--color-b3-darkblue));
  border-radius:var(--r-md) 0 0 var(--r-md); z-index:1;
}
.code-block-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-3) var(--sp-5); padding-left:calc(var(--sp-5) + 5px);
  border-bottom:1px solid var(--bd-s);
  font-size:var(--fs-xs); color:var(--tx-3); font-weight:500;
  letter-spacing:.02em;
}
.code-block-header span { opacity:.5; }
.code-block pre {
  padding:var(--sp-5); padding-left:calc(var(--sp-5) + 5px);
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size:var(--fs-sm); line-height:1.7;
  color:var(--tx-2); overflow-x:auto;
  margin:0;
}
.code-block pre .kw { color:var(--code-kw); }
.code-block pre .str { color:var(--code-str); }
.code-block pre .cm { color:var(--tx-3); font-style:italic; }
.code-block pre .fn { color:var(--code-fn); }

.code-block pre { counter-reset:line; }
.code-block pre .line { display:inline; }
.code-block pre .ln {
  display:inline-block; width:2.5ch; margin-right:var(--sp-4);
  text-align:right; color:var(--tx-3); opacity:.4;
  user-select:none; pointer-events:none;
  font-variant-numeric:tabular-nums;
}

.code-copy {
  position:absolute; top:var(--sp-2); right:var(--sp-2); z-index:2;
  display:flex; align-items:center; gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-2);
  font-family:var(--font); font-size:11px; font-weight:500;
  color:var(--tx-3); background:var(--bg-card);
  border:1px solid var(--bd-s); border-radius:var(--r-sm);
  cursor:pointer; transition:all var(--t-fast);
  opacity:0; pointer-events:none;
}
.code-block:hover .code-copy { opacity:1; pointer-events:auto; }
.code-copy:hover { color:var(--tx-1); border-color:var(--bd-h); background:var(--glow); }
.code-copy svg { width:12px; height:12px; }
.code-copy.copied { color:var(--color-a3-turquoise); border-color:var(--color-a3-turquoise); }

/* --- Split layout --- */
.split {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--sp-12); align-items:center;
}
.split--flip { direction:rtl; }
.split--flip > * { direction:ltr; }

/* --- Use cases --- */
.use-cases {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp-5);
}
.use-case {
  padding:var(--sp-6); padding-left:calc(var(--sp-6) + 5px);
  background:var(--bg-card); border:1px solid var(--bd-s);
  border-radius:var(--r-md) 0 var(--r-md) var(--r-md);
  clip-path:polygon(0% 0%, calc(100% - var(--chamfer-sm)) 0%, 100% var(--chamfer-sm), 100% 100%, 0% 100%);
  position:relative;
}
.use-case::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--color-b2-prussianblue), var(--color-b3-darkblue));
  border-radius:var(--r-md) 0 0 var(--r-md);
}
.use-case-title {
  font-size:var(--fs-sm); font-weight:500; color:var(--tx-1);
  margin-bottom:var(--sp-2);
}
.use-case-text {
  font-size:var(--fs-sm); color:var(--tx-2); line-height:1.6;
}

/* --- Diagram placeholder --- */
.diagram-placeholder {
  padding:var(--sp-12) var(--sp-8);
  background:var(--bg-card); border:1px solid var(--bd-s);
  border-radius:var(--r-md) 0 var(--r-md) var(--r-md);
  clip-path:polygon(0% 0%, calc(100% - var(--chamfer)) 0%, 100% var(--chamfer), 100% 100%, 0% 100%);
  text-align:center; position:relative;
}
.diagram-placeholder::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--color-b2-prussianblue), var(--color-b3-darkblue));
  border-radius:var(--r-md) 0 0 var(--r-md);
}
.diagram-placeholder-text {
  font-size:var(--fs-sm); color:var(--tx-3);
  border:1px dashed var(--bd-1); border-radius:var(--r-md);
  padding:var(--sp-8); display:inline-block;
}

/* --- Breadcrumb --- */
.breadcrumb {
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-xs); color:var(--tx-3); margin-bottom:var(--sp-6);
}
.breadcrumb a { color:var(--tx-3); }
.breadcrumb a:hover { color:var(--color-a3-turquoise); }
.breadcrumb-sep { opacity:.4; }

/* --- Checklist --- */
.check-list { display:grid; gap:var(--sp-4); }
.check-item { display:flex; align-items:flex-start; gap:var(--sp-3); }
.check-icon {
  flex-shrink:0; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--glow); border:1px solid var(--bd-1);
  color:var(--color-a3-turquoise); margin-top:2px;
}
.check-icon svg { width:12px; height:12px; }
.check-text { font-size:var(--fs-sm); color:var(--tx-2); line-height:1.6; }
.check-text strong { color:var(--tx-1); font-weight:500; }

/* --- Stats row --- */
.stats-row {
  display:flex; gap:var(--sp-10); padding:var(--sp-8) 0;
  border-top:1px solid var(--bd-s); border-bottom:1px solid var(--bd-s);
}
.stat { text-align:center; flex:1; }
.stat-value {
  font-size:var(--fs-4xl); font-weight:500; letter-spacing:-.02em;
  line-height:1;
}
.stat-value .text-gradient { font-size:inherit; }
.stat-label {
  font-size:var(--fs-xs); color:var(--tx-3); margin-top:var(--sp-2);
  letter-spacing:.02em;
}

/* --- Sub-page responsive --- */
@media(max-width:860px){
  .features-grid { grid-template-columns:1fr; }
  .split { grid-template-columns:1fr; gap:var(--sp-8); }
  .split--flip { direction:ltr; }
  .use-cases { grid-template-columns:1fr; }
  .stats-row { flex-wrap:wrap; gap:var(--sp-6); }
  .stat { min-width:calc(50% - var(--sp-3)); }
}
@media(max-width:640px){
  .stats-row { flex-direction:column; }
  .stat { min-width:100%; }
  .page-hero-meta { flex-direction:column; align-items:flex-start; }
}

/* ================================================================
   DOCUMENTATION LAYOUT
   ================================================================ */
.docs-layout {
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 200px;
  gap:0;
  max-width:var(--wide);
  margin:0 auto;
  min-height:calc(100vh - var(--hdr));
}

.docs-sidebar {
  position:sticky; top:var(--hdr); height:calc(100vh - var(--hdr));
  overflow-y:auto; padding:var(--sp-8) var(--sp-6) var(--sp-8) var(--sp-6);
  border-right:1px solid var(--bd-s);
  scrollbar-width:thin; scrollbar-color:var(--bd-1) transparent;
}
.docs-sidebar::-webkit-scrollbar { width:4px; }
.docs-sidebar::-webkit-scrollbar-thumb { background:var(--bd-1); border-radius:2px; }

.docs-search {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  background:var(--bg-card); border:1px solid var(--bd-s);
  border-radius:var(--r-md); margin-bottom:var(--sp-6);
  transition:border-color var(--t-fast);
}
.docs-search:focus-within { border-color:var(--bd-h); }
.docs-search svg { width:14px; height:14px; color:var(--tx-3); flex-shrink:0; }
.docs-search input {
  border:none; background:none; outline:none;
  font-family:var(--font); font-size:var(--fs-sm); color:var(--tx-1);
  width:100%;
}
.docs-search input::placeholder { color:var(--tx-3); }
.docs-search kbd {
  font-family:var(--font); font-size:10px; color:var(--tx-3);
  background:var(--bg-0); border:1px solid var(--bd-s);
  border-radius:var(--r-xs); padding:1px 5px; line-height:1.4;
}

.sb-group { margin-bottom:var(--sp-6); }
.sb-group-label {
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tx-3);
  padding-bottom:var(--sp-2); margin-bottom:var(--sp-2);
  border-bottom:1px solid var(--bd-s); position:relative;
}
.sb-group-label::after {
  content:''; position:absolute; bottom:-1px; left:0;
  width:20px; height:1px; background:var(--gradient-light);
}
.sb-links { list-style:none; display:flex; flex-direction:column; gap:1px; }
.sb-link {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-sm); color:var(--tx-2);
  border-radius:var(--r-sm); text-decoration:none;
  transition:all var(--t-fast); position:relative;
}
.sb-link:hover { color:var(--tx-1); background:var(--glow); }
.sb-link.active {
  color:var(--tx-1); background:var(--glow);
  font-weight:500;
}
.sb-link.active::before {
  content:''; position:absolute; left:0; top:4px; bottom:4px;
  width:3px; background:linear-gradient(180deg, var(--color-b2-prussianblue), var(--color-b3-darkblue));
  border-radius:var(--r-xs);
}
.sb-sub { list-style:none; padding-left:var(--sp-5); display:flex; flex-direction:column; gap:1px; }
.sb-sub .sb-link { font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); }

.sb-toggle {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; background:none; border:none; cursor:pointer;
  padding:var(--sp-2) var(--sp-3); font-family:var(--font);
  font-size:var(--fs-sm); color:var(--tx-2); border-radius:var(--r-sm);
  transition:all var(--t-fast); text-align:left;
}
.sb-toggle:hover { color:var(--tx-1); background:var(--glow); }
.sb-toggle::after {
  content:''; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform var(--t-fast); flex-shrink:0;
}
.sb-toggle.open::after { transform:rotate(-135deg); }

.docs-content {
  padding:var(--sp-8) var(--sp-12);
  max-width:820px;
}

/* Docs typography */
.docs-content h1 {
  font-size:var(--fs-4xl); font-weight:500; line-height:1.15;
  letter-spacing:-.02em; margin-bottom:var(--sp-3); position:relative;
}
.docs-content h1::after {
  content:''; display:block;
  width:50px; height:2px; margin-top:var(--sp-4);
  background:var(--gradient-light); border-radius:1px;
}
.docs-content h2 {
  font-size:var(--fs-2xl); font-weight:500; line-height:1.25;
  letter-spacing:-.01em;
  margin-top:var(--sp-12); margin-bottom:var(--sp-4);
  padding-top:var(--sp-6); border-top:1px solid var(--bd-s);
  position:relative;
}
.docs-content h2::before {
  content:''; position:absolute; top:-1px; left:0;
  width:30px; height:1px; background:var(--gradient-light);
}
.docs-content h3 {
  font-size:var(--fs-xl); font-weight:500; line-height:1.3;
  margin-top:var(--sp-8); margin-bottom:var(--sp-3);
}
.docs-content h4 {
  font-size:var(--fs-base); font-weight:500; line-height:1.4;
  margin-top:var(--sp-6); margin-bottom:var(--sp-2);
}
.docs-content p {
  font-size:var(--fs-base); color:var(--tx-2); line-height:1.75;
  margin-bottom:var(--sp-5);
}
.docs-content strong { color:var(--tx-1); font-weight:500; }
.docs-content a { border-bottom:1px solid rgba(59,181,142,.25); padding-bottom:1px; }
.docs-content a:hover { border-bottom-color:var(--color-a3-turquoise); }
.docs-content ul, .docs-content ol {
  padding-left:var(--sp-6); margin-bottom:var(--sp-5);
}
.docs-content li {
  font-size:var(--fs-base); color:var(--tx-2); line-height:1.75;
  margin-bottom:var(--sp-2);
}
.docs-content li::marker { color:var(--color-a3-turquoise); }

.docs-content code:not(pre code) {
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size:.875em; color:var(--color-a3-turquoise);
  background:var(--glow); border:1px solid var(--bd-s);
  border-radius:var(--r-xs); padding:1px 5px;
}

.docs-content .code-block { margin-bottom:var(--sp-6); }

/* Callout boxes */
.callout {
  display:flex; gap:var(--sp-4); align-items:flex-start;
  padding:var(--sp-5); padding-left:calc(var(--sp-5) + 5px);
  background:var(--bg-card); border:1px solid var(--bd-s);
  border-radius:var(--r-md) 0 var(--r-md) var(--r-md);
  clip-path:polygon(0% 0%, calc(100% - var(--chamfer-sm)) 0%, 100% var(--chamfer-sm), 100% 100%, 0% 100%);
  margin-bottom:var(--sp-6); position:relative;
}
.callout::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:4px;
  border-radius:var(--r-md) 0 0 var(--r-md);
}
.callout--info::before { background:linear-gradient(180deg, var(--color-b1-turquoise), var(--color-b2-prussianblue)); }
.callout--warn::before { background:linear-gradient(180deg, var(--color-a1-yellow), var(--color-a2-green)); }
.callout--danger::before { background:linear-gradient(180deg, #e06060, #a04040); }
.callout--tip::before { background:linear-gradient(180deg, var(--color-a2-green), var(--color-a3-turquoise)); }
.callout-icon { flex-shrink:0; width:20px; height:20px; margin-top:2px; }
.callout--info .callout-icon { color:var(--color-b1-turquoise); }
.callout--warn .callout-icon { color:var(--color-a1-yellow); }
.callout--danger .callout-icon { color:#e06060; }
.callout--tip .callout-icon { color:var(--color-a2-green); }
.callout-body { flex:1; }
.callout-title {
  font-size:var(--fs-sm); font-weight:500; color:var(--tx-1);
  margin-bottom:var(--sp-1);
}
.callout-text {
  font-size:var(--fs-sm); color:var(--tx-2); line-height:1.6;
  margin:0;
}
.callout-text code {
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size:.875em; color:var(--color-a3-turquoise);
  background:var(--glow); border:1px solid var(--bd-s);
  border-radius:var(--r-xs); padding:1px 5px;
}

/* Docs table */
.docs-table {
  width:100%; border-collapse:collapse;
  margin-bottom:var(--sp-6); font-size:var(--fs-sm);
}
.docs-table th {
  text-align:left; padding:var(--sp-3) var(--sp-4);
  font-weight:500; color:var(--tx-1);
  border-bottom:2px solid var(--bd-1);
  font-size:var(--fs-xs); letter-spacing:.04em; text-transform:uppercase;
}
.docs-table td {
  padding:var(--sp-3) var(--sp-4);
  color:var(--tx-2); border-bottom:1px solid var(--bd-s);
  vertical-align:top; line-height:1.6;
}
.docs-table tr:hover td { background:var(--glow); }
.docs-table code {
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size:.85em; color:var(--color-a3-turquoise);
  background:var(--glow); border:1px solid var(--bd-s);
  border-radius:var(--r-xs); padding:1px 4px;
}
.type-badge {
  display:inline-block; font-size:10px; font-weight:500;
  padding:1px 6px; border-radius:var(--r-xs);
  background:var(--glow); border:1px solid var(--bd-s);
  color:var(--tx-3); letter-spacing:.02em;
}
.required-badge {
  display:inline-block; font-size:10px; font-weight:500;
  padding:1px 6px; border-radius:var(--r-xs);
  background:rgba(59,181,142,.1); border:1px solid rgba(59,181,142,.25);
  color:var(--color-a3-turquoise); letter-spacing:.02em;
}

.docs-content h2 .anchor, .docs-content h3 .anchor {
  opacity:0; margin-left:var(--sp-2); color:var(--tx-3);
  font-weight:400; text-decoration:none; border:none;
  transition:opacity var(--t-fast);
}
.docs-content h2:hover .anchor, .docs-content h3:hover .anchor { opacity:1; }
.docs-content h2 .anchor:hover, .docs-content h3 .anchor:hover { color:var(--color-a3-turquoise); }

.docs-pager {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);
  margin-top:var(--sp-16); padding-top:var(--sp-8);
  border-top:1px solid var(--bd-s);
}
.docs-pager-link {
  display:flex; flex-direction:column; gap:var(--sp-1);
  padding:var(--sp-5); padding-left:calc(var(--sp-5) + 5px);
  background:var(--bg-card); border:1px solid var(--bd-s);
  border-radius:var(--r-md) 0 var(--r-md) var(--r-md);
  clip-path:polygon(0% 0%, calc(100% - var(--chamfer-sm)) 0%, 100% var(--chamfer-sm), 100% 100%, 0% 100%);
  text-decoration:none; transition:all var(--t-base); position:relative;
}
.docs-pager-link::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--color-b2-prussianblue), var(--color-b3-darkblue));
  border-radius:var(--r-md) 0 0 var(--r-md);
  transition:all var(--t-base);
}
.docs-pager-link:hover {
  border-color:var(--bd-1); background:var(--bg-card-h); color:inherit;
}
.docs-pager-link:hover::before { width:5px; box-shadow:0 0 10px rgba(25,116,116,.3); }
.docs-pager-link--next { text-align:right; }
.docs-pager-meta {
  font-size:var(--fs-xs); color:var(--tx-3); letter-spacing:.02em;
}
.docs-pager-title {
  font-size:var(--fs-sm); font-weight:500; color:var(--tx-1);
}

.docs-toc {
  position:sticky; top:var(--hdr); height:calc(100vh - var(--hdr));
  overflow-y:auto; padding:var(--sp-8) var(--sp-5);
  scrollbar-width:thin; scrollbar-color:var(--bd-1) transparent;
}
.docs-toc::-webkit-scrollbar { width:3px; }
.docs-toc::-webkit-scrollbar-thumb { background:var(--bd-1); border-radius:2px; }
.toc-label {
  font-size:10px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tx-3); margin-bottom:var(--sp-4);
}
.toc-links { list-style:none; display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--bd-s); }
.toc-link {
  display:block; padding:var(--sp-1) var(--sp-4);
  font-size:var(--fs-xs); color:var(--tx-3); text-decoration:none;
  border-left:2px solid transparent; margin-left:-1px;
  transition:all var(--t-fast); line-height:1.5;
}
.toc-link:hover { color:var(--tx-2); }
.toc-link.active {
  color:var(--color-a3-turquoise); border-left-color:var(--color-a3-turquoise);
}
.toc-link--sub { padding-left:calc(var(--sp-4) + var(--sp-3)); font-size:11px; }

.docs-meta {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); margin-bottom:var(--sp-8);
  font-size:var(--fs-xs); color:var(--tx-3);
}
.docs-meta a { color:var(--tx-3); border:none; }
.docs-meta a:hover { color:var(--color-a3-turquoise); }

.version-badge {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:var(--fs-xs); font-weight:500; color:var(--color-a3-turquoise);
  background:var(--glow); border:1px solid var(--bd-1);
  border-radius:var(--r-sm); padding:var(--sp-1) var(--sp-3);
}

.code-tabs {
  display:flex; gap:0; border-bottom:1px solid var(--bd-s);
  margin-bottom:0;
}
.code-tab {
  padding:var(--sp-2) var(--sp-4);
  font-family:var(--font); font-size:var(--fs-xs); font-weight:500;
  color:var(--tx-3); background:none; border:none;
  cursor:pointer; transition:all var(--t-fast);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.code-tab:hover { color:var(--tx-2); }
.code-tab.active {
  color:var(--color-a3-turquoise);
  border-bottom-color:var(--color-a3-turquoise);
}

@media(max-width:1100px){
  .docs-layout { grid-template-columns:240px minmax(0,1fr); }
  .docs-toc { display:none; }
  .docs-content { padding:var(--sp-6) var(--sp-8); }
}
@media(max-width:860px){
  .docs-layout { grid-template-columns:1fr; }
  .docs-sidebar {
    position:fixed; left:0; top:var(--hdr); bottom:0;
    width:280px; z-index:900;
    background:var(--bg-glass); backdrop-filter:blur(20px);
    transform:translateX(-100%); transition:transform var(--t-base);
    border-right:1px solid var(--bd-1);
  }
  .docs-sidebar.open { transform:translateX(0); }
  .docs-content { padding:var(--sp-6); }
  .docs-pager { grid-template-columns:1fr; }
}

/* ================================================================
   BLOG TEMPLATES
   ================================================================ */

.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
.blog-grid .card { padding:0; padding-left:0; }
.blog-grid .card::before { left:0; }
.blog-thumb {
  width:100%; aspect-ratio:16/9;
  background:var(--bg-2); overflow:hidden;
  clip-path:polygon(0% 0%, calc(100% - var(--chamfer)) 0%, 100% var(--chamfer), 100% 100%, 0% 100%);
}
.blog-thumb img { width:100%; height:100%; object-fit:cover; }
.blog-thumb-ph {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); color:var(--tx-3); letter-spacing:.04em;
}
.blog-grid .blog-body { padding:var(--sp-6); padding-left:calc(var(--sp-6) + 5px); }
.blog-cat {
  display:inline-flex; padding:var(--sp-1) var(--sp-3);
  font-size:10px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:var(--color-a3-turquoise); background:var(--glow);
  border:1px solid var(--bd-1); border-radius:var(--r-sm);
  margin-bottom:var(--sp-3);
}
.blog-grid .blog-title { font-size:var(--fs-lg); font-weight:500; margin-bottom:var(--sp-3); color:var(--tx-1); line-height:1.35; }
.blog-grid .blog-ex { font-size:var(--fs-sm); color:var(--tx-2); line-height:1.65; margin-bottom:var(--sp-4); }
.blog-grid .blog-meta { font-size:var(--fs-xs); color:var(--tx-3); display:flex; align-items:center; gap:var(--sp-3); }
.blog-grid .blog-meta span { display:flex; align-items:center; gap:var(--sp-1); }
.blog-grid .blog-meta svg { width:12px; height:12px; }

.blog-featured {
  grid-column:1/-1;
  display:grid; grid-template-columns:1.2fr 1fr; gap:0;
}
.blog-featured .blog-thumb { aspect-ratio:auto; min-height:320px; clip-path:none; border-radius:var(--r-md) 0 0 var(--r-md); }
.blog-featured .blog-body { display:flex; flex-direction:column; justify-content:center; padding:var(--sp-8); }
.blog-featured .blog-title { font-size:var(--fs-2xl); }

.pagination {
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  margin-top:var(--sp-12);
}
.page-btn {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; font-family:var(--font);
  font-size:var(--fs-sm); font-weight:500; color:var(--tx-2);
  background:none; border:1px solid var(--bd-s); border-radius:var(--r-md);
  cursor:pointer; transition:all var(--t-fast); text-decoration:none;
}
.page-btn:hover { border-color:var(--bd-h); color:var(--tx-1); background:var(--glow); }
.page-btn.active { border-color:var(--color-a3-turquoise); color:var(--color-a3-turquoise); background:var(--glow); }

/* --- Blog article --- */
.article-layout { max-width:740px; margin:0 auto; padding:0 var(--sp-6); }
.article-hero {
  padding-top:calc(var(--hdr) + var(--sp-12)); padding-bottom:var(--sp-8);
}
.article-hero .blog-cat { margin-bottom:var(--sp-4); }
.article-hero h1 {
  font-size:clamp(var(--fs-3xl),4vw,var(--fs-5xl)); font-weight:500;
  line-height:1.12; letter-spacing:-.02em; margin-bottom:var(--sp-6);
}
.article-hero h1::after {
  content:''; display:block; width:60px; height:2px;
  margin-top:var(--sp-5); background:var(--gradient-light); border-radius:1px;
}
.article-byline {
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-5) 0; border-top:1px solid var(--bd-s); border-bottom:1px solid var(--bd-s);
}
.article-avatar {
  width:44px; height:44px; border-radius:50%;
  background:var(--bg-2); overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); font-weight:500; color:var(--color-a3-turquoise);
  border:1px solid var(--bd-1);
}
.article-byline-text { flex:1; }
.article-author { font-size:var(--fs-sm); font-weight:500; color:var(--tx-1); }
.article-date { font-size:var(--fs-xs); color:var(--tx-3); }
.article-share { display:flex; gap:var(--sp-2); }
.share-btn {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md); border:1px solid var(--bd-s);
  background:none; color:var(--tx-3); cursor:pointer;
  transition:all var(--t-fast);
}
.share-btn:hover { border-color:var(--bd-h); color:var(--tx-1); background:var(--glow); }
.share-btn svg { width:14px; height:14px; }

.article-body { padding:var(--sp-10) 0; }
.article-body h2 {
  font-size:var(--fs-2xl); font-weight:500; line-height:1.25;
  letter-spacing:-.01em; margin-top:var(--sp-12); margin-bottom:var(--sp-4);
  padding-top:var(--sp-6); border-top:1px solid var(--bd-s); position:relative;
}
.article-body h2::before {
  content:''; position:absolute; top:-1px; left:0;
  width:30px; height:1px; background:var(--gradient-light);
}
.article-body h3 { font-size:var(--fs-xl); font-weight:500; margin-top:var(--sp-8); margin-bottom:var(--sp-3); }
.article-body p { font-size:var(--fs-base); color:var(--tx-2); line-height:1.8; margin-bottom:var(--sp-5); }
.article-body strong { color:var(--tx-1); font-weight:500; }
.article-body a { color:var(--color-a3-turquoise); border-bottom:1px solid rgba(59,181,142,.25); }
.article-body a:hover { border-bottom-color:var(--color-a3-turquoise); }
.article-body blockquote {
  padding:var(--sp-5) var(--sp-6); padding-left:calc(var(--sp-6) + 5px);
  margin:var(--sp-6) 0; background:var(--bg-card);
  border:1px solid var(--bd-s); border-radius:var(--r-md) 0 var(--r-md) var(--r-md);
  clip-path:polygon(0% 0%, calc(100% - var(--chamfer-sm)) 0%, 100% var(--chamfer-sm), 100% 100%, 0% 100%);
  position:relative;
}
.article-body blockquote::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--color-b2-prussianblue), var(--color-b3-darkblue));
  border-radius:var(--r-md) 0 0 var(--r-md);
}
.article-body blockquote p { margin:0; font-style:italic; }
.article-body ul, .article-body ol { padding-left:var(--sp-6); margin-bottom:var(--sp-5); }
.article-body li { font-size:var(--fs-base); color:var(--tx-2); line-height:1.8; margin-bottom:var(--sp-2); }
.article-body li::marker { color:var(--color-a3-turquoise); }
.article-body img { width:100%; border-radius:var(--r-md); margin:var(--sp-6) 0; }
.article-body code:not(pre code) {
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size:.875em; color:var(--color-a3-turquoise);
  background:var(--glow); border:1px solid var(--bd-s);
  border-radius:var(--r-xs); padding:1px 5px;
}

.article-tags { display:flex; flex-wrap:wrap; gap:var(--sp-2); padding:var(--sp-6) 0; border-top:1px solid var(--bd-s); }
.tag {
  font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3);
  color:var(--tx-3); background:var(--glow); border:1px solid var(--bd-s);
  border-radius:var(--r-sm); text-decoration:none; transition:all var(--t-fast);
}
.tag:hover { color:var(--color-a3-turquoise); border-color:var(--bd-1); }

.related-posts { padding:var(--sp-8) 0; }

/* ================================================================
   ABOUT / COMPANY PAGE
   ================================================================ */

.timeline { position:relative; padding-left:var(--sp-10); }
.timeline::before {
  content:''; position:absolute; left:11px; top:6px; bottom:6px;
  width:2px; background:linear-gradient(180deg, var(--color-a3-turquoise), var(--color-b3-darkblue));
  border-radius:1px;
}
.tl-item { position:relative; margin-bottom:var(--sp-8); }
.tl-item:last-child { margin-bottom:0; }
.tl-dot {
  position:absolute; left:calc(-1 * var(--sp-10) + 5px); top:6px;
  width:14px; height:14px; border-radius:50%;
  background:var(--bg-0); border:2px solid var(--color-a3-turquoise);
}
.tl-dot::after {
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:var(--color-a3-turquoise);
}
.tl-year {
  font-size:var(--fs-xs); font-weight:500; color:var(--color-a3-turquoise);
  letter-spacing:.04em; margin-bottom:var(--sp-1);
}
.tl-title { font-size:var(--fs-base); font-weight:500; color:var(--tx-1); margin-bottom:var(--sp-2); }
.tl-text { font-size:var(--fs-sm); color:var(--tx-2); line-height:1.7; }

.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6); }
.team-card {
  text-align:center;
  padding:var(--sp-6); padding-left:calc(var(--sp-6) + 5px);
}
.team-avatar {
  width:80px; height:80px; border-radius:50%; margin:0 auto var(--sp-4);
  background:var(--bg-2); border:2px solid var(--bd-1);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-2xl); font-weight:300; color:var(--color-a3-turquoise);
  overflow:hidden;
}
.team-name { font-size:var(--fs-base); font-weight:500; color:var(--tx-1); margin-bottom:var(--sp-1); }
.team-role { font-size:var(--fs-sm); color:var(--tx-3); }

.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }

/* ================================================================
   CONTACT PAGE
   ================================================================ */

.contact-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:var(--sp-12); align-items:start; }

.form-group { margin-bottom:var(--sp-5); }
.form-label {
  display:block; font-size:var(--fs-sm); font-weight:500;
  color:var(--tx-1); margin-bottom:var(--sp-2);
}
.form-input, .form-textarea, .form-select {
  width:100%; padding:var(--sp-3) var(--sp-4);
  font-family:var(--font); font-size:var(--fs-sm); color:var(--tx-1);
  background:var(--bg-card); border:1px solid var(--bd-s);
  border-radius:var(--r-md); transition:border-color var(--t-fast);
  outline:none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color:var(--bd-h); box-shadow:0 0 0 3px var(--glow);
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--tx-3); }
.form-textarea { min-height:140px; resize:vertical; line-height:1.6; }
.form-select { cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23637A8E' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:var(--sp-8);
}
.form-hint { font-size:var(--fs-xs); color:var(--tx-3); margin-top:var(--sp-1); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }

.contact-info { display:grid; gap:var(--sp-4); }
.contact-card {
  display:flex; align-items:flex-start; gap:var(--sp-4);
  padding:var(--sp-5); padding-left:calc(var(--sp-5) + 5px);
  background:var(--bg-card); border:1px solid var(--bd-s);
  border-radius:var(--r-md) 0 var(--r-md) var(--r-md);
  clip-path:polygon(0% 0%, calc(100% - var(--chamfer-sm)) 0%, 100% var(--chamfer-sm), 100% 100%, 0% 100%);
  position:relative;
}
.contact-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--color-b2-prussianblue), var(--color-b3-darkblue));
  border-radius:var(--r-md) 0 0 var(--r-md);
}
.contact-card-icon {
  flex-shrink:0; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md); background:var(--glow);
  border:1px solid var(--bd-1); color:var(--color-a3-turquoise);
}
.contact-card-icon svg { width:16px; height:16px; }
.contact-card-title { font-size:var(--fs-sm); font-weight:500; color:var(--tx-1); margin-bottom:var(--sp-1); }
.contact-card-text { font-size:var(--fs-sm); color:var(--tx-2); line-height:1.6; }
.contact-card-text a { color:var(--color-a3-turquoise); }

.map-placeholder {
  width:100%; aspect-ratio:16/9; margin-top:var(--sp-6);
  background:var(--bg-card); border:1px solid var(--bd-s);
  border-radius:var(--r-md) 0 var(--r-md) var(--r-md);
  clip-path:polygon(0% 0%, calc(100% - var(--chamfer)) 0%, 100% var(--chamfer), 100% 100%, 0% 100%);
  display:flex; align-items:center; justify-content:center;
  color:var(--tx-3); font-size:var(--fs-sm);
}

/* ================================================================
   PRICING PAGE
   ================================================================ */

.billing-toggle {
  display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
  margin-bottom:var(--sp-10);
}
.billing-label { font-size:var(--fs-sm); color:var(--tx-2); }
.billing-label.active { color:var(--tx-1); font-weight:500; }
.billing-switch {
  width:48px; height:26px; border-radius:13px;
  background:var(--bd-1); border:none; cursor:pointer;
  position:relative; transition:background var(--t-fast);
  padding:0;
}
.billing-switch::after {
  content:''; position:absolute; left:3px; top:3px;
  width:20px; height:20px; border-radius:50%;
  background:var(--tx-1); transition:transform var(--t-fast);
}
.billing-switch.annual { background:var(--color-a3-turquoise); }
.billing-switch.annual::after { transform:translateX(22px); }
.save-badge {
  font-size:10px; font-weight:500; padding:2px 8px;
  background:rgba(59,181,142,.12); color:var(--color-a3-turquoise);
  border:1px solid rgba(59,181,142,.25); border-radius:var(--r-sm);
}

.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); align-items:start; }
.pricing-card {
  padding:var(--sp-8); padding-left:calc(var(--sp-8) + 5px);
}
.pricing-card.featured { border-color:var(--bd-h); }
.pricing-card.featured::before { background:linear-gradient(180deg, var(--color-a3-turquoise), var(--color-b1-turquoise)); width:5px; }
.pricing-label { font-size:var(--fs-xs); font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--tx-3); margin-bottom:var(--sp-4); }
.pricing-featured-badge {
  display:inline-flex; padding:var(--sp-1) var(--sp-3);
  font-size:10px; font-weight:500; letter-spacing:.04em;
  color:var(--color-a3-turquoise); background:var(--glow);
  border:1px solid var(--bd-1); border-radius:var(--r-sm);
  margin-bottom:var(--sp-4);
}
.pricing-name { font-size:var(--fs-2xl); font-weight:500; color:var(--tx-1); margin-bottom:var(--sp-2); }
.pricing-desc { font-size:var(--fs-sm); color:var(--tx-2); margin-bottom:var(--sp-6); line-height:1.6; }
.pricing-price { margin-bottom:var(--sp-6); }
.pricing-amount { font-size:var(--fs-5xl); font-weight:500; letter-spacing:-.02em; line-height:1; }
.pricing-period { font-size:var(--fs-sm); color:var(--tx-3); }
.pricing-custom { font-size:var(--fs-2xl); font-weight:500; color:var(--tx-1); }
.pricing-features { list-style:none; padding:0; margin-bottom:var(--sp-8); display:grid; gap:var(--sp-3); }
.pricing-feature {
  display:flex; align-items:flex-start; gap:var(--sp-2);
  font-size:var(--fs-sm); color:var(--tx-2); line-height:1.5;
}
.pricing-feature svg { width:16px; height:16px; flex-shrink:0; color:var(--color-a3-turquoise); margin-top:2px; }
.pricing-card .btn { width:100%; justify-content:center; }

.compare-table { width:100%; border-collapse:collapse; margin-top:var(--sp-8); font-size:var(--fs-sm); }
.compare-table th {
  text-align:center; padding:var(--sp-4);
  font-weight:500; color:var(--tx-1); font-size:var(--fs-base);
  border-bottom:2px solid var(--bd-1);
}
.compare-table th:first-child { text-align:left; }
.compare-table td {
  padding:var(--sp-3) var(--sp-4); text-align:center;
  color:var(--tx-2); border-bottom:1px solid var(--bd-s);
  vertical-align:middle;
}
.compare-table td:first-child { text-align:left; font-weight:500; color:var(--tx-1); }
.compare-table tr:hover td { background:var(--glow); }
.compare-table .check-cell { color:var(--color-a3-turquoise); }
.compare-table .dash-cell { color:var(--tx-3); }
.compare-group td {
  padding-top:var(--sp-5); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tx-3);
  border-bottom:1px solid var(--bd-1);
}

/* --- Additional responsive --- */
@media(max-width:1100px){
  .team-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:860px){
  .blog-grid { grid-template-columns:1fr; }
  .blog-featured { grid-template-columns:1fr; }
  .blog-featured .blog-thumb { min-height:200px; border-radius:var(--r-md) var(--r-md) 0 0; }
  .contact-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .values-grid { grid-template-columns:1fr; }
  .compare-table { font-size:var(--fs-xs); }
  .compare-table th, .compare-table td { padding:var(--sp-2) var(--sp-3); }
}
@media(max-width:640px){
  .form-row { grid-template-columns:1fr; }
  .article-byline { flex-wrap:wrap; }
  .team-grid { grid-template-columns:1fr; max-width:280px; margin:0 auto; }
}

/* ================================================================
   LOGIN BUTTON (header)
   ================================================================ */
.hdr-login {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:0 var(--sp-3);
  height:36px;
  font-family:var(--font); font-size:var(--fs-xs); font-weight:500;
  color:var(--tx-2); background:transparent;
  border:1px solid var(--bd-s); border-radius:var(--r-md);
  text-decoration:none; cursor:pointer;
  transition:all var(--t-fast); white-space:nowrap;
}
.hdr-login:hover {
  background:var(--glow); border-color:var(--bd-h);
  color:var(--tx-1);
}
.hdr-login svg { width:13px; height:13px; }