/* ==========================================================================
   Kynevo — shared stylesheet
   ========================================================================== */

:root{
  --bg:            #0B0D10;
  --bg-raise:      #10141B;
  --bg-card:       #12171F;
  --bg-alt:        #0D1117;
  --border:        rgba(237,239,242,0.09);
  --border-strong: rgba(237,239,242,0.16);
  --text:          #EDEFF2;
  --text-dim:      #9FB0C3;
  --text-faint:    #5C6B7D;
  --accent:        #3ED6B5;
  --accent-strong: #2FBFA0;
  --accent-dim:    rgba(62,214,181,0.12);
  --accent-ink:    #06211C;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --container: 1160px;
  --radius-lg: 18px;
  --radius: 12px;
  --radius-sm: 8px;

  --ease: cubic-bezier(.22,.9,.3,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; }

::selection{ background:var(--accent); color:var(--accent-ink); }

/* ---------- layout helpers ---------- */
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
.section-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--text-faint);
  margin:0 0 14px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--accent);
  margin:0 0 18px;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--accent);
  display:inline-block;
}

/* ---------- background texture (kept from original) ---------- */
.grid-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(to right, rgba(237,239,242,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237,239,242,0.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
}
.cursor-dot, .cursor-ring{
  position:fixed;
  top:0; left:0;
  pointer-events:none;
  z-index:9999;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{ width:6px; height:6px; background:var(--accent); }
.cursor-ring{
  width:32px; height:32px;
  border:1px solid var(--border-strong);
  transition:width .2s var(--ease), height .2s var(--ease), border-color .2s;
}
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

/* ---------- nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 32px;
  background:rgba(11,13,16,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-mark{
  display:flex;
  align-items:center;
  gap:12px;
}
.k-mark{ flex:none; }
.mark-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.mark-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:0.04em;
}
.nav-tagline{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.08em;
  color:var(--text-faint);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
}
.nav-links a{
  font-size:14.5px;
  font-weight:500;
  color:var(--text-dim);
  position:relative;
  padding-bottom:4px;
  transition:color .2s;
}
.nav-links a:hover{ color:var(--text); }
.nav-links a.active{ color:var(--accent); }
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
}
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-toggle{
  display:none;
  width:38px; height:38px;
  align-items:center; justify-content:center;
  background:transparent;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  color:var(--text);
  cursor:pointer;
}
.nav-toggle svg{ width:18px; height:18px; }

@media (max-width:860px){
  .nav-links{
    position:fixed;
    top:73px; left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--bg-raise);
    border-bottom:1px solid var(--border);
    padding:8px 32px 18px;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav-links.open{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .nav-links a{ padding:12px 0; width:100%; }
  .nav-toggle{ display:inline-flex; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 22px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s var(--ease), background .2s, border-color .2s, opacity .2s;
  white-space:nowrap;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{
  background:var(--accent);
  color:var(--accent-ink);
}
.btn-primary:hover{ background:var(--accent-strong); }
.btn-ghost{
  background:transparent;
  border-color:var(--border-strong);
  color:var(--text);
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-sm{ padding:10px 16px; font-size:13.5px; }
.btn svg{ width:15px; height:15px; }

/* ---------- hero (shared shell) ---------- */
.hero{
  position:relative;
  z-index:1;
  padding:96px 32px 84px;
  max-width:var(--container);
  margin:0 auto;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url('assets/hero-bg.webp');
  background-size:cover;
  background-position:center;
  opacity:0.22;
  filter:grayscale(1) brightness(0.85) contrast(1.1);
  mask-image:linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  pointer-events:none;
}
.hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--accent);
  mix-blend-mode:color;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
}
.hero h1{
  font-size:clamp(40px, 6vw, 68px);
  line-height:1.04;
  margin-bottom:22px;
}
.hero h1 .accent{ color:var(--accent); }
.hero-sub{
  max-width:520px;
  font-size:17px;
  color:var(--text-dim);
  margin-bottom:22px;
}
.hero-tag{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.16em;
  color:var(--text-faint);
  margin-bottom:32px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:280px;
  perspective:900px;
  overflow:hidden;
}
.hero-visual svg{ width:100%; height:auto; max-width:380px; transform-style:preserve-3d; }
.hex-line{ fill:none; stroke:var(--accent); stroke-width:1.4; opacity:0.85; transform-box:fill-box; transform-origin:50% 50%; animation:hex-spin-3d 16s linear infinite; }
.hex-line-dim{ fill:none; stroke:var(--border-strong); stroke-width:1.2; transform-box:fill-box; transform-origin:50% 50%; animation:hex-spin-3d-rev 11s linear infinite; }
.hex-dot{ fill:var(--accent); transform-box:fill-box; transform-origin:50% 50%; animation:hex-dot-pulse 4s ease-in-out infinite; }
@keyframes hex-spin-3d{
  0%   { transform:rotateZ(0deg)    rotateY(0deg)    rotateX(10deg); }
  50%  { transform:rotateZ(180deg)  rotateY(180deg)  rotateX(-10deg); }
  100% { transform:rotateZ(360deg)  rotateY(360deg)  rotateX(10deg); }
}
@keyframes hex-spin-3d-rev{
  0%   { transform:rotateZ(0deg)    rotateY(0deg)    rotateX(-8deg); }
  50%  { transform:rotateZ(-180deg) rotateY(-180deg) rotateX(8deg); }
  100% { transform:rotateZ(-360deg) rotateY(-360deg) rotateX(-8deg); }
}
@keyframes hex-dot-pulse{
  0%, 100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.35); opacity:0.75; }
}
@media (prefers-reduced-motion: reduce){ .hex-line, .hex-line-dim, .hex-dot{ animation:none; } }

