/* ==========================================================================
   KoreStack marketing stylesheet (replaces ks.css)
   Idea: your business as a stack of layers. The stack is the product
   visual; it assembles on load, breathes in the hero, and follows the
   reader through the layer story. Everything around it is quiet, flat
   and precise. Cyan is reserved for actions and the active layer.
   ========================================================================== */

:root{
  --ks-raise:#0E182B;
  --ks-signal:#5FD4E6;
  --ks-signal-soft:rgba(95,212,230,.12);
  --ks-signal-line:rgba(95,212,230,.45);
  --ks-plate-top:#13223D;
  --ks-plate-l:#0A1526;
  --ks-plate-r:#0E1B31;
  --ks-plate-line:#2A3D5E;
  --ks-r:10px;
  --ks-ease:cubic-bezier(.2,.7,.2,1);
  --accent-ink:var(--ks-signal);
}
html[data-theme="light"]{
  --ks-raise:#FFFFFF;
  --ks-signal:#0B7285;
  --ks-signal-soft:rgba(11,114,133,.09);
  --ks-signal-line:rgba(11,114,133,.45);
  --ks-plate-top:#FFFFFF;
  --ks-plate-l:#D3DDEA;
  --ks-plate-r:#E4EBF4;
  --ks-plate-line:#AFC0D6;
}
html{ scroll-padding-top:100px; }
#main-content{ overflow-x:clip; }

/* ---------- Chrome ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.main-nav a{ text-transform:none; letter-spacing:0; font-size:14.5px; font-weight:500; }
.main-nav a.active::after{ height:2px; bottom:-6px; background:var(--ks-signal); border-radius:2px; }
.mobile-nav > a{ text-transform:none; letter-spacing:-.01em; }
.breadcrumbs .container{ text-transform:none; letter-spacing:0; font-size:13px; }
.footer-top{ padding:80px var(--pad) 56px; }
.footer-bottom{ padding:24px var(--pad); }
.footer-col h4{ font-size:14px; letter-spacing:0; text-transform:none; color:var(--white); font-weight:600; }
.footer-brand .footer-logo-img{ height:26px; }
.footer-contact{ display:flex; flex-direction:column; gap:6px; margin-top:18px; font-size:14.5px; }
.footer-contact a{ color:var(--gray-1); transition:color .2s var(--ease); }
.footer-contact a:hover{ color:var(--white); }
.social-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.social-links a{ width:40px; height:40px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--gray-1); transition:color .2s var(--ease), border-color .2s var(--ease); }
.social-links a:hover{ color:var(--white); border-color:var(--gray-2); }
.social-links svg{ width:18px; height:18px; }
.chat-launcher{ text-transform:none; letter-spacing:0; font-size:14px; }
.chat-launcher-icon{ display:none; }

/* ---------- Buttons and links ---------- */
.btn{ border-radius:8px; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ks-ease); }
.btn-lg{ padding:16px 26px; font-size:15px; }
.btn-primary:hover{ transform:translateY(-1px); }
.btn-icon svg{ width:18px; height:18px; flex-shrink:0; }
.btn.is-disabled{ opacity:.45; pointer-events:none; }
html[data-theme="light"] .btn-primary{ background:var(--ks-signal); color:#fff; }
html[data-theme="light"] .btn-primary:hover{ background:var(--white); color:var(--black); }
.ks-icon{ display:block; flex-shrink:0; }
.text-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--white);
  background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom:3px; transition:background-size .35s var(--ks-ease); }
.text-link:hover{ background-size:100% 1px; }
.text-link .ks-icon{ transition:transform .25s var(--ks-ease); }
.text-link:hover .ks-icon{ transform:translateX(4px); }

/* ---------- Motion ---------- */
.reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ks-ease) var(--d,0ms), transform .9s var(--ks-ease) var(--d,0ms); }
.reveal.in-view{ opacity:1; transform:none; }

/* ---------- Sections ---------- */
.section{ padding:120px 0; border-bottom:1px solid var(--line); }
.section-head{ max-width:700px; margin-bottom:56px; }
.section-head h2{ margin:0; font-size:clamp(34px,4.4vw,60px); letter-spacing:-.035em; line-height:1.04; }
.section-head p{ margin-top:18px; font-size:18px; line-height:1.65; color:var(--gray-1); }
.section-head p:empty{ display:none; }

