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

    :root {
      /* Dark tokens */
      --card:            #262624;
      --ring:            #d97757;
      --input:           #52514a;
      --muted:           #1b1b19;
      --accent:          #1a1915;
      --border:          #3e3e38;
      --primary:         #d97757;
      --sidebar:         #1f1e1d;
      --background:      #1a1916;
      --foreground:      #c3c0b6;
      --muted-fg:        #b7b5a9;
      --accent-fg:       #f5f4ee;
      --primary-fg:      #ffffff;
      --card-fg:         #faf9f5;

      /* Local */
      --bg:     var(--background);
      --ink:    var(--card-fg);
      --ink-2:  var(--muted-fg);
      --ink-3:  var(--input);
      --p:      var(--primary);
      --p-lt:   #e89070;
      --p-bg:   rgba(217,119,87,.1);
      --b:      var(--border);

      --font-m: "SFMono-Regular", Consolas, "Liberation Mono", "Courier New", monospace;
      --font-b: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
      --mw: 1180px;
      --gx: clamp(1.25rem, 5vw, 3.5rem);
    }

    html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-b);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

    /* ── SCAN LINE ────────────────────────────── */
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 9000; pointer-events: none;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,.03) 2px,
        rgba(0,0,0,.03) 4px
      );
    }

    /* ── CORNER FRAME UTIL ───────────────────── */
    .frame {
      position: absolute; pointer-events: none; z-index: 5;
    }
    .frame-tl { top: 0;  left: 0;  border-top: 1px solid rgba(255,255,255,.18); border-left: 1px solid rgba(255,255,255,.18); width: 40px; height: 40px; }
    .frame-tr { top: 0;  right: 0; border-top: 1px solid rgba(255,255,255,.18); border-right: 1px solid rgba(255,255,255,.18); width: 40px; height: 40px; }
    .frame-bl { bottom: 0; left: 0;  border-bottom: 1px solid rgba(255,255,255,.18); border-left: 1px solid rgba(255,255,255,.18); width: 40px; height: 40px; }
    .frame-br { bottom: 0; right: 0; border-bottom: 1px solid rgba(255,255,255,.18); border-right: 1px solid rgba(255,255,255,.18); width: 40px; height: 40px; }

    /* ── NAV ─────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      padding: .85rem var(--gx);
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,.06);
      background: rgba(26,25,22,.0);
      transition: background .35s;
    }
    nav.sc {
      background: rgba(26,25,22,.96);
      backdrop-filter: blur(16px);
      border-bottom-color: var(--b);
    }

    .nav-logo {
      font-family: var(--font-m); font-weight: 700; font-size: .9rem;
      color: var(--ink); text-decoration: none; letter-spacing: .12em;
      text-transform: uppercase; display: flex; align-items: center; gap: .5rem;
    }
    .nav-logo .dot { color: var(--p); }

    .nav-coords {
      font-family: var(--font-m); font-size: .65rem;
      color: rgba(255,255,255,.3); letter-spacing: .08em;
      display: flex; align-items: center; gap: .75rem;
    }
.sep { width: 1px; height: 10px; flex: 0 0 1px; }
.nav-coords .sep { background: rgba(255,255,255,.2); }
.sep-soft { background: rgba(255,255,255,.1); }

    .nav-ul { display: flex; gap: 2rem; list-style: none; }
    .nav-ul a {
      font-family: var(--font-m); font-size: .65rem; font-weight: 400;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--ink-3); text-decoration: none; transition: color .18s;
    }
    .nav-ul a:hover { color: var(--p); }

    .nav-btn {
      padding: .45rem 1.1rem;
      border: 1px solid var(--p); color: var(--p);
      font-family: var(--font-m); font-size: .65rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      text-decoration: none; background: transparent; cursor: pointer;
      transition: background .18s, color .18s;
      position: relative;
    }
    .nav-btn::before,
    .nav-btn::after {
      content: ''; position: absolute; width: 5px; height: 5px;
      border: 1px solid var(--p); transition: opacity .18s; opacity: 0;
    }
    .nav-btn::before { top: -3px; left: -3px; border-right: none; border-bottom: none; }
    .nav-btn::after  { bottom: -3px; right: -3px; border-left: none; border-top: none; }
    .nav-btn:hover { background: var(--p); color: var(--primary-fg); }
    .nav-btn:hover::before, .nav-btn:hover::after { opacity: 1; }

    .lang-switch {
      display: inline-flex; align-items: center; gap: .3rem;
      padding: .22rem; border: 1px solid var(--b);
      background: rgba(255,255,255,.02);
    }
    .lang-switch__btn {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 2.6rem; padding: .38rem .55rem; border: none;
      background: transparent; color: var(--ink-3); cursor: pointer;
      font-family: var(--font-m); font-size: .58rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
      transition: background .18s, color .18s;
    }
    .lang-switch__btn.is-active,
    .lang-switch__btn[aria-pressed="true"] {
      background: var(--p); color: var(--primary-fg);
    }
    .lang-switch--mobile { display: none; margin-top: .2rem; }

    .hbg { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
    .hbg span { display: block; width: 20px; height: 1px; background: var(--ink-2); transition: .3s; }

.mob {
  display: none; position: fixed; inset: 0; z-index: 240;
  background: var(--bg); flex-direction: column;
  align-items: center; justify-content: center; gap: 2.5rem;
}
.mob.open { display: flex; }
.mob-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 4.5rem); right: var(--gx); background: none; border: none; color: var(--ink-3); cursor: pointer; font-family: var(--font-m); font-size: .8rem; }
    .mob a { font-family: var(--font-m); font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: color .18s; }
    .mob a:hover { color: var(--p); }

    /* ── HERO ────────────────────────────────── */
    .hero {
      position: relative; min-height: 100dvh;
      display: flex; align-items: center;
      padding: 6rem var(--gx) 5rem; overflow: hidden;
    }

    /* ASCII dot grid */
    .hero-grid {
      position: absolute; inset: 0; pointer-events: none;
      background-image: radial-gradient(circle, rgba(195,192,182,.1) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: radial-gradient(ellipse 75% 75% at 55% 50%, #000 30%, transparent 100%);
    }

    /* Warm glow */
    .hero-glow {
      position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    }
    .hero-glow::before {
      content: ''; position: absolute;
      width: 600px; height: 600px; top: -100px; right: -80px;
      background: radial-gradient(circle, rgba(217,119,87,.08) 0%, transparent 65%);
      animation: hg 16s ease-in-out infinite;
    }
    @keyframes hg { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,40px)} }

    /* Dither right edge */
    .hero-dither {
      position: absolute; right: 0; top: 0; bottom: 0; width: 3px; pointer-events: none;
      background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.06) 2px, rgba(255,255,255,.06) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.06) 1px, rgba(255,255,255,.06) 2px);
      background-size: 3px 3px;
    }

    /* HUD top-bar inside hero */
    .hud-bar {
      position: absolute; top: 5rem; left: 0; right: 0;
      padding: .6rem var(--gx);
      border-bottom: 1px solid rgba(255,255,255,.06);
      display: flex; align-items: center; justify-content: space-between;
      z-index: 3;
    }
    .hud-bar-l, .hud-bar-r {
      display: flex; align-items: center; gap: .75rem;
      font-family: var(--font-m); font-size: .6rem;
      color: rgba(255,255,255,.3); letter-spacing: .1em; text-transform: uppercase;
    }
    .hud-sep { width: 1px; height: 10px; background: rgba(255,255,255,.15); }

    .hero-c {
      position: relative; z-index: 2;
      max-width: var(--mw); margin: 0 auto; width: 100%;
      display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
      padding-top: 2rem;
    }

    /* Decorative top-line */
    .hero-topline {
      display: flex; align-items: center; gap: .75rem;
      margin-bottom: 1.5rem; opacity: .5;
      animation: fu .5s ease both;
    }
    .hero-topline-bar { width: 28px; height: 1px; background: var(--ink-2); }
    .hero-topline span { font-family: var(--font-m); font-size: .6rem; color: var(--ink-3); letter-spacing: .15em; text-transform: uppercase; }
    .hero-topline-fill { flex: 1; height: 1px; background: rgba(255,255,255,.08); }

    .hero-h1 {
      font-family: var(--font-m);
      font-size: clamp(2.2rem, 5.5vw, 5.5rem);
      font-weight: 700; line-height: 1.05;
      letter-spacing: -.01em; text-transform: uppercase;
      color: var(--ink); margin-bottom: 1.5rem;
      animation: fu .5s .1s ease both;
    }
    .hero-h1 .p { color: var(--p); }
    .hero-h1 .dim { color: rgba(195,192,182,.35); font-weight: 300; font-style: normal; font-family: var(--font-b); text-transform: none; font-size: .55em; display: block; letter-spacing: 0; line-height: 1.6; margin-top: .2rem; }

    .hero-p {
      font-size: .9rem; font-weight: 300; color: var(--ink-2);
      line-height: 1.85; margin-bottom: 2.5rem; max-width: 420px;
      font-family: var(--font-m); font-size: .72rem; letter-spacing: .04em;
      animation: fu .5s .2s ease both;
    }

    .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; animation: fu .5s .3s ease both; }

    .btn-p {
      display: inline-flex; align-items: center; gap: .65rem;
      padding: .75rem 1.75rem;
      background: var(--p); color: var(--primary-fg);
      font-family: var(--font-m); font-size: .7rem; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      text-decoration: none; border: none; cursor: pointer;
      transition: background .18s; position: relative;
    }
    .btn-p::before, .btn-p::after {
      content: ''; position: absolute; width: 6px; height: 6px;
      border: 1px solid rgba(255,255,255,.5); transition: opacity .18s; opacity: 0;
    }
    .btn-p::before { top: -3px; left: -3px; border-right: none; border-bottom: none; }
    .btn-p::after  { bottom: -3px; right: -3px; border-left: none; border-top: none; }
    .btn-p:hover { background: var(--p-lt); }
    .btn-p:hover::before, .btn-p:hover::after { opacity: 1; }
    .btn-p svg { transition: transform .18s; }
    .btn-p:hover svg { transform: translateX(3px); }

    .btn-ghost {
      display: inline-flex; align-items: center; gap: .65rem;
      padding: .75rem 1.75rem;
      background: transparent; color: var(--ink-2);
      font-family: var(--font-m); font-size: .7rem; font-weight: 400;
      letter-spacing: .08em; text-transform: uppercase;
      text-decoration: none; border: 1px solid var(--b); cursor: pointer;
      transition: border-color .18s, color .18s;
    }
    .btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }

    /* Hero status bar */
    .hero-status {
      position: absolute; bottom: 0; left: 0; right: 0;
      border-top: 1px solid rgba(255,255,255,.06);
      background: rgba(0,0,0,.3); backdrop-filter: blur(8px);
      padding: .6rem var(--gx);
      display: flex; align-items: center; justify-content: space-between; z-index: 3;
    }
    .status-l, .status-r {
      display: flex; align-items: center; gap: .75rem;
      font-family: var(--font-m); font-size: .58rem;
      color: rgba(255,255,255,.3); letter-spacing: .12em; text-transform: uppercase;
    }
    .status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--p); animation: sp 1.8s ease infinite; }
    @keyframes sp { 0%,100%{opacity:1} 50%{opacity:.3} }

