:root{
    --ink:#0A0F1D;
    --surface:#101A2D;
    --line:#1C2A47;
    --text:#E8EDF7;
    --muted:#8C99B5;
    --blue:#6EA8FE;
    --blue-deep:#3E6BE0;
    --teal:#5DCAA5;
    --copper:#F3A105;
    --radius:14px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--ink);
    color:var(--text);
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--blue-deep);color:#fff}

  /* ---------- fixed isometric scene ---------- */
  #scene{
    position:fixed;inset:0;width:100%;height:100%;
    z-index:0;
  }
  @media (max-width:1099px){
    #scene{opacity:.32}
  }
  .vignette{
    position:fixed;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(130% 100% at 30% 20%, transparent 45%, rgba(10,15,29,.5) 100%);
  }

  /* ---------- HUD ---------- */
  .hud{
    position:fixed;left:24px;bottom:22px;z-index:5;
    font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;
    color:var(--muted);
    display:flex;align-items:center;gap:10px;
    padding:8px 12px;border:1px solid var(--line);border-radius:8px;
    background:rgba(13,20,38,.72);backdrop-filter:blur(8px);
    user-select:none;
  }
  .hud .dot{width:7px;height:7px;border-radius:50%;background:var(--copper);box-shadow:0 0 8px var(--copper);animation:pulse 2.4s ease-in-out infinite}
  .hud b{color:var(--text);font-weight:500}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

  /* ---------- nav ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:10;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(20px,4vw,48px);
    transition:background .35s, border-color .35s, padding .35s;
    border-bottom:1px solid transparent;
  }
  nav.scrolled{
    background:rgba(10,15,29,.82);backdrop-filter:blur(12px);
    border-bottom-color:var(--line);
    padding-top:12px;padding-bottom:12px;
  }
  .brand{
    font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;letter-spacing:-.01em;
    color:var(--text);text-decoration:none;display:flex;align-items:center;gap:11px;
  }
  .brand-logo{height:46px;width:auto;display:block;transition:transform .2s}
  .brand:hover .brand-logo{transform:translateY(-1px)}
  @media (max-width:680px){.brand-logo{height:36px}}
  .nav-links{display:flex;gap:28px;align-items:center}
  .nav-links a{
    color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;
    transition:color .2s;
  }
  .nav-links a:hover,.nav-links a:focus-visible{color:var(--text)}
  .nav-links a.cta{
    color:var(--ink);background:var(--blue);padding:9px 18px;border-radius:8px;
    font-weight:600;transition:background .2s, transform .2s;
  }
  .nav-links a.cta:hover{background:#8CBBFF;transform:translateY(-1px)}
  @media (max-width:680px){.nav-links a:not(.cta){display:none}}

  /* ---------- layout: content column on the left, scene on the right ---------- */
  main{position:relative;z-index:2}
  .wrap{
    max-width:660px;
    margin:0 auto;
    padding:0 clamp(20px,4vw,48px);
  }
  @media (min-width:1100px){
    .wrap{margin:0 0 0 clamp(48px,7vw,150px)}
  }

  .eyebrow{
    font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--copper);
    display:inline-flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--copper)}

  h1,h2,h3{font-family:"Archivo",sans-serif;letter-spacing:-.025em;line-height:1.08}

  /* ---------- hero ---------- */
  .hero{
    min-height:100svh;display:flex;align-items:center;position:relative;
    padding-top:80px;
  }
  .hero h1{
    font-size:clamp(40px,5.4vw,68px);font-weight:800;
    margin:20px 0 24px;max-width:13ch;
  }
  .hero h1 em{font-style:normal;color:var(--blue)}
  .hero p{font-size:clamp(16px,1.7vw,18.5px);color:var(--muted);max-width:46ch;margin-bottom:38px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    font-weight:600;font-size:15px;text-decoration:none;
    padding:13px 24px;border-radius:10px;transition:transform .2s, background .2s, border-color .2s;
  }
  .btn-primary{background:var(--blue);color:var(--ink)}
  .btn-primary:hover{background:#8CBBFF;transform:translateY(-2px)}
  .btn-ghost{color:var(--text);border:1px solid var(--line);background:rgba(16,26,45,.5)}
  .btn-ghost:hover{border-color:var(--blue);transform:translateY(-2px)}
  .scroll-hint{
    position:absolute;bottom:34px;left:clamp(20px,4vw,48px);
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
    color:var(--muted);text-transform:uppercase;
    display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  }
  @media (min-width:1100px){.scroll-hint{left:clamp(48px,7vw,150px)}}
  .scroll-hint::after{
    content:"";width:1px;height:42px;margin-left:2px;
    background:linear-gradient(var(--blue),transparent);
    animation:drip 2s ease-in-out infinite;
  }
  @keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

  /* ---------- sections ---------- */
  .block{padding:clamp(90px,14vh,160px) 0}
  .block h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;margin:18px 0 16px;max-width:20ch}
  .lede{color:var(--muted);font-size:clamp(15.5px,1.6vw,17.5px);max-width:52ch}

  /* approach */
  .principles{display:flex;flex-direction:column;gap:16px;margin-top:46px}
  .principle{
    border:1px solid var(--line);border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(16,26,45,.88), rgba(13,20,38,.78));
    backdrop-filter:blur(6px);
    padding:24px;
    transition:border-color .25s, transform .25s;
  }
  .principle:hover{border-color:#2C4070;transform:translateX(4px)}
  .principle .tag{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--blue);letter-spacing:.08em}
  .principle h3{font-size:18px;margin:10px 0 6px;font-weight:700}
  .principle p{font-size:14.5px;color:var(--muted)}

  /* services */
  .svc-list{margin-top:46px;border-top:1px solid var(--line)}
  .svc{
    padding:26px 8px;border-bottom:1px solid var(--line);
    transition:background .25s, padding-left .25s;border-radius:4px;
  }
  .svc:hover{background:rgba(20,32,56,.6);padding-left:18px}
  .svc .host{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--copper);letter-spacing:.02em}
  .svc h3{font-size:clamp(17px,2vw,20px);font-weight:700;margin:8px 0 6px}
  .svc p{font-size:14.5px;color:var(--muted);max-width:56ch}
  .svc .stack{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);margin-top:10px;display:block;letter-spacing:.04em}

  /* why */
  .why-points{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:40px}
  .why-point{padding:20px 4px;border-bottom:1px solid var(--line)}
  .why-point h3{font-size:16.5px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:10px}
  .why-point h3::before{
    content:"";width:8px;height:8px;border-radius:50%;
    background:var(--blue);box-shadow:0 0 10px var(--blue);flex:none;
  }
  .why-point p{font-size:14.5px;color:var(--muted)}

  /* contact */
  .contact{padding:clamp(100px,16vh,180px) 0 90px}
  .contact-card{
    border:1px solid var(--line);border-radius:20px;
    background:linear-gradient(180deg, rgba(18,29,52,.92), rgba(12,19,36,.88));
    backdrop-filter:blur(10px);
    padding:clamp(34px,5vw,56px);
  }
  .contact-card h2{font-size:clamp(28px,3.8vw,42px);font-weight:800;margin:16px 0 14px;max-width:16ch}
  .contact-card .lede{margin-bottom:32px}
  .contact-mail{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--muted);margin-top:24px}
  .contact-mail a{color:var(--blue);text-decoration:none}
  .contact-mail a:hover{text-decoration:underline}

  footer{
    position:relative;z-index:2;
    border-top:1px solid var(--line);
    padding:26px clamp(20px,4vw,48px);
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    font-size:13px;color:var(--muted);
    background:rgba(10,15,29,.7);backdrop-filter:blur(8px);
  }
  footer .mono{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em}

  /* reveal */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

  section[id]{scroll-margin-top:84px}

  /* scene stage labels */
  .slabel{
    font-family:"IBM Plex Mono",monospace;
    letter-spacing:.12em;text-transform:uppercase;
  }

  /* live status chip in the contact card */
  .status-chip{
    display:inline-flex;align-items:center;gap:9px;
    font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;
    color:var(--teal);border:1px solid rgba(93,202,165,.35);
    background:rgba(93,202,165,.08);
    padding:7px 13px;border-radius:99px;margin-bottom:22px;
  }
  .status-chip::before{
    content:"";width:8px;height:8px;border-radius:50%;
    background:var(--teal);box-shadow:0 0 9px var(--teal);
    animation:pulse 2s ease-in-out infinite;
  }

  :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

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