/* ═══════════════════════════════════════════════════════════
   ESOTECH DESIGN SYSTEM — Rigid edition
   Loaded by every page (index, about, blog, resources, …).
   Owns brand tokens, reset, typography, layout helpers,
   reveal animations, buttons, utility bar, header, pills,
   footer and base responsive rules.

   DESIGN LANGUAGE
   ───────────────
   • Hard, square corners — no border-radius anywhere.
   • Thin 1 px hairlines for separation, no soft glow.
   • Flat fills — no linear / radial / shimmer gradients
     (the only gradient kept is the .grid-bg one because it
     paints literal 1 px grid lines, not a soft fade).
   • Subtle contrasts — surfaces sit close to the page
     background, separated only by their hairline.
═══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────── */
:root {
    /* Primary brand blue — Esotech 2026 */
    --brand-blue: #1477c2;
    --blue-500:   #1477c2;
    --blue-600:   #0e5d99;
    --blue-700:   #0a4675;

    /* Alternate (light) primary — the legacy cyan, kept for mono / live /
       terminal accents so the digital-architecture feel is preserved. */
    --blue-accent: #6ABFD6;
    --blue-alt:    #6ABFD6;
    --blue-alt-strong: #4FA8C2;

    /* Secondary accent — vivid magenta for sparing pops:
       flagship pills, featured badges, glow highlights, scrubbers. */
    --accent-purple:        #C300FF;
    --accent-purple-strong: #9a00cc;
    --accent-cyan:        #6ABFD6;   /* legacy alias */
    --accent-cyan-strong: #4FA8C2;   /* legacy alias */
    --purple-400: #C300FF;
    --purple-500: #9a00cc;

    /* Surfaces — near-black "digital architecture" palette with a touch
       of cool tint so the depth gradient reads. */
    --bg-deep:   #050608;
    --bg-base:   #07090c;
    --surface-1: #0a0c10;
    --surface-2: #111419;
    --surface-3: #161a20;

    /* Lines — neutral hairlines + a brand-blue option for accents */
    --grid-line:     rgba(255,255,255,.025);
    --border:        #1a1d22;
    --border-strong: #262a31;
    --border-blue:   rgba(20,119,194,.55);
    --border-purple: rgba(195,0,255,.45);

    /* Typography */
    --text-0: #FAFBFC;
    --text-1: #C5CDD4;
    --text-2: #7d8088;

    /* Fonts */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

    /* Radii — flat rigid look, all zero. Kept as tokens so a
       future redesign can dial roundness back in from one place. */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
}

/* ── RESET & BASE ──────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background: var(--bg-deep);
    color: #e5e5e5;
    overflow-x: hidden;
    line-height: 1.65;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--blue-accent); color: #050505; }
img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

/* ── BACKGROUND DEPTH ──────────────────────
   Three large, very-subtle radial blobs anchored to the
   viewport. They sit behind the grid and add a soft
   "digital atmosphere" without breaking the rigid look. */
