/* ============ Q SERVICES AI — software dev brand (indigo / dark-tech) ============ */
:root{
  --accent:#6366F1; --accent-deep:#4F46E5; --accent-wash:#ECECFE;
  --ink:#0B1020; --ink-soft:#3A4256; --ink-faint:#6B7490;
  --bg-deep:#0A0E1C; --bg-tint:#F4F5FB; --line:#E5E7F0; --line-soft:#EEF0F7;
  --grow:#10B981; --grow-wash:#E4F7F0;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}
.eyebrow{ font-family:var(--mono); letter-spacing:.14em; font-weight:500; text-transform:uppercase; font-size:12.5px; }
.eyebrow::before{ background:var(--accent); }

/* Anchor targets clear the sticky nav when jumped to from the menu. */
section[id]{ scroll-margin-top:86px; }

/* ---- dark hero ---- */
.hero{ background:var(--bg-deep); color:#fff; position:relative; overflow:hidden; padding:64px 0 76px; }
.hero::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(820px 480px at 82% -10%, rgba(99,102,241,.34), transparent 60%),
  radial-gradient(600px 400px at 6% 110%, rgba(79,70,229,.22), transparent 60%); }
.hero::after{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px; -webkit-mask-image:radial-gradient(700px 500px at 70% 20%,#000,transparent 75%); mask-image:radial-gradient(700px 500px at 70% 20%,#000,transparent 75%); }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1fr; gap:52px; align-items:center; }
.hero .pill{ background:rgba(99,102,241,.16); color:#C7C9FF; border:1px solid rgba(129,132,248,.34); }
.hero h1{ color:#fff; font-size:clamp(40px,5.4vw,66px); letter-spacing:-.04em; margin-top:20px; }
.hero h1 .grad{ background:linear-gradient(100deg,#A5B4FC,#818CF8 55%,#6366F1); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ margin-top:22px; font-size:20px; color:#AEB6D0; max-width:560px; }
.hero-cta{ margin-top:32px; display:flex; gap:13px; flex-wrap:wrap; }
.hero .btn-ghost{ background:rgba(255,255,255,.04); color:#fff; border-color:rgba(255,255,255,.2); }
.hero .btn-ghost:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:#fff; }
.hero-note{ margin-top:20px; font-family:var(--mono); font-size:13px; color:#7C86A6; display:flex; gap:16px; flex-wrap:wrap; }
.hero-note b{ color:#AEB6D0; font-weight:500; }
.hero-vis{ position:relative; }

/* code/terminal mock */
.term{ position:relative; z-index:1; background:#0E1428; border:1px solid rgba(255,255,255,.1); border-radius:16px; box-shadow:0 40px 90px rgba(0,0,0,.5); overflow:hidden; font-family:var(--mono); }
.term-top{ display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.term-top i{ width:11px; height:11px; border-radius:50%; }
.term-top i:nth-child(1){ background:#FF5F57; } .term-top i:nth-child(2){ background:#FEBC2E; } .term-top i:nth-child(3){ background:#28C840; }
.term-top .fn{ margin-left:10px; font-size:12px; color:#6B7490; }
.term-body{ padding:20px 22px; font-size:13.5px; line-height:1.85; }
.term-body .ln{ white-space:pre; }
.c-key{ color:#818CF8; } .c-fn{ color:#5EEAD4; } .c-str{ color:#FCA5A5; } .c-com{ color:#5B6478; } .c-num{ color:#FBBF24; } .c-var{ color:#E2E8F0; }
.term-cursor{ display:inline-block; width:8px; height:16px; background:#818CF8; vertical-align:-3px; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.term-badge{ position:absolute; right:-14px; bottom:24px; background:#111634; border:1px solid rgba(129,132,248,.4); border-radius:13px; padding:12px 15px; box-shadow:0 16px 40px rgba(0,0,0,.5); font-family:var(--font-head); }
.term-badge b{ color:#fff; font-size:15px; display:flex; align-items:center; gap:8px; } .term-badge b svg{ width:15px; height:15px; color:#5EEAD4; }
.term-badge span{ color:#8891B4; font-size:11.5px; }

/* ---- tech strip ---- */
.tech{ padding:26px 0; border-bottom:1px solid var(--line-soft); background:#fff; }
.tech-inner{ display:flex; align-items:center; justify-content:center; gap:14px 34px; flex-wrap:wrap; }
.tech-inner p{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); letter-spacing:.1em; text-transform:uppercase; }
.tech-logo{ font-family:var(--font-head); font-weight:600; font-size:16px; color:var(--ink-soft); opacity:.72; }

/* ---- services ---- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc{ padding:30px 28px; border-radius:var(--r); border:1px solid var(--line); background:#fff; transition:transform .18s,box-shadow .2s,border-color .2s; position:relative; }
.svc:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }
.svc .ic{ width:50px; height:50px; border-radius:13px; background:var(--accent-wash); color:var(--accent-deep); display:grid; place-items:center; margin-bottom:18px; }
.svc .ic svg{ width:25px; height:25px; }
.svc h3{ font-size:20px; }
.svc p{ margin-top:9px; font-size:15px; color:var(--ink-soft); }
.svc .tags{ margin-top:16px; display:flex; flex-wrap:wrap; gap:7px; }
.svc .tags span{ font-family:var(--mono); font-size:11px; color:var(--accent-deep); background:var(--accent-wash); padding:4px 9px; border-radius:6px; }

/* ---- approach ---- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step{ padding:28px 24px; border-radius:var(--r); background:#fff; border:1px solid var(--line); }
.step .no{ font-family:var(--mono); font-weight:600; font-size:13px; color:var(--accent-deep); }
.step h4{ font-size:18px; margin-top:10px; }
.step p{ margin-top:8px; font-size:14.5px; color:var(--ink-soft); }

/* ---- featured work ---- */
.work{ display:grid; grid-template-columns:1.1fr 1fr; gap:52px; align-items:center; }
.work-copy .pill{ background:var(--accent-wash); color:var(--accent-deep); }
.work-copy h3{ font-size:clamp(26px,3vw,36px); margin-top:14px; }
.work-copy p{ margin-top:15px; font-size:17.5px; color:var(--ink-soft); }
.work-metrics{ margin-top:24px; display:flex; gap:30px; flex-wrap:wrap; }
.work-metrics .m b{ font-family:var(--font-head); font-weight:700; font-size:32px; letter-spacing:-.03em; background:linear-gradient(120deg,var(--accent-deep),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; }
.work-metrics .m span{ font-size:13.5px; color:var(--ink-faint); }
.work-link{ margin-top:24px; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:600; color:var(--accent-deep); }
.work-vis{ border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--shadow-lg); overflow:hidden; background:#fff; }
.work-vis .top{ background:var(--bg-deep); padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
.work-vis .top b{ color:#fff; font-family:var(--font-head); font-size:15px; } .work-vis .top span{ font-family:var(--mono); font-size:11px; color:#7C86A6; }
.work-vis .body{ padding:24px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wv-card{ border:1px solid var(--line); border-radius:12px; padding:16px; }
.wv-card.full{ grid-column:1/-1; }
.wv-card .k{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
.wv-card .v{ font-family:var(--font-head); font-weight:700; font-size:26px; letter-spacing:-.02em; margin-top:6px; }
.wv-bars{ display:flex; align-items:flex-end; gap:6px; height:44px; margin-top:10px; }
.wv-bars span{ flex:1; border-radius:3px 3px 0 0; background:var(--accent-wash); }
.wv-bars span.on{ background:var(--accent); }
.wv-meter{ margin-top:12px; height:6px; background:var(--grow-wash); border-radius:99px; overflow:hidden; }
.wv-meter span{ display:block; height:100%; background:var(--grow); }
.wv-meter-note{ margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--grow); }
.wv-status{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.wv-status .dot{ width:34px; height:34px; border-radius:9px; background:var(--grow-wash); color:var(--grow); display:grid; place-items:center; flex:none; }
.wv-status .dot svg{ width:17px; height:17px; }
.wv-status b{ font-family:var(--font-head); font-weight:600; font-size:14px; display:block; }
.wv-status em{ font-family:var(--mono); font-style:normal; font-size:11px; color:var(--ink-faint); display:block; }

/* ---- about founder ---- */
.founder{ display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; align-items:center; }
.founder-photo{ position:relative; }
/* aspect-ratio sets the 600px min-content contribution that sizes the photo
   column in the two-column grid — the same width the design resolved to. */
.founder-photo .frame{ width:100%; height:400px; aspect-ratio:3/2; border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; background:var(--accent-wash); }
.founder-photo .frame img{ width:100%; height:100%; object-fit:cover; }
.founder-photo .frame.is-empty{ display:grid; place-items:center; text-align:center; padding:24px;
  background:linear-gradient(150deg,#EEF0FF,#E2E5FA); border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line)); }
.founder-photo .frame.is-empty svg{ width:44px; height:44px; color:var(--accent-deep); opacity:.55; margin:0 auto 10px; }
.founder-photo .frame.is-empty span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.founder h2{ font-size:clamp(26px,3.2vw,38px); }
.founder p{ margin-top:16px; font-size:17.5px; color:var(--ink-soft); }
.cred{ margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cred .c{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; }
.cred .c svg{ width:19px; height:19px; color:var(--accent-deep); flex:none; margin-top:1px; }
.cred .c b{ font-family:var(--font-head); font-weight:600; }

/* ---- CTA ---- */
.cta-section{ padding-top:20px; }
.cta-band{ position:relative; overflow:hidden; background:var(--bg-deep); color:#fff; border-radius:var(--r-xl); padding:66px 60px; text-align:center; }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(720px 380px at 50% -20%, rgba(99,102,241,.4), transparent 60%); }
.cta-band::after{ content:""; position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(500px 300px at 50% 0%,#000,transparent 75%); mask-image:radial-gradient(500px 300px at 50% 0%,#000,transparent 75%); }
.cta-band .inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.cta-band .eyebrow{ color:#A5B4FC; }
.cta-band h2{ color:#fff; font-size:clamp(30px,4vw,46px); }
.cta-band p{ margin-top:16px; font-size:19px; color:#AEB6D0; }
.cta-band .hero-cta{ justify-content:center; }
.cta-band .btn-ghost{ background:rgba(255,255,255,.05); color:#fff; border-color:rgba(255,255,255,.22); }
.cta-band .btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }

.footer{ background:#070A14; }

@media (max-width:940px){
  .hero-grid,.work,.founder{ grid-template-columns:1fr; gap:40px; }
  .svc-grid,.steps{ grid-template-columns:1fr 1fr; }
  .term-badge{ display:none; }
  .cta-band{ padding:48px 28px; }
  /* Single column — drop the min-width pressure so narrow screens can't overflow. */
  .founder-photo .frame{ aspect-ratio:auto; }
}
@media (max-width:600px){ .svc-grid,.steps,.cred,.work-vis .body{ grid-template-columns:1fr; } }

/* The terminal's code lines are white-space:pre. Once the hero stacks, let them
   scroll inside the card instead of widening the page. */
@media (max-width:940px){
  .hero-vis,.term{ min-width:0; }
  .term-body{ overflow-x:auto; }
}

/* Brand + burger + CTA don't fit a phone at the default nav metrics. */
@media (max-width:560px){
  .nav-inner{ gap:14px; padding:0 18px; }
  .nav-cta .btn{ padding:11px 16px; font-size:14.5px; }
}
@media (max-width:400px){
  .nav-inner{ gap:10px; }
  .brand{ font-size:17px; gap:9px; }
  .brand-mark{ width:30px; height:30px; }
  .brand-mark svg{ width:17px; height:17px; }
  .nav-cta .btn{ padding:10px 14px; font-size:14px; }
}

/* ============ 404 page ============ */
.page-hero{ background:var(--bg-deep); color:#fff; position:relative; overflow:hidden; padding:64px 0 68px; }
.page-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(820px 420px at 78% -20%, rgba(99,102,241,.32), transparent 60%); }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; font-size:clamp(32px,4.4vw,52px); letter-spacing:-.03em; margin-top:14px; }
.page-hero p{ margin-top:16px; font-size:18px; color:#AEB6D0; max-width:640px; }
.empty-state{ text-align:center; max-width:560px; margin:0 auto; }
.empty-state .hero-cta{ justify-content:center; }