:root {
      --bg: #050811;
      --bg2: #03050d;
      --panel: rgba(255,255,255,.04);
      --line: rgba(255,255,255,.09);
      --line2: rgba(255,255,255,.055);
      --text: #f0f4ff;
      --muted: #b4bed4;
      --faint: #717a91;
      --cyan: #00f5ff;
      --cobalt: #1e40af;
      --green: #10b981;
      --shadow: 0 22px 90px rgba(0,0,0,.48);
      --max: 1180px;
      --radius: 24px;
      --radius2: 14px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 77% 3%, rgba(0,245,255,.14), transparent 30%),
        radial-gradient(circle at 18% 12%, rgba(30,64,175,.44), transparent 38%),
        linear-gradient(180deg, var(--bg), var(--bg2) 58%, #02030a);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
      line-height: 1.55;
      overflow-x: hidden;
    }
    body::before {
      content: "";
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 74%);
    }
    a { color: inherit; text-decoration: none; }
    p { margin: 0; color: var(--muted); }
    strong { color: var(--text); }
    .container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

    .nav {
      position: sticky; top: 0; z-index: 40;
      border-bottom: 1px solid var(--line2);
      background: rgba(5,8,17,.77);
      backdrop-filter: blur(18px);
    }
    .nav-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
    .brand { display: flex; align-items: center; gap: 12px; }
    .glyph {
      width: 39px; height: 39px; border-radius: 13px; display: grid; place-items: center;
      background: linear-gradient(135deg, rgba(0,245,255,.20), rgba(30,64,175,.50));
      border: 1px solid rgba(0,245,255,.30);
      color: var(--cyan); font: 800 17px/1 "Space Grotesk", sans-serif;
      box-shadow: 0 0 36px rgba(0,245,255,.16), inset 0 0 18px rgba(255,255,255,.08);
      overflow: hidden;
    }
    .glyph img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .brand-text { display: grid; line-height: 1.06; }
    .brand-text b { font-family: "Space Grotesk", sans-serif; letter-spacing: -.035em; }
    .brand-text span { margin-top: 4px; color: var(--faint); font-size: 12px; }
    .nav-links { display: flex; align-items: center; gap: 18px; color: #cbd3e4; font-size: 13px; font-weight: 650; }
    .nav-links a:hover { color: var(--cyan); }

    .btn {
      min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 13px 20px; border-radius: 999px; border: 1px solid var(--line);
      background: rgba(255,255,255,.04); color: var(--text);
      font-size: 14px; font-weight: 750; cursor: pointer; white-space: nowrap;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .btn:hover { transform: translateY(-1px); border-color: rgba(0,245,255,.45); background: rgba(255,255,255,.065); }
    .btn-primary { background: linear-gradient(135deg, var(--cyan), #76fbff); color: #001014; border-color: rgba(0,245,255,.75); box-shadow: 0 0 38px rgba(0,245,255,.22); }
    .btn-primary:hover { box-shadow: 0 0 52px rgba(0,245,255,.30); }

    section { padding: 76px 0; }
    h1, h2, h3 { margin: 0; font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -.055em; text-wrap: pretty; }
    h1 { font-size: clamp(40px, 6.6vw, 74px); line-height: .98; font-weight: 750; }
    h2 { font-size: clamp(32px, 5vw, 52px); line-height: 1.02; font-weight: 720; }
    h3 { font-size: 21px; line-height: 1.16; font-weight: 700; letter-spacing: -.04em; }
    .accent { color: var(--cyan); text-shadow: 0 0 34px rgba(0,245,255,.25); }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 9px;
      border: 1px solid rgba(0,245,255,.25); background: rgba(0,245,255,.055); color: var(--cyan);
      border-radius: 999px; padding: 8px 12px; font: 600 12px/1.3 "JetBrains Mono", monospace; margin-bottom: 23px;
    }
    .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--green); box-shadow: 0 0 15px var(--green); }
    .section-head { max-width: 790px; margin-bottom: 34px; }
    .section-head p { margin-top: 16px; font-size: 18px; }

    .hero { padding: 88px 0 52px; }
    .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; align-items: center; }
    .founder-panel {
      position: relative;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow), 0 0 60px rgba(0,245,255,.10), inset 0 1px 0 rgba(255,255,255,.07);
      background: linear-gradient(145deg, rgba(30,64,175,.32), rgba(0,0,0,.15));
    }
    .founder-panel img { display: block; width: 100%; height: 560px; object-fit: cover; object-position: top center; }
    .founder-card {
      position: absolute; left: 16px; right: 16px; bottom: 16px;
      display: grid; gap: 3px;
      padding: 14px 18px;
      border-radius: var(--radius2);
      border: 1px solid rgba(0,245,255,.28);
      background: rgba(5,8,17,.78);
      backdrop-filter: blur(14px);
    }
    .founder-card b { font-family: "Space Grotesk", sans-serif; letter-spacing: -.03em; font-size: 15.5px; }
    .founder-card span { color: var(--muted); font-size: 12.5px; }
    .lead { margin-top: 24px; font-size: clamp(17px, 2vw, 21px); color: #cbd5ea; max-width: 690px; }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 31px; }
    /* --- Spec strip: editorial replacement for the old emoji chips --- */
    .spec-strip { margin-top: 34px; border-top: 1px solid var(--line2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spec { display: flex; gap: 13px; padding: 17px 18px 17px 0; border-bottom: 1px solid var(--line2); align-items: flex-start; }
    .spec:nth-child(even) { border-left: 1px solid var(--line2); padding-left: 22px; padding-right: 0; }
    .spec b { display: block; font-size: 14px; letter-spacing: -.01em; }
    .spec span { display: block; margin-top: 3px; color: var(--faint); font-size: 12.5px; line-height: 1.45; }
    .ic {
      width: 21px; height: 21px; flex-shrink: 0; margin-top: 2px;
      fill: none; stroke: var(--cyan); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
      filter: drop-shadow(0 0 7px rgba(0,245,255,.45));
    }

    /* --- Blueprint wireframe layered behind the founder photo --- */
    .hero-visual { position: relative; }
    .hero-visual .founder-panel { position: relative; z-index: 1; }
    .blueprint { position: absolute; top: -30px; right: -26px; width: 76%; z-index: 0; opacity: .55; pointer-events: none; animation: bpfloat 9s ease-in-out infinite alternate; }
    .blueprint * { fill: none; stroke: rgba(0,245,255,.5); stroke-width: 1; }
    .blueprint .dash { stroke-dasharray: 5 6; }
    .blueprint .faint { stroke: rgba(255,255,255,.16); }
    @keyframes bpfloat { from { transform: translateY(0); } to { transform: translateY(9px); } }

    /* --- Wireframe illustrations on the problem cards --- */
    .wf { width: 100%; height: 64px; margin-bottom: 18px; overflow: visible; }
    .wf * { fill: none; stroke: rgba(0,245,255,.55); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
    .wf .ghosted { stroke: rgba(255,255,255,.2); }
    .wf .dash { stroke-dasharray: 4 5; }
    .wf text { fill: rgba(0,245,255,.65); stroke: none; font: 600 9px "JetBrains Mono", monospace; letter-spacing: .04em; }

    /* --- Blueprint dimension annotation under each phone mockup --- */
    .dim { display: flex; align-items: center; gap: 11px; font: 500 10px/1 "JetBrains Mono", monospace; color: var(--faint); letter-spacing: .09em; text-transform: uppercase; }
    .dim::before, .dim::after { content: ""; height: 1px; width: 36px; background: linear-gradient(90deg, transparent, rgba(0,245,255,.45)); }
    .dim::after { transform: scaleX(-1); }

    /* --- Corner brackets on price cards (drafting-table accent) --- */
    .price-card::before, .price-card::after { content: ""; position: absolute; width: 17px; height: 17px; border: 1px solid rgba(0,245,255,.32); pointer-events: none; }
    .price-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: var(--radius2); }
    .price-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: var(--radius2); }
    .price-card.featured::before, .price-card.featured::after { border-color: rgba(0,245,255,.65); }

    /* --- Ghost numerals on process cards --- */
    .grid2 .card { position: relative; overflow: hidden; }
    .ghost { position: absolute; right: 8px; bottom: -16px; font: 750 96px/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; color: rgba(0,245,255,.055); pointer-events: none; user-select: none; }

    /* --- City tokens (areas we serve) --- */
    .city-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; max-width: 790px; }
    .city { border: 1px solid var(--line2); background: rgba(255,255,255,.03); border-radius: 9px; padding: 9px 13px; font: 500 12px/1 "JetBrains Mono", monospace; color: #cbd3e8; letter-spacing: .02em; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
    .city:hover { border-color: rgba(0,245,255,.45); color: var(--cyan); transform: translateY(-1px); }

    /* --- Arrow inside CTAs --- */
    .btn .arr { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; flex-shrink: 0; }
    .btn:hover .arr { transform: translateX(3px); }

    @media (max-width: 520px) {
      .spec-strip { grid-template-columns: 1fr; }
      .spec:nth-child(even) { border-left: none; padding-left: 0; }
      .spec { padding-right: 0; }
    }

    .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .card {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
      border-radius: var(--radius2); padding: 26px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }
    .card h3 { margin-bottom: 10px; }
    .card p { font-size: 14.5px; }
    .num { font: 600 13px/1 "JetBrains Mono", monospace; color: var(--cyan); display: block; margin-bottom: 14px; }

    .panel {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
      border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.07);
      padding: 40px;
    }

    .price-card { position: relative; display: flex; flex-direction: column; gap: 14px; }
    .price-card .price { font: 750 40px/1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
    .price-card .price small { font-size: 14px; color: var(--faint); font-family: Inter, sans-serif; letter-spacing: 0; }
    .price-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
    .price-card li { color: var(--muted); font-size: 14px; padding-left: 22px; position: relative; }
    .price-card li::before { content: "→"; position: absolute; left: 0; color: var(--cyan); }
    .featured { border-color: rgba(0,245,255,.45); box-shadow: 0 0 44px rgba(0,245,255,.12), inset 0 1px 0 rgba(255,255,255,.07); }
    .tag { position: absolute; top: -12px; right: 18px; background: linear-gradient(135deg, var(--cyan), #76fbff); color: #001014; font: 700 11px/1 "JetBrains Mono", monospace; padding: 7px 11px; border-radius: 999px; }
    .tag-premium { background: linear-gradient(135deg, #4b6fff, var(--cobalt)); color: #f0f4ff; }
    .care-strip { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
    .care-strip h3 { margin-bottom: 8px; }
    .care-strip p { font-size: 14px; max-width: 760px; }

    .case { display: flex; flex-direction: column; gap: 12px; }
    .case .result { font: 750 34px/1 "Space Grotesk", sans-serif; color: var(--cyan); text-shadow: 0 0 26px rgba(0,245,255,.25); }
    .case .who { font: 600 12px/1.4 "JetBrains Mono", monospace; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }

    /* Animated site showcase: phone mockups that "scroll" the real sites (mobile captures) */
    .showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 22px; }
    .phone-card {
      margin: 0;
      display: flex; flex-direction: column; align-items: center; gap: 20px;
      padding: 36px 22px 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 50% 0%, rgba(0,245,255,.10), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
      opacity: 0; transform: translateY(28px);
      transition: opacity .8s ease, transform .8s ease, border-color .3s ease;
    }
    .phone-card.inview { opacity: 1; transform: none; }
    .phone-card:hover { border-color: rgba(0,245,255,.40); }
    .phone {
      width: 282px; max-width: 100%;
      padding: 10px;
      border-radius: 40px;
      border: 1px solid rgba(255,255,255,.18);
      background: linear-gradient(180deg, #131a2e, #060a16);
      box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 44px rgba(0,245,255,.10), inset 0 1px 0 rgba(255,255,255,.12);
      position: relative;
    }
    .phone::before {
      content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
      width: 84px; height: 17px; border-radius: 999px; background: #02030a; z-index: 2;
    }
    .phone-screen { border-radius: 31px; overflow: hidden; height: 565px; position: relative; background: #0a0f1e; }
    .phone-screen::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      box-shadow: inset 0 -30px 30px -20px rgba(2,3,10,.5);
    }
    .phone-screen img { display: block; width: 100%; height: auto; transform: translateY(0); will-change: transform; }
    .phone-card.inview .phone-screen img { animation: phonescroll 44s ease-in-out 1s infinite alternate; }
    .phone-card:nth-child(1) .phone-screen img { animation-duration: 64s; }
    .phone-card:hover .phone-screen img { animation-play-state: paused; }
    @keyframes phonescroll {
      0%, 4%   { transform: translateY(0); }
      96%, 100% { transform: translateY(calc(-100% + 565px)); }
    }
    .frame-caption { text-align: center; max-width: 380px; }
    .frame-caption .who { font: 600 11px/1.4 "JetBrains Mono", monospace; color: var(--cyan); text-transform: uppercase; letter-spacing: .07em; display: block; margin-bottom: 6px; }
    .frame-caption p { font-size: 13.5px; }
    @media (prefers-reduced-motion: reduce) {
      .phone-card { opacity: 1; transform: none; transition: none; }
      .phone-card.inview .phone-screen img { animation: none; }
      .blueprint { animation: none; }
    }

    details { border: 1px solid var(--line2); border-radius: var(--radius2); background: rgba(255,255,255,.03); padding: 0 22px; }
    details + details { margin-top: 12px; }
    summary { cursor: pointer; padding: 18px 0; font-weight: 650; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
    summary::after { content: "+"; color: var(--cyan); font: 400 22px/1 "Space Grotesk", sans-serif; transition: transform .2s; }
    details[open] summary::after { transform: rotate(45deg); }
    details p { padding-bottom: 18px; font-size: 14.5px; }

    form { display: grid; gap: 14px; }
    label { font-size: 13px; font-weight: 650; color: #cbd3e4; display: grid; gap: 7px; }
    input, textarea {
      width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line);
      background: rgba(255,255,255,.045); color: var(--text); font: 400 14.5px/1.5 Inter, sans-serif;
    }
    input:focus, textarea:focus { outline: none; border-color: rgba(0,245,255,.55); box-shadow: 0 0 0 3px rgba(0,245,255,.12); }
    .form-note { font-size: 12px; color: var(--faint); }

    footer { border-top: 1px solid var(--line2); padding: 44px 0 56px; }
    footer .cols { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; }
    footer p, footer a { font-size: 13px; color: var(--faint); }
    footer a:hover { color: var(--cyan); }

    @media (max-width: 900px) {
      .grid3, .grid2, .showcase, .hero-grid { grid-template-columns: 1fr; }
      .nav-links { display: none; }
      .panel { padding: 26px; }
      section { padding: 56px 0; }
      .founder-panel img { height: 430px; }
      .blueprint { display: none; }
      .phone-screen { height: 500px; }
      @keyframes phonescroll {
        0%, 4%   { transform: translateY(0); }
        96%, 100% { transform: translateY(calc(-100% + 500px)); }
      }
    }
  
/* --- Subpage / article layout --- */
.crumbs { font: 500 12px/1.4 "JetBrains Mono", monospace; color: var(--faint); margin-bottom: 26px; }
.crumbs a:hover { color: var(--cyan); }
.article { max-width: 790px; }
.article h1 { font-size: clamp(34px, 5.4vw, 56px); }
.article .lead { max-width: none; }
.article h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 52px 0 16px; }
.article p + p { margin-top: 14px; }
.article p { font-size: 16px; line-height: 1.65; }
.article ul, .article ol { color: var(--muted); font-size: 16px; line-height: 1.65; padding-left: 22px; display: grid; gap: 8px; margin: 16px 0; }
.article li::marker { color: var(--cyan); }
.article strong { color: var(--text); }
.tbl-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line); border-radius: var(--radius2); }
table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.cmp th { text-align: left; font: 600 11.5px/1.4 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); background: rgba(0,245,255,.05); padding: 13px 16px; border-bottom: 1px solid var(--line); }
.cmp td { padding: 13px 16px; border-bottom: 1px solid var(--line2); color: var(--muted); vertical-align: top; }
.cmp tr:last-child td { border-bottom: none; }
.cmp td:first-child { color: var(--text); font-weight: 650; white-space: nowrap; }
.cta-inline { margin: 44px 0 0; padding: 30px; border: 1px solid rgba(0,245,255,.3); border-radius: var(--radius2); background: linear-gradient(135deg, rgba(0,245,255,.07), rgba(30,64,175,.12)); display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.cta-inline p { max-width: 480px; font-size: 15px; }
.cta-inline b { color: var(--text); }
.foot-links { display: grid; gap: 8px; margin-top: 10px; }
.foot-links a { font-size: 13px; color: var(--faint); }
.foot-links a:hover { color: var(--cyan); }