body::before {
    content: '';
    position: fixed;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 12% 18%, rgba(20,119,194,.18), transparent 70%),
        radial-gradient(ellipse 50% 45% at 88% 78%, rgba(195,0,255,.10), transparent 70%),
        radial-gradient(ellipse 70% 55% at 50% 50%, rgba(106,191,214,.06), transparent 70%),
        radial-gradient(circle at 50% 0%, rgba(20,119,194,.08), transparent 60%);
    animation: bgDrift 28s ease-in-out infinite alternate;
}
body::after {
    /* Soft top→bottom darkening + subtle vignette */
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 0%, rgba(5,6,8,.4) 75%, rgba(5,6,8,.7) 100%);
}
@keyframes bgDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1);   }
    100% { transform: translate3d(2%, -2%, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

/* ── BACKGROUND GRID (1 px lines, not a smooth fade) ─ */
.grid-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(0deg,  var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridScroll 90s linear infinite;
}
@keyframes gridScroll {
    from { background-position: 0 0; }
    to   { background-position: 40px 40px; }
}
/* .grid-vignette is intentionally a no-op now that the design
   is flat — the markup can stay, the rule does nothing. */
.grid-vignette { display: none; }

/* ── UTILITIES ─────────────────────────────── */
.mono  { font-family: var(--font-mono); }
.sharp { border-radius: 0 !important; }

/* Square panel with a single brand-blue corner pixel — used by
   product/spec cards in the homepage. Maps to the static
   reference's `pixel-border` + `border-l-accent` pattern. */
.pixel-border {
    position: relative;
    border: 1px solid var(--border);
}
.pixel-border::after {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 4px; height: 4px;
    background: var(--blue-accent);
}
.border-l-accent { border-left: 2px solid var(--blue-accent); }
.border-b-accent { border-bottom: 2px solid var(--blue-accent); }


/* ── LAYOUT HELPERS ────────────────────────── */
.wrap   { max-width: 1680px; margin: 0 auto; padding: 0 9vw; }
section { position: relative; z-index: 1; padding: 7rem 0; }

/* ── TYPOGRAPHY ────────────────────────────── */
h1 { font-size: clamp(2.2rem, 4vw, 4.5rem); font-weight: 600; line-height: 1.08; margin-bottom: 1.2rem; letter-spacing: -.005em; }
h2 { font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 600; line-height: 1.1;  margin-bottom: 1rem;   letter-spacing: -.005em; }
h3 { font-size: 1.6rem; font-weight: 600; margin-bottom: .75rem; }

.section-label {
    font-family: var(--font-mono);
    font-size: .72rem; letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--blue-accent);
    margin-bottom: .9rem;
}
.section-label::before { content: '// '; opacity: .55; }


.section-sub {
    font-size: 1.05rem; color: var(--text-1);
    max-width: 820px; font-weight: 300; line-height: 1.8;
}
.section-head { margin-bottom: 4rem; }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin: 0 auto; }

/* Flat accent — was a clipped gradient, now solid colour. */
.hero-title-accent { color: var(--accent-cyan); }

/* ── SCROLL REVEAL ─────────────────────────── */
.reveal       { opacity: 0; transform: translateY(28px);  transition: opacity .6s ease, transform .6s ease; }
.reveal.visible       { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-28px); transition: opacity .6s ease, transform .6s ease; }
.reveal-left.visible  { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(28px);  transition: opacity .6s ease, transform .6s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ── BUTTONS — flat, square, hairline, monospace ───────── */
.btn {
    display: inline-block;
    padding: .9rem 2.2rem;
    font-family: var(--font-mono);
    font-size: .78rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-0);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary {
    background: var(--blue-500);
    color: #ffffff;
    border-color: var(--blue-500);
}
.btn-primary:hover {
    background: var(--blue-600);
    border-color: var(--blue-600);
    color: #ffffff;
}
.btn-outline {
    background: transparent;
    color: var(--blue-alt);
    border-color: var(--blue-alt);
}
.btn-outline:hover {
    background: var(--blue-alt);
    color: #050505;
    border-color: var(--blue-alt);
}
/* Inverted white solid button used in CTA panels (sample: "Connect Now"). */
.btn-invert {
    background: #fff;
    color: #050505;
    border-color: #fff;
}
.btn-invert:hover {
    background: var(--blue-accent);
    color: #050505;
    border-color: var(--blue-accent);
}

/* ── UTILITY BAR ───────────────────────────── */
.utility-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
    background: #030303;
    border-bottom: 1px solid var(--border);
    padding: .45rem 0;
    font-family: var(--font-mono);
    font-size: .72rem;
}

.utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.utility-left  { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
.utility-item {
    display: flex; align-items: center; gap: .5rem;
    color: var(--text-2);
    letter-spacing: .08em;
    text-decoration: none;
    transition: color .2s ease;
}
.utility-item:hover { color: var(--blue-accent); }
.utility-item svg {
    width: 13px; height: 13px;
    stroke: var(--blue-accent); stroke-width: 1.5; fill: none;
    flex-shrink: 0;
}
.persona-toggle-container {
    display: flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: .72rem;
}
.persona-label {
    color: var(--text-2);
    margin-right: .4rem;
    letter-spacing: .08em;
}
.persona-btn {
    background: transparent;
    border: none;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: .72rem;
    cursor: pointer;
    letter-spacing: .08em;
    padding: 0 .2rem;
    transition: color .2s ease;
}
.persona-btn:hover {
    color: var(--blue-accent);
}
.persona-btn.active {
    color: var(--blue-accent);
    font-weight: 500;
}
.persona-sep {
    color: var(--border-strong);
    user-select: none;
}

.utility-right { display: flex; align-items: center; gap: 1rem; }
.social-link {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text-2);
    background: transparent;
    transition: color .2s ease, border-color .2s ease;
}
.social-link:hover {
    color: var(--blue-accent);
    border-color: var(--blue-accent);
    background: transparent;
}
.social-link svg { width: 12px; height: 12px; fill: currentColor; }

/* ── HEADER ────────────────────────────────── */
.site-header {
    position: fixed; top: 34px; left: 0; right: 0; z-index: 1000;
    padding: .9rem 0;
    background: rgba(5,5,5,.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav-logo { display: flex; align-items: center; gap: .75rem; }
/* width:auto preserves intrinsic aspect ratio against the HTML
   width/height attributes (added for CLS prevention) — without it
   the logo stretches to the attribute width. */
.nav-logo img { height: 32px; width: auto; }
.nav-logo span {
    font-family: var(--font-mono);
    font-size: 1.15rem; font-weight: 900;
    letter-spacing: -.01em; text-transform: uppercase;
    color: var(--text-0);
}
.nav-links { display: flex; gap: 2.4rem; list-style: none; }
.nav-links a {
    font-family: var(--font-mono);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--text-1);
    position: relative;
    transition: color .2s ease;
}

.nav-links a::after {
    content: ''; position: absolute; bottom: -6px; left: 0;
    width: 0; height: 1px;
    background: var(--blue-accent);
    transition: width .25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--blue-accent); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { display: flex; gap: 1rem; }
.mobile-nav-toggle,
.mobile-nav-panel { display: none; }
.mobile-nav-toggle {
    align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--blue-accent);
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}
.mobile-nav-toggle span {
    display: block;
    width: 18px; height: 1px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
}
.mobile-nav-panel {
    position: absolute;
    left: 9vw; right: 9vw; top: calc(100% + .9rem);
    border: 1px solid var(--border-strong);
    background: rgba(8,15,30,.98);
    backdrop-filter: blur(14px);
    padding: .7rem;
    z-index: 1002;
}
.mobile-nav-panel a {
    display: block;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-1);
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.mobile-nav-panel a:last-child { border-bottom: 0; }
.mobile-nav-panel a:hover,
.mobile-nav-panel a.active { color: var(--blue-accent); }
.mobile-nav-panel .mobile-nav-cta {
    margin-top: .7rem;
    text-align: center;
    color: #fff;
}
.mobile-nav-open .mobile-nav-panel { display: block; }
.mobile-nav-open .mobile-nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-nav-open .mobile-nav-toggle span:nth-child(2) { opacity: 0; }
.mobile-nav-open .mobile-nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── PILLS — square tags ────────────────────── */
.pill {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem; letter-spacing: .22em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 0;
    border: 1px solid;
    background: transparent;
}
.pill-purple { color: var(--accent-purple); border-color: var(--border-purple); }
.pill-blue   { color: var(--blue-alt);       border-color: var(--border-strong);  }
.pill-green  { color: #4ade80;               border-color: rgba(74,222,128,.4);   }

/* ── FOOTER ────────────────────────────────── */
footer {
    padding: 4rem 0 2rem;
    border-top: 1px solid var(--border);
    background: var(--bg-base);
    position: relative; z-index: 10;
}
footer .reveal,
footer .reveal-left,
footer .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr;
    gap: 3rem; margin-bottom: 3rem;
}
.footer-brand img { height: 42px; width: auto; margin-bottom: 1.2rem; }
.footer-brand p   { color: var(--text-2); font-size: .92rem; line-height: 1.75; }
.footer-col h5 {
    font-size: .8rem; letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    color: var(--text-0);
    font-weight: 600;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: .55rem; }
.footer-col a  { color: var(--text-2); font-size: .9rem; transition: color .2s ease; }
.footer-col a:hover { color: var(--blue-accent); }
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    color: var(--text-2);
    font-size: .82rem;
}
.footer-locs { display: flex; gap: 2rem; }

/* ── RESPONSIVE ────────────────────────────── */
@media (max-width: 900px) {
    .nav-links, .nav-cta { display: none; }
    .mobile-nav-toggle { display: flex; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    section { padding: 5rem 0; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: .8rem; text-align: center; }
    .utility-left  { display: none; }
}