/* simple page hero (no split visual) */
.page-hero{
  position:relative;
  z-index:1;
  padding:90px 32px 56px;
  max-width:var(--container);
  margin:0 auto;
  overflow:hidden;
}
.page-hero h1{
  font-size:clamp(34px, 5.2vw, 54px);
  line-height:1.06;
  max-width:820px;
}
.page-hero h1 .accent{ color:var(--accent); }
.page-hero-sub{
  margin-top:18px;
  max-width:620px;
  font-size:16.5px;
  color:var(--text-dim);
}
.page-hero-visual{
  position:absolute;
  right:0; top:10px;
  width:260px;
  opacity:0.9;
  pointer-events:none;
}
@media (max-width:900px){ .page-hero-visual{ display:none; } }

/* ---------- generic section ---------- */
.section{
  position:relative;
  z-index:1;
  padding:76px 32px;
  border-top:1px solid var(--border);
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(26px, 3.4vw, 38px);
}
.section-head h2 .accent{ color:var(--accent); }
.section-head-sub{
  max-width:360px;
  color:var(--text-dim);
  font-size:15px;
}

/* ---------- focus strip (home, replaces fake stat metrics) ---------- */
.focus-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.focus-item{
  background:var(--bg-raise);
  padding:28px 26px;
  position:relative;
  overflow:hidden;
}
.focus-item-illustration{
  position:absolute;
  right:-10px; bottom:-10px;
  width:120px;
  height:120px;
  opacity:0.5;
  pointer-events:none;
}
.focus-item-photo{
  position:absolute;
  right:-14px; bottom:-14px;
  width:130px;
  height:130px;
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
  mask-image:radial-gradient(circle, black 40%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle, black 40%, transparent 75%);
}
.focus-item-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.16;
  filter:grayscale(1) brightness(0.8) contrast(1.05);
}
.focus-item .num, .focus-item h3, .focus-item p{ position:relative; z-index:1; }
.focus-item .num{
  font-family:var(--font-mono);
  color:var(--accent);
  font-size:13px;
  letter-spacing:0.08em;
  margin-bottom:10px;
  display:block;
}
.focus-item h3{ font-size:19px; margin-bottom:8px; }
.focus-item p{ color:var(--text-dim); font-size:14.5px; }
@media (max-width:760px){ .focus-strip{ grid-template-columns:1fr; } }

#modules{ overflow:hidden; }
.modules-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url('assets/pharma-hero-lg.webp');
  background-size:cover;
  background-position:center;
  opacity:0.2;
  filter:grayscale(1) brightness(0.85) contrast(1.1);
  mask-image:linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  pointer-events:none;
}
.modules-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--accent);
  mix-blend-mode:color;
}

