*{margin:0;padding:0;box-sizing:border-box}

/* ─────────────────────────────────────────
   DESIGN TOKENS  (dark is the default)
───────────────────────────────────────── */
:root{
  /* Palette */
  --bg:#0a0f1e; --bg2:#0f172a; --bg3:#1e293b; --surface:#162032;
  --cyan:#22d3ee; --cyan-dim:#0891b2;
  --text:#f1f5f9; --text2:#94a3b8; --text3:#64748b;
  --accent3:#34d399; --danger:#f87171;
  --font-display:'Outfit',sans-serif; --font-mono:'JetBrains Mono',monospace;

  /* Border tokens */
  --bd-subtle:  rgba(255,255,255,0.05);   /* cards, section dividers   */
  --bd-faint:   rgba(255,255,255,0.03);   /* row separators            */
  --bd-dim:     rgba(255,255,255,0.08);   /* dashed borders, tool tags */
  --bd-cyan:    rgba(34,211,238,0.10);    /* cyan card border          */
  --bd-cyan-hi: rgba(34,211,238,0.25);    /* cyan card border on hover */
  --bd-cyan-btn:rgba(34,211,238,0.30);    /* pill tags, buttons        */

  /* Fill tokens */
  --fill-grid:  rgba(34,211,238,0.03);    /* grid lines                */
  --fill-cyan:  rgba(34,211,238,0.08);    /* metric gap, hover bg      */
  --fill-active:rgba(34,211,238,0.06);    /* lang-btn active, insight  */
  --fill-faint: rgba(255,255,255,0.02);   /* tool-tag bg               */

  /* Nav */
  --nav-bg: rgba(10,15,30,0.80);
  --nav-bd: rgba(34,211,238,0.08);
}

/* ─────────────────────────────────────────
   LIGHT THEME OVERRIDES
───────────────────────────────────────── */
[data-theme="light"]{
  /* Palette */
  --bg:#f8fafc; --bg2:#ffffff; --bg3:#f1f5f9; --surface:#eef5fb;
  --cyan:#0891b2; --cyan-dim:#0e7490;
  --text:#0f172a; --text2:#475569; --text3:#94a3b8;
  --accent3:#059669; --danger:#dc2626;

  /* Border tokens */
  --bd-subtle:  rgba(0,0,0,0.06);
  --bd-faint:   rgba(0,0,0,0.04);
  --bd-dim:     rgba(0,0,0,0.10);
  --bd-cyan:    rgba(8,145,178,0.15);
  --bd-cyan-hi: rgba(8,145,178,0.35);
  --bd-cyan-btn:rgba(8,145,178,0.35);

  /* Fill tokens */
  --fill-grid:  rgba(8,145,178,0.04);
  --fill-cyan:  rgba(8,145,178,0.08);
  --fill-active:rgba(8,145,178,0.08);
  --fill-faint: rgba(0,0,0,0.02);

  /* Nav */
  --nav-bg: rgba(248,250,252,0.85);
  --nav-bd: rgba(0,0,0,0.08);
}

/* Component-level light overrides (gradients can't be tokenized) */
[data-theme="light"] .grid-bg{
  background-image:
    linear-gradient(var(--fill-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--fill-grid) 1px,transparent 1px);
}
[data-theme="light"] .insight-box{
  background:linear-gradient(135deg,rgba(8,145,178,0.07),rgba(99,102,241,0.04));
  border-color:rgba(8,145,178,0.18);
}
[data-theme="light"] .contact-link:hover{
  background:rgba(8,145,178,0.08);
}


/* ─────────────────────────────────────────
   BASE
───────────────────────────────────────── */
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--font-display);line-height:1.7;overflow-x:hidden;transition:background .3s,color .3s}
::selection{background:var(--cyan);color:var(--bg)}