/* ---------- Home hero ---------- */
.hero-home{ padding:40px 0 72px; border-bottom:1px solid var(--line); overflow:hidden; }
.hero-layout{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:center; min-height:calc(100vh - 200px); }
.hero-title{ font-size:clamp(52px,7.4vw,112px); line-height:.94; letter-spacing:-.05em; font-weight:600; max-width:10ch; }
.hero-home p.lead{ font-size:19px; line-height:1.65; max-width:32em; margin:32px 0 40px; color:var(--gray-1); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-visual{ position:relative; }

/* One orchestrated entrance on first load */
.hero-home .hero-title, .hero-home .lead, .hero-home .hero-ctas{ animation:ks-rise-in 1s var(--ks-ease) both; }
.hero-home .lead{ animation-delay:.12s; }
.hero-home .hero-ctas{ animation-delay:.24s; }
@keyframes ks-rise-in{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

/* ---------- The stack diagram ---------- */
.stack{ width:100%; height:auto; overflow:visible; display:block; }
.stack .face{ fill:var(--ks-plate-top); stroke:var(--ks-plate-line); stroke-width:1; transition:fill .5s var(--ks-ease), stroke .5s var(--ks-ease); }
.stack .face-inner{ fill:none; stroke:var(--ks-plate-line); stroke-width:1; stroke-dasharray:2 6; transition:stroke .5s var(--ks-ease); }
.stack .side-l{ fill:var(--ks-plate-l); stroke:var(--ks-plate-line); stroke-width:1; }
.stack .side-r{ fill:var(--ks-plate-r); stroke:var(--ks-plate-line); stroke-width:1; }
.stack-plate{ transition:transform .6s var(--ks-ease), opacity .5s var(--ks-ease); }
.stack-axis{ stroke:var(--ks-plate-line); stroke-width:1; stroke-dasharray:2 7; }
.stack-pulse{ display:none; }
.stack-leader{ stroke:var(--ks-plate-line); stroke-width:1; transition:stroke .4s var(--ks-ease); }
.stack-node{ fill:var(--ks-plate-line); transition:fill .4s var(--ks-ease); }
.stack-label{ fill:var(--gray-1); font-family:var(--font-display); font-size:16px; font-weight:500; transition:fill .4s var(--ks-ease); }
.stack-plate.is-on{ transform:translateY(-14px); }
.stack-plate.is-on .face{ fill:color-mix(in srgb, var(--ks-signal) 16%, var(--ks-plate-top)); stroke:var(--ks-signal); }
.stack-plate.is-on .face-inner{ stroke:var(--ks-signal-line); }
.stack-plate.is-on .stack-label{ fill:var(--white); }
.stack-plate.is-on .stack-node{ fill:var(--ks-signal); }
.stack-plate.is-on .stack-leader{ stroke:var(--ks-signal); }
.stack.has-selection .stack-plate:not(.is-on){ opacity:.38; }

/* Hero: plates drop into place, then the stack slowly breathes apart */
.stack-breathe .stack-plate{ animation:ks-assemble 1.1s var(--ks-ease) both, ks-breathe 7s ease-in-out 1.4s infinite;
  animation-delay:calc((5 - var(--i)) * 90ms + 150ms), calc(1.4s + var(--i) * -.25s); }
@keyframes ks-assemble{ from{ opacity:0; transform:translateY(-60px); } to{ opacity:1; transform:none; } }
@keyframes ks-breathe{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(calc(var(--i) * -5px)); } }
.stack-breathe .stack-plate:hover{ animation-play-state:paused; }
.stack-breathe .stack-plate:hover .face{ stroke:var(--ks-signal); }
.stack-breathe .stack-plate:hover .stack-label{ fill:var(--white); }

/* Builder: click plates */
.stack-builder .stack-plate{ cursor:pointer; }
.stack-builder .stack-plate:hover .face{ stroke:var(--ks-signal-line); }

/* ---------- Home: layer story ---------- */
.story{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; }
.story-sticky{ position:sticky; top:120px; }
.story-visual .stack{ max-width:440px; margin:0 auto; }
.story-chapters{ list-style:none; }
.chapter{ position:relative; padding:56px 0 56px 32px; border-left:1px solid var(--line); min-height:46vh;
  display:flex; flex-direction:column; justify-content:center; gap:14px; transition:opacity .5s var(--ks-ease); }
.chapter::before{ content:''; position:absolute; left:-1px; top:50%; width:2px; height:0; background:var(--ks-signal);
  transform:translateY(-50%); transition:height .5s var(--ks-ease); }
.story.is-live .chapter{ opacity:.35; }
.story.is-live .chapter.is-active{ opacity:1; }
.story.is-live .chapter.is-active::before{ height:64%; }
.chapter-icon{ width:44px; height:44px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--white);
  transition:color .4s var(--ks-ease), border-color .4s var(--ks-ease); }
.chapter.is-active .chapter-icon{ color:var(--ks-signal); border-color:var(--ks-signal-line); }
.chapter h3{ font-size:clamp(26px,2.8vw,36px); letter-spacing:-.025em; }
.chapter p{ font-size:17px; line-height:1.65; max-width:30em; }
.chapter .text-link{ align-self:flex-start; }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(var(--steps,3),minmax(0,1fr)); gap:40px; list-style:none; }
.step{ border-top:1px solid var(--line); padding-top:28px; }
.step-num{ display:block; font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ks-signal); margin-bottom:22px; letter-spacing:.02em; }
.step h3{ font-size:23px; letter-spacing:-.015em; margin-bottom:12px; }
.step p{ font-size:16px; line-height:1.65; }

/* Team row */
.team-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:72px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.team-row p{ flex:1; min-width:240px; font-size:17px; color:var(--white); }

/* Avatar */
.avatar{ display:inline-flex; width:var(--size,56px); height:var(--size,56px); border-radius:50%; overflow:hidden; flex-shrink:0;
  border:1px solid var(--line); background:var(--ks-raise); align-items:center; justify-content:center; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1); }
.avatar-fallback .ks-mark{ width:50%; height:auto; color:var(--white); }

/* ---------- Inner page hero ---------- */
.page-hero{ padding:64px 0 88px; border-bottom:1px solid var(--line); }
.page-hero h1{ margin:0; font-size:clamp(42px,5.8vw,84px); letter-spacing:-.045em; line-height:.98; max-width:15ch; }
.page-hero p.lead{ margin:28px 0 0; font-size:19px; line-height:1.65; max-width:34em; color:var(--gray-1); }
.page-hero .hero-ctas{ margin-top:36px; }
.page-hero-copy{ min-width:0; }
.page-hero-split .page-hero-layout{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; }
.hero-visual-sm{ max-width:520px; justify-self:end; width:100%; }
.page-hero h1, .page-hero p.lead, .page-hero .hero-ctas{ animation:ks-rise-in .9s var(--ks-ease) both; }
.page-hero p.lead{ animation-delay:.1s; }
.page-hero .hero-ctas{ animation-delay:.2s; }

/* ---------- Lists and cards ---------- */
.tick-list{ display:grid; grid-template-columns:1fr; gap:0 28px; }
.tick-list-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tick-list li{ position:relative; padding:13px 0 13px 28px; border-bottom:1px solid var(--line-soft); color:var(--white); font-size:15.5px; line-height:1.5; }
.tick-list li::before{ content:''; position:absolute; left:2px; top:19px; width:11px; height:6px;
  border-left:2px solid var(--ks-signal); border-bottom:2px solid var(--ks-signal); transform:rotate(-45deg); }
html[dir="rtl"] .tick-list li{ padding:13px 28px 13px 0; }
html[dir="rtl"] .tick-list li::before{ left:auto; right:2px; }

.feature-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.feature-grid li{ display:flex; align-items:center; gap:14px; padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  color:var(--white); font-size:15.5px; font-weight:500; line-height:1.35; }
.feature-icon{ width:40px; height:40px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ks-signal); }

.split-intro{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:64px; align-items:start; }
.split-intro .section-head{ margin-bottom:0; position:sticky; top:120px; }
.prose p{ font-size:17.5px; line-height:1.8; max-width:36em; color:var(--gray-1); }
.prose p + p{ margin-top:22px; }
.prose .prose-lead{ font-family:var(--font-display); font-size:clamp(23px,2.5vw,30px); line-height:1.4; color:var(--white); letter-spacing:-.015em; }

.principles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px; }
.principle{ border-top:1px solid var(--line); padding-top:26px; }
.principle .feature-icon{ margin-bottom:22px; }
.principle h3{ font-size:20px; margin-bottom:10px; }
.principle p{ font-size:15.5px; line-height:1.65; }

/* Founder note (About) */
.founder-note{ max-width:900px; }
.founder-note blockquote p{ font-family:var(--font-display); font-weight:500; font-size:clamp(22px,2.5vw,32px); line-height:1.42; letter-spacing:-.018em; color:var(--gray-1); }
.founder-note blockquote p:first-child{ color:var(--white); }
.founder-note blockquote p + p{ margin-top:22px; }
.founder-note .founder-sign{ color:var(--white) !important; font-weight:600; }
.byline{ display:flex; align-items:center; gap:14px; margin-top:36px; font-size:15px; color:var(--gray-2); }
.byline strong{ display:block; color:var(--white); font-size:16px; }
.byline-link{ margin-left:6px; color:var(--gray-2); }
.byline-link:hover{ color:var(--white); }
.byline-link svg{ width:20px; height:20px; }

/* ---------- Closing call to action ---------- */
.cta-band{ padding:120px 0; }
.cta-band-inner{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
  padding:64px; border-radius:16px; border:1px solid var(--line); background:var(--near-black); }
.cta-band-copy h2{ font-size:clamp(36px,4.6vw,64px); letter-spacing:-.04em; line-height:1; max-width:13ch; }
.cta-band-copy p{ margin-top:18px; font-size:18px; max-width:30em; }
.cta-band-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Services page ---------- */
.layer-rows{ border-top:1px solid var(--line); }
.layer-row{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr) auto; gap:48px; align-items:start; padding:44px 8px;
  border-bottom:1px solid var(--line); transition:background .35s var(--ks-ease); }
.layer-row:hover{ background:var(--near-black); }
.layer-row-id{ display:flex; align-items:center; gap:18px; }
.layer-row-index{ display:none; }
.layer-row-icon{ width:52px; height:52px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--white);
  transition:color .35s var(--ks-ease), border-color .35s var(--ks-ease); }
.layer-row:hover .layer-row-icon{ color:var(--ks-signal); border-color:var(--ks-signal-line); }
.layer-row h2{ font-size:clamp(26px,2.6vw,34px); letter-spacing:-.025em; }
.layer-row-body p{ font-size:17px; line-height:1.65; margin-bottom:12px; }
.layer-row-go{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--white); white-space:nowrap; }
.layer-row-go .ks-icon{ transition:transform .3s var(--ks-ease); }
.layer-row:hover .layer-row-go .ks-icon{ transform:translateX(4px); }

/* Service pages: links to the other layers */
.layer-links{ display:flex; flex-wrap:wrap; gap:10px; }
.layer-link{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:8px; border:1px solid var(--line);
  color:var(--white); font-weight:500; transition:border-color .25s var(--ease), background .25s var(--ease); }
.layer-link-icon{ width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--ks-signal); background:var(--ks-signal-soft); }
.layer-link > .ks-icon{ color:var(--gray-2); transition:transform .25s var(--ks-ease); }
.layer-link:hover{ border-color:var(--gray-3); background:var(--near-black); }
.layer-link:hover > .ks-icon{ transform:translateX(3px); color:var(--white); }

/* Pipeline (service pages) */
.pipeline{ display:grid; grid-template-columns:repeat(var(--steps,3),minmax(0,1fr)); gap:32px; list-style:none; }
.pipeline-step{ position:relative; padding-top:64px; }
.pipeline-step::before{ content:''; position:absolute; top:20px; left:52px; right:-24px; height:1px; background:var(--line); }
.pipeline-step:last-child::before{ display:none; }
.pipeline-node{ position:absolute; top:0; left:0; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--white); border:1px solid var(--line); }
.pipeline-step h3{ font-size:21px; margin-bottom:10px; }
.pipeline-step p{ font-size:15.5px; line-height:1.65; }

/* ---------- Pricing ---------- */
.price-card{ border:1px solid var(--line); border-radius:16px; background:var(--near-black); padding:44px; }
.price-card-label{ font-size:14.5px; color:var(--gray-2); }
.price-card-amount{ display:flex; align-items:baseline; gap:12px; margin:8px 0 18px; color:var(--white); }
.price-card-amount span{ font-family:var(--font-display); font-weight:600; font-size:clamp(68px,8vw,112px); line-height:1; letter-spacing:-.05em; }
.price-card-amount small{ font-size:18px; color:var(--gray-1); }
.price-card-note{ font-size:15.5px; color:var(--gray-1); }