/* ---------- module cards (home) ---------- */
.module-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}
.module-card{
  display:block;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:30px;
  transition:border-color .2s, transform .2s var(--ease), background .2s;
}
.module-link:hover{
  border-color:var(--border-strong);
  transform:translateY(-3px);
  background:var(--bg-raise);
}
.module-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--accent);
  background:var(--accent-dim);
  padding:5px 10px 5px 8px;
  border-radius:999px;
}
.status-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.module-index{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-faint);
  letter-spacing:0.08em;
}
.module-card h2{
  font-size:24px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.stratos-icon{ display:inline-flex; }
.arrow{
  margin-left:auto;
  color:var(--text-faint);
  font-size:18px;
  transition:transform .2s, color .2s;
}
.module-link:hover .arrow{ color:var(--accent); transform:translate(2px,-2px); }
.module-desc{ color:var(--text-dim); font-size:14.5px; margin-bottom:22px; }
.module-meta{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-faint);
  letter-spacing:0.04em;
  padding-top:18px;
  border-top:1px solid var(--border);
  margin-bottom:14px;
}
.module-footer{ font-size:13.5px; color:var(--accent); font-weight:600; }
@media (max-width:760px){ .module-grid{ grid-template-columns:1fr; } }

/* ---------- feature / service cards (services page + home preview) ---------- */
#how-we-help{ overflow:hidden; }
.how-we-help-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url('assets/pharma-capsules-lg.webp');
  background-size:cover;
  background-position:center;
  opacity:0.2;
  filter:grayscale(1) brightness(0.85) contrast(1.1);
  mask-image:linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  pointer-events:none;
}
.how-we-help-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--accent);
  mix-blend-mode:color;
}

#services-features{ overflow:hidden; }
.services-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url('assets/board-meeting.webp');
  background-size:cover;
  background-position:center;
  opacity:0.2;
  filter:grayscale(1) brightness(0.85) contrast(1.1);
  mask-image:linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  pointer-events:none;
}
.services-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--accent);
  mix-blend-mode:color;
}

#about-values{ overflow:hidden; }
.about-hero-wrap{ position:relative; overflow:hidden; }
.about-values-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url('assets/pharma-lifestyle.webp');
  background-size:cover;
  background-position:center 15%;
  opacity:0.2;
  filter:grayscale(1) brightness(0.85) contrast(1.1);
  mask-image:linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  pointer-events:none;
}
.about-values-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--accent);
  mix-blend-mode:color;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.card-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
.feature-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  position:relative;
  overflow:hidden;
}
.feature-card .tick{
  width:32px; height:2px;
  background:var(--accent);
  margin-bottom:16px;
}
.feature-card h3{ font-size:19px; margin-bottom:10px; }
.feature-card p{ color:var(--text-dim); font-size:14.5px; margin-bottom:16px; }
.feature-card .check-list{ display:flex; flex-direction:column; gap:9px; }
.feature-card .check-list li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13.8px;
  color:var(--text-dim);
}
.feature-card .check-list svg{
  flex:none;
  width:16px; height:16px;
  margin-top:2px;
  color:var(--accent);
}
@media (max-width:900px){
  .card-grid, .card-grid.cols-2{ grid-template-columns:1fr; }
}

/* ---------- values grid (about) ---------- */
.values-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
.value-card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  background:var(--bg-card);
}
.value-card h3{ font-size:19px; margin-bottom:10px; }
.value-card p{ color:var(--text-dim); font-size:14.5px; }
@media (max-width:760px){ .values-grid{ grid-template-columns:1fr; } }

/* ---------- about copy block ---------- */
.about-copy{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:760px;
  color:var(--text-dim);
  font-size:16px;
}
.about-copy strong{ color:var(--text); }

/* ---------- founder card ---------- */
.about-founder-line{ color:var(--text-dim); font-size:14px; margin-bottom:20px; }
.about-founder-line strong{ color:var(--text); }
.founder-card{
  display:flex;
  gap:28px;
  align-items:flex-start;
  background:var(--bg-raise);
  border:1px solid var(--border);
  border-radius:14px;
  padding:32px;
}
.founder-avatar{
  flex-shrink:0;
  width:96px; height:96px;
  border-radius:50%;
  overflow:hidden;
  background:var(--accent);
  border:1.5px solid var(--accent-strong);
  box-shadow:0 0 0 4px var(--accent-dim);
}
.founder-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
  border-radius:50%;
}
.founder-info h3{ font-size:20px; margin-bottom:2px; }
.founder-title{ color:var(--accent); font-size:13px; font-weight:600; margin-bottom:12px; }
.founder-bio{ color:var(--text-dim); font-size:14.5px; line-height:1.65; margin-bottom:16px; max-width:640px; }
.founder-stats{ display:flex; gap:10px; flex-wrap:wrap; }
.founder-stat{
  font-family:var(--font-mono, monospace);
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--text-dim);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 12px;
}
.founder-linkedin{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:16px;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  background:var(--accent-dim);
  color:var(--accent);
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease, transform .18s var(--ease);
}
.founder-linkedin:hover{
  border-color:var(--accent);
  background:rgba(62,214,181,0.18);
  transform:translateY(-1px);
}
@media (max-width:640px){
  .founder-card{ flex-direction:column; align-items:center; text-align:center; padding:26px; }
  .founder-stats{ justify-content:center; }
  .founder-bio{ max-width:none; }
}

/* ---------- workflow diagram (signature element) ---------- */
.workflow-panel{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  padding:36px 28px;
}
.workflow-svg{ width:100%; height:auto; }
.flow-line{ fill:none; stroke:var(--border-strong); stroke-width:1.5; stroke-dasharray:6 8; animation:flow-move 1.6s linear infinite; }
.flow-line-out{ stroke:var(--accent); opacity:0.8; stroke-dasharray:6 8; animation:flow-move 1.6s linear infinite; }
@keyframes flow-move{ to{ stroke-dashoffset:-28; } }
@media (prefers-reduced-motion: reduce){ .flow-line, .flow-line-out{ animation:none; } }
.node circle{
  fill:var(--bg-raise);
  stroke:var(--border-strong);
  stroke-width:1.5;
}
.node-core circle{ fill:var(--accent-dim); stroke:var(--accent); }
.node-output circle{ stroke:var(--accent); }
.node-label{
  fill:var(--text-dim);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.05em;
}
.core-label{ fill:var(--text); font-weight:600; font-size:12px; }
.node-sublabel{ fill:var(--accent); font-family:var(--font-mono); font-size:9px; letter-spacing:0.1em; }

/* ---------- case studies ---------- */
.filter-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.filter-tab{
  padding:9px 18px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  background:transparent;
  color:var(--text-dim);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
}
.filter-tab:hover{ border-color:var(--accent); color:var(--text); }
.filter-tab.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

.case-list{ display:flex; flex-direction:column; }
.case-row{
  border-top:1px solid var(--border);
  padding:26px 0;
}
.case-row:last-child{ border-bottom:1px solid var(--border); }
.case-summary{
  display:flex;
  align-items:center;
  gap:16px;
  cursor:pointer;
  list-style:none;
}
.case-summary::-webkit-details-marker{ display:none; }
.case-num{
  font-family:var(--font-mono);
  color:var(--text-faint);
  font-size:12px;
  flex:none;
  width:26px;
}
.case-tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--accent);
  background:var(--accent-dim);
  padding:5px 10px;
  border-radius:999px;
  flex:none;
}
.case-summary-text{ flex:1; min-width:0; }
.case-summary-text h3{ font-size:18px; margin-bottom:4px; }
.case-summary-text .result{ color:var(--accent); font-style:italic; font-size:13.5px; }
.case-duration{ color:var(--text-faint); font-size:13px; flex:none; }
.case-chevron{
  flex:none;
  width:32px; height:32px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s var(--ease), border-color .2s;
}
details[open] .case-chevron{ transform:rotate(180deg); border-color:var(--accent); }
.case-body{
  padding:22px 0 6px 42px;
  max-width:760px;
}
.case-block{ margin-bottom:18px; }
.case-block .k{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.1em;
  color:var(--accent);
  margin-bottom:8px;
}
.case-block .k::before{ content:""; width:16px; height:1px; background:var(--accent); }
.case-block p{ color:var(--text-dim); font-size:14.5px; }
.case-block ul{ display:flex; flex-direction:column; gap:8px; }
.case-block ul li{ display:flex; gap:9px; font-size:14px; color:var(--text-dim); }
.case-block ul li svg{ flex:none; width:15px; height:15px; margin-top:3px; color:var(--accent); }
.case-note{
  font-size:12.5px;
  color:var(--text-faint);
  margin-top:26px;
}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;
  z-index:1;
  margin:0 32px 0;
  max-width:calc(var(--container) - 60px);
  margin-left:auto; margin-right:auto;
  background:var(--bg-raise);
  border:1.5px solid var(--accent);
  box-shadow:0 0 50px rgba(62,214,181,0.1), inset 0 0 60px rgba(62,214,181,0.03);
  color:var(--text);
  border-radius:var(--radius-lg);
  padding:38px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  overflow:hidden;
}
.cta-band-deco{
  position:absolute;
  right:-30px;
  top:50%;
  transform:translateY(-50%);
  width:280px;
  height:280px;
  opacity:0.12;
  pointer-events:none;
}
.cta-band-grid{
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(62,214,181,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(62,214,181,0.05) 1px, transparent 1px);
  background-size:36px 36px;
  pointer-events:none;
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ font-size:clamp(24px, 3.2vw, 34px); color:var(--text); max-width:480px; }
.cta-band p{ color:var(--text-dim); margin-top:8px; max-width:420px; font-size:14.5px; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cta-band .btn-primary{ background:var(--accent); color:var(--accent-ink); }
.cta-band .btn-primary:hover{ background:var(--accent-strong); }
.cta-band .btn-ghost{ border-color:var(--border-strong); color:var(--text); }
.cta-band .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:24px;
  align-items:start;
}
.contact-cards{ display:flex; flex-direction:column; gap:14px; }
.contact-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  background:var(--bg-card);
}
.contact-card .ico{
  flex:none;
  width:38px; height:38px;
  border-radius:var(--radius-sm);
  background:var(--accent-dim);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.contact-card .ico svg{ width:18px; height:18px; }
.contact-card .label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--text-faint);
  margin-bottom:4px;
}
.contact-card .val{ font-size:15px; font-weight:500; }
.contact-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.contact-tag{
  font-family:var(--font-mono);
  font-size:11.5px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  color:var(--text-dim);
}