/* ─────────────────────────────────────────
   GRID BACKGROUND
───────────────────────────────────────── */
.grid-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--fill-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--fill-grid) 1px,transparent 1px);
  background-size:60px 60px;
  transition:background-image .3s;
}

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 48px;
  padding-top:calc(20px + env(safe-area-inset-top));
  display:flex;justify-content:space-between;align-items:center;
  backdrop-filter:blur(20px);
  background:var(--nav-bg);
  border-bottom:1px solid var(--nav-bd);
  transition:background .3s,border-color .3s;
}
nav .logo{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--cyan);letter-spacing:-0.5px}
nav .logo span{color:var(--text);font-weight:300}
nav .nav-right{display:flex;align-items:center;gap:24px}
nav ul{list-style:none;display:flex;gap:32px}
nav a{color:var(--text2);text-decoration:none;font-size:14px;transition:color .2s}
nav a:hover{color:var(--cyan)}

/* ── Language toggle ── */
.lang-toggle{display:flex;align-items:center;gap:2px;font-family:var(--font-mono);font-size:13px;flex-shrink:0}
.lang-btn{
  color:var(--text3);padding:4px 8px;border-radius:4px;
  transition:all .2s;cursor:pointer;
  border:1px solid transparent;background:none;
  font-family:var(--font-mono);font-size:13px;
}
.lang-btn.active{color:var(--cyan);border-color:var(--bd-cyan-btn);background:var(--fill-active)}
.lang-btn:hover:not(.active){color:var(--text2)}
.lang-sep{color:var(--text3);padding:0 2px}

/* ── Theme toggle ── */
.theme-btn{
  font-family:var(--font-mono);font-size:14px;line-height:1;
  color:var(--text3);background:none;
  border:1px solid var(--bd-subtle);border-radius:4px;
  width:30px;height:28px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;flex-shrink:0;
}
.theme-btn:hover{color:var(--cyan);border-color:var(--bd-cyan-btn)}

/* ── Nav controls (lang + theme) ── */
.nav-controls{display:flex;align-items:center;gap:24px}

/* ── Nav divider ── */
.nav-divider{width:1px;height:16px;background:var(--bd-subtle);flex-shrink:0}

/* ── Hamburger ── */
.hamburger{
  display:none;
  flex-direction:column;justify-content:center;align-items:flex-end;
  gap:5px;width:32px;height:32px;
  background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;
}
.hamburger span{
  display:block;height:2px;background:var(--text2);border-radius:2px;
  transform-origin:center;
  transition:transform .3s,opacity .3s,width .3s;
}
/* Three bars — shorter middle for an asymmetric look */
.hamburger span:nth-child(1){width:22px}
.hamburger span:nth-child(2){width:14px}
.hamburger span:nth-child(3){width:22px}
/* Morphs into ✕ when open */
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);width:22px}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:22px}

/* ─────────────────────────────────────────
   LAYOUT
───────────────────────────────────────── */
.container{max-width:1100px;margin:0 auto;padding:0 48px;position:relative;z-index:1}
section{padding:120px 0}
#problem{position:relative;overflow:hidden}
#problem::after{
  content:'';position:absolute;
  top:0;left:0;height:1px;
  background:var(--cyan);
  width:var(--scroll-progress,0%);
  transition:width .1s linear;
  z-index:2;
}

/* ─────────────────────────────────────────
   SECTION HEADERS
───────────────────────────────────────── */
.section-label{font-family:var(--font-mono);font-size:12px;color:var(--cyan-dim);letter-spacing:3px;text-transform:uppercase;margin-bottom:12px}
.section-title{font-size:36px;font-weight:600;letter-spacing:-1px;line-height:1.2;margin-bottom:16px}
#problem .section-title,#process .section-title,#faq .section-title{margin-bottom:40px}
.section-desc{font-size:17px;color:var(--text2);max-width:640px;font-weight:300;margin-bottom:48px;line-height:1.7}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero{
  min-height:100vh;min-height:100svh;
  display:grid;
  grid-template-columns:55fr 45fr;
  grid-template-rows:auto;
  align-content:center;align-items:center;
  column-gap:40px;
  row-gap:40px;
  padding-top:var(--nav-h,80px);
  padding-bottom:0;
  position:relative;isolation:isolate;
}
.hero-text{display:flex;flex-direction:column}
.hero-chart-area{align-self:center;display:flex;flex-direction:column;justify-content:center}