.jobs{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.job{ display:flex; flex-direction:column; gap:12px; padding:32px; border:1px solid var(--line); border-radius:var(--ks-r); background:var(--near-black); }
.job-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.job-head h3{ font-size:22px; }
.job-layers{ font-size:13px; color:var(--gray-1); padding:4px 10px; border-radius:6px; border:1px solid var(--line); white-space:nowrap; }
.job-scope{ font-size:15.5px; line-height:1.6; color:var(--white); }
.job-why{ font-size:14.5px; line-height:1.6; color:var(--gray-2); }
.job-price{ margin-top:auto; padding-top:20px; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 8px; }
.job-bar{ flex:1 0 100%; height:4px; border-radius:99px; background:var(--line-soft); overflow:hidden; margin-bottom:14px; }
.job-bar span{ display:block; height:100%; border-radius:inherit; background:var(--ks-signal); transform-origin:left; transform:scaleX(0); transition:transform 1.2s var(--ks-ease) .2s; }
.job.in-view .job-bar span{ transform:scaleX(1); }
.job-from, .job-unit{ font-size:14px; color:var(--gray-2); }
.job-price strong{ font-family:var(--font-display); font-weight:600; font-size:30px; letter-spacing:-.02em; color:var(--white); }
.jobs-note{ margin-top:22px; font-size:14.5px; color:var(--gray-2); }

.builder{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center;
  border:1px solid var(--line); border-radius:16px; background:var(--near-black); padding:56px; }
.builder h2{ font-size:clamp(32px,4vw,52px); letter-spacing:-.035em; }
.builder-controls > p{ margin:14px 0 28px; font-size:17px; line-height:1.6; }
.builder-summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:24px 0 20px; padding-top:20px; border-top:1px solid var(--line); }
.builder-count{ color:var(--white); font-weight:600; }
.builder-visual{ max-width:520px; justify-self:center; width:100%; }

.chips{ border:0; display:flex; flex-wrap:wrap; gap:10px; }
.chips legend{ font-size:14.5px; font-weight:600; color:var(--white); margin-bottom:12px; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.chip span{ display:inline-flex; align-items:center; gap:9px; padding:11px 15px; border-radius:8px; border:1px solid var(--line);
  color:var(--gray-1); font-size:14.5px; font-weight:500; background:var(--black); transition:all .25s var(--ks-ease); user-select:none; }
.chip span .ks-icon{ color:var(--gray-2); transition:color .25s var(--ks-ease); }
.chip:hover span{ border-color:var(--gray-3); color:var(--white); }
.chip input:checked + span{ border-color:var(--ks-signal); color:var(--white); background:var(--ks-signal-soft); }
.chip input:checked + span .ks-icon{ color:var(--ks-signal); }
.chip input:focus-visible + span{ outline:2px solid var(--ks-signal); outline-offset:3px; }

.faq-list{ max-width:none; }

/* ---------- Contact ---------- */
.contact-layout{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:40px; align-items:start; }
.brief{ border:1px solid var(--line); border-radius:16px; background:var(--near-black); padding:44px; }
.brief-form{ display:flex; flex-direction:column; gap:22px; }
.brief h2{ font-size:clamp(28px,3vw,40px); letter-spacing:-.03em; }
.brief-intro{ margin-top:-8px; font-size:16px; }
.brief-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.brief-field{ display:flex; flex-direction:column; gap:8px; }
.brief-field > span{ font-size:14.5px; font-weight:600; color:var(--white); }
.brief-field input, .brief-field textarea{ width:100%; min-height:50px; padding:14px 16px; border-radius:8px; border:1px solid var(--line); background:var(--black);
  color:var(--white); font:inherit; font-size:15.5px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); resize:vertical; }
.brief-field input:focus, .brief-field textarea:focus{ outline:none; border-color:var(--ks-signal); box-shadow:0 0 0 4px var(--ks-signal-soft); }
.brief-field textarea::placeholder{ color:var(--gray-3); }
.brief-error{ padding:14px 16px; border-radius:8px; border:1px solid color-mix(in srgb, var(--accent-red) 50%, transparent);
  background:color-mix(in srgb, var(--accent-red) 10%, transparent); color:var(--white) !important; }
.brief-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.brief-alt{ font-size:14.5px; color:var(--gray-2); }
.brief-alt a{ color:var(--white); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.hp{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
.brief-sent{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.brief-sent-icon{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ks-signal); border:1px solid var(--ks-signal-line); }
.brief-sent p{ font-size:16.5px; line-height:1.6; }
.btn-whatsapp{ background:#25D366 !important; color:#052E16 !important; }

.contact-side{ display:flex; flex-direction:column; gap:14px; position:sticky; top:110px; }
.contact-side-h{ font-size:18px; }
.channels{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.channel{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:16px; padding:18px 4px; border-bottom:1px solid var(--line);
  transition:background .25s var(--ease); }
.channel:hover{ background:var(--near-black); }
.channel-icon{ width:40px; height:40px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--white); }
.channel-icon svg{ width:20px; height:20px; }
.channel-whatsapp .channel-icon{ color:#25D366; }
.channel-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.channel-name{ font-weight:600; color:var(--white); font-size:15.5px; }
.channel-handle{ font-size:14px; color:var(--gray-1); overflow:hidden; text-overflow:ellipsis; }
.channel-hint{ display:none; }
.channel-action{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--gray-1); transition:color .25s var(--ease); }
.channel:hover .channel-action{ color:var(--white); }
.channel-action .ks-icon{ transition:transform .25s var(--ks-ease); }
.channel:hover .channel-action .ks-icon{ transform:translateX(3px); }
.start-card{ margin-top:12px; border:1px solid var(--line); border-radius:12px; padding:24px; }
.start-card h3{ font-size:18px; }
.start-card p{ margin:8px 0 18px; font-size:14.5px; line-height:1.6; }
.start-card-foot{ margin:18px 0 0 !important; padding-top:16px; border-top:1px solid var(--line); color:var(--gray-2); }
.start-card-foot a{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .principles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1020px){
  .hero-layout, .page-hero-split .page-hero-layout, .builder, .contact-layout{ grid-template-columns:1fr; }
  .hero-layout{ min-height:0; gap:32px; }
  .hero-visual{ max-width:560px; width:100%; }
  .hero-visual-sm{ justify-self:start; }
  .story{ grid-template-columns:1fr; gap:0; }
  .story-visual{ display:none; }
  .story.is-live .chapter{ opacity:1; }
  .chapter{ min-height:0; padding:36px 0 36px 24px; }
  .chapter-icon{ color:var(--ks-signal); }
  .layer-row{ grid-template-columns:1fr; gap:20px; }
  .split-intro{ grid-template-columns:1fr; gap:28px; }
  .split-intro .section-head{ position:static; }
  .contact-side{ position:static; }
  .builder{ padding:36px; }
}
@media (max-width:820px){
  .steps, .pipeline{ grid-template-columns:1fr; gap:32px; }
  .pipeline-step{ padding:0 0 0 60px; }
  .pipeline-step::before{ top:44px; bottom:-28px; left:20px; right:auto; width:1px; height:auto; }
  .jobs{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  html{ scroll-padding-top:84px; }
  .section{ padding:72px 0; }
  .section-head{ margin-bottom:36px; }
  .section-head h2{ font-size:34px; }
  .hero-home{ padding:24px 0 56px; }
  .hero-title{ font-size:48px; }
  .hero-home p.lead{ font-size:17px; margin:24px 0 32px; }
  .hero-ctas .btn{ flex:1 1 auto; }
  .page-hero{ padding:32px 0 56px; }
  .page-hero h1{ font-size:42px; }
  .page-hero p.lead{ font-size:17px; }
  .stack-label{ font-size:22px; }
  .tick-list-2, .feature-grid, .principles, .brief-row{ grid-template-columns:1fr; }
  .team-row{ margin-top:48px; }
  .cta-band{ padding:72px 0; }
  .cta-band-inner{ padding:32px 24px; }
  .cta-band-actions, .cta-band-actions .btn{ width:100%; }
  .price-card, .job, .brief{ padding:24px; }
  .builder{ padding:24px; }
  .brief-actions{ flex-direction:column; align-items:stretch; }
  .brief-actions .btn{ width:100%; }
  .layer-row{ padding:28px 0; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:36px 24px; }
  .footer-brand{ grid-column:1 / -1; }
  .chat-launcher{ width:52px; height:52px; padding:0; border-radius:50%; justify-content:center; bottom:18px; right:18px; }
  .chat-launcher .ico, .chat-launcher-label{ display:none; }
  .chat-launcher-icon{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-home .hero-title, .hero-home .lead, .hero-home .hero-ctas,
  .page-hero h1, .page-hero p.lead, .page-hero .hero-ctas, .stack-breathe .stack-plate{ animation:none; }
  .job-bar span{ transform:none; transition:none; }
  .stack-plate, .chapter, .text-link, .btn{ transition:none; }
}
.stack-focus .stack-plate:not(.is-on){ opacity:.38; }
.hero-title{ font-size:clamp(52px,6.2vw,100px); max-width:12ch; }
@media (max-width:620px){ .hero-title{ font-size:44px; max-width:none; } }