/* StackFlowStudio public redesign — ink / acid / ember identity retained.
   UX register: service studio, not an AI dashboard or simulated terminal. */
:root {
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: 'Segoe UI', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, monospace;
  --container: 1280px;
  --gutter: clamp(1.125rem, 4.3vw, 4rem);
  --color-ink-mute: #a2a1a7;
}
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body { background: #0a0a0f; }
body, button, input, textarea, select { font-family: var(--font-body); }
::selection { background: var(--color-acid); color: var(--color-bg); }
:focus-visible { outline: 3px solid var(--color-acid); outline-offset: 4px; }
:where(a,button,[role='button'],input,select,textarea):focus-visible { border-radius: 4px; }
:where(button,a) { -webkit-tap-highlight-color: transparent; }
:where(button:not(:disabled), a) { cursor: pointer; }
:where(button:disabled) { cursor: not-allowed; }
* { scrollbar-color: #71717a #181820; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #181820; }
*::-webkit-scrollbar-thumb { background: #71717a; border: 2px solid #181820; border-radius: 9px; }
*::-webkit-scrollbar-thumb:hover { background: #b4b4bb; }
.site-header { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.075); }
.site-header__brand { white-space: nowrap; }
.site-nav__link { font-size: .83rem; letter-spacing: .015em; }
.site-nav__link:hover { color: var(--color-acid); }
.lang-switcher { border: 1px solid var(--color-line); }
.lang-switcher__btn:focus-visible { outline-offset: -2px; }
.hero { isolation: isolate; overflow: hidden; min-height: min(850px, 90svh); padding-top: clamp(8.5rem,14vw, 13rem); padding-bottom: clamp(5rem, 9vw, 10rem); }
.hero::before { content: ''; pointer-events: none; position: absolute; top: -32%; right: -13%; width: 68%; aspect-ratio: 1; background: radial-gradient(circle, rgba(212,255,58,.085), transparent 64%); z-index: -1; }
.hero::after { content: 'STACKFLOW / STUDIO'; position: absolute; bottom: 22px; right: var(--gutter); font: 11px var(--font-mono); color: #63636d; letter-spacing: .16em; }
.hero__container { width: 100%; }
.hero__content { display: grid; align-items: center; grid-template-columns: minmax(0, 1.2fr) minmax(290px,.8fr); gap: clamp(3rem, 6vw, 7rem); max-width: none; }
.hero__copy { min-width: 0; }
.hero__marquee { text-transform: none; letter-spacing: .065em; font-family: var(--font-body); font-size: .82rem; font-weight: 600; margin-bottom: 2.5rem; color: #bbb9bf; }
.hero__marquee-dot { height: 8px; width: 8px; box-shadow: none; }
.hero__title { font-size: clamp(4.35rem, 6.4vw, 7.9rem); letter-spacing: -.075em; line-height: .94; font-weight: 400; margin-bottom: 2rem; }
.hero__title .line { overflow: visible; padding-bottom: .09em; }
.hero__title em { font-weight: 400; letter-spacing: -.075em; }
.hero__title em::after { display: none; }
.hero__lede { font-family: var(--font-body); font-size: clamp(1.05rem,1.6vw,1.22rem); line-height: 1.75; max-width: 53ch; margin-bottom: 2rem; }
.hero__actions { margin-bottom: 1rem; }
.hero__footnote { color: #97979f; font-size: .76rem; line-height: 1.65; }
.hero__brief { border: 1px solid #34343c; background: #15151b; padding: clamp(1.2rem, 2.5vw, 2.5rem); border-radius: 5px; position: relative; overflow: hidden; box-shadow: 0 35px 75px rgba(0,0,0,.24); transform: rotate(1.4deg); }
.hero__brief::before { content:''; position: absolute; height: 4px; left: 0; top: 0; width: 100%; background: var(--color-acid); }
.hero__brief-top { display:flex; justify-content:space-between; align-items:center; color: #a5a4ad; font: .68rem var(--font-mono); letter-spacing: .065em; padding-bottom: 1.5rem; border-bottom:1px solid #34343c; }
.hero__brief-dot { height:8px; width:8px; border-radius:50%; background:var(--color-acid); }
.hero__brief-title { font-family:var(--font-display); font-size:clamp(1.85rem,3.2vw,3.3rem); font-weight:400; letter-spacing:-.055em; line-height:1.1; padding: 2.2rem 0 2.5rem; }
.hero__brief-line { display:grid; grid-template-columns: 37px 1fr 20px; align-items:center; padding:1.2rem 0; border-top:1px solid #34343c; gap: .5rem; font-size:.96rem; }
.hero__brief-line span:first-child { color:var(--color-acid); font:.75rem var(--font-mono); }
.hero__brief-line span:last-child { color:#a8a7af; text-align:right; }
.hero__brief-end { display:flex; justify-content:space-between; gap:1rem; align-items:center; color:#9b9ba4; font-size:.76rem; line-height:1.5; margin-top:2.8rem; }
.hero__brief-end span:last-child { font-size:2.5rem; color:var(--color-ember); line-height:1; }
.strip { border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); background:#111117; }
.section { padding: clamp(5rem, 9vw, 9rem) 0; }
.section--lg { background: linear-gradient(180deg, #101016, #0b0b11); }
.section__title { letter-spacing:-.055em; }
.section__desc { max-width: 670px; }
.section__index { color:var(--color-acid); }
.process__step { transition: background .2s ease, border-color .2s ease; }
.process__step:hover { background:#1b1b22; border-color:#66666e; }
.pricing__grid { align-items:stretch; }
.plan { display:flex; flex-direction:column; border-radius:5px; }
.plan__price { margin-top:auto; }
.plan__cta { margin-top: auto; }
.plan--featured { border-color:var(--color-acid); }
.plan__feature { align-items: flex-start; }
.pay-info--clean { border-radius:5px; padding: clamp(1.15rem,3vw,2rem); }
.pay-info--clean .pay-info__methods { display:none; }
.pay-info--clean .pay-info__legal { margin-top:1rem; }
.builder { background: #111117; }
.builder__shell { border-radius:8px; box-shadow: 0 35px 90px rgba(0,0,0,.22); }
.builder__shell-header { background:#1c1c23; border-bottom:1px solid #34343e; }
.builder__shell-dots, .builder__shell-live, .builder__shell-path-sep { display:none !important; }
.builder__shell-path { font-family:var(--font-body); gap:.75rem; }
.builder__shell-path-seg { font-family:var(--font-body); }
.builder__shell-path-seg--mute { font-weight:700; color:var(--color-ink); }
.builder__shell-meta { font-family:var(--font-mono); }
.builder__shell-statusbar { background:#1b1b21; color:#aaaab2; }
.builder__shell-statusbar-right, .builder__shell-statusbar-left { gap:.55rem; }
.builder__shell-statusbar-flag { color:var(--color-acid); }
.builder__privacy { margin: 1.5rem 0 0; font-size:.83rem; color:#b4b4bb; line-height:1.7; }
.builder__privacy a { color:var(--color-acid); text-decoration:underline; text-underline-offset:3px; }
.builder-shortcut { border-left: 3px solid var(--color-acid); }
.cta-band { border-radius:6px; }
.site-footer__cookie-link { appearance:none; border:0; background:none; color:var(--color-acid); font-size:.77rem; text-decoration:underline; text-underline-offset: 3px; padding:.2rem .35rem; }
@media(max-width:1070px) { .hero__content { grid-template-columns:minmax(0,1fr) minmax(270px,.75fr); gap:2rem; } .hero__title { font-size:clamp(3.8rem,6vw,6rem); } }
@media(max-width:800px) { .hero { min-height:auto; padding-top:8.5rem; } .hero__content { grid-template-columns:minmax(0,1fr); } .hero__title { font-size:clamp(3.8rem,10.8vw,6.8rem); } .hero__brief { transform:none; max-width:600px; margin-top:1rem; } .hero__brief-title { max-width: 15ch; } }
@media(max-width:560px) { .hero { padding: 7.7rem 0 5rem; } .hero__marquee { margin-bottom:1.8rem; } .hero__title { font-size:clamp(3.25rem, 12.4vw, 5rem); } .hero__lede { font-size:1rem; } .hero__brief { padding:1.3rem; } .hero__brief-title { font-size:2.1rem; } .hero__brief-end { margin-top:1.3rem; } .hero__actions .btn { width:100%; justify-content:center; } .hero::after { display:none; } .section { padding:4.3rem 0; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } .hero__brief { transform:none; } }
@media(forced-colors:active) { * { scrollbar-color:auto; } .hero__brief { border:1px solid CanvasText; } }

/* The builder uses genuine selection state, not a fake site screenshot. */
.summary__preview--choices { padding:1.4rem; border:1px solid var(--color-line); border-radius:6px; background:#181820; }
.summary__choices-label { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; color:var(--color-acid); }
.summary__mockup--choices { display:grid; gap:.55rem; }
.summary__mockup--choices .mockup-section { background:#25252e; border:1px solid #3c3c45; padding:.8rem; border-radius:4px; }

/* Seven real builder steps, horizontally scrollable instead of three fictitious phases. */
.builder__progress { display:flex; gap:.35rem; overflow-x:auto; scrollbar-gutter:stable; padding-bottom:.7rem; }
.progress-step { flex: 1 0 105px; min-width: 105px; }
@media(max-width:620px) { .progress-step { flex:0 0 120px; } }

/* Service architecture: one flagship, three connected disciplines, two add-ons. */
.presence-section {background:#0c0c12;border-bottom:1px solid #272730;position:relative;}
.presence-section::before {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,rgba(212,255,58,.035),transparent 30%);}
.presence-section .container {position:relative;}
.presence-intro {display:grid;grid-template-columns: 1fr .75fr;column-gap:clamp(2rem,7vw,7rem);align-items:end;margin-bottom:clamp(2.3rem,5vw,4.6rem);}
.presence-intro .section__meta {grid-column:1/-1;margin-bottom:1.5rem;}
.presence-heading {font-family:var(--font-display);font-size:clamp(2.85rem,5.2vw,5.5rem);line-height:1.03;letter-spacing:-.067em;font-weight:400;margin:0;max-width:12.5ch;}
.presence-description {font-size:1.06rem;line-height:1.8;color:#c2c1c9;margin:0 0 .35rem;max-width:54ch;}
.presence-grid {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid #35353e;border-left:1px solid #35353e;}
.presence-card {grid-column:span 4;min-width:0;min-height:310px;border-right:1px solid #35353e;border-bottom:1px solid #35353e;padding:clamp(1.4rem,2.5vw,2.5rem);display:flex;flex-direction:column;position:relative;overflow:hidden;background:rgba(255,255,255,.006);transition:background .18s ease;}
.presence-card:hover {background:#18181f;}
.presence-card--foundation {grid-column:span 8;background:#d4ff3a;color:#10120b;min-height:350px;}
.presence-card--foundation:hover {background:#e1ff82;}
.presence-card--support {grid-column:span 4;}
.presence-card--add-on {grid-column:span 6;background:#121218;}
.presence-card__head {display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:auto;font: .68rem var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:#a3a3b0;}
.presence-card--foundation .presence-card__head {color:#424a23;}
.presence-card__type {padding:.37rem .62rem;border:1px solid #4b4b53;border-radius:2px;text-align:right;line-height:1.3;}
.presence-card--foundation .presence-card__type {border-color:#7d9c2e;}
.presence-card--add-on .presence-card__type {color:#d4ff3a;border-color:#667c21;}
.presence-card__content {margin-top:4.4rem;max-width:50ch;position:relative;z-index:1;}
.presence-card__content h3 {font:400 clamp(1.52rem,2.5vw,2.4rem)/1.12 var(--font-display);letter-spacing:-.048em;margin:0 0 .9rem;}
.presence-card--foundation .presence-card__content h3 {font-size:clamp(2.5rem,4.25vw,4.5rem);}
.presence-card__content p {color:#b6b6c1;font-size:.92rem;line-height:1.73;margin:0;}
.presence-card--foundation .presence-card__content p {color:#333d14;font-size:1rem;max-width:50ch;}
.presence-card__symbol {position:absolute;right:2.1rem;top:6rem;font-family:var(--font-display);font-size:clamp(3rem,6vw,6rem);font-weight:400;color:rgba(212,255,58,.095);pointer-events:none;}
.presence-card--foundation .presence-card__symbol {font-size:clamp(5rem,13vw,14rem);right:1.4rem;top:2rem;color:rgba(12,24,0,.14);}
.presence-bottom {display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2rem 0 0;}
.presence-bottom p {max-width:74ch;color:#adadb6;font-size:.76rem;line-height:1.65;margin:0;}
.presence-link {white-space:nowrap;align-self:flex-start;color:#d4ff3a;font-weight:700;font-size:.86rem;border-bottom:1px solid currentColor;padding:.15rem 0;}
.presence-link:hover {color:#fff;}
@media(max-width:950px){.presence-intro{grid-template-columns:1fr;gap:1.35rem}.presence-card--foundation{grid-column:span 12}.presence-card--support{grid-column:span 6}.presence-card--add-on{grid-column:span 6}}
@media(max-width:620px){.presence-card--foundation,.presence-card--support,.presence-card--add-on{grid-column:span 12;min-height:255px}.presence-card--foundation{min-height:310px}.presence-card__content{margin-top:3.5rem}.presence-card__content h3{max-width:24ch}.presence-bottom{flex-direction:column;align-items:flex-start}.presence-heading{font-size:clamp(2.85rem,10.5vw,4.2rem)}}
@media(prefers-reduced-motion:reduce){.presence-card{transition:none}}

.presence-card--foundation .presence-card__content h3 {color:#10120b;}