/* ─────────────────────────────────────────
   HERO GRADIENT (canvas beam effect)
───────────────────────────────────────── */
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:-1;
  filter:blur(52px);opacity:.70;
}
[data-theme="light"] .hero-bg{opacity:.18}

/* ─────────────────────────────────────────
   HERO CHART
───────────────────────────────────────── */
/* Caption under the chart; left padding = chart viewBox PAD, so it lines up with the line start */
.chart-caption{font-family:var(--font-mono);font-size:14px;letter-spacing:3px;color:var(--cyan);margin-top:16px;padding-left:3%;opacity:0;transition:opacity .3s ease}
.chart-caption .chart-you{color:var(--text);font-weight:700}
.chart-caption.show{opacity:1}
.hero-chart{
  pointer-events:none;
  opacity:.92;
  width:100%;
  height:auto;
}
@media(max-width:900px){.hero-chart{display:none}}

.hero-label{
  font-family:var(--font-mono);font-size:13px;color:var(--cyan);
  letter-spacing:3px;text-transform:uppercase;margin-bottom:12px;
  opacity:0;animation:fadeUp .6s .2s forwards;
  will-change:transform;
}
.hero h1{
  font-size:clamp(40px,4.8vw,58px);font-weight:700;
  line-height:1.05;letter-spacing:-2px;margin-bottom:16px;
  min-height:2.1em;
  opacity:0;animation:fadeUp .6s .4s forwards;
  will-change:transform;
}
.hero h1 .h1-line{white-space:nowrap}
html[lang="uk"] .hero h1{min-height:3.15em}
.hero h1 .accent{color:var(--cyan);position:relative}
.hero h1 .accent::after{
  content:'';position:absolute;bottom:4px;left:0;right:0;
  height:3px;background:var(--cyan);opacity:.3;border-radius:2px;
}
.hero-sub{
  font-size:17px;color:var(--text2);max-width:560px;
  line-height:1.65;font-weight:300;
  min-height:calc(17px * 1.65 * 3);
  opacity:0;animation:fadeUp .6s .6s forwards;
  will-change:transform;
}
.hero-cta{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px;
  opacity:0;animation:fadeUp .6s .7s forwards;
  will-change:transform;
}
.btn-primary{
  font-family:var(--font-mono);font-size:14px;font-weight:700;
  color:var(--bg);background:var(--cyan);text-decoration:none;
  border:1px solid var(--cyan);border-radius:8px;padding:14px 28px;
  transition:box-shadow .2s,transform .2s;
}
.btn-primary:hover{box-shadow:0 0 24px rgba(34,211,238,0.35);transform:translateY(-1px)}


/* ─────────────────────────────────────────
   EXPERTISE
───────────────────────────────────────── */
.expertise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.expertise-card{
  background:var(--bg2);border:1px solid var(--bd-subtle);
  border-radius:12px;padding:28px 24px;
  position:relative;overflow:hidden;
  transition:border-color .3s,background .3s;
}
.expertise-card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:0;transition:opacity .3s;
}
.expertise-card:hover::before{opacity:1}
.expertise-card:hover{border-color:var(--bd-cyan-hi)}
.expertise-card .icon{font-family:var(--font-mono);font-size:24px;color:var(--cyan);margin-bottom:16px;transition:transform .3s ease}
.expertise-card:hover .icon{transform:translateY(-3px)}
.expertise-card h3{font-size:17px;font-weight:600;margin-bottom:10px}
.expertise-card p{font-size:14px;color:var(--text2);line-height:1.7;font-weight:300}

