:root {
      --bg: #030507;
      --bg-soft: #071015;
      --panel: rgba(7, 16, 21, .72);
      --cyan: #20d9ff;
      --cyan-soft: #75eaff;
      --text: #f4f7f8;
      --muted: #a6b2b8;
      --line: rgba(32, 217, 255, .22);
      --max: 1200px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background:
        radial-gradient(circle at 75% 18%, rgba(0, 178, 255, .12), transparent 32%),
        radial-gradient(circle at 20% 70%, rgba(0, 120, 180, .08), transparent 30%),
        var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
      overflow-x: hidden;
    }

    .starfield {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
    }
    .starfield canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    header, main, .site-foot { position: relative; z-index: 1; }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    .container { width: min(var(--max), calc(100% - 80px)); margin: 0 auto; }

    /* NAV */
    header {
      position: fixed;
      z-index: 20;
      top: 0;
      width: 100%;
      backdrop-filter: blur(18px);
      background: rgba(3,5,7,.68);
      border-bottom: 1px solid rgba(255,255,255,.05);
    }
    .nav {
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }
    .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .04em; }
    .brand img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); }
    .brand span { line-height: 1; font-size: 15px; }
    nav { display: flex; gap: 34px; }
    nav a { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #d7e0e4; transition: .25s; }
    nav a:hover { color: var(--cyan); }
    .nav-actions { display: flex; align-items: center; gap: 12px; }
    .nav-toggle {
      display: none;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--text);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 6px;
    }
    .nav-toggle span {
      display: block;
      width: 16px;
      height: 1.5px;
      background: var(--cyan);
      transition: transform .25s ease, opacity .2s ease;
    }
    header.is-nav-open .nav-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
    header.is-nav-open .nav-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
    .nav-cta {
      border: 1px solid var(--cyan);
      padding: 12px 20px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .12em;
      transition: .25s;
    }
    .nav-cta:hover { background: var(--cyan); color: #001016; box-shadow: 0 0 28px rgba(32,217,255,.3); }

    /* COMMON */
    section { padding: 110px 0; position: relative; }
    .eyebrow {
      display: flex; align-items: center; gap: 14px;
      color: var(--cyan);
      font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    }
    .eyebrow::after { content:""; width: 80px; height: 1px; background: var(--cyan); opacity: .8; }
    h2 {
      margin-top: 18px;
      font-size: clamp(42px, 5vw, 76px);
      line-height: .92;
      letter-spacing: -.045em;
      text-transform: uppercase;
    }
    .muted { color: var(--muted); }

    /* HERO */
    .hero { min-height: 820px; padding-top: 155px; display: flex; align-items: center; position: relative; }
    .hero-grid { display: grid; grid-template-columns: 1fr 1.18fr; align-items: center; gap: 36px; }
    .hero h1 {
      margin: 24px 0;
      font-size: clamp(62px, 7vw, 104px);
      line-height: .84;
      letter-spacing: -.065em;
      text-transform: uppercase;
    }
    .hero h1 span { color: var(--cyan); }
    .hero-copy { max-width: 580px; margin: 0; font-size: 18px; color: var(--muted); }
    .hero-tags { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; margin: 24px 0; }
    .hero-tag {
      display:inline-flex;
      align-items:center;
      padding:6px 11px;
      border:1px solid rgba(32,217,255,.7);
      color:var(--cyan);
      background:rgba(32,217,255,.1);
      font-size:11px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .actions { display: flex; gap: 28px; align-items: center; margin-top: 0; }
    .btn {
      display: inline-flex; align-items: center; gap: 12px;
      padding: 16px 22px;
      border: 1px solid var(--cyan);
      background: transparent;
      color: white;
      text-transform: uppercase;
      letter-spacing: .1em;
      font-size: 11px;
      font-weight: 800;
      transition: .25s;
    }
    .btn:hover { background: var(--cyan); color: #001016; box-shadow: 0 0 34px rgba(32,217,255,.28); transform: translateY(-2px); }
    .text-link { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #dce5e8; }
    .text-link:hover { color: var(--cyan); }
    .trust-row { display: flex; gap: 28px; margin-top: 58px; flex-wrap: wrap; }
    .trust-item { display: flex; align-items: center; gap: 8px; color: #aab7bc; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
    .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

    .hero-visual {
      min-height: 620px;
      position: relative;
      border: 1px solid var(--line);
      background:
        linear-gradient(145deg, rgba(32,217,255,.12), transparent 38%),
        radial-gradient(circle at 50% 50%, rgba(32,217,255,.18), transparent 35%),
        #05090c;
      overflow: hidden;
      box-shadow: 0 0 70px rgba(0, 180, 255, .08);
    }
    .hero-visual::before {
      content: "";
      position: absolute;
      z-index: 1;
      width: 2px; height: 130%;
      top: -15%; left: 50%;
      background: linear-gradient(transparent, white, var(--cyan), transparent);
      box-shadow: 0 0 25px var(--cyan);
      transform: rotate(7deg) scaleY(1);
      transform-origin: 50% 42%;
    }
    .hero-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(32,217,255,.045) 39px 40px);
    }
    .logo-orb {
      position: absolute; z-index: 2;
      width: 300px; height: 300px;
      left: 50%; top: 48%;
      transform: translate(-50%,-50%);
      border-radius: 50%;
      display: grid; place-items: center;
      background: radial-gradient(circle, rgba(32,217,255,.2), rgba(32,217,255,.02) 58%, transparent 70%);
      filter: drop-shadow(0 0 28px rgba(32,217,255,.6));
    }
    .logo-orb img { width: 258px; height: 258px; object-fit: cover; border-radius: 50%; mix-blend-mode: screen; opacity: .96; }
    .screen {
      position: absolute; z-index: 1;
      overflow: hidden;
      pointer-events: none;
      border: 1px solid rgba(32,217,255,.4);
      background: rgba(0,0,0,.48);
      box-shadow:
        0 0 12px rgba(32,217,255,.28),
        0 0 28px rgba(32,217,255,.14);
    }
    .screen.one { width: 42%; height: 27%; left: 5%; top: 10%; transform: rotate(-5deg); }
    .screen.two { width: 39%; height: 25%; right: 5%; top: 14%; transform: rotate(5deg); }
    .screen.three { width: 45%; height: 27%; left: 4%; bottom: 9%; transform: rotate(4deg); }
    .screen.four { width: 40%; height: 23%; right: 6%; bottom: 13%; transform: rotate(-4deg); }
    .screen video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
    }

    /* SHOWREEL */
    .split { display: grid; grid-template-columns: .52fr 1.48fr; gap: 40px; align-items: center; border-top: 1px solid rgba(255,255,255,.08); }
    .video-frame {
      aspect-ratio: 16 / 9;
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at 50% 40%, rgba(32,217,255,.18), transparent 34%),
        linear-gradient(145deg, #101b22, #020507);
      position: relative;
      overflow: hidden;
      display: grid; place-items: center;
    }
    .video-frame::before { content:""; position:absolute; width:100%; height:1px; background:var(--cyan); top:50%; box-shadow:0 0 25px var(--cyan); opacity:.45; }
    .showreel-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
    .showreel-overlay {
      position:absolute; inset:0; z-index:2;
      display:grid; place-items:center;
      border:0; padding:0; width:100%; height:100%;
      background:rgba(0,0,0,.32);
      cursor:pointer;
    }
    .play {
      width: 80px; height: 80px; border-radius: 50%;
      border: 1px solid var(--cyan); display: grid; place-items: center;
      color: var(--cyan); font-size: 22px; padding-left: 4px;
      background: rgba(0,0,0,.35);
      box-shadow: 0 0 35px rgba(32,217,255,.22);
    }
    .video-frame iframe {
      position:absolute; inset:0; width:100%; height:100%;
      border:0; display:none; z-index:3; background:#000;
    }
    .video-frame.is-playing { cursor:default; }
    .video-frame.is-playing::before,
    .video-frame.is-playing .showreel-overlay,
    .video-frame.is-playing .showreel-poster { display:none; }
    .video-frame.is-playing iframe { display:block; }
    .section-copy { max-width: 450px; }
    .section-copy p { margin-top: 24px; color: var(--muted); }
    .section-copy .btn { margin-top: 28px; }

    /* SERVICES */
    .services { border-top: 1px solid rgba(255,255,255,.08); }
    .service-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }
    .service-card {
      min-height: 360px;
      padding: 34px 34px 92px;
      display:flex;
      flex-direction:column;
      border: 1px solid var(--line);
      background: linear-gradient(145deg, rgba(32,217,255,.06), rgba(255,255,255,.015));
      position:relative; overflow:hidden; transition:.3s;
    }
    .service-card:hover { transform:translateY(-4px); border-color:rgba(32,217,255,.55); box-shadow:0 18px 50px rgba(0,0,0,.35); }
    .service-card::after { content:""; position:absolute; width:260px; height:260px; right:-100px; bottom:-120px; border-radius:50%; background:rgba(32,217,255,.1); filter:blur(20px); }
    .icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--cyan); color:var(--cyan); font-size:20px; }
    .service-card h3 { margin-top:26px; font-size:34px; text-transform:uppercase; letter-spacing:-.04em; }
    .tags { margin-top:7px; color:var(--cyan); font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; }
    .service-card p { max-width:410px; margin-top:auto; margin-bottom:auto; padding:18px 0; color:var(--muted); }
    .service-link {
      position:absolute;
      left:34px;
      bottom:30px;
      z-index:2;
      display:inline-flex;
      align-items:center;
      padding:12px 18px;
      border:1px solid var(--cyan);
      color:var(--cyan);
      text-transform:uppercase;
      font-size:11px;
      letter-spacing:.1em;
      font-weight:800;
      background:rgba(32,217,255,.1);
      box-shadow:0 0 18px rgba(32,217,255,.22);
      transition:.25s;
    }
    .service-link:hover {
      background:var(--cyan);
      color:#001016;
      box-shadow:0 0 28px rgba(32,217,255,.38);
    }

    /* WORK */
    .work { border-top:1px solid rgba(255,255,255,.08); }
    .work-head { display:flex; align-items:end; justify-content:space-between; gap:30px; }
    .filters { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:35px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:6px; }
    .filter {
      border:0;
      background:none;
      color:#9aa7ad;
      text-transform:uppercase;
      letter-spacing:.1em;
      font-size:13px;
      font-weight:700;
      cursor:pointer;
      padding:8px 0 12px;
      border-bottom:2px solid transparent;
    }
    .filter.active, .filter:hover { color:var(--cyan); }
    .filter.active { border-bottom-color:var(--cyan); }
    .portfolio-grid {
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      align-items:stretch;
      gap:22px;
      margin-top:28px;
    }
    .work-card {
      display:flex;
      flex-direction:column;
      height:100%;
      border:1px solid rgba(255,255,255,.1);
      background:#060a0d;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .work-card[data-format="short-form"] {
      width:86%;
      justify-self:center;
    }
    .work-card:hover {
      transform: translateY(-6px);
      border-color: rgba(32,217,255,.7);
      box-shadow:
        0 0 0 1px rgba(32,217,255,.28),
        0 10px 28px rgba(0,0,0,.45),
        0 0 34px rgba(32,217,255,.28),
        0 0 64px rgba(32,217,255,.12);
    }
    .work-card.is-hidden { display:none; }
    .thumb {
      aspect-ratio: 16/9;
      position:relative;
      width:100%;
      padding:0;
      border:0;
      display:block;
      cursor:pointer;
      overflow:hidden;
      background:#10181d;
      flex:0 0 auto;
    }
    .work-card[data-format="short-form"] .thumb { aspect-ratio: 9/16; }
    .thumb img { width:100%; height:100%; object-fit:cover; display:block; transition: filter .25s ease, transform .35s ease; }
    .work-card:hover .thumb img { filter: brightness(1.12); transform: scale(1.03); }
    .thumb .play-mini {
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      width:48px; height:48px; border:1px solid var(--cyan); border-radius:50%;
      display:grid; place-items:center; color:var(--cyan); background:rgba(3,5,7,.45);
      pointer-events:none; transition:.25s;
    }
    .work-card:hover .play-mini { background:var(--cyan); color:#001016; box-shadow:0 0 24px rgba(32,217,255,.45); }
    .work-info {
      flex:1;
      display:flex;
      flex-direction:column;
      padding:18px 16px 16px;
    }
    .work-info h4 {
      font-size:14px;
      line-height:1.35;
      text-transform:uppercase;
      letter-spacing:.03em;
    }
    .work-meta {
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:10px;
      flex-wrap:wrap;
    }
    .work-format,
    .work-tag {
      display:inline-flex;
      align-items:center;
      padding:6px 11px;
      font-size:11px;
      font-weight:800;
      line-height:1;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .work-format { color:#001016; background:var(--cyan); }
    .work-tag {
      color:var(--cyan);
      border:1px solid rgba(32,217,255,.7);
      background:rgba(32,217,255,.1);
    }
    .work-empty { display:none; margin-top:36px; color:var(--muted); text-align:center; }
    .work-empty.show { display:block; }

    .video-modal {
      position:fixed; inset:0; z-index:80;
      display:none; place-items:center;
      padding:28px;
      background:rgba(0,0,0,.82);
      backdrop-filter:blur(10px);
    }
    .video-modal.open { display:grid; }
    .video-modal-close {
      position:absolute; top:18px; right:24px;
      border:1px solid var(--line); background:transparent; color:var(--text);
      width:44px; height:44px; cursor:pointer; font-size:22px;
    }
    .video-modal-close:hover { color:#001016; background:var(--cyan); }
    .video-modal-frame {
      width: min(1280px, 88vw);
      aspect-ratio: 16/9;
      background: #000;
      border: 1px solid rgba(32,217,255,.35);
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(32,217,255,.14),
        0 0 22px rgba(32,217,255,.22),
        0 0 48px rgba(32,217,255,.1);
    }
    .video-modal.is-short .video-modal-frame {
      width: auto;
      height: min(90vh, 880px);
      aspect-ratio: 9/16;
      max-width: calc(100% - 24px);
    }
    .video-modal-frame iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      background: #000;
    }

    /* WHY */
    .why-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; margin-top:50px; }
    .why-card { padding:42px 36px; border-top:1px solid var(--cyan); background:linear-gradient(180deg, rgba(32,217,255,.05), transparent); }
    .why-card h3 { font-size:24px; line-height:1.15; text-transform:uppercase; letter-spacing:.02em; }
    .why-card p { margin-top:18px; color:#c5d0d5; font-size:17px; line-height:1.6; }

    /* PROCESS */
    .process { border-top:1px solid rgba(255,255,255,.08); }
    .steps { display:grid; grid-template-columns:repeat(4,1fr); margin-top:55px; }
    .step { padding:38px 32px; border-left:1px solid rgba(117,234,255,.62); }
    .step-num { color:var(--cyan); font-size:15px; font-weight:800; letter-spacing:.15em; }
    .step h3 { margin-top:18px; font-size:22px; line-height:1.15; text-transform:uppercase; }
    .step p { margin-top:16px; color:#c5d0d5; font-size:16px; line-height:1.6; }

    /* CTA */
    .cta { padding:150px 0; border-top:1px solid rgba(255,255,255,.08); }
    .cta .eyebrow { justify-content:center; }
    .cta-layout {
      display:grid;
      grid-template-columns:minmax(210px,auto) minmax(0,1fr) minmax(210px,auto);
      align-items:center;
      gap:28px 32px;
      margin-top:8px;
    }
    .cta-copy { text-align:center; }
    .cta h2 { font-size:clamp(42px,6.4vw,92px); }
    .cta h2 span { color:var(--cyan); }
    .cta p { max-width:520px; margin:22px auto 0; color:var(--muted); }
    .cta .btn { margin-top:32px; }
    .social-col { display:flex; flex-direction:column; gap:18px; }
    .social-item {
      display:flex;
      align-items:center;
      gap:14px;
      color:#e8eef0;
      font-size:16px;
      font-weight:700;
      letter-spacing:.04em;
      line-height:1.2;
      white-space:nowrap;
      transition: color .25s, text-shadow .25s;
    }
    .social-col-right .social-item { justify-content:flex-end; }
    .social-item svg {
      width:32px;
      height:32px;
      flex:0 0 32px;
      fill:currentColor;
    }
    a.social-item:hover { color:var(--cyan); text-shadow:0 0 16px rgba(32,217,255,.35); }
    .social-item.is-static { cursor:default; color:#c5d0d5; }
    .site-foot {
      width: 100%;
      padding: 20px 0 36px;
      text-align: center;
    }
    .site-foot p {
      display: inline-block;
      margin: 0;
      font-size: 11px;
      letter-spacing: .08em;
      transform: translateX(-16px);
      color: #3f4c52;
    }

    @media (max-width: 900px) {
      .container { width:min(var(--max), calc(100% - 36px)); }
      .nav-toggle { display: flex; }
      nav {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: fixed;
        top: 78px;
        left: 0;
        right: 0;
        z-index: 19;
        padding: 18px 18px 28px;
        background: rgba(3,5,7,.94);
        border-bottom: 1px solid var(--line);
        backdrop-filter: blur(18px);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
      }
      header.is-nav-open nav {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        visibility: visible;
      }
      nav a {
        display: block;
        padding: 16px 8px;
        font-size: 14px;
        border-bottom: 1px solid rgba(255,255,255,.06);
      }
      body.nav-lock { overflow: hidden; }
      .hero { padding-top:125px; min-height:auto; }
      .hero-grid, .split { grid-template-columns:1fr; }
      .hero-visual { min-height:500px; }
      .service-grid { grid-template-columns:1fr; }
      .portfolio-grid { grid-template-columns:repeat(2,1fr); }
      .why-grid { grid-template-columns:1fr; }
      .steps { grid-template-columns:repeat(2,1fr); }
      .work-head { align-items:start; flex-direction:column; }
      .cta-layout { grid-template-columns:1fr 1fr; }
      .cta-copy { grid-column:1 / -1; order:-1; }
      .cta h2 { font-size:clamp(42px,10vw,72px); }
    }

    @media (max-width: 560px) {
      section { padding:80px 0; }
      .brand span { display:none; }
      .nav-cta { padding:10px 12px; }
      .hero h1 { font-size:58px; }
      .actions { flex-direction:column; align-items:flex-start; }
      .hero-visual { min-height:340px; }
      .logo-orb img { width:145px; height:145px; }
      .logo-orb { width:180px; height:180px; }
      .portfolio-grid { grid-template-columns:1fr; }
      .steps { grid-template-columns:1fr; }
      .social-item { font-size:14px; gap:10px; }
      .social-item svg { width:26px; height:26px; flex-basis:26px; }
    }

    /* INQUIRY PAGE */
    .inquiry-page { padding-top: 78px; }
    .inquiry-hero { padding: 72px 0 16px; }
    .inquiry-hero h1 { margin: 18px 0 16px; font-size: clamp(48px, 7vw, 86px); line-height: .88; letter-spacing: -.055em; text-transform: uppercase; }
    .inquiry-hero h1 span { color: var(--cyan); }
    .inquiry-hero p { max-width: 560px; color: var(--muted); font-size: 18px; }
    .inquiry-page .inquiry-hero + section { padding: 12px 0 80px; }
    .inquiry-form { max-width: 860px; margin: 0 auto; padding: 0 0 40px; }
    .form-block {
      margin-top: 42px;
      padding: 36px 34px 32px;
      border: 1px solid var(--line);
      background: linear-gradient(145deg, rgba(7, 16, 21, .38), rgba(32, 217, 255, .04));
    }
    .form-block h2 { margin-top: 12px; font-size: clamp(28px, 4vw, 42px); }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; }
    .field { display: flex; flex-direction: column; gap: 8px; }
    .field.full { grid-column: 1 / -1; }
    .field label, .choice-legend {
      color: var(--cyan);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .req { color: var(--cyan); }
    .field-note { color: var(--muted); font-size: 13px; line-height: 1.5; }
    .field input, .field textarea, .field select {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(3,5,7,.72);
      color: var(--text);
      font: inherit;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .field textarea { min-height: 140px; resize: vertical; }
    .field textarea.tall { min-height: 180px; }
    .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
    .field input:focus, .field textarea:focus, .field select:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 1px rgba(32,217,255,.25), 0 0 24px rgba(32,217,255,.12);
    }
    .field input::placeholder, .field textarea::placeholder { color: #6d7a80; }
    .choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
    .choice-card {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 20px 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(3,5,7,.55);
      cursor: pointer;
      transition: .2s;
    }
    .choice-card input { position: absolute; opacity: 0; pointer-events: none; }
    .choice-card strong { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
    .choice-card span { color: var(--muted); font-size: 12px; line-height: 1.4; }
    .choice-card:hover, .choice-card:has(input:checked), .choice-card.is-selected {
      border-color: rgba(32,217,255,.7);
      background: rgba(32,217,255,.1);
      box-shadow: 0 0 24px rgba(32,217,255,.12);
    }
    .chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
    .chip {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }
    .chip input { position: absolute; opacity: 0; pointer-events: none; }
    .chip span {
      display: inline-flex;
      padding: 9px 13px;
      border: 1px solid rgba(32,217,255,.7);
      color: var(--cyan);
      background: rgba(32,217,255,.08);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      transition: .2s;
    }
    .chip:hover span, .chip:has(input:checked) span, .chip.is-selected span {
      background: var(--cyan);
      color: #001016;
      box-shadow: 0 0 18px rgba(32,217,255,.28);
    }
    .is-hidden { display: none; }
    .form-error { display: none; margin-top: 10px; color: #ff8b8b; font-size: 13px; }
    .form-error.show { display: block; }
    .form-actions { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
    .form-actions .btn {
      cursor: pointer;
      background: transparent;
      color: white;
    }
    .form-actions .btn:hover {
      background: var(--cyan);
      color: #001016;
      box-shadow: 0 0 34px rgba(32,217,255,.28);
      transform: translateY(-2px);
    }
    .form-actions .btn:disabled { opacity: .55; cursor: wait; transform: none; }
    .form-status { color: var(--muted); font-size: 14px; }
    .form-status a {
      color: #8fd3dd;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .form-status a:hover { color: var(--cyan); }
    .inquiry-page.is-shaking {
      animation: screen-shake .45s ease;
    }
    .form-status.is-fail {
      animation: fail-glow 1.4s ease;
    }
    .form-status.is-fail a {
      animation: fail-glow-link 1.4s ease;
    }
    @keyframes screen-shake {
      0%, 100% { transform: translateX(0); }
      16% { transform: translateX(-8px); }
      32% { transform: translateX(7px); }
      48% { transform: translateX(-6px); }
      64% { transform: translateX(4px); }
      80% { transform: translateX(-2px); }
    }
    @keyframes fail-glow {
      0%, 22%, 44%, 70%, 100% { color: var(--muted); text-shadow: none; }
      11%, 33%, 55% { color: #ff6d6d; text-shadow: 0 0 12px rgba(255, 70, 70, .55); }
    }
    @keyframes fail-glow-link {
      0%, 22%, 44%, 70%, 100% { color: #8fd3dd; text-shadow: none; }
      11%, 33%, 55% { color: #ff8a8a; text-shadow: 0 0 12px rgba(255, 70, 70, .5); }
    }
    @media (prefers-reduced-motion: reduce) {
      .inquiry-page.is-shaking,
      .form-status.is-fail,
      .form-status.is-fail a { animation: none; }
      .form-status.is-fail { color: #ff6d6d; }
    }
    .form-success {
      display: none;
      margin-top: 42px;
      padding: 48px 36px;
      border: 1px solid var(--line);
      text-align: center;
      background: linear-gradient(145deg, rgba(32,217,255,.06), rgba(255,255,255,.015));
    }
    .form-success.show { display: block; }
    .form-success h2 { margin-top: 12px; }
    .form-success p { max-width: 460px; margin: 18px auto 0; color: var(--muted); }
    .form-success .btn { margin-top: 28px; }
    .nav-cta.is-current { background: var(--cyan); color: #001016; }
    .honey { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

    @media (max-width: 900px) {
      .form-grid, .choice-grid { grid-template-columns: 1fr; }
      .form-block { padding: 28px 20px; }
    }

    /* MOTION */
    html { scroll-behavior: smooth; }
    .js body {
      opacity: 0;
    }
    .js body.inquiry-page {
      opacity: 1;
    }
    .js body.is-entered {
      opacity: 1;
      transition: opacity .7s ease;
    }
    .js body.is-leaving {
      opacity: 0;
      pointer-events: none;
      transition: opacity .38s ease;
    }
    .js .reveal {
      opacity: 0;
      transform: translateY(34px);
      transition:
        opacity .85s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
        transform .85s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
    }
    .js .reveal.is-in {
      opacity: 1;
      transform: none;
    }
    .js .service-card.reveal,
    .js .why-card.reveal,
    .js .step.reveal {
      transform: translateY(42px);
    }
    .js .service-card.reveal.is-in,
    .js .why-card.reveal.is-in,
    .js .step.reveal.is-in {
      transform: none;
    }
    .js .hero-tag.reveal {
      transform: translateY(16px);
    }
    .js .hero-tag.reveal.is-in {
      transform: none;
    }
    .js .service-card.reveal.is-in:hover { transform: translateY(-4px); }

    .js .hero-visual::before {
      opacity: 0;
      transform: rotate(7deg) scaleY(0);
    }
    .js .logo-orb {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.64);
    }
    .js .screen.one {
      opacity: 0;
      transform: rotate(-5deg) translate(-64px, -42px);
    }
    .js .screen.two {
      opacity: 0;
      transform: rotate(5deg) translate(64px, -42px);
    }
    .js .screen.three {
      opacity: 0;
      transform: rotate(4deg) translate(-64px, 42px);
    }
    .js .screen.four {
      opacity: 0;
      transform: rotate(-4deg) translate(64px, 42px);
    }
    .js body.is-entered .hero-visual::before {
      animation: hero-cut .55s cubic-bezier(.12, .8, .2, 1) forwards;
    }
    .js body.is-entered .logo-orb {
      animation: hero-logo-in .9s cubic-bezier(.16, 1, .3, 1) .22s forwards;
    }
    .js body.is-entered .screen.one {
      animation: hero-screen-one .8s cubic-bezier(.22, 1, .36, 1) .38s forwards;
    }
    .js body.is-entered .screen.two {
      animation: hero-screen-two .8s cubic-bezier(.22, 1, .36, 1) .48s forwards;
    }
    .js body.is-entered .screen.three {
      animation: hero-screen-three .8s cubic-bezier(.22, 1, .36, 1) .58s forwards;
    }
    .js body.is-entered .screen.four {
      animation: hero-screen-four .8s cubic-bezier(.22, 1, .36, 1) .68s forwards;
    }

    @keyframes hero-cut {
      0% {
        opacity: 0;
        transform: rotate(7deg) scaleY(0);
        box-shadow: 0 0 0 transparent;
      }
      18% { opacity: 1; }
      46% {
        opacity: 1;
        transform: rotate(7deg) scaleY(1.08);
        box-shadow: 0 0 18px #fff, 0 0 42px var(--cyan);
      }
      100% {
        opacity: 1;
        transform: rotate(7deg) scaleY(1);
        box-shadow: 0 0 25px var(--cyan);
      }
    }
    @keyframes hero-logo-in {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.64);
      }
      62% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }
    @keyframes hero-screen-one {
      0% { opacity: 0; transform: rotate(-5deg) translate(-64px, -42px); }
      100% { opacity: 1; transform: rotate(-5deg) translate(0, 0); }
    }
    @keyframes hero-screen-two {
      0% { opacity: 0; transform: rotate(5deg) translate(64px, -42px); }
      100% { opacity: 1; transform: rotate(5deg) translate(0, 0); }
    }
    @keyframes hero-screen-three {
      0% { opacity: 0; transform: rotate(4deg) translate(-64px, 42px); }
      100% { opacity: 1; transform: rotate(4deg) translate(0, 0); }
    }
    @keyframes hero-screen-four {
      0% { opacity: 0; transform: rotate(-4deg) translate(64px, 42px); }
      100% { opacity: 1; transform: rotate(-4deg) translate(0, 0); }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .js body,
      .js body.is-entered,
      .js body.is-leaving,
      .js .reveal,
      .js .reveal.is-in,
      .js .hero-visual::before,
      .js .logo-orb,
      .js .screen.one,
      .js .screen.two,
      .js .screen.three,
      .js .screen.four {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
      }
      .js .logo-orb { transform: translate(-50%, -50%) !important; }
      .js .screen.one { transform: rotate(-5deg) !important; }
      .js .screen.two { transform: rotate(5deg) !important; }
      .js .screen.three { transform: rotate(4deg) !important; }
      .js .screen.four { transform: rotate(-4deg) !important; }
      .js .hero-visual::before { transform: rotate(7deg) !important; }
    }

    /* CLICK CUT */
    .cursor-cut {
      position: fixed;
      z-index: 201;
      width: 2px;
      height: 46px;
      pointer-events: none;
      left: 0;
      top: 0;
      background: linear-gradient(
        transparent,
        #fff 18%,
        var(--cyan) 50%,
        #fff 82%,
        transparent
      );
      box-shadow: 0 0 8px #fff, 0 0 16px var(--cyan);
      transform: translate(-50%, -50%) rotate(16deg) scaleY(0);
      animation: cursor-cut .58s cubic-bezier(.18, .8, .22, 1) forwards;
    }

    @keyframes cursor-cut {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(16deg) scaleY(0);
      }
      32% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(16deg) scaleY(1);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(16deg) scaleY(1);
      }
    }

    @media (pointer: coarse), (prefers-reduced-motion: reduce) {
      .cursor-cut { display: none !important; }
    }

    .launch-cut {
      position: fixed;
      inset: 0;
      z-index: 400;
      overflow: hidden;
      pointer-events: none;
    }
    .launch-cut.is-active { pointer-events: all; }
    .launch-cut-blade {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 3px;
      height: 180vmax;
      background: linear-gradient(
        transparent 0%,
        #fff 16%,
        var(--cyan) 50%,
        #fff 84%,
        transparent 100%
      );
      box-shadow: 0 0 16px #fff, 0 0 32px var(--cyan), 0 0 56px var(--cyan);
      transform: translate(-50%, -50%) rotate(18deg) translateY(-140%);
      opacity: 0;
    }
    .launch-cut.is-active .launch-cut-blade {
      animation: launch-blade .52s cubic-bezier(.14, .72, .22, 1) forwards;
    }
    .launch-cut-flash {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.28), rgba(32,217,255,.08) 34%, transparent 58%);
      opacity: 0;
    }
    .launch-cut.is-active .launch-cut-flash {
      animation: launch-flash .48s ease .16s forwards;
    }
    .launch-cut-cover {
      position: absolute;
      inset: 0;
      background: #030507;
      opacity: 0;
    }
    .launch-cut.is-active .launch-cut-cover {
      animation: launch-cover .36s ease .46s forwards;
    }
    .launch-cut.is-done .launch-cut-blade,
    .launch-cut.is-done .launch-cut-flash { opacity: 0; }
    .launch-cut.is-done .launch-cut-cover {
      animation: launch-cover-out .4s ease forwards;
    }
    @keyframes launch-blade {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(18deg) translateY(-140%);
      }
      16% { opacity: 1; }
      100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(18deg) translateY(140%);
      }
    }
    @keyframes launch-flash {
      0% { opacity: 0; }
      35% { opacity: 1; }
      100% { opacity: 0; }
    }
    @keyframes launch-cover {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes launch-cover-out {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }