:root{
    /* ---- Wallace & Wang tokens (seeded from the logo's blue + orchid) ---- */
    --primary: #3F5DFA;
    --primary-dark: #2A3FC7;
    --primary-darker: #1E2E93;
    --primary-container: #E3E6FF;
    --on-primary: #FFFFFF;
    --on-primary-container: #17205E;

    --secondary: #E7A1FF;
    --secondary-container: #F9EBFF;
    --on-secondary-container: #5B2470;
    --secondary-strong: #B15FE0;

    --surface: #FCFBFF;
    --surface-container: #F2F0FA;
    --surface-container-high: #E9E6F5;
    --surface-container-highest: #E0DDF0;
    --on-surface: #1B1B29;
    --on-surface-variant: #54546B;

    --outline: #C9C7DC;
    --outline-variant: #E1DFED;

    --success: #146C43;
    --success-container: #DFF5E7;
    --error: #B3261E;

    --shadow-color: 235 58% 25%;

    --radius-xs: 8px;
    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-full: 999px;

    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --maxw: 1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    background:var(--surface);
    color:var(--on-surface);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0;
    color:var(--on-surface);
  }

  a{color:inherit;}
  img{max-width:100%; display:block;}

  .skip-link{
    position:absolute; left:-999px; top:0;
    background:var(--primary); color:var(--on-primary);
    padding:12px 20px; border-radius:0 0 var(--radius-sm) 0;
    z-index:200; font-weight:600; text-decoration:none;
  }
  .skip-link:focus{left:0;}

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

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

  /* ---------------- capsule signature shape ---------------- */
  .capsule{
    border-radius:var(--radius-full);
  }
  .capsule-mark{
    display:inline-block;
    width:0.34em; height:1em;
    border-radius:var(--radius-full);
    transform:rotate(20deg);
  }

  /* ---------------- nav ---------------- */
  header.site-nav{
    position:sticky; top:0; z-index:100;
    background:rgba(252,251,255,0.86);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border-bottom:1px solid var(--outline-variant);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px;
  }
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
  .brand img{height:28px; width:auto;}
  .nav-links{
    display:flex; align-items:center; gap:4px;
    list-style:none; margin:0; padding:0;
  }
  .nav-links a{
    text-decoration:none; font-weight:600; font-size:14.5px;
    padding:10px 16px; border-radius:var(--radius-full);
    color:var(--on-surface-variant);
    transition:background .18s ease, color .18s ease;
  }
  .nav-links a:hover{background:var(--surface-container-high); color:var(--on-surface);}
  .btn-pill{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--primary); color:var(--on-primary);
    font-family:var(--font-body); font-weight:700; font-size:14.5px;
    padding:11px 22px; border-radius:var(--radius-full);
    border:none; cursor:pointer; text-decoration:none;
    box-shadow:0 1px 2px hsl(var(--shadow-color) / 0.25), 0 3px 10px hsl(var(--shadow-color) / 0.14);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn-pill:hover{background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 4px 16px hsl(var(--shadow-color) / 0.28);}
  .btn-pill:active{transform:translateY(0);}
  .nav-cta{display:none;}
  .menu-toggle{
    display:none; background:none; border:none; cursor:pointer;
    width:44px; height:44px; border-radius:var(--radius-full);
    align-items:center; justify-content:center;
  }
  .menu-toggle:hover{background:var(--surface-container-high);}
  .menu-toggle svg{width:22px; height:22px;}

  /* ---------------- eyebrow / pill badges ---------------- */
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--primary-container); color:var(--on-primary-container);
    font-weight:700; font-size:13px; letter-spacing:.01em;
    padding:7px 16px 7px 10px; border-radius:var(--radius-full);
  }
  .status-pill{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--font-mono); font-size:11.5px; font-weight:500;
    padding:5px 11px; border-radius:var(--radius-full);
    letter-spacing:0.01em; white-space:nowrap;
  }
  .status-live{background:var(--success-container); color:var(--success);}
  .status-dev{background:var(--secondary-container); color:var(--on-secondary-container);}
  .status-concept{background:var(--surface-container-high); color:var(--on-surface-variant);}
  .status-dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;}

  /* ---------------- hero ---------------- */
  .hero{
    position:relative; overflow:hidden;
    padding:88px 0 96px;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.85fr; gap:56px; align-items:center;
  }
  .hero h1{
    font-size:clamp(2.5rem, 4.6vw, 3.6rem);
    line-height:1.06;
    margin:20px 0 22px;
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(100deg, var(--primary) 0%, var(--secondary-strong) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero p.lead{
    font-size:1.14rem; color:var(--on-surface-variant); max-width:46ch;
    margin:0 0 32px;
  }
  .hero-ctas{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
  .btn-secondary{
    display:inline-flex; align-items:center; gap:8px;
    background:transparent; color:var(--on-surface);
    font-family:var(--font-body); font-weight:700; font-size:14.5px;
    padding:11px 22px; border-radius:var(--radius-full);
    border:1.5px solid var(--outline); cursor:pointer; text-decoration:none;
    transition:border-color .18s ease, background .18s ease;
  }
  .btn-secondary:hover{border-color:var(--primary); background:var(--primary-container);}

  .hero-art{
    position:relative; height:420px;
  }
  .hero-capsule{
    position:absolute; border-radius:var(--radius-full);
    box-shadow:0 20px 44px hsl(var(--shadow-color) / 0.22);
  }
  .hero-c1{width:120px; height:300px; background:var(--primary); left:14%; top:6%; transform:rotate(18deg); animation:float1 7s ease-in-out infinite;}
  .hero-c2{width:120px; height:300px; background:var(--primary-dark); left:38%; top:16%; transform:rotate(18deg); animation:float2 8s ease-in-out infinite;}
  .hero-c3{width:120px; height:260px; background:var(--secondary); left:62%; top:2%; transform:rotate(18deg); animation:float3 9s ease-in-out infinite;}
  @keyframes float1{0%,100%{transform:rotate(18deg) translateY(0);} 50%{transform:rotate(18deg) translateY(-14px);}}
  @keyframes float2{0%,100%{transform:rotate(18deg) translateY(0);} 50%{transform:rotate(18deg) translateY(-22px);}}
  @keyframes float3{0%,100%{transform:rotate(18deg) translateY(0);} 50%{transform:rotate(18deg) translateY(-10px);}}
  .hero-tag{
    position:absolute; bottom:8%; left:6%;
    background:var(--surface); border:1px solid var(--outline-variant);
    border-radius:var(--radius-md); padding:14px 18px;
    box-shadow:0 10px 30px hsl(var(--shadow-color) / 0.16);
    font-family:var(--font-mono); font-size:12.5px; color:var(--on-surface-variant);
    max-width:210px;
  }
  .hero-tag strong{display:block; font-family:var(--font-body); font-size:14px; color:var(--on-surface); margin-bottom:2px; font-weight:700;}

  /* ---------------- sections ---------------- */
  section{padding:88px 0;}
  .section-head{max-width:640px; margin:0 0 48px;}
  .section-head .eyebrow{margin-bottom:16px;}
  .section-head h2{font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:14px;}
  .section-head p{color:var(--on-surface-variant); font-size:1.05rem; margin:0;}

  /* ---------------- services / process ---------------- */
  .process{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:4px;
    background:var(--outline-variant); border-radius:var(--radius-lg);
    overflow:hidden; border:1px solid var(--outline-variant);
  }
  .process-step{
    background:var(--surface); padding:36px 32px; position:relative;
  }
  .process-step .step-shape{
    width:34px; height:34px; border-radius:var(--radius-full);
    margin-bottom:22px;
  }
  .process-step:nth-child(1) .step-shape{background:var(--primary);}
  .process-step:nth-child(2) .step-shape{background:var(--primary-dark);}
  .process-step:nth-child(3) .step-shape{background:var(--secondary-strong);}
  .process-step .step-label{
    font-family:var(--font-mono); font-size:12px; color:var(--on-surface-variant);
    text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; display:block;
  }
  .process-step h3{font-size:1.2rem; margin-bottom:10px;}
  .process-step p{color:var(--on-surface-variant); margin:0; font-size:0.98rem;}
  .process-arrow{
    display:none; position:absolute; right:-13px; top:44px; z-index:2;
    width:26px; height:26px; border-radius:50%;
    background:var(--surface); border:1px solid var(--outline-variant);
    align-items:center; justify-content:center;
  }

  /* ---------------- apps grid ---------------- */
  .apps-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  }
  .app-card{
    background:var(--surface-container); border:1px solid var(--outline-variant);
    border-radius:var(--radius-lg); padding:26px;
    display:flex; flex-direction:column; gap:14px;
    text-decoration:none; color:inherit;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    position:relative; overflow:hidden;
  }
  .app-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 34px hsl(var(--shadow-color) / 0.16);
    border-color:transparent; background:var(--surface);
  }
  .app-card:focus-visible{transform:translateY(-4px);}
  .app-icon{
    width:52px; height:52px; border-radius:var(--radius-sm);
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .app-icon .mini-capsule{
    position:absolute; width:11px; height:30px; border-radius:var(--radius-full);
    transform:rotate(18deg);
  }
  .app-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
  .app-card h3{font-size:1.18rem; margin-bottom:2px;}
  .app-card .app-blurb{color:var(--on-surface-variant); font-size:0.95rem; margin:0; flex:1;}
  .app-url{
    font-family:var(--font-mono); font-size:12px; color:var(--on-surface-variant);
    background:var(--surface); border:1px solid var(--outline-variant);
    padding:8px 12px; border-radius:var(--radius-xs);
    display:flex; align-items:center; gap:8px;
    margin-top:4px;
  }
  .app-url .dot-row{display:flex; gap:3px; margin-right:2px;}
  .app-url .dot-row span{width:5px; height:5px; border-radius:50%; background:var(--outline);}
  .app-card .go{
    margin-left:auto; opacity:0; transform:translateX(-4px);
    transition:opacity .18s ease, transform .18s ease;
    font-weight:700; font-size:13px; color:var(--primary);
  }
  .app-card:hover .go, .app-card:focus-visible .go{opacity:1; transform:translateX(0);}

  /* ---------------- contact / CTA ---------------- */
  .contact-section{
    background:var(--on-surface);
    border-radius:var(--radius-lg);
    padding:64px;
    color:#F3F2FA;
    position:relative; overflow:hidden;
  }
  .contact-section::before{
    content:""; position:absolute; width:340px; height:340px;
    background:var(--primary); opacity:0.35; filter:blur(70px);
    border-radius:50%; top:-120px; right:-80px;
  }
  .contact-section::after{
    content:""; position:absolute; width:280px; height:280px;
    background:var(--secondary); opacity:0.28; filter:blur(70px);
    border-radius:50%; bottom:-100px; left:-60px;
  }
  .contact-inner{position:relative; z-index:1; display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px;}
  .contact-copy h2{color:#fff; font-size:clamp(1.8rem,3vw,2.3rem); margin-bottom:16px;}
  .contact-copy p{color:#C7C5DA; font-size:1.02rem; max-width:38ch; margin:0 0 24px;}
  .contact-copy .contact-fact{
    display:flex; gap:12px; align-items:flex-start; margin-top:22px; font-size:0.92rem; color:#B3B1CB;
  }
  .contact-fact .capsule-mark{width:6px; height:6px; margin-top:6px; flex:none;}

  form.contact-form{
    background:#FCFBFF; border-radius:var(--radius-md); padding:32px;
    display:flex; flex-direction:column; gap:18px;
  }
  .form-row{display:flex; flex-direction:column; gap:6px;}
  .form-row label{font-size:13.5px; font-weight:700; color:var(--on-surface);}
  .form-row input, .form-row textarea, .form-row select{
    font-family:var(--font-body); font-size:15px; color:var(--on-surface);
    background:var(--surface); border:1.5px solid var(--outline);
    border-radius:var(--radius-sm); padding:12px 14px;
    resize:vertical;
  }
  .form-row textarea{min-height:96px;}
  .form-row input:focus, .form-row textarea:focus, .form-row select:focus{
    border-color:var(--primary); outline:none;
    box-shadow:0 0 0 3px var(--primary-container);
  }
  .form-hp{position:absolute; left:-9999px; top:-9999px;}
  .submit-row{display:flex; align-items:center; gap:14px; margin-top:4px;}
  .form-note{font-size:12.5px; color:var(--on-surface-variant);}
  .form-success{
    display:none; text-align:center; padding:40px 20px;
    flex-direction:column; align-items:center; gap:12px;
  }
  .form-success .capsule-mark{width:14px; height:44px;}
  .form-success h3{font-size:1.2rem;}
  .form-success p{color:var(--on-surface-variant); margin:0; font-size:0.95rem;}

  /* ---------------- footer ---------------- */
  footer{padding:48px 0 40px; border-top:1px solid var(--outline-variant);}
  .footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;}
  .footer-brand{display:flex; align-items:center; gap:10px;}
  .footer-brand img{height:22px;}
  .footer-brand span{font-size:13px; color:var(--on-surface-variant);}
  .footer-links{display:flex; gap:22px; list-style:none; padding:0; margin:0;}
  .footer-links a{font-size:13.5px; font-weight:600; text-decoration:none; color:var(--on-surface-variant);}
  .footer-links a:hover{color:var(--primary);}

  /* ---------------- responsive ---------------- */
  @media (max-width: 900px){
    .hero-grid{grid-template-columns:1fr; gap:48px;}
    .hero-art{height:280px; order:-1;}
    .hero-c1{left:8%; width:88px;} .hero-c2{left:38%; width:88px;} .hero-c3{left:66%; width:88px; height:220px;}
    .process{grid-template-columns:1fr;}
    .apps-grid{grid-template-columns:repeat(2,1fr);}
    .contact-inner{grid-template-columns:1fr;}
    .nav-links{display:none;}
    .menu-toggle{display:flex;}
    .nav-cta{display:none;}
  }
  @media (max-width: 620px){
    .apps-grid{grid-template-columns:1fr;}
    .contact-section{padding:32px 20px;}
    form.contact-form{padding:22px;}
    section{padding:64px 0;}
    .hero{padding:56px 0 64px;}
  }