.bars { display: flex; gap: 2px; align-items: flex-end; }
.bars span { display: block; width: 3px; background: rgba(255,255,255,.25); border-radius: 1px; }
.bars .bar-4 { height: 4px; }
.bars .bar-5 { height: 5px; }
.bars .bar-6 { height: 6px; }
.bars .bar-7 { height: 7px; }
.bars .bar-8 { height: 8px; }
.bars .bar-9 { height: 9px; }
.bars .bar-10 { height: 10px; }
.bars .bar-12 { height: 12px; }

    /* Hero right — terminal card */
    .hero-right { animation: fu .5s .4s ease both; }

    .terminal {
      background: var(--muted); border: 1px solid var(--b);
      position: relative; overflow: hidden;
    }
    .terminal::before, .terminal::after {
      content: ''; position: absolute; width: 8px; height: 8px; z-index: 2;
    }
    .terminal::before { top: -1px; left: -1px; border-top: 1px solid var(--p); border-left: 1px solid var(--p); }
    .terminal::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--p); border-right: 1px solid var(--p); }

    .term-bar {
      padding: .6rem .9rem; border-bottom: 1px solid var(--b);
      display: flex; align-items: center; gap: .6rem;
      background: rgba(0,0,0,.25);
    }
    .term-dots { display: flex; gap: 5px; }
    .term-dots span { width: 8px; height: 8px; border-radius: 50%; }
    .term-dots span:nth-child(1) { background: #ff5f57; }
    .term-dots span:nth-child(2) { background: #febc2e; }
    .term-dots span:nth-child(3) { background: #28c840; }
    .term-title { font-family: var(--font-m); font-size: .62rem; color: var(--ink-3); letter-spacing: .1em; margin-left: auto; }

    .term-body { padding: 1.25rem 1rem; }
    .term-line {
      font-family: var(--font-m); font-size: .68rem; line-height: 1.9;
      color: var(--ink-2); display: flex; gap: .5rem;
    }
    .term-line .prompt { color: var(--p); flex-shrink: 0; }
    .term-line .cmd    { color: var(--ink); }
    .term-line .out    { color: rgba(195,192,182,.5); padding-left: 1.2rem; }
    .term-line .ok     { color: #28c840; }
    .term-line .dim    { color: rgba(195,192,182,.3); }
    .cursor { display: inline-block; width: 7px; height: .85em; background: var(--p); animation: blink 1.1s step-end infinite; vertical-align: text-bottom; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

    @keyframes fu { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

    /* ── MARQUEE ─────────────────────────────── */
    .mq {
      overflow: hidden; border-top: 1px solid var(--b);
      border-bottom: 1px solid var(--b); padding: .85rem 0;
      background: var(--muted);
    }
    .mq-track { display: flex; gap: 3rem; white-space: nowrap; animation: mq 26s linear infinite; }
    @keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    .mq-item {
      display: inline-flex; align-items: center; gap: .55rem; flex-shrink: 0;
      font-family: var(--font-m); font-size: .6rem; font-weight: 400;
      letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
    }
    .mq-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--p); flex-shrink: 0; }

    /* ── SECTION BASE ────────────────────────── */
    section { padding: clamp(4rem, 9vw, 7rem) var(--gx); }
    .c { max-width: var(--mw); margin: 0 auto; }

    .s-label {
      display: inline-flex; align-items: center; gap: .7rem;
      font-family: var(--font-m); font-size: .62rem; font-weight: 700;
      letter-spacing: .18em; text-transform: uppercase;
      color: var(--p); margin-bottom: 1rem;
    }
    .s-label::before { content: '//'; color: rgba(255,255,255,.2); font-size: .7em; letter-spacing: 0; }

    .s-title {
      font-family: var(--font-m);
      font-size: clamp(1.7rem, 3.8vw, 3rem);
      font-weight: 700; line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase;
      color: var(--ink); margin-bottom: 1rem;
    }
    .s-title em { font-style: normal; font-family: var(--font-b); font-weight: 300; text-transform: none; color: var(--ink-2); font-size: .75em; }

.s-sub { font-size: .85rem; color: var(--ink-2); max-width: 480px; line-height: 1.82; }
.s-sub-spaced { margin-bottom: 2rem; }

    /* ── SERVICES ────────────────────────────── */
    .srv { background: var(--muted); }

    .srv-hd { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3rem; align-items: end; }

    .srv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--b); }

    .srv-card {
      background: var(--bg); padding: 2rem 1.75rem;
      position: relative; transition: background .25s;
      border: none; overflow: hidden;
    }
    .srv-card::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
      background: var(--p); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
    }
    .srv-card:hover { background: var(--card); }
    .srv-card:hover::after { transform: scaleX(1); }

    .srv-n {
      position: absolute; top: 1.25rem; right: 1.5rem;
      font-family: var(--font-m); font-size: 2.2rem; font-weight: 700;
      color: rgba(195,192,182,.04); line-height: 1; transition: color .25s;
    }
    .srv-card:hover .srv-n { color: rgba(217,119,87,.08); }

    .srv-icon {
      width: 36px; height: 36px; border: 1px solid var(--b);
      display: flex; align-items: center; justify-content: center;
      color: var(--p); margin-bottom: 1.2rem; transition: border-color .25s, background .25s;
    }
    .srv-card:hover .srv-icon { border-color: var(--p); background: var(--p-bg); }
    .srv-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

    .srv-h { font-family: var(--font-m); font-size: .78rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; letter-spacing: .04em; text-transform: uppercase; }
    .srv-p { font-size: .82rem; color: var(--ink-2); line-height: 1.72; }

    /* ── STATS ───────────────────────────────── */
    .stats {
      background: var(--bg); padding: clamp(2.5rem, 5vw, 4rem) var(--gx);
      border-top: 1px solid var(--b); border-bottom: 1px solid var(--b);
      position: relative; overflow: hidden;
    }
    .stats::before {
      content: 'SYS.METRICS';
      position: absolute; top: 1.2rem; left: var(--gx);
      font-family: var(--font-m); font-size: .55rem;
      letter-spacing: .2em; color: rgba(255,255,255,.1); text-transform: uppercase;
    }
    .stats-g { display: grid; grid-template-columns: repeat(4,1fr); max-width: var(--mw); margin: 0 auto; }

    .stat { padding: 1.5rem 2rem; border-right: 1px solid var(--b); text-align: center; }
    .stat:last-child { border-right: none; }

    .stat-n {
      display: block; font-family: var(--font-m);
      font-size: clamp(2.2rem, 4vw, 3.5rem);
      font-weight: 700; color: var(--p); line-height: 1; letter-spacing: -.01em;
    }
    .stat-sfx { font-size: .6em; opacity: .75; }
    .stat-l { display: block; font-family: var(--font-m); font-size: .6rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: .5rem; }

    /* ── ABOUT / PROCESS ─────────────────────── */
    .about { background: var(--card); }
    .about-in { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }

    /* Left: spec sheet */
    .about-visual { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--b); position: relative; }
    .about-visual::before, .about-visual::after {
      content: ''; position: absolute; width: 8px; height: 8px; z-index: 2;
    }
    .about-visual::before { top: -1px; left: -1px; border-top: 1px solid var(--p); border-left: 1px solid var(--p); }
    .about-visual::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--p); border-right: 1px solid var(--p); }

    .spec-header {
      padding: .7rem 1rem; background: rgba(0,0,0,.25);
      border-bottom: 1px solid var(--b);
      font-family: var(--font-m); font-size: .6rem;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--ink-3); display: flex; justify-content: space-between;
    }
    .spec-header .ok { color: var(--p); }

    .spec-row {
      display: flex; border-bottom: 1px solid rgba(62,62,56,.5);
      font-family: var(--font-m); font-size: .68rem;
    }
    .spec-row:last-child { border-bottom: none; }
    .spec-k { padding: .75rem 1rem; color: var(--ink-3); letter-spacing: .08em; width: 45%; border-right: 1px solid rgba(62,62,56,.5); flex-shrink: 0; }
    .spec-v { padding: .75rem 1rem; color: var(--ink); letter-spacing: .04em; }
    .spec-v.hi { color: var(--p); }
    .spec-v.ok { color: #4ade80; }

    .steps { display: flex; flex-direction: column; }
    .step { display: flex; gap: 1.25rem; padding: 1.3rem 0; border-bottom: 1px solid var(--b); }
    .step:last-child { border-bottom: none; }
    .step-n {
      font-family: var(--font-m); font-size: .65rem; font-weight: 700;
      color: var(--p); border: 1px solid var(--p);
      width: 26px; height: 26px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: .15rem; letter-spacing: 0;
    }
    .step-h { font-family: var(--font-m); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin-bottom: .3rem; }
    .step-p { font-size: .82rem; color: var(--ink-2); line-height: 1.7; }

    /* ── CONTACT ─────────────────────────────── */
    .contact { background: var(--bg); }
    .contact-in { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; align-items: start; }

    .clinks { display: flex; flex-direction: column; margin-top: 2rem; }
    .clink {
      display: flex; align-items: center; gap: 1rem;
      text-decoration: none; color: var(--ink-2);
      font-size: .82rem; padding: 1.1rem 0;
      border-bottom: 1px solid var(--b); transition: color .18s;
    }
    .clink:last-child { border-bottom: none; }
    .clink:hover { color: var(--p); }
    .clink-ico {
      width: 34px; height: 34px; border: 1px solid var(--b);
      display: flex; align-items: center; justify-content: center;
      color: var(--p); flex-shrink: 0; transition: border-color .18s, background .18s;
    }
    .clink:hover .clink-ico { border-color: var(--p); background: var(--p-bg); }
    .clink-ico svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }
    .clink-lbl { font-family: var(--font-m); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .1rem; }

    .cform { background: var(--card); border: 1px solid var(--b); padding: 2.5rem; position: relative; }
    .cform::before, .cform::after {
      content: ''; position: absolute; width: 10px; height: 10px;
    }
    .cform::before { top: -1px; left: -1px; border-top: 1px solid var(--p); border-left: 1px solid var(--p); }
    .cform::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--p); border-right: 1px solid var(--p); }

    .cform-title { font-family: var(--font-m); font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 1.75rem; display: flex; align-items: center; gap: .75rem; }
    .cform-title::after { content: ''; flex: 1; height: 1px; background: var(--b); }

    .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: .85rem; }
    .fg { display: flex; flex-direction: column; gap: .4rem; }
    .fg.full { grid-column: 1/-1; }
    .hp {
      position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }

    label { font-family: var(--font-m); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

    input, textarea, select {
      background: var(--bg); border: 1px solid var(--b);
      color: var(--ink); font-family: var(--font-m); font-size: .75rem;
      padding: .7rem .9rem; outline: none; width: 100%; letter-spacing: .04em;
      transition: border-color .18s; -webkit-appearance: none; appearance: none;
    }
    input:focus, textarea:focus, select:focus { border-color: var(--p); }
    input::placeholder, textarea::placeholder { color: var(--ink-3); }
    textarea { resize: vertical; min-height: 100px; }
    select { cursor: pointer; color: var(--ink-2); }
    .f-help {
      margin-top: .35rem; color: var(--ink-3); font-family: var(--font-m);
      font-size: .58rem; letter-spacing: .05em; line-height: 1.6;
    }

    .f-submit {
      width: 100%; padding: .85rem; margin-top: .85rem;
      background: var(--p); color: var(--primary-fg);
      font-family: var(--font-m); font-size: .72rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      border: none; cursor: pointer;
      transition: background .18s;
      display: flex; align-items: center; justify-content: center; gap: .65rem;
    }
    .f-submit:hover { background: var(--p-lt); }
    .f-submit svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; fill: none; transition: transform .18s; }
    .f-submit:hover svg { transform: translateX(3px); }
    .f-submit:disabled { opacity: .85; cursor: wait; }
    .f-note {
      margin-top: .85rem; color: var(--ink-3); font-family: var(--font-m);
      font-size: .62rem; letter-spacing: .08em; text-align: center;
    }

    .f-status {
      margin-top: .75rem; padding: .8rem 1rem;
      font-family: var(--font-m); font-size: .68rem;
      letter-spacing: .08em; text-align: center;
      border: 1px solid transparent;
    }
    .f-status[data-state="success"] { background: var(--p-bg); border-color: rgba(217,119,87,.25); color: var(--p); }
    .f-status[data-state="error"] { background: rgba(173,70,57,.12); border-color: rgba(173,70,57,.32); color: #ffb3a9; }

    /* ── FOOTER ──────────────────────────────── */
    footer {
      background: var(--muted); border-top: 1px solid var(--b);
      padding: 1.75rem var(--gx);
    }
    .ft-in { max-width: var(--mw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
    .ft-logo { font-family: var(--font-m); font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
    .ft-logo .dot { color: var(--p); }
    .ft-copy { font-family: var(--font-m); font-size: .6rem; color: rgba(195,192,182,.3); letter-spacing: .1em; }
    .ft-links { display: flex; gap: 1.75rem; list-style: none; }
    .ft-links a { font-family: var(--font-m); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(195,192,182,.3); text-decoration: none; transition: color .18s; }
    .ft-links a:hover { color: var(--p); }

    /* ── REVEAL ──────────────────────────────── */
    .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
    .rv.vis { opacity: 1; transform: none; }
    .d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s}
    .d4{transition-delay:.4s} .d5{transition-delay:.5s}

    /* ── RESPONSIVE ──────────────────────────── */
    @media (max-width: 1024px) {
      .hero-c { grid-template-columns: 1fr; }
      .hero-right { display: none; }
      .srv-grid { grid-template-columns: 1fr 1fr; }
      .about-in { grid-template-columns: 1fr; gap: 3rem; }
      .about-visual { display: none; }
      .contact-in { grid-template-columns: 1fr; gap: 3rem; }
      .stats-g { grid-template-columns: 1fr 1fr; }
      .stat:nth-child(2) { border-right: none; }
      .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--b); }
      .nav-coords { display: none; }
    }
    @media (max-width: 768px) {
      .nav-ul, .nav-btn, .lang-switch--desktop { display: none; }
      .lang-switch--mobile { display: inline-flex; }
      .hbg { display: flex; }
      .srv-hd { grid-template-columns: 1fr; gap: 1rem; }
      .srv-grid { grid-template-columns: 1fr; }
      .fgrid { grid-template-columns: 1fr; }
      .ft-in { flex-direction: column; align-items: flex-start; }
      .hud-bar { display: none; }
    }
    @media (max-width: 480px) {
      .hero-btns { flex-direction: column; }
      .btn-p, .btn-ghost { width: 100%; justify-content: center; }
    }