/* ── System box (under problem cards) ── */
.system-box{margin:32px 0 0;position:relative;z-index:1}
.system-box p{color:var(--text2)}
.system-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.system-item{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.5;color:var(--text);border-top:1px solid var(--bd-cyan-hi);padding-top:12px}
.system-item .num{font-family:var(--font-mono);font-size:11px;color:var(--cyan)}
.expertise-grid{position:relative;z-index:1}

/* ─────────────────────────────────────────
   CASES
───────────────────────────────────────── */
.cases-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.case-card{
  background:var(--surface);border:1px solid var(--bd-cyan);
  border-radius:16px;overflow:hidden;position:relative;
  transition:border-color .3s,background .3s;
}
.case-card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:0;transition:opacity .3s;
}
.case-card:not(.case-coming-card):hover{border-color:var(--bd-cyan-hi)}
.case-card:not(.case-coming-card):hover::before{opacity:1}
.case-hero{grid-column:span 3;padding:32px;cursor:pointer}
.case-full{grid-column:span 6;padding:32px;cursor:pointer;display:flex;align-items:center;gap:32px}
.kc-card-content{flex:1;min-width:0}
.chaos-grid-canvas{flex-shrink:0;align-self:center;opacity:0.88;pointer-events:none;display:block}
@media(max-width:768px){.chaos-grid-canvas{display:none}}
.case-medium{grid-column:span 2;padding:24px;cursor:pointer}
.case-coming-card{
  display:flex;align-items:center;justify-content:center;
  border-style:dashed;cursor:default;min-height:160px;
}
.case-coming-card::before{display:none}
.case-coming-label{font-size:15px;color:var(--text3)}
.case-card-tag{
  font-family:var(--font-mono);font-size:11px;color:var(--cyan);
  border:1px solid var(--bd-cyan-btn);border-radius:20px;
  padding:4px 14px;display:inline-block;margin-bottom:16px;
}
.case-card-title{font-size:26px;font-weight:600;letter-spacing:-0.5px;line-height:1.25;margin-bottom:8px}
.case-card-sub{font-size:15px;color:var(--text2);font-weight:300;margin-bottom:20px;line-height:1.6}
.case-card-metrics{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.case-open-btn{
  position:absolute;top:20px;right:20px;
  width:34px;height:34px;border-radius:8px;
  border:1px solid var(--bd-cyan);
  background:var(--fill-cyan);
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);
  transition:background .2s,border-color .2s,color .2s;
  flex-shrink:0;
}
.case-card:hover .case-open-btn{
  background:var(--cyan);
  border-color:var(--cyan);
  color:var(--bg);
}
.case-tag{
  font-family:var(--font-mono);font-size:11px;color:var(--cyan);
  border:1px solid var(--bd-cyan-btn);border-radius:20px;padding:4px 14px;
}
.case-metric .val{font-family:var(--font-mono);font-size:22px;font-weight:700;letter-spacing:-0.5px}
.case-metric .val.positive{color:var(--accent3)}
.case-metric .val.negative{color:var(--danger)}
.case-metric .val.neutral{color:var(--text)}
.case-metric .lbl{font-size:11px;color:var(--text3);margin-top:2px}

.case-title-row{display:flex;align-items:center;gap:12px;margin:4px 0 8px}
.case-title-row .case-card-title{margin:0}
.case-icon{
  width:52px;height:52px;border-radius:13px;flex-shrink:0;
  border:1px solid var(--bd-cyan-btn);background:var(--fill-active);
  display:flex;align-items:center;justify-content:center;color:var(--cyan);
}
.case-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.case-card-title{padding-right:40px}

.case-flow{display:flex;flex-direction:column;gap:10px;margin:16px 0 22px}
.case-flow>div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline}
.case-flow dt{font-family:var(--font-mono);font-size:11px;color:var(--cyan-dim);letter-spacing:1px;text-transform:uppercase}
.case-flow dd{font-size:14px;color:var(--text2);font-weight:300;line-height:1.55}
.case-flow>div:last-child dd{color:var(--text);font-weight:400}

