/* ============================================================================
   FARMSys — Phase 1 static preview
   Converted from the Figma Make source (React 19 + Tailwind v4).
   All Tailwind utilities are resolved to their v4 default values by hand so the
   preview has zero build step and zero external requests.
   Breakpoints: sm 640px · md 768px · lg 1024px
   ========================================================================== */

/* ─── Fonts (bundled, no CDN) ─────────────────────────────────────────────── */

@font-face{font-family:'Orbitron';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/orbitron-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/orbitron-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/orbitron-latin-900-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jetbrains-mono-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');}

/* ─── Tokens ──────────────────────────────────────────────────────────────── */

:root{
  --cyan:#00e5ff;
  --cyan-bright:#00fff2;
  --cyan-dim:#00b8cc;
  --green:#00ff88;
  --amber:#ffb800;
  --red:#ff5f57;

  --bg:#000000;
  --bg-alt:#00060a;
  --bg-stat:#00080a;
  --term-bg:#000d0f;
  --term-bar:#001215;

  --text:#e0f7fa;
  --text-nav:#a0c4cc;
  --text-body:#8ab4ba;
  --text-muted:#6b8f95;
  --text-dim:#5a8a94;
  --text-faint:#4a7a82;
  --text-ghost:#2a4a52;

  /* The bundled subsets carry no → ▸ ✓ █ ◈ ⬡ ◎ ◇ ▣ ▲ glyphs (neither does the
     Google-hosted original), so a symbol-capable fallback is listed explicitly
     per OS instead of leaving it to chance. */
  --font-display:'Orbitron','Segoe UI Symbol','Apple Symbols','Noto Sans Symbols 2','DejaVu Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Segoe UI Symbol','Apple Symbols','Noto Sans Symbols 2','DejaVu Sans Mono',ui-monospace,monospace;
}

/* ─── Base ────────────────────────────────────────────────────────────────── */

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:#00e5ff22 transparent;
  scroll-padding-top:5rem;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-mono);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

button{
  font:inherit;
  color:inherit;
  background:transparent;
  border:0;
  cursor:pointer;
}

::selection{background:#00e5ff33;color:var(--cyan)}

:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#00e5ff33;border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:#00e5ff66}

.page{min-height:100vh;background:var(--bg)}

/* ─── Shared effects ──────────────────────────────────────────────────────── */

.scanlines::after{
  content:'';
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,229,255,.015) 2px,rgba(0,229,255,.015) 4px);
  pointer-events:none;
  z-index:9999;
}

.cyan-glow{text-shadow:0 0 10px #00e5ff,0 0 20px #00e5ff66,0 0 40px #00e5ff33}

.box-glow{box-shadow:0 0 0 1px rgba(0,229,255,.3),0 0 20px rgba(0,229,255,.1),inset 0 0 20px rgba(0,229,255,.03)}

.box-glow-hover{transition:box-shadow .3s ease}
.box-glow-hover:hover,
.box-glow-hover:focus-within{
  box-shadow:0 0 0 1px rgba(0,229,255,.6),0 0 30px rgba(0,229,255,.2),inset 0 0 20px rgba(0,229,255,.05);
}

.gradient-text{
  background:linear-gradient(135deg,#00e5ff 0%,#00fff2 50%,#00b8cc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.grid-bg{
  background-image:
    linear-gradient(rgba(0,229,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.04) 1px,transparent 1px);
  background-size:40px 40px;
}

@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.cursor-blink{animation:blink 1s step-end infinite}

@keyframes statusPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,.7)}
  50%{box-shadow:0 0 0 6px rgba(0,229,255,0)}
}
.status-dot{animation:statusPulse 2s ease infinite}

.dot{
  display:inline-block;
  width:.5rem;
  height:.5rem;
  border-radius:9999px;
  background:var(--cyan);
  flex-shrink:0;
}