.contact-form{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  padding:32px;
}
.contact-form h3{ font-size:21px; margin-bottom:6px; }
.contact-form .sub{ color:var(--text-dim); font-size:14px; margin-bottom:24px; }
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--text-faint);
}
.field input, .field select, .field textarea{
  background:var(--bg-alt);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:14.5px;
  outline:none;
  transition:border-color .2s;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); }
.field input::placeholder, .field textarea::placeholder{ color:var(--text-faint); }
.form-note{
  font-size:12.5px;
  color:var(--text-faint);
  margin-top:14px;
}
.form-success{
  display:none;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  background:var(--accent-dim);
  color:var(--accent);
  font-size:13.5px;
}
.form-success.show{ display:flex; }
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* ---------- how it works toggle (legacy summary support) ---------- */
.workflow-toggle summary{
  cursor:pointer;
  font-weight:600;
  color:var(--accent);
  list-style:none;
}
.workflow-toggle summary::-webkit-details-marker{ display:none; }
.workflow-toggle .workflow-diagram{ margin-top:22px; }

/* ---------- footer ---------- */
.footer{
  position:relative;
  z-index:1;
  border-top:1px solid var(--border);
  padding:26px 32px 40px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:32px;
  margin-bottom:24px;
  border-bottom:1px solid var(--border);
}
.footer-brand p{ color:var(--text-dim); font-size:13.5px; margin-top:12px; max-width:260px; }
.footer-col h4{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--text-faint);
  margin-bottom:14px;
}
.footer-col a{
  display:block;
  color:var(--text-dim);
  font-size:14px;
  padding:6px 0;
  transition:color .2s;
}
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  color:var(--text-faint);
  font-size:13px;
}
.footer-status{ display:flex; align-items:center; gap:8px; }
.footer-social{ display:flex; align-items:center; gap:14px; }
.footer-social a{ color:var(--text-faint); display:flex; opacity:0.8; transition:opacity 0.2s ease, color 0.2s ease; }
.footer-social a:hover{ opacity:1; color:var(--accent); }
.footer-social-soon{ color:var(--text-faint); display:flex; opacity:0.35; cursor:not-allowed; }
.status-dot.small{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
  display:inline-block;
}
@media (max-width:760px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-top{ grid-template-columns:1fr; }
}

/* ---------- reveal-on-scroll (subtle, single orchestration) ---------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .cursor-dot, .cursor-ring{ display:none; }
}

/* ---------- responsive hero grid ---------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; min-height:200px; }
  .hero-visual svg{ max-width:260px; }
}
@media (max-width:600px){
  .nav{ padding:14px 20px; }
  .hero, .page-hero, .section{ padding-left:20px; padding-right:20px; }
  .cta-band{ padding:36px 26px; margin-left:0; margin-right:0; border-radius:var(--radius); flex-direction:column; align-items:flex-start; }
  .wrap{ padding:0 20px; }
}