.case-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.case-chips span{
  font-family:var(--font-mono);font-size:11px;color:var(--text2);
  border:1px solid var(--bd-dim);border-radius:6px;padding:4px 10px;background:var(--fill-faint);
}

/* ── Case modal ── */
.case-modal-overlay{
  position:fixed;inset:0;z-index:1100;
  background:rgba(0,0,0,0.72);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:60px 24px 60px;
  opacity:0;pointer-events:none;transition:opacity .3s;
  overflow-y:auto;
}
.case-modal-overlay.open{opacity:1;pointer-events:auto}
.case-modal-panel{
  width:100%;max-width:860px;flex-shrink:0;
  background:var(--bg2);border:1px solid var(--bd-cyan);
  border-radius:20px;overflow:hidden;
  transform:translateY(24px);transition:transform .3s;
}
.case-modal-overlay.open .case-modal-panel{transform:translateY(0)}
.case-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--bd-subtle);
  position:sticky;top:0;z-index:1;background:var(--bg2);
}
.case-modal-label{font-family:var(--font-mono);font-size:13px;color:var(--text3)}
.case-modal-close{
  font-family:var(--font-mono);font-size:12px;color:var(--text3);
  background:none;border:1px solid var(--bd-subtle);
  border-radius:6px;padding:6px 12px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.case-modal-close:hover{color:var(--cyan);border-color:var(--bd-cyan-btn)}
.case-modal-body .case-body-inner{border-top:none}

.case-modal-app-header{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.case-modal-icon{width:64px;height:64px;border-radius:14px}
.case-modal-icon svg{width:32px;height:32px}
.insight-box.insight-problem{background:var(--fill-faint);border-color:var(--bd-dim)}
.insight-box.insight-problem .label{color:var(--danger)}
.case-body-inner>.lessons-title{margin-bottom:16px}
.case-body-inner>:last-child{margin-bottom:0}
.case-modal-app-name{margin:0;font-size:28px;font-weight:700;letter-spacing:-0.5px}
.case-modal-subtitle{font-family:var(--font-mono);font-size:12px;color:var(--text3);margin:4px 0 0;letter-spacing:0.02em}

.case-screenshots{margin:32px 0}
.case-screenshots-scroll{
  display:flex;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:8px;
}
.case-screenshots-scroll::-webkit-scrollbar{height:4px}
.case-screenshots-scroll::-webkit-scrollbar-track{background:transparent}
.case-screenshots-scroll::-webkit-scrollbar-thumb{background:var(--bd-subtle);border-radius:2px}
.case-screenshot{flex-shrink:0;width:280px;scroll-snap-align:start}
.case-screenshot-ph{
  width:100%;height:180px;border-radius:10px;
  border:1px dashed var(--bd-subtle);
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;color:var(--text3);
  transition:border-color .3s;
}
.case-screenshot:hover .case-screenshot-ph{border-color:var(--cyan)}

/* ── Case body inner (modal content) ── */
.case-body-inner{padding:40px 48px}
.result-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--bd-cyan);
  border-radius:12px;overflow:hidden;margin-bottom:40px;
}
.result-item{background:var(--bg2);padding:24px 20px;text-align:center;transition:background .3s;display:flex;flex-direction:column;align-items:center;justify-content:center}
.result-item .before{font-family:var(--font-mono);font-size:13px;color:var(--danger)}
.result-item .arrow{color:var(--text3);font-size:11px;margin:4px 0}
.result-item .after{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--accent3)}
.result-item .metric-label{font-size:11px;color:var(--text3);margin-top:6px}

.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px}
.action-block{
  background:var(--bg2);border:1px solid var(--bd-faint);
  border-radius:10px;padding:28px 24px;transition:background .3s;
}
.action-block .num{font-family:var(--font-mono);font-size:11px;color:var(--cyan-dim);margin-bottom:10px}
.action-block h3{font-size:16px;font-weight:600;margin-bottom:10px}
.action-block p{font-size:13px;color:var(--text2);line-height:1.7;font-weight:300}