.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s ease,transform .6s ease;
  transition-delay:var(--reveal-delay,0ms);
}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* ─── Colour utilities (mirror the source's inline hex values) ────────────── */

.c-white{color:#fff}
.c-cyan{color:var(--cyan)}
.c-cyan-44{color:#00e5ff44}
.c-cyan-66{color:#00e5ff66}
.c-cyan-88{color:#00e5ff88}
.c-green{color:var(--green)}
.c-amber{color:var(--amber)}
.c-red{color:var(--red)}

/* ─── Layout wrappers ─────────────────────────────────────────────────────── */

.wrap{margin-inline:auto;width:100%}
.wrap--4xl{max-width:56rem}
.wrap--6xl{max-width:72rem}

.section{padding:6rem 1.5rem}
.section--black{background:var(--bg)}
.section--alt{background:var(--bg-alt)}

.head{text-align:center;margin-bottom:4rem}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:#00e5ff66;
  letter-spacing:.1em;
  margin-bottom:1rem;
}
.head__title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.875rem;line-height:2.25rem;
  color:#fff;
  margin-bottom:1rem;
}
.head__lead{
  font-family:var(--font-mono);
  font-size:.875rem;line-height:1.25rem;
  color:var(--text-muted);
  max-width:36rem;
  margin-inline:auto;
}

/* ─── Terminal window ─────────────────────────────────────────────────────── */

.terminal{
  background:var(--term-bg);
  border:1px solid rgba(0,229,255,.25);
  border-radius:8px;
  overflow:hidden;
}
.terminal__bar{
  background:var(--term-bar);
  border-bottom:1px solid rgba(0,229,255,.2);
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:8px;
}
.terminal__bar--between{justify-content:space-between}
.terminal__dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.terminal__title{
  margin-left:.75rem;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:#00e5ff99;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.terminal__title--plain{text-transform:none;letter-spacing:normal;color:#00e5ff88}
/* Decorative. Hidden under sm: at 390px it collides with the wrapping title. */
.terminal__host{
  display:none;
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:#00e5ff44;
  white-space:nowrap;
}
.terminal__cmd{font-family:var(--font-mono);font-size:.75rem;line-height:1rem;color:#00e5ff55}
.terminal__body{padding:1.25rem}

.tag{
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:#00e5ff44;
  border:1px solid #00e5ff22;
  padding:.125rem .5rem;
  white-space:nowrap;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

.btn{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.875rem;line-height:1.25rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:all .2s ease;
}
.btn--ghost{
  padding:.5rem 1.25rem;
  font-size:.75rem;line-height:1rem;
  color:var(--cyan);
  border:1px solid #00e5ff33;
}
.btn--ghost:hover{border-color:var(--cyan);background:#00e5ff11}
.btn--solid{
  padding:1rem 2rem;
  background:var(--cyan);
  color:#000;
  font-family:var(--font-display);
  font-weight:700;
}
.btn--solid:hover{background:var(--cyan-bright)}
.btn--outline{
  padding:1rem 2rem;
  border:1px solid #00e5ff44;
  color:var(--cyan);
}
.btn--outline:hover{border-color:var(--cyan);background:#00e5ff11}
.btn--block{flex:1;padding:1rem;text-align:center}
.btn--block.btn--solid{font-weight:900}

/* ─── Badge ───────────────────────────────────────────────────────────────── */

.badge{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  padding:.5rem 1rem;
  margin-bottom:2rem;
  border:1px solid #00e5ff33;
  background:#00e5ff08;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cyan);
}
.badge--plain{gap:.5rem;margin-bottom:1.5rem}

/* ─── Nav ─────────────────────────────────────────────────────────────────── */

.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  background:transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom-color:rgba(0,229,255,.15);
}
.nav__inner{
  max-width:80rem;
  margin-inline:auto;
  padding:1rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.125rem;line-height:1.75rem;
  letter-spacing:.1em;
  color:#fff;
}
.logo__accent{color:var(--cyan)}

.nav__links{display:none}
.nav__links a{
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-nav);
  transition:color .2s ease;
}
.nav__links a:hover{color:var(--cyan)}

.nav__cta{display:none}
.nav__status{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:#00e5ff99;
}

.nav__toggle{display:block;padding:.5rem;line-height:0}
.nav__toggle span{display:block;height:1px;background:var(--cyan);margin-bottom:.375rem}
.nav__toggle span:nth-child(1),
.nav__toggle span:nth-child(3){width:1.25rem}
.nav__toggle span:nth-child(2){width:1rem}
.nav__toggle span:last-child{margin-bottom:0}

.nav__mobile{
  background:#000;
  border-top:1px solid #00e5ff22;
  padding:1rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.nav__mobile[hidden]{display:none}
.nav__mobile a{
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-nav);
  padding:.5rem 0;
  border-bottom:1px solid #ffffff08;
}
.nav__mobile-cta{
  color:var(--cyan);
  border:1px solid #00e5ff44;
  border-bottom-color:#00e5ff44;
  padding:.5rem 1rem;
  text-align:center;
  margin-top:.5rem;
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding-top:4rem;
}
.hero__bg{position:absolute;inset:0}
.hero__img{width:100%;height:100%;object-fit:cover;opacity:.1}
.hero__fade{position:absolute;inset:0;background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.8) 50%,#000 100%)}
.hero__bloom{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(0,229,255,.08) 0%,transparent 70%)}

.hero__corner{
  position:absolute;
  top:6rem;
  display:none;
  font-family:var(--font-mono);
  font-size:.75rem;
  line-height:1.5rem;
  color:#00e5ff22;
}
.hero__corner--left{left:1.5rem}
.hero__corner--right{right:1.5rem;text-align:right}

.hero__inner{
  position:relative;
  z-index:10;
  max-width:64rem;
  margin-inline:auto;
  padding-inline:1.5rem;
  text-align:center;
}
.hero__prompt{
  margin-bottom:1.5rem;
  font-family:var(--font-mono);
  font-size:.875rem;line-height:1.25rem;
  color:#00e5ff66;
}
.hero__title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:2.25rem;
  line-height:1.25;
  margin-bottom:1.5rem;
}
.hero__terminal{max-width:42rem;margin-inline:auto;margin-bottom:2rem;text-align:left}

.boot{font-family:var(--font-mono);font-size:.875rem;line-height:1.25rem}
.boot__line{color:#00e5ff66;margin-bottom:.5rem}
.boot__line[hidden],.boot__caret[hidden]{display:none}
.boot__caret{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--cyan);
  margin-top:.75rem;
}
.tw__caret{color:var(--cyan)}

.hero__actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
}
/* Hidden under md: below that the hero content exceeds 100vh and this cue
   lands on top of the CTA buttons. */
.hero__scroll{
  display:none;
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  color:#00e5ff44;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.1em;
}
.hero__scroll-line{
  width:1px;height:3rem;
  background:linear-gradient(to bottom,#00e5ff44,transparent);
}

/* ─── Stats ───────────────────────────────────────────────────────────────── */

.stats{
  padding:4rem 1.5rem;
  background:var(--bg);
  border-top:1px solid #00e5ff11;
  border-bottom:1px solid #00e5ff11;
}
.stats__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid #00e5ff11;
}
.stats__cell:nth-child(-n+3){border-right:1px solid #00e5ff11}
.stat{
  padding:1.5rem;
  border:1px solid #00e5ff22;
  background:var(--bg-stat);
  text-align:center;
  height:100%;
}
.stat__value{
  font-family:var(--font-display);
  font-weight:900;
  font-size:2.25rem;line-height:2.5rem;
  color:var(--cyan);
  margin-bottom:.25rem;
}
.stat__label{
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#00e5ff66;
  margin-top:.5rem;
}

/* ─── Card grid (soluciones + premium) ────────────────────────────────────── */

.grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}

.card__body{padding:1.5rem}
.card__body--sm{padding:1.25rem}
.card__icon{
  font-size:1.875rem;line-height:2.25rem;
  margin-bottom:1rem;
  color:#00e5ff66;
  transition:color .3s ease,text-shadow .3s ease;
}
.card:hover .card__icon,
.card:focus-within .card__icon{
  color:var(--cyan);
  text-shadow:0 0 10px #00e5ff,0 0 20px #00e5ff66,0 0 40px #00e5ff33;
}
.card__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;line-height:1.5rem;
  letter-spacing:.025em;
  color:#fff;
  margin-bottom:.75rem;
}
.card__title--sm{font-size:.875rem;line-height:1.25rem;margin-bottom:.5rem;letter-spacing:0}
.card__desc{
  font-family:var(--font-mono);
  font-size:.75rem;
  line-height:1.625;
  color:var(--text-muted);
}
.card__hover{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid #00e5ff11;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:#00e5ff66;
  display:none;
}
.card:hover .card__hover,
.card:focus-within .card__hover{display:block}

/* ─── Process ─────────────────────────────────────────────────────────────── */

.process{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
.process__steps{display:flex;flex-direction:column;gap:.5rem}
.process__step{
  width:100%;
  text-align:left;
  padding:1rem;
  border:1px solid #00e5ff11;
  color:var(--text-faint);
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.process__step:hover{border-color:#00e5ff33;color:#00e5ff88}
.process__step.is-active{border-color:var(--cyan);background:#00e5ff0a;color:var(--cyan)}
.process__num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.875rem;
  margin-right:.75rem;
  color:#00e5ff33;
}
.process__step.is-active .process__num{color:var(--cyan)}

.process__panel > * + *{margin-top:1rem}
.process__panel[hidden]{display:none}
.process__cmd{font-family:var(--font-mono);font-size:.875rem;line-height:1.25rem;min-height:1.25rem}
.process__meta{border-top:1px solid #00e5ff11;padding-top:1rem}
.process__meta > * + *{margin-top:.75rem}
.process__exec{font-family:var(--font-mono);font-size:.75rem;line-height:1rem}
.process__title{font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1.75rem;color:#fff}
.process__desc{font-family:var(--font-mono);font-size:.875rem;line-height:1.625;color:var(--text-body)}
.process__privacy{
  padding-top:.5rem;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:#00e5ff44;
}
.process__next{
  border:1px solid #00e5ff11;
  background:#00e5ff04;
  padding:.75rem;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:#00e5ff66;
}

/* ─── White-label ─────────────────────────────────────────────────────────── */

.wl__tabs{
  display:flex;
  margin-bottom:1.5rem;
  border:1px solid #00e5ff22;
  overflow:hidden;
}
.wl__tab{
  flex:1;
  padding:1rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.75rem;line-height:1rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#00e5ff66;
  transition:background-color .2s ease,color .2s ease;
}
.wl__tab:hover{color:var(--cyan);background:#00e5ff11}
.wl__tab.is-active{background:var(--cyan);color:#000}

.wl__panel{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
.wl__panel[hidden]{display:none}
.wl__cmd{font-family:var(--font-mono);font-size:.875rem;line-height:1.25rem;min-height:1.25rem;margin-bottom:1rem}
.wl__meta{border-top:1px solid #00e5ff11;padding-top:1rem}
.wl__status{font-family:var(--font-mono);font-size:.75rem;line-height:1rem;margin-bottom:.5rem}
.wl__desc{font-family:var(--font-mono);font-size:.875rem;line-height:1.625;color:var(--text-body)}
.wl__items{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem}
.wl__items li{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:var(--text-muted);
}
.wl__output{
  margin-top:1rem;
  border-top:1px solid #00e5ff11;
  padding-top:.75rem;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
}

.wl__visual{position:relative;overflow:hidden}
.wl__visual-bloom{position:absolute;inset:0;opacity:.05;pointer-events:none}
.wl__visual-body{
  position:relative;
  padding:2rem;
  min-height:13rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.wl__initials{
  font-family:var(--font-display);
  font-weight:900;
  font-size:3.75rem;line-height:1;
  margin-bottom:1rem;
}
.wl__visual-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.25rem;line-height:1.75rem;
  color:#fff;
  margin-bottom:.5rem;
  text-align:center;
}
.wl__chip{
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.25rem .75rem;
  border:1px solid;
  text-align:center;
}
.wl__included{
  margin-top:1.5rem;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:#00e5ff44;
}

/* ─── Premium pipeline ────────────────────────────────────────────────────── */

.pipeline{margin-bottom:3rem}
.pipeline__scroll{overflow-x:auto}
.pipeline__row{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 0;
  min-width:max-content;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  white-space:nowrap;
}
.pipeline__node{
  padding:.375rem .75rem;
  border:1px solid #00e5ff33;
  background:#00e5ff08;
  color:var(--cyan);
}
.pipeline__arrow{color:#00e5ff44}
.pipeline__compare{
  margin-top:.75rem;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:#00e5ff44;
}
.premium__note{
  margin:2rem auto 0;
  max-width:32rem;
  text-align:center;
  font-family:var(--font-mono);
  font-size:.75rem;
  line-height:1.625;
  color:#00e5ff66;
}

/* ─── FAQ ─────────────────────────────────────────────────────────────────── */

.faq{display:flex;flex-direction:column;gap:.5rem}
.faq__q{
  width:100%;
  text-align:left;
  padding:1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.faq__q-text{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-family:var(--font-mono);
  font-size:.875rem;line-height:1.25rem;
  color:#fff;
}
.faq__num{
  font-family:var(--font-display);
  font-size:.75rem;
  color:#00e5ff44;
  flex-shrink:0;
}
.faq__plus{
  color:var(--cyan);
  font-family:var(--font-mono);
  font-size:1.125rem;line-height:1.75rem;
  transition:transform .2s ease;
  flex-shrink:0;
}
.faq__q[aria-expanded="true"] .faq__plus{transform:rotate(45deg)}
.faq__a{padding:0 1.25rem 1.25rem;border-top:1px solid #00e5ff11}
.faq__a[hidden]{display:none}
.faq__a p{
  padding-top:1rem;
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  line-height:1.625;
  color:var(--text-body);
}
.faq__tag{color:var(--green);font-size:.75rem;margin-top:.125rem;flex-shrink:0}

/* ─── CTA ─────────────────────────────────────────────────────────────────── */

.cta{position:relative;overflow:hidden;padding:6rem 1.5rem;background:var(--bg-alt)}
.cta__bloom{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(0,229,255,.06) 0%,transparent 70%);
}
.cta__wrap{position:relative;z-index:10}
.cta__stack > * + *{margin-top:1.5rem}

.cta__log{font-family:var(--font-mono);font-size:.875rem;line-height:1.25rem}
.cta__log > * + *{margin-top:.5rem}

.cta__steps{
  border:1px solid #00e5ff22;
  background:#00e5ff06;
  padding:1rem;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
}
.cta__steps > * + *{margin-top:.375rem}
.cta__steps-title{
  color:var(--cyan);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:.5rem;
}
.cta__step{display:flex;align-items:flex-start;gap:.75rem;color:var(--text-dim)}
.cta__step-n{color:#00e5ff44;flex-shrink:0}

.cta__props{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
.cta__prop{border:1px solid #00e5ff11;padding:1rem;text-align:center}
.cta__prop-icon{color:var(--cyan);font-size:1.5rem;line-height:2rem;margin-bottom:.5rem}
.cta__prop-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.75rem;line-height:1rem;
  color:#fff;
  margin-bottom:.25rem;
}
.cta__prop-sub{font-family:var(--font-mono);font-size:.75rem;line-height:1rem;color:var(--text-faint)}

.cta__actions{display:flex;flex-direction:column;gap:.75rem}
.cta__foot{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  line-height:1.5;
  color:#00e5ff44;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.footer{border-top:1px solid #00e5ff11;background:var(--bg);padding:3rem 1.5rem}
.footer__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;margin-bottom:3rem}
.logo--footer{display:block;margin-bottom:1rem}
.footer__tagline{
  font-family:var(--font-mono);
  font-size:.75rem;
  line-height:1.625;
  color:var(--text-faint);
  max-width:20rem;
}
.footer__status{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:1rem;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:#00e5ff66;
}
.footer__heading{
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:1rem;
}
.footer__list{display:flex;flex-direction:column;gap:.5rem}
.footer__list a{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1rem;
  color:var(--text-faint);
  transition:color .2s ease;
}
.footer__list a:hover{color:var(--cyan)}
.footer__bullet{color:#00e5ff22}
.footer__bottom{
  border-top:1px solid #00e5ff08;
  padding-top:1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.footer__copy{
  font-family:var(--font-mono);
  font-size:.75rem;line-height:1.5;
  color:var(--text-ghost);
  text-align:center;
}
.footer__shell{font-family:var(--font-mono);font-size:.75rem;line-height:1rem;color:#00e5ff22}
.footer__caret{color:#00e5ff33}

/* ═══════════ Breakpoints ═══════════════════════════════════════════════════ */

/* sm — 640px */
@media (min-width:640px){
  .terminal__host{display:block}
  .hero__actions{flex-direction:row}
  .cta__actions{flex-direction:row}
}

/* md — 768px */
@media (min-width:768px){
  .nav__links{display:flex;align-items:center;gap:2rem}
  .nav__cta{display:flex;align-items:center;gap:1rem}
  .nav__toggle{display:none}
  .nav__mobile{display:none !important}

  .hero__corner{display:block}
  .hero__corner--left{left:3rem}
  .hero__corner--right{right:3rem}
  .hero__scroll{display:flex}
  .hero__title{font-size:3.75rem}

  .stats__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stat__value{font-size:3rem;line-height:1}

  .head__title{font-size:3rem;line-height:1}
  .head__title--sm{font-size:2.25rem;line-height:2.5rem}

  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}

  .wl__initials{font-size:6rem}

  .cta__props{grid-template-columns:repeat(3,minmax(0,1fr))}

  .footer__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer__brand{grid-column:span 2}
  .footer__bottom{flex-direction:row;justify-content:space-between}
  .footer__copy{text-align:left}
}

/* lg — 1024px */
@media (min-width:1024px){
  .hero__title{font-size:4.5rem}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .process{grid-template-columns:repeat(3,minmax(0,1fr))}
  .process__detail{grid-column:span 2}
  .wl__panel{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .cursor-blink,.status-dot{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important}
}