.insight-box{
  background:linear-gradient(135deg,var(--fill-active),rgba(167,139,250,0.04));
  border:1px solid var(--bd-cyan);border-radius:12px;padding:28px;margin-bottom:40px;
  transition:background .3s,border-color .3s;
}
.insight-box .label{
  font-family:var(--font-mono);font-size:11px;color:var(--cyan);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;
}
.insight-box p{font-size:16px;line-height:1.7}
.insight-box .hl{color:var(--cyan);font-weight:500}

.lessons{border-top:1px solid var(--bd-subtle);padding-top:32px}
.lessons.insight-box{border-top:none;padding-top:28px;margin-top:0}
.lessons-title{
  font-family:var(--font-mono);font-size:12px;color:var(--cyan-dim);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;
}
.lesson{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--bd-faint)}
.lesson:last-child{border:none}
.lesson .idx{font-family:var(--font-mono);font-size:12px;color:var(--cyan-dim);min-width:28px;padding-top:2px}
.lesson .content{font-size:14px;line-height:1.7}
.lesson .content strong{color:var(--text);font-weight:600}
.lesson .content span{color:var(--text2);font-weight:300}

/* ─────────────────────────────────────────
   ABOUT
───────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:center}
.about-photo{
  border-radius:24px;overflow:hidden;position:relative;
  border:1px solid var(--bd-cyan-hi);
  box-shadow:0 0 0 6px var(--fill-active),0 0 40px rgba(34,211,238,0.12);
  aspect-ratio:1/1;
}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.about-text{font-size:17px;color:var(--text2);line-height:1.8;font-weight:300}
.about-text strong{color:var(--text);font-weight:500}
.about-text p+p{margin-top:20px}

.tools-section{margin-top:8px}
.tools-label{
  font-family:var(--font-mono);font-size:11px;color:var(--cyan-dim);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;
}
.tool-group{margin-bottom:20px}
.tool-group-title{font-size:13px;color:var(--text3);margin-bottom:8px}
.tool-tags{display:flex;flex-wrap:wrap;gap:6px}
.tool-tag{
  font-family:var(--font-mono);font-size:11px;color:var(--text2);
  border:1px solid var(--bd-dim);border-radius:6px;
  padding:4px 10px;background:var(--fill-faint);
  transition:border-color .3s,background .3s;
}

/* ─────────────────────────────────────────
   HOW I WORK
───────────────────────────────────────── */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step-card{
  background:var(--bg2);border:1px solid var(--bd-subtle);
  border-radius:12px;padding:28px 24px;position:relative;
  transition:border-color .3s;
}
.step-card:hover{border-color:var(--bd-cyan-hi)}
.step-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.step-num{font-family:var(--font-mono);font-size:32px;font-weight:700;color:var(--cyan);letter-spacing:-1px;line-height:1}
.step-dur{
  font-family:var(--font-mono);font-size:11px;color:var(--cyan);
  border:1px solid var(--bd-cyan-btn);border-radius:20px;padding:3px 12px;
}
.step-card h3{font-size:18px;font-weight:600;margin-bottom:10px}
.step-card p{font-size:14px;color:var(--text2);line-height:1.7;font-weight:300}

/* ─────────────────────────────────────────
   FAQ
───────────────────────────────────────── */
#faq .section-label,#faq .section-title{text-align:center}
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--bd-subtle)}
.faq-item{border-bottom:1px solid var(--bd-subtle)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;font-size:18px;font-weight:500;color:var(--text);
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';font-family:var(--font-mono);font-size:20px;color:var(--cyan);
  flex-shrink:0;transition:transform .25s;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--cyan)}
.faq-item p{font-size:15px;color:var(--text2);font-weight:300;line-height:1.7;padding:0 40px 22px 0;max-width:680px}

/* ─────────────────────────────────────────
   CONTACT
───────────────────────────────────────── */
.contact-section{text-align:center;padding:120px 0 80px;position:relative}
.contact-section::before{content:'';position:absolute;top:0;left:0;height:1px;background:var(--cyan);width:var(--scroll-progress,0%);transition:width .1s linear;z-index:2}
.contact-section h2{font-size:36px;font-weight:600;letter-spacing:-1px;margin-bottom:16px}
.contact-section p{font-size:17px;color:var(--text2);font-weight:300;margin-bottom:40px}
.contact-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.contact-link{
  font-family:var(--font-mono);font-size:14px;color:var(--cyan);
  text-decoration:none;border:1px solid var(--bd-cyan-btn);
  border-radius:8px;padding:12px 24px;transition:all .2s;
}
.contact-link:hover{background:rgba(34,211,238,0.1);border-color:var(--cyan)}
button.contact-link{cursor:pointer;background:transparent;font-family:var(--font-mono);font-size:14px}

.contact-primary{display:inline-block;font-size:15px;padding:16px 32px;margin-bottom:20px}
.contact-section .contact-reply{font-family:var(--font-mono);font-size:12px;color:var(--text3);margin:20px 0 0}

/* ─────────────────────────────────────────
   BACK TO TOP
───────────────────────────────────────── */
.back-to-top{
  position:fixed;bottom:32px;right:48px;z-index:200;
  font-family:var(--font-mono);font-size:13px;
  color:var(--cyan);background:var(--bg2);
  border:1px solid var(--bd-cyan-btn);border-radius:8px;
  padding:10px 14px;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s,transform .3s,background .2s,border-color .2s;
}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:var(--fill-active);border-color:var(--cyan)}

/* ─────────────────────────────────────────
   TYPEWRITER CURSOR
───────────────────────────────────────── */
.tw-cursor{
  display:inline-block;width:2px;height:0.85em;
  background:var(--cyan);border-radius:1px;
  margin-left:1px;vertical-align:-0.05em;
  animation:tw-blink .65s step-end infinite;
}
@keyframes tw-blink{0%,100%{opacity:1}50%{opacity:0}}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer{border-top:1px solid var(--bd-faint);padding:32px 0;text-align:center}
footer p{font-size:13px;color:var(--text3)}
footer .footer-joke{font-family:var(--font-mono);font-size:12px;color:var(--cyan-dim);margin-top:6px}

/* ─────────────────────────────────────────
   SKYLINE
───────────────────────────────────────── */
.skyline-wrapper{width:100%;max-width:1100px;margin:0 auto;padding:0 48px;position:relative;z-index:1;pointer-events:none;margin-top:-40px;margin-bottom:-20px}
.skyline-svg{width:100%;height:auto;display:block}
.sky-dot{fill:var(--cyan)}
.sky-pulse{fill:var(--cyan);animation:sky-blink 3s ease-in-out infinite}
@keyframes sky-blink{0%,100%{opacity:.25}50%{opacity:1}}
.sky-a1{animation-delay:0s}.sky-a2{animation-delay:.5s}.sky-a3{animation-delay:1s}
.sky-a4{animation-delay:1.5s}.sky-a5{animation-delay:2s}.sky-a6{animation-delay:2.5s}
.sky-a7{animation-delay:.3s}.sky-a8{animation-delay:.8s}.sky-a9{animation-delay:1.3s}
.sky-a10{animation-delay:1.8s}.sky-a11{animation-delay:2.3s}.sky-a12{animation-delay:.7s}
[data-theme="light"] .skyline-wrapper g[opacity="0.35"]{opacity:0.25}
[data-theme="light"] .skyline-wrapper path[stroke-dasharray]{stroke-opacity:0.1}

/* ─────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
[data-scroll-reveal]{opacity:0;transform:translateY(var(--scroll-y,40px));will-change:opacity,transform}

/* ─────────────────────────────────────────
   TABLET
───────────────────────────────────────── */
@media(max-width:1024px) and (min-width:769px){
  nav{padding-left:32px;padding-right:32px}
  nav ul{gap:20px}
  nav a{font-size:13px}
  .system-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr 280px}
}

/* ─────────────────────────────────────────
   MOBILE
───────────────────────────────────────── */
@media(max-width:768px){
  .skyline-wrapper{padding:0 24px;margin-top:-20px;margin-bottom:-10px}
  /* ── Show hamburger, hide nav-right by default ── */
  .hamburger{display:flex}
  .nav-right{
    /* Reposition as slide-down dropdown */
    position:fixed;top:var(--nav-h,57px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:4px 24px 24px;
    background:var(--bg);/* solid — prevents hero text from bleeding through */
    border-bottom:1px solid var(--bd-subtle);
    box-shadow:0 8px 24px rgba(0,0,0,0.15);
    /* Hidden state */
    opacity:0;pointer-events:none;transform:translateY(-10px);
    transition:opacity .25s,transform .25s;
  }
  .nav-right.open{opacity:1;pointer-events:auto;transform:translateY(0)}

  /* Nav links stacked */
  nav ul{flex-direction:column;gap:0;width:100%;margin-bottom:4px}
  nav ul li{border-bottom:1px solid var(--bd-faint)}
  nav ul li:last-child{border:none}
  nav a{display:block;font-size:18px;padding:15px 0}

  /* Controls row: lang toggle on left, theme on right */
  .nav-controls{
    justify-content:space-between;
    padding-top:20px;margin-top:4px;
    border-top:1px solid var(--bd-faint);
  }
  .nav-divider{display:none}

  /* ── Content layout ── */
  .container{padding:0 24px}
  section{padding:80px 0}
  .contact-section{padding:80px 0 64px}
  nav{
    padding:16px 24px;
    padding-top:calc(16px + env(safe-area-inset-top));
    background:var(--bg);
    backdrop-filter:none;
  }
  .hero{padding-top:calc(var(--nav-h,100px) + 24px);padding-bottom:24px;grid-template-columns:1fr;grid-template-rows:auto}
  .hero-chart-area{display:none}
  .hero h1{font-size:36px;letter-spacing:-1px}
  .expertise-grid{grid-template-columns:1fr}
  .result-strip{grid-template-columns:1fr 1fr}
  .actions-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:32px}
  .about-photo{order:-1;width:180px;border-radius:20px}
  .system-grid{grid-template-columns:1fr;gap:12px}
  .steps-grid{grid-template-columns:1fr}
  .faq-item summary{font-size:16px;padding:18px 0}
  .faq-item p{padding-right:0}
  .case-flow>div{grid-template-columns:1fr;gap:2px}
  .case-card-title{font-size:21px}
  .case-icon{width:44px;height:44px;border-radius:11px}
  .case-icon svg{width:22px;height:22px}
  .hero-sub{min-height:0}
  .hero-cta{margin-top:24px;gap:14px}
  .section-title{font-size:28px}
  .contact-section h2{font-size:28px}
  .cases-grid{grid-template-columns:1fr}
  .case-hero,.case-full{grid-column:span 1;padding:24px}
  .case-medium{grid-column:span 1;padding:20px}
  .case-body-inner{padding:24px 20px}
  .case-modal-overlay{padding:40px 0 0;align-items:flex-end}
  .case-modal-panel{border-radius:16px 16px 0 0;max-height:88vh;overflow-y:auto}
  .case-modal-header{position:sticky;top:0}
  .case-screenshot{width:240px}
  .case-screenshot-ph{height:150px}
  .case-modal-icon{width:52px;height:52px;border-radius:12px}
  .case-modal-app-name{font-size:22px}
  .back-to-top{right:24px;bottom:24px}
}

@media(max-width:360px){
  .hero h1{font-size:32px}
}