/* ==========================================================================
   Qubitix Studio — stylesheet v2
   Premium, engineering-grade studio. Navy + Qubitix blue, orange as a
   signature accent. Geist throughout.
   ========================================================================== */

:root{
  --navy:      #0b1b2e;   /* dark sections */
  --navy-2:    #10243b;
  --navy-3:    #16304d;
  --ink:       #0f1c2c;   /* text on light */
  --slate:     #4b5b6e;
  --muted:     #6b7a8c;
  --blue:      #135ca0;   /* Qubitix brand blue */
  --blue-600:  #1769b8;
  --blue-deep: #0c3d6b;
  --sky:       #5aa5f0;   /* blue for dark backgrounds */
  --sky-soft:  rgba(90,165,240,.14);
  --tint:      #eaf3fc;
  --orange:    #fe771d;   /* Qubitix orange: signature accent */
  --paper:     #ffffff;
  --mist:      #f5f8fb;
  --line:      #e3e9f0;
  --line-2:    #d3dce7;
  --on-dark:   #c9d5e3;
  --on-dark-2: #8fa3ba;
  --dark-line: rgba(255,255,255,.09);

  --f-display: var(--f);
  --f-body: var(--f);
  --f: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --nav-h: 72px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --ease: cubic-bezier(.2,.7,.1,1);

  --sh-1: 0 1px 2px rgba(15,28,44,.05), 0 1px 1px rgba(15,28,44,.03);
  --sh-2: 0 1px 2px rgba(15,28,44,.04), 0 8px 24px -8px rgba(15,28,44,.12);
  --sh-3: 0 2px 4px rgba(15,28,44,.04), 0 24px 48px -16px rgba(15,28,44,.22);
  --sh-dark: 0 30px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f); font-size:17px; line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue); text-underline-offset:3px; }
a:hover{ color:var(--blue-deep); }
:focus-visible{ outline:2.5px solid var(--blue-600); outline-offset:3px; border-radius:6px; }
.dark :focus-visible{ outline-color:var(--sky); }

h1,h2,h3{ font-family:var(--f); color:var(--ink); margin:0; font-weight:600; letter-spacing:-.03em; }
h1{ font-size:clamp(38px, 5vw, 62px); line-height:1.04; letter-spacing:-.04em; }
h2{ font-size:clamp(30px, 3.4vw, 44px); line-height:1.1; }
h3{ font-size:19px; line-height:1.3; letter-spacing:-.015em; }
p{ margin:0; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.skip{ position:absolute; left:-9999px; top:8px; background:var(--ink); color:#fff; padding:10px 14px; border-radius:8px; z-index:100; }
.skip:focus{ left:8px; }

/* Dark surfaces */
.dark{ background:var(--navy); color:var(--on-dark); }
.dark h1, .dark h2, .dark h3{ color:#fff; }
.dark a:not(.btn){ color:#fff; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:600 15px/1 var(--f); letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
  padding:12px 18px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  transition:background-color .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.btn .bi-arrow-right{ transition:transform .18s var(--ease); }
.btn:hover .bi-arrow-right{ transform:translateX(3px); }
.btn-lg{ padding:15px 24px; font-size:16px; border-radius:12px; }
.btn-primary{
  background:linear-gradient(180deg, #1a6dbd, var(--blue)); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -6px rgba(19,92,160,.6);
}
.btn-primary:hover{ background:linear-gradient(180deg, #1763ad, var(--blue-deep)); color:#fff; }
.btn-outline{ border-color:var(--line-2); color:var(--ink); background:#fff; box-shadow:var(--sh-1); }
.btn-outline:hover{ border-color:var(--ink); color:var(--ink); }
.btn-ghost-light{ border-color:rgba(255,255,255,.18); color:#fff !important; background:rgba(255,255,255,.04); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }
.btn-quiet{ color:var(--ink); padding:10px 12px; }
.btn-quiet:hover{ color:var(--blue); }
.btn-quiet .bi{ color:#1fa855; font-size:17px; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid rgba(15,28,44,.07);
}
.nav-row{ height:var(--nav-h); display:flex; align-items:center; gap:32px; }
.lockup{ display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.lockup img{ height:30px; width:auto; }
.lockup-name{ font:600 19px/1 var(--f); color:var(--ink); letter-spacing:-.03em; padding-left:12px; border-left:1px solid var(--line-2); }
.nav-links{ display:flex; gap:4px; margin-left:auto; }
.nav-links a{ color:var(--slate); text-decoration:none; font-weight:500; font-size:15px; padding:8px 12px; border-radius:8px; transition:background .15s, color .15s; }
.nav-links a:hover{ color:var(--ink); background:var(--mist); }
.nav-links a[aria-current="page"]{ color:var(--ink); background:var(--tint); }
.nav-cta{ display:flex; align-items:center; gap:6px; }
.burger{ display:none; background:none; border:0; font-size:28px; color:var(--ink); padding:4px 6px; cursor:pointer; }
.sheet{ border-top:1px solid var(--line); background:#fff; padding:8px var(--gut) 18px; }
.sheet a{ display:block; padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:500; font-size:17px; }
.sheet a:last-child{ border-bottom:0; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:clamp(56px,7vw,104px) 0 0; isolation:isolate; }
.hero::before, .svc-hero::before, .contact-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(37,120,214,.38), transparent 62%),
    radial-gradient(700px 420px at 4% 96%, rgba(254,119,29,.10), transparent 60%),
    linear-gradient(180deg, #0b1b2e, #0a1726);
}
.hero::after, .svc-hero::after, .contact-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 30%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 70% at 70% 30%, #000 30%, transparent 75%);
}
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(36px,5vw,72px); align-items:center; }
.pill{
  display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  font-size:14px; font-weight:500; color:#dbe6f2 !important; text-decoration:none; margin-bottom:26px;
  transition:background .15s, border-color .15s;
}
.pill:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.24); }
.pill .bi{ font-size:12px; opacity:.7; }
.pill-dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(254,119,29,.2); }
.hero h1{ max-width:15ch; }
.lede{ font-size:19px; line-height:1.6; max-width:52ch; margin-top:24px; color:var(--slate); }
.dark .lede{ color:var(--on-dark); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.hero-proof{ list-style:none; padding:0; margin:40px 0 0; display:flex; flex-wrap:wrap; gap:10px 24px; }
.hero-proof li{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--on-dark-2); }
.hero-proof .bi{ color:var(--sky); font-size:15px; }

/* Hero composition: real product screens, layered */
.hero-visual{ position:relative; padding:28px 0 64px 24px; }
.hv-browser{
  position:relative; border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:var(--sh-dark); transform:perspective(1800px) rotateY(-6deg) rotateX(2deg);
  transform-origin:left center;
}
.hv-browser .frame-bar{ background:#eef2f7; }
.hv-screen{ position:relative; aspect-ratio:16/10.4; overflow:hidden; }
.hv-screen img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.hv-phone{
  position:absolute; right:-6px; bottom:6px; width:31%; aspect-ratio:9/18.5;
  background:#0c1622; border-radius:30px; padding:9px;
  box-shadow:0 30px 60px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
}
.hv-notch{ position:absolute; top:15px; left:50%; width:30%; height:14px; transform:translateX(-50%); background:#0c1622; border-radius:10px; z-index:2; }
.hv-app{ height:100%; border-radius:22px; background:#f4f7f5; padding:36px 10px 10px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.hv-app-top{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#11261a; }
.hv-live{ font-size:10px; font-weight:600; color:#008040; display:flex; align-items:center; gap:5px; }
.hv-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#00a050; box-shadow:0 0 0 3px rgba(0,160,80,.18); }
.hv-m{ background:#fff; border:1px solid #dfe7e2; border-radius:10px; padding:8px 9px; display:flex; justify-content:space-between; align-items:flex-end; border-left:3px solid #00a050; }
.hv-m.is-idle{ border-left-color:#e9a100; }
.hv-m span{ display:flex; flex-direction:column; }
.hv-m small{ font-size:9px; color:#5a6b62; }
.hv-m b{ font-size:12px; color:#11261a; font-weight:600; }
.hv-m em{ font-style:normal; font-size:10px; color:#5a6b62; }
.hv-bars{ flex:1; display:flex; align-items:flex-end; gap:4px; background:#fff; border:1px solid #dfe7e2; border-radius:10px; padding:10px 8px 8px; min-height:50px; }
.hv-bars i{ flex:1; background:#2040a0; border-radius:2px 2px 0 0; height:60%; }
.hv-bars i:nth-child(2){ height:78%; } .hv-bars i:nth-child(3){ height:70%; } .hv-bars i:nth-child(4){ height:30%; background:#e9a100; }
.hv-bars i:nth-child(5){ height:24%; background:#e9a100; } .hv-bars i:nth-child(6){ height:84%; } .hv-bars i:nth-child(7){ height:92%; } .hv-bars i:nth-child(8){ height:76%; } .hv-bars i:nth-child(9){ height:50%; opacity:.4; }
.hv-chip{
  position:absolute; display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px;
  background:rgba(255,255,255,.96); border-radius:14px; box-shadow:0 18px 40px -12px rgba(0,0,0,.45);
  font-size:13px; line-height:1.3; color:var(--ink);
}
.hv-chip b{ display:block; font-weight:600; font-size:13.5px; }
.hv-chip small{ color:var(--muted); font-size:12px; }
.hv-chip-a{ left:-8px; bottom:22px; }
.hv-chip-b{ right:24%; top:0; }
.hv-ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--tint); color:var(--blue); font-size:18px; flex-shrink:0; }
.hv-ic-wa{ background:#e5f7ec; color:#1fa855; }

/* Entrance: the composition settles in once */
.js .hv-browser{ animation:rise .9s var(--ease) both; }
.js .hv-phone{ animation:rise .9s .18s var(--ease) both; }
.js .hv-chip-a{ animation:pop .6s .55s var(--ease) both; }
.js .hv-chip-b{ animation:pop .6s .75s var(--ease) both; }
@keyframes rise{ from{ opacity:0; translate:0 28px; } to{ opacity:1; translate:0 0; } }
@keyframes pop{ from{ opacity:0; scale:.92; translate:0 8px; } to{ opacity:1; scale:1; translate:0 0; } }

/* Client strip */
.logos{ display:flex; align-items:center; gap:24px 48px; flex-wrap:wrap; padding-top:28px; padding-bottom:36px; margin-top:24px; border-top:1px solid var(--dark-line); }
.logos p{ font-size:14px; color:var(--on-dark-2); flex-shrink:0; }
.logos ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:18px 44px; }
.logos li{ color:#e7eef6; opacity:.72; font-size:19px; line-height:1; white-space:nowrap; }
.lg-operza{ font-weight:700; letter-spacing:-.04em; font-size:21px !important; }
.lg-maxcel{ font-weight:700; letter-spacing:.08em; font-size:15px !important; }
.lg-guru{ font-weight:600; letter-spacing:-.02em; }
.lg-blend{ font-family:Georgia, serif; font-style:italic; font-size:21px !important; }

/* ---------- Sections ---------- */
.sec{ padding:clamp(72px, 9vw, 120px) 0; }
.sec-tight-top{ padding-top:clamp(24px,4vw,48px); }
.sec-mist{ background:var(--mist); }
.sec-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 64px; align-items:end; margin-bottom:clamp(40px, 5vw, 64px); }
.sec-head p{ color:var(--slate); font-size:18px; max-width:50ch; }
.link-arrow{ font-weight:600; text-decoration:none; display:inline-flex; gap:8px; align-items:center; }

/* Tags */
.tag{
  align-self:flex-start; width:max-content;
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--blue);
  background:var(--tint); padding:5px 10px; border-radius:999px;
}

/* ---------- Service cards (home) ---------- */
.svc-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.svc-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-1); transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
.svc-card:hover{ color:var(--ink); box-shadow:var(--sh-3); transform:translateY(-3px); border-color:var(--line-2); }
.svc-viz{
  height:172px; position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:
    radial-gradient(260px 160px at 80% 0%, rgba(90,165,240,.22), transparent 70%),
    linear-gradient(180deg, #f3f7fc, #eaf1f9);
}
.svc-body{ padding:26px 28px 28px; display:flex; flex-direction:column; flex:1; }
.svc-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--navy); color:#fff; font-size:18px; margin-bottom:18px; }
.svc-body h3{ font-size:22px; }
.svc-body > p{ color:var(--slate); margin-top:8px; font-size:15.5px; }
.svc-body ul{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:9px; }
.svc-body li{ position:relative; padding-left:26px; font-size:15px; color:var(--ink); }
.svc-body li::before{
  content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; top:0; color:var(--blue); font-size:16px;
}
.svc-more{ margin-top:auto; padding-top:24px; font-weight:600; font-size:15px; color:var(--blue); display:inline-flex; align-items:center; gap:8px; }
.svc-card:hover .svc-more .bi{ transform:translateX(3px); }
.svc-more .bi{ transition:transform .18s var(--ease); }

/* mini previews inside service cards */
.viz-site{ padding:22px 28px 0; }
.vz-bar{ display:flex; gap:5px; padding:9px 12px; background:#fff; border:1px solid var(--line); border-bottom:0; border-radius:10px 10px 0 0; }
.vz-bar i{ width:7px; height:7px; border-radius:50%; background:#d3dce7; }
.vz-site{ position:absolute; left:28px; right:28px; top:47px; bottom:0; background:#fff; border:1px solid var(--line); border-top:1px solid #eef2f7; padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.vz-h{ height:12px; width:62%; background:var(--ink); border-radius:4px; }
.vz-h2{ width:44%; }
.vz-p{ height:6px; width:56%; background:#d3dce7; border-radius:3px; margin-top:4px; }
.vz-btn{ width:64px; height:18px; background:var(--blue); border-radius:5px; margin-top:6px; }
.vz-img{ position:absolute; right:46px; top:66px; width:34%; height:84px; border-radius:8px; background:linear-gradient(150deg, #2b78c2, #0c3d6b); }
.viz-app{ display:grid; grid-template-columns:52px 1fr; padding:22px 28px 0; gap:0; }
.vz-side{ background:var(--navy); border-radius:10px 0 0 0; padding:14px 10px; display:flex; flex-direction:column; gap:9px; }
.vz-side i{ height:6px; border-radius:3px; background:rgba(255,255,255,.22); }
.vz-side i:first-child{ background:var(--sky); }
.vz-main{ background:#fff; border:1px solid var(--line); border-left:0; border-bottom:0; border-radius:0 10px 0 0; padding:14px; display:flex; flex-direction:column; gap:12px; }
.vz-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.vz-kpis span{ height:30px; border-radius:6px; background:var(--mist); border:1px solid var(--line); }
.vz-chart{ flex:1; display:flex; align-items:flex-end; gap:6px; }
.vz-chart i{ flex:1; background:var(--blue); border-radius:3px 3px 0 0; height:50%; opacity:.9; }
.vz-chart i:nth-child(2n){ height:72%; } .vz-chart i:nth-child(3n){ height:88%; background:var(--sky); } .vz-chart i:nth-child(5){ height:36%; }
.viz-shop{ padding:24px 28px 0; }
.vz-prods{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.vz-prods span{ height:120px; border-radius:10px 10px 0 0; background:linear-gradient(#e2eaf4 64%, #fff 64%); border:1px solid var(--line); border-bottom:0; }
.vz-cart{
  position:absolute; right:22px; top:22px; display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center;
  background:#fff; border-radius:12px; padding:10px 14px 10px 10px; box-shadow:var(--sh-2); font-size:12px;
}
.vz-cart .bi{ grid-row:span 2; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:#e5f7ec; color:#1fa855; font-size:15px; }
.vz-cart b{ font-size:12.5px; font-weight:600; color:var(--ink); }
.vz-cart small{ color:var(--muted); font-size:11px; }

/* ---------- Work ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.work{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--sh-1);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.work:hover{ box-shadow:var(--sh-3); transform:translateY(-3px); }
.work-media{
  padding:28px 28px 0; position:relative;
  background:
    radial-gradient(420px 220px at 85% 0%, rgba(90,165,240,.20), transparent 70%),
    linear-gradient(180deg, #eef3f9, #e6edf6);
}
.frame{ background:#fff; border-radius:12px 12px 0 0; overflow:hidden; box-shadow:0 -1px 0 rgba(15,28,44,.04), 0 12px 32px -12px rgba(15,28,44,.28); }
.frame-bar{ display:flex; align-items:center; gap:14px; height:34px; padding:0 14px; background:#f3f6fa; border-bottom:1px solid var(--line); }
.dots{ display:flex; gap:6px; }
.dots i{ width:9px; height:9px; border-radius:50%; background:#d3dce7; }
.dots i:nth-child(1){ background:#f87171; } .dots i:nth-child(2){ background:#fbbf24; } .dots i:nth-child(3){ background:#34d399; }
.addr{
  flex:1; max-width:240px; margin:0 auto; height:22px; border-radius:6px; background:#fff;
  font-size:11.5px; color:var(--slate); display:flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line); white-space:nowrap; overflow:hidden; padding:0 8px;
}
.addr .bi{ font-size:9px; color:#1fa855; }
.frame-body{ aspect-ratio:16/10; overflow:hidden; position:relative; }
.frame-body img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.work-meta{ padding:26px 28px 30px; border-top:1px solid var(--line); }
.work-meta h3{ font-size:22px; margin-top:14px; }
.work-title{ color:var(--slate); font-weight:500; margin-top:2px; }
.work-line{ color:var(--slate); margin-top:12px; font-size:15.5px; max-width:56ch; }

.work-wide{ grid-column:1 / -1; flex-direction:row; }
.work-wide .work-media{ flex:1.55; padding:36px 0 0 36px; }
.work-wide .frame{ border-radius:12px 0 0 0; }
.work-wide .work-meta{ flex:1; border-top:0; border-left:1px solid var(--line); padding:40px; display:flex; flex-direction:column; justify-content:center; }
.work-wide .work-meta h3{ font-size:30px; }
.work-wide.is-flip{ flex-direction:row-reverse; }
.work-wide.is-flip .work-media{ padding:36px 36px 0 0; }
.work-wide.is-flip .frame{ border-radius:0 12px 0 0; }
.work-wide.is-flip .work-meta{ border-left:0; border-right:1px solid var(--line); }


/* Illustrated mocks (until real screenshots go in assets/img/work/) */
.mk{ position:absolute; inset:0; font-family:var(--f-body); overflow:hidden; }
.mk-btn{ display:inline-block; font:600 11px/1 var(--f-body); padding:8px 12px; border-radius:6px; }
.mk strong{ font-family:var(--f-display); letter-spacing:-.02em; font-weight:780; }

.mk-dash{ background:#f4f7f5; padding:4.5% 5%; display:flex; flex-direction:column; gap:4%; }
.mk-dash-top{ display:flex; justify-content:space-between; align-items:center; font-size:clamp(12px,1.5vw,16px); color:#11261a; }
.mk-live{ font-size:11px; font-weight:600; color:#008040; display:flex; align-items:center; gap:6px; }
.mk-live::before{ content:""; width:8px; height:8px; border-radius:50%; background:#00a050; box-shadow:0 0 0 4px rgba(0,160,80,.18); }
.mk-dash-grid{ flex:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; gap:12px; }
.mk-chart{ grid-column:1 / -1; }
.mk-machine, .mk-chart{ background:#fff; border-radius:10px; border:1px solid #dfe7e2; padding:12px 14px; display:flex; flex-direction:column; gap:4px; position:relative; }
.mk-machine small, .mk-chart small{ font-size:clamp(9px,1vw,11.5px); color:#5a6b62; }
.mk-machine strong{ font-size:clamp(13px,1.6vw,19px); color:#11261a; margin-top:4px; }
.mk-machine em{ font-style:normal; font-size:clamp(9px,1vw,12px); color:#5a6b62; }
.mk-machine i{ margin-top:10px; height:6px; border-radius:3px; background:#e4ece7; position:relative; overflow:hidden; }
.mk-machine i::after{ content:""; position:absolute; inset:0; width:calc(var(--v) * 100%); background:#008040; border-radius:3px; }
.mk-machine.is-run{ border-top:4px solid #00a050; }
.mk-machine.is-idle{ border-top:4px solid #e9a100; }
.mk-machine.is-idle i::after{ background:#e9a100; }
.mk-bars{ flex:1; min-height:34px; display:flex; align-items:flex-end; gap:3%; padding-top:6px; }
.mk-bars span{ flex:1; background:#2040a0; border-radius:3px 3px 0 0; height:60%; }
.mk-bars span:nth-child(2){ height:72%; } .mk-bars span:nth-child(3){ height:80%; } .mk-bars span:nth-child(4){ height:66%; }
.mk-bars span:nth-child(5){ height:88%; } .mk-bars span:nth-child(6){ height:30%; background:#e9a100; } .mk-bars span:nth-child(7){ height:20%; background:#e9a100; }
.mk-bars span:nth-child(8){ height:74%; } .mk-bars span:nth-child(9){ height:90%; } .mk-bars span:nth-child(10){ height:84%; }
.mk-bars span:nth-child(11){ height:78%; } .mk-bars span:nth-child(12){ height:45%; opacity:.4; }

.mk-maxcel{ background:#fff; display:flex; flex-direction:column; }
.mk-mx-nav{ display:flex; align-items:center; gap:8px; padding:4% 6%; }
.mk-mx-nav b{ color:#2040a0; font:780 clamp(12px,1.4vw,15px)/1 var(--f-display); margin-right:auto; letter-spacing:.02em; }
.mk-mx-nav span{ width:28px; height:5px; border-radius:3px; background:#d5dbe6; }
.mk-mx-hero{ background:#008040; color:#fff; padding:6% 6% 7%; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.mk-mx-hero strong{ font-size:clamp(14px,1.8vw,21px); line-height:1.1; max-width:20ch; }
.mk-mx-hero .mk-btn{ background:#fff; color:#2040a0; }
.mk-mx-grid{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:4%; padding:5% 6%; }
.mk-mx-grid span{ border-radius:8px; background:linear-gradient(#eef1f7 62%, #fff 62%); border:1px solid #e1e6ef; }

.mk-guru{ background:#1d232b; color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding:8% 7% 6%;
  background-image:linear-gradient(115deg, #1d232b 45%, #2c3540 45.2%, #2c3540 70%, #3a4552 70.2%); }
.mk-gu-hero{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.mk-gu-hero strong{ font-size:clamp(15px,2vw,24px); line-height:1.08; max-width:15ch; }
.mk-gu-hero .mk-btn{ background:#f2a13a; color:#1d232b; }
.mk-gu-stats{ display:flex; gap:9%; }
.mk-gu-stats span{ font-size:11px; color:#aab4bf; display:flex; flex-direction:column; }
.mk-gu-stats b{ font:780 clamp(14px,1.7vw,20px)/1.1 var(--f-display); color:#fff; }

.mk-blend{ background:#f6efe9; display:flex; flex-direction:column; }
.mk-bl-nav{ display:flex; justify-content:space-between; align-items:center; padding:4.5% 6%; }
.mk-bl-nav b{ font:500 clamp(14px,1.6vw,18px)/1 Georgia, serif; font-style:italic; color:#2b1d1a; letter-spacing:.04em; }
.mk-bl-nav .mk-btn{ background:#2b1d1a; color:#f6efe9; }
.mk-bl-hero{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:6%; padding:0 6% 6%; align-items:center; }
.mk-bl-hero strong{ font:400 clamp(16px,2.2vw,26px)/1.05 Georgia, serif; color:#2b1d1a; letter-spacing:-.01em; }
.mk-bl-img{ height:90%; border-radius:999px 999px 12px 12px; background:linear-gradient(170deg, #d9b8a4, #9c6b58); }



/* Operza mock — dark slate app shell */
.mk-operza{ display:grid; grid-template-columns:22% 1fr; background:#f1f5f9; }
.mk-op-side{ background:#0f172a; padding:9% 10%; display:flex; flex-direction:column; gap:6px; }
.mk-op-side b{ color:#fff; font:780 clamp(12px,1.5vw,17px)/1 var(--f-display); letter-spacing:-.02em; margin-bottom:12%; }
.mk-op-side span{ font-size:clamp(8px,.95vw,11.5px); color:#94a3b8; padding:5px 8px; border-radius:6px; }
.mk-op-side span.on{ background:#1e293b; color:#fff; }
.mk-op-main{ padding:5% 6%; display:flex; flex-direction:column; gap:10px; }
.mk-op-head{ display:flex; justify-content:space-between; align-items:center; }
.mk-op-head strong{ font-size:clamp(12px,1.5vw,18px); color:#0f172a; }
.mk-op-head .mk-btn{ background:#0f172a; color:#fff; }
.mk-op-row{ background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:8px 12px; display:flex; flex-direction:column; gap:2px; }
.mk-op-row small, .mk-op-foot small{ font-size:clamp(8px,.9vw,10.5px); color:#64748b; }
.mk-op-row em{ font-style:normal; font-weight:600; font-size:clamp(10px,1.15vw,13.5px); color:#0f172a; }
.mk-op-check{ background:#fff; border:1px solid #e2e8f0; border-radius:8px; display:flex; flex-direction:column; }
.mk-op-check span{ display:flex; justify-content:space-between; align-items:center; padding:7px 12px; font-size:clamp(9px,1.05vw,12.5px); color:#0f172a; border-bottom:1px solid #f1f5f9; }
.mk-op-check span:last-child{ border-bottom:0; }
.mk-op-check i{ font-style:normal; font-weight:600; font-size:clamp(8px,.9vw,11px); padding:2px 8px; border-radius:999px; }
.mk-op-check .ok i{ background:#dcfce7; color:#166534; }
.mk-op-check .short i{ background:#fef3c7; color:#92400e; }
.mk-op-foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:10px 12px; }
.mk-op-flow{ flex-direction:row !important; gap:4px !important; flex-wrap:wrap; justify-content:flex-end; }
.mk-op-flow i{ font-style:normal; font-size:clamp(8px,.85vw,10.5px); font-weight:600; color:#475569; background:#f1f5f9; padding:4px 8px; border-radius:6px; }
.mk-op-flow i.on{ background:#0f172a; color:#fff; }
.mk-op-foot span{ display:flex; flex-direction:column; gap:2px; }
.mk-op-foot b{ font-size:clamp(9px,1.05vw,12.5px); color:#0f172a; font-weight:600; }



/* ---------- Why (dark panel) ---------- */
.why-panel{
  position:relative; overflow:hidden; border-radius:28px; padding:clamp(36px,5vw,72px);
  background:
    radial-gradient(700px 380px at 100% 0%, rgba(37,120,214,.32), transparent 65%),
    radial-gradient(520px 320px at 0% 100%, rgba(254,119,29,.09), transparent 60%),
    var(--navy);
}
.why-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 64px; align-items:end; }
.why-top p{ font-size:18px; color:var(--on-dark); }
.why-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:48px; }
.why-item{ background:rgba(255,255,255,.04); border:1px solid var(--dark-line); border-radius:var(--r); padding:24px; }
.why-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--sky-soft); color:var(--sky); font-size:18px; margin-bottom:18px; }
.why-item h3{ font-size:17.5px; }
.why-item p{ font-size:15px; color:var(--on-dark-2); margin-top:8px; }
.facts{ margin:40px 0 0; padding-top:36px; border-top:1px solid var(--dark-line); display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; }
.facts dt{ font-size:clamp(28px,3vw,38px); font-weight:600; letter-spacing:-.04em; color:#fff; line-height:1; }
.facts dt::after{ content:""; display:block; width:24px; height:3px; border-radius:2px; background:var(--orange); margin-top:14px; }
.facts dd{ margin:12px 0 0; font-size:14.5px; color:var(--on-dark-2); max-width:22ch; }

/* ---------- Process timeline (a real sequence, so numbered) ---------- */
.timeline{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; counter-reset:none; position:relative; }
.timeline::before{ content:""; position:absolute; left:24px; right:24px; top:23px; height:2px; background:linear-gradient(90deg, var(--blue), var(--sky) 60%, var(--orange)); opacity:.35; }
.timeline li{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:72px 24px 26px; box-shadow:var(--sh-1); }
.tl-n{
  position:absolute; top:0; left:24px; width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  font-weight:600; font-size:15px; color:#fff; background:var(--navy); box-shadow:0 8px 18px -8px rgba(11,27,46,.6);
  transform:translateY(-1px);
}
.timeline li:last-child .tl-n{ background:linear-gradient(180deg, #1a6dbd, var(--blue)); }
.timeline{ padding-top:0; }
.timeline li{ margin-top:0; }
.timeline h3{ font-size:19px; }
.timeline p{ font-size:15px; color:var(--slate); margin-top:8px; }

/* ---------- Stack ---------- */
.stack-grid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; }
.stack-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--sh-1); }
.stack-col h3{ font-size:15px; display:flex; align-items:center; gap:10px; letter-spacing:-.01em; }
.stack-col h3 .bi{ width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--tint); color:var(--blue); font-size:15px; }
.stack-col ul{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:8px; }
.stack-col li{ font-size:15px; color:var(--slate); padding-top:8px; border-top:1px solid var(--line); }

/* ---------- FAQ ---------- */
.faq{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,88px); align-items:start; }
.faq-head p{ color:var(--slate); margin-top:16px; font-size:17px; }
.faq-list{ display:grid; gap:12px; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1); transition:border-color .2s, box-shadow .2s; }
.faq details[open]{ border-color:var(--line-2); box-shadow:var(--sh-2); }
.faq summary{
  list-style:none; cursor:pointer; padding:20px 60px 20px 24px; position:relative;
  font-weight:600; font-size:17px; line-height:1.4; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"\F64D"; font-family:"bootstrap-icons"; position:absolute; right:18px; top:50%; translate:0 -50%;
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:15px;
  background:var(--tint); color:var(--blue); transition:rotate .25s var(--ease);
}
.faq details[open] summary::after{ rotate:45deg; }
.faq details p{ padding:0 24px 22px; color:var(--slate); max-width:64ch; font-size:16px; }

/* ---------- CTA panel ---------- */
.cta-wrap{ padding:0 0 clamp(72px,9vw,120px); }
.sec-mist + .cta-wrap{ background:var(--mist); }
.cta-panel{
  position:relative; overflow:hidden; border-radius:28px; padding:clamp(36px,5vw,64px);
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  background:
    radial-gradient(600px 300px at 90% 120%, rgba(254,119,29,.22), transparent 65%),
    radial-gradient(700px 360px at 10% -20%, rgba(37,120,214,.45), transparent 65%),
    var(--navy);
}
.cta-panel h2{ max-width:18ch; }
.cta-panel p{ margin-top:12px; font-size:17.5px; max-width:50ch; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.foot{ background:#08131f; color:var(--on-dark-2); padding:72px 0 30px; font-size:15px; }
.foot a{ color:var(--on-dark); text-decoration:none; }
.foot a:hover{ color:#fff; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr; gap:40px; }
.foot-brand p{ margin-top:20px; max-width:38ch; line-height:1.65; }
.foot-brand p a{ color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); }
.lockup-light img{ filter:brightness(0) invert(1); }
.lockup-light .lockup-name{ color:#fff; border-color:rgba(255,255,255,.2); }
.foot-h{ font:600 14px/1.3 var(--f); color:#fff; letter-spacing:0; margin-bottom:16px; }
.foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.foot-base{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:56px; padding-top:24px; font-size:14px;
  background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) var(--gut) 0/calc(100% - 2*var(--gut)) 1px no-repeat; }
.foot :focus-visible{ outline-color:var(--sky); }

/* ---------- Service pages ---------- */
.svc-hero, .contact-hero{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(48px,6vw,88px) 0 clamp(56px,7vw,96px); }
.svc-hero-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr); gap:clamp(32px,6vw,80px); align-items:center; }
.svc-hero h1{ font-size:clamp(36px,4.6vw,58px); max-width:16ch; }
.crumbs{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--on-dark-2); margin-bottom:24px; }
.crumbs a{ color:var(--on-dark) !important; text-decoration:none; }
.crumbs a:hover{ color:#fff !important; }
.crumbs .bi{ font-size:10px; opacity:.6; }
.svc-for{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:28px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.svc-for h2{ font-size:14px; font-weight:600; letter-spacing:0; color:var(--on-dark-2); margin-bottom:8px; }
.svc-for ul{ list-style:none; padding:0; margin:0; }
.svc-for li{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--dark-line); font-size:15.5px; color:#e6edf5; line-height:1.45; }
.svc-for li:last-child{ border-bottom:0; padding-bottom:0; }
.svc-for .bi{ color:var(--sky); font-size:17px; flex-shrink:0; margin-top:1px; }

.incl{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.incl-item{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--sh-1); }
.incl-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--tint); color:var(--blue); font-size:19px; margin-bottom:18px; }
.incl-item h3{ font-size:17px; }
.incl-item p{ color:var(--slate); font-size:15px; margin-top:8px; }

.scopes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; align-items:stretch; }
.scope{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; display:flex; flex-direction:column; box-shadow:var(--sh-1); }
.scope.is-featured{ background:var(--navy); border-color:var(--navy); color:var(--on-dark); box-shadow:var(--sh-3); }
.scope.is-featured h3{ color:#fff; }
.scope h3{ font-size:22px; }
.scope > p{ color:var(--slate); margin-top:10px; font-size:15.5px; }
.scope.is-featured > p{ color:var(--on-dark); }
.scope ul{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px; }
.scope li{ display:flex; gap:10px; font-size:15px; }
.scope li .bi{ color:var(--blue); font-size:16px; }
.scope.is-featured li .bi{ color:var(--sky); }
.scope.is-featured li{ color:#e6edf5; }
.scope-link{ margin-top:auto; padding-top:26px; font-weight:600; font-size:15px; text-decoration:none; display:inline-flex; gap:8px; align-items:center; }
.scope.is-featured .scope-link{ color:#fff; }

.note{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,88px); align-items:start; }
.note-body{ background:var(--mist); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; display:grid; gap:16px; color:var(--slate); font-size:16.5px; }
.note-body strong{ color:var(--ink); }

/* ---------- Contact ---------- */
.contact-hero{ padding-bottom:clamp(120px,14vw,170px); }
.contact-hero h1{ font-size:clamp(38px,5vw,60px); }
.contact{ padding:0 0 clamp(72px,9vw,120px); }
.contact-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr); gap:24px; align-items:start; margin-top:calc(-1 * clamp(80px,10vw,120px)); position:relative; }
.contact-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; box-shadow:var(--sh-3); }
.contact-card h2{ font-size:20px; }
.contact-ways{ display:grid; gap:4px; margin-top:16px; }
.contact-ways a, .contact-ways div{ display:flex; align-items:center; gap:14px; padding:12px; margin:0 -12px; border-radius:12px; color:var(--ink); text-decoration:none; font-weight:500; font-size:15px; line-height:1.4; }
.contact-ways a:hover{ background:var(--mist); }
.contact-ways small{ display:block; font-size:12.5px; color:var(--muted); font-weight:500; }
.cw-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--tint); color:var(--blue); font-size:18px; flex-shrink:0; }
.cw-wa{ background:#e5f7ec; color:#1fa855; }
.contact-next-h{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.contact-next{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px; }
.contact-next li{ display:flex; gap:12px; align-items:center; color:var(--slate); font-size:15px; }
.contact-next li span{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--navy); color:#fff; font-size:12.5px; font-weight:600; flex-shrink:0; }

.form{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,40px); box-shadow:var(--sh-3); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label{ font-weight:600; font-size:14px; }
.field label span{ font-weight:400; color:var(--muted); }
.field input, .field select, .field textarea{
  font:400 16px/1.4 var(--f); color:var(--ink); background:var(--mist);
  border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; width:100%;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; background:#fff; border-color:var(--blue-600); box-shadow:0 0 0 4px rgba(23,105,184,.14); }
.field .is-invalid{ border-color:#c0392b; background:#fff; }
.types{ display:flex; flex-wrap:wrap; gap:8px; border:0; padding:0; margin:0 0 24px; }
.types legend{ font-weight:600; font-size:14px; margin-bottom:10px; padding:0; }
.types label{ position:relative; }
.types input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.types span{ display:inline-block; padding:10px 16px; border-radius:10px; border:1px solid var(--line-2); background:#fff; font-size:14.5px; font-weight:500; cursor:pointer; transition:all .15s; }
.types label:hover span{ border-color:var(--ink); }
.types input:checked + span{ background:var(--navy); border-color:var(--navy); color:#fff; }
.types input:focus-visible + span{ outline:2.5px solid var(--blue-600); outline-offset:2px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px; }
.form-note{ font-size:13.5px; color:var(--muted); }
.form-status{ margin-top:16px; padding:14px 16px; border-radius:10px; font-size:15px; display:none; }
.form-status.is-ok{ display:block; background:#e7f6ec; color:#14532d; }
.form-status.is-err{ display:block; background:#fdecea; color:#8a1f13; }
.btn[disabled]{ opacity:.6; cursor:wait; }

/* 404 */
.lost{ padding:clamp(80px,12vw,160px) 0; }
.lost p{ color:var(--slate); font-size:19px; margin:18px 0 30px; max-width:44ch; }


/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .why-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .incl{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .stack-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .nav-links, .nav-cta .btn-quiet span{ display:none; }
  .nav-cta{ margin-left:auto; }
  .burger{ display:block; }
  .hero-grid, .sec-head, .why-top, .faq, .contact-grid, .svc-hero-grid, .note{ grid-template-columns:1fr; }
  .hero h1{ max-width:18ch; }
  .hero-visual{ padding:12px 8px 56px; max-width:640px; }
  .hv-browser{ transform:none; }
  .svc-cards{ grid-template-columns:1fr; max-width:560px; }
  .work-wide, .work-wide.is-flip{ flex-direction:column; }
  .work-wide .work-media, .work-wide.is-flip .work-media{ padding:28px 28px 0; }
  .work-wide .frame, .work-wide.is-flip .frame{ border-radius:12px 12px 0 0; }
  .work-wide .work-meta, .work-wide.is-flip .work-meta{ border:0; border-top:1px solid var(--line); padding:26px 28px 30px; }
  .timeline{ grid-template-columns:1fr 1fr; gap:36px 20px; }
  .timeline::before{ display:none; }
  .scopes{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ margin-top:calc(-1 * clamp(80px,10vw,120px)); }
  .contact-grid .form{ order:-1; }
}
@media (max-width: 680px){
  body{ font-size:16px; }
  .nav-cta .btn-primary{ display:none; }
  .lockup img{ height:26px; }
  .lockup-name{ font-size:17px; }
  .lede{ font-size:17px; }
  .hero-actions .btn{ flex:1 1 auto; }
  .hv-chip-b{ display:none; }
  .hv-chip-a{ left:0; bottom:0; }
  .hv-phone{ width:36%; right:0; }
  .logos{ gap:16px; }
  .logos ul{ gap:14px 28px; }
  .logos li{ font-size:17px; }
  .work-grid{ grid-template-columns:1fr; }
  .work-media, .work-wide .work-media, .work-wide.is-flip .work-media{ padding:18px 18px 0; }
  .work-meta, .work-wide .work-meta, .work-wide.is-flip .work-meta{ padding:22px; }
  .work-wide .work-meta h3{ font-size:24px; }
  .why-panel, .cta-panel{ border-radius:20px; padding:28px 22px; }
  .why-grid{ grid-template-columns:1fr; }
  .facts{ gap:28px 16px; }
  .timeline{ grid-template-columns:1fr; }
  .stack-grid{ grid-template-columns:1fr 1fr; }
  .incl{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; gap:0; }
  .foot-grid{ grid-template-columns:1fr; }
  .cta-actions .btn{ flex:1 1 auto; }
  .contact-card, .scope{ padding:24px; }
  .mk-dash{ gap:8px; }
  .mk-dash-grid{ gap:8px; }
  .mk-machine, .mk-chart{ padding:8px 10px; }
  .mk-machine em, .mk-machine i{ display:none; }
  .mk-machine strong{ margin-top:0; }
  .mk-op-check span:nth-child(2), .mk-op-foot{ display:none; }
  .mk-op-main{ gap:6px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* ==========================================================================
   qubitixtech.com v4 — additions on top of the shared Navy design
   (the same base stylesheet as web.qubitixtech.com, so the sites match)
   ========================================================================== */

/* ---------- Nav: services dropdown ---------- */
.has-menu{ position:relative; display:flex; align-items:center; }
.has-menu > a{ display:inline-flex; align-items:center; }
.has-menu > a .bi{ font-size:11px; margin-left:4px; transition:transform .2s var(--ease); }
.menu{
  position:absolute; top:calc(100% + 10px); left:-12px; min-width:300px; padding:8px;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-3);
  display:grid; gap:2px; opacity:0; visibility:hidden; translate:0 6px;
  transition:opacity .18s, translate .18s var(--ease), visibility .18s;
}
.has-menu::after{ content:""; position:absolute; left:0; right:0; top:100%; height:12px; }
.has-menu:hover .menu, .has-menu:focus-within .menu{ opacity:1; visibility:visible; translate:0 0; }
.has-menu:hover > a .bi, .has-menu:focus-within > a .bi{ transform:rotate(180deg); }
.menu a{ display:flex !important; align-items:center; gap:12px; padding:10px 12px !important; border-radius:10px; color:var(--ink) !important; font-size:14.5px !important; }
.menu a:hover{ background:var(--mist) !important; }
.menu a > .bi:first-child{ width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--tint); color:var(--blue); font-size:15px; flex-shrink:0; }
.menu-ext{ border-top:1px solid var(--line); margin-top:4px; padding-top:12px !important; border-radius:0 0 10px 10px !important; }
.menu-ext .ext{ margin-left:auto; font-size:12px; color:var(--muted); }
.sheet-h{ font-size:13px; color:var(--muted); font-weight:600; margin:16px 0 2px; }

/* ---------- Hero additions ---------- */
.hv-screen-q{ background:#f6f8fb; }
.hv-app-q{ background:#f4f7fb; gap:7px; }
.hv-app-q .hv-app-top{ color:var(--ink); }
.hv-s{ display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 9px; }
.hv-s .bi{ width:26px; height:26px; display:grid; place-items:center; border-radius:7px; background:#e7f6ec; color:#1a8f4c; font-size:13px; flex-shrink:0; }
.hv-s span{ display:flex; flex-direction:column; line-height:1.2; }
.hv-s small{ font-size:9.5px; color:var(--muted); }
.hv-s b{ font-size:11.5px; font-weight:600; color:var(--ink); }
.hv-ic-red{ background:#fdecea; color:#c0392b; }
.certs{ display:flex; align-items:center; gap:16px 40px; flex-wrap:wrap; padding-top:28px; padding-bottom:36px; margin-top:24px; border-top:1px solid var(--dark-line); }
.certs p{ font-size:14px; color:var(--on-dark-2); flex-shrink:0; }
.certs ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:12px 28px; }
.certs li{ display:flex; align-items:center; gap:8px; color:#e7eef6; font-size:14.5px; font-weight:500; }
.certs .bi{ color:var(--sky); }

/* ---------- Platforms marquee ---------- */
.platforms{ padding:36px 0; border-bottom:1px solid var(--line); overflow:hidden; }
.platforms .wrap{ display:flex; align-items:center; gap:40px; }
.platforms p{ font-size:14px; color:var(--muted); flex-shrink:0; }
.marquee{ flex:1; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{ display:flex; align-items:center; gap:56px; width:max-content; animation:marquee 40s linear infinite; }
.marquee-track img{ height:30px; width:auto; filter:grayscale(1); opacity:.6; transition:opacity .2s, filter .2s; }
.marquee-track img:hover{ filter:none; opacity:1; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Service visuals (.vz) ---------- */
/* The wrapper is the size container, so cqw units scale with the card. */
.svc-viz, .case-viz, .hv-screen-q{ container-type:inline-size; }
.vz{
  position:absolute; inset:0; overflow:hidden;
  background:#f6f8fb; padding:5.5cqw 6cqw; display:flex; flex-direction:column; gap:3.2cqw;
  font-family:var(--f); color:var(--ink); font-size:clamp(9px, 3.4cqw, 14px); line-height:1.25;
}
.vz-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.vz-top b{ font-size:1.15em; font-weight:600; letter-spacing:-.01em; }
.vz-ok{ display:inline-flex; align-items:center; gap:.45em; font-size:.82em; font-weight:600; color:#1a8f4c; white-space:nowrap; }
.vz-ok::before{ content:""; width:.6em; height:.6em; border-radius:50%; background:#22a95b; box-shadow:0 0 0 .3em rgba(34,169,91,.16); }
.vz-chip{ font-size:.78em; font-weight:600; color:var(--blue); background:var(--tint); padding:.35em .7em; border-radius:999px; white-space:nowrap; }
.vz > *{ container-type:normal; }
.vz-rows{ display:flex; flex-direction:column; gap:2.2cqw; }
.vz-rows > div{ display:flex; align-items:center; gap:2.6cqw; background:#fff; border:1px solid #e3e9f0; border-radius:2.4cqw; padding:2.3cqw 2.8cqw; }
.vz-rows p{ margin:0; flex:1; min-width:0; display:flex; flex-direction:column; }
.vz-rows b{ font-weight:600; font-size:.95em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vz-rows small{ font-size:.78em; color:#6b7a8c; }
.vz-rows > div > .bi{ width:2.2em; height:2.2em; display:grid; place-items:center; border-radius:.6em; background:var(--tint); color:var(--blue); flex-shrink:0; }
.vz-log .bi{ background:#fdecea !important; color:#c0392b !important; }
.vz-log .bi.ok{ background:#e7f6ec !important; color:#1a8f4c !important; }
.vz-av{ width:2.2em; height:2.2em; border-radius:50%; display:grid; place-items:center; font-size:.75em; font-weight:700; color:#fff; background:#135ca0; flex-shrink:0; }
.vz-av2{ background:#e9a100; } .vz-av3{ background:#6b5bd2; }
.vz-rows em{ font-style:normal; font-size:.75em; font-weight:600; padding:.3em .7em; border-radius:999px; white-space:nowrap; }
.st-done{ background:#e7f6ec; color:#14703c; }
.st-prog{ background:#fff4dc; color:#8a5a00; }
.st-new{ background:var(--tint); color:var(--blue); }
.st-bad{ background:#fdecea; color:#a5281c; }
.vz-switch{ background:#1b2a3c; border-radius:2.4cqw; padding:3cqw; display:flex; gap:3cqw; align-items:center; }
.vz-ports{ flex:1; display:grid; grid-template-columns:repeat(12, 1fr); gap:1.4cqw; }
.vz-ports i{ aspect-ratio:1.2; border-radius:.6cqw; background:#33475e; position:relative; }
.vz-ports i.on{ background:#2f4a63; box-shadow:inset 0 -.9cqw 0 #34d399; }
.vz-ports i.up{ box-shadow:inset 0 -.9cqw 0 #fbbf24; background:#2f4a63; }
.vz-sfp{ display:flex; flex-direction:column; gap:1.4cqw; }
.vz-sfp i{ width:6cqw; height:4cqw; border-radius:.6cqw; background:#33475e; box-shadow:inset 0 -.9cqw 0 #60a5fa; }
.vz-vlans{ display:flex; flex-wrap:wrap; gap:1.8cqw; }
.vz-vlans span{ font-size:.8em; font-weight:600; background:#fff; border:1px solid #e3e9f0; border-radius:999px; padding:.4em .8em; }
.vz-week{ display:flex; gap:1.2cqw; margin-top:auto; }
.vz-week i{ flex:1; height:3.2cqw; border-radius:.6cqw; background:#bfe8cf; }
.vz-week i.today{ background:#22a95b; }
.vz-bars{ display:flex; flex-direction:column; gap:3cqw; }
.vz-bars > div{ background:#fff; border:1px solid #e3e9f0; border-radius:2.4cqw; padding:2.6cqw 3cqw; display:flex; flex-direction:column; gap:1.8cqw; }
.vz-bars p{ margin:0; display:flex; justify-content:space-between; }
.vz-bars b{ font-weight:600; font-size:.95em; } .vz-bars small{ font-size:.78em; color:#6b7a8c; }
.vz-bars span{ height:1.8cqw; border-radius:99px; background:#e8eef5; overflow:hidden; }
.vz-bars span i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, #135ca0, #5aa5f0); }
.vz-cut{ margin-top:auto; display:flex; align-items:center; gap:.6em; font-size:.82em; font-weight:600; color:#14703c; }

/* Compact visuals inside small cards: hide the last row so nothing crowds */
.svc-viz .vz-rows > div:nth-child(n+4), .case-viz .vz-rows > div:nth-child(n+4){ display:none; }
.svc-viz .vz-week, .svc-viz .vz-cut{ display:none; }

/* ---------- Services ---------- */
.svc-cards-q .svc-viz{ height:auto; aspect-ratio:16/10; border-bottom:1px solid var(--line); background:#f6f8fb; }
.svc-cards-q{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.web-band{
  margin-top:20px; display:flex; align-items:center; gap:18px; padding:20px 24px; border-radius:var(--r-lg);
  background:var(--navy); color:#fff; text-decoration:none; position:relative; overflow:hidden;
  background-image:radial-gradient(500px 200px at 100% 0%, rgba(37,120,214,.4), transparent 70%);
}
.web-band:hover{ color:#fff; }
.web-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:var(--sky); font-size:20px; flex-shrink:0; }
.web-txt{ display:flex; flex-direction:column; flex:1; }
.web-txt b{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.web-txt small{ color:var(--on-dark); font-size:14.5px; }
.web-go{ font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; color:var(--sky); }

/* ---------- Industries ---------- */
.industries{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.industries li{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; font-weight:600; font-size:16px; box-shadow:var(--sh-1); }
.industries .bi{ width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:var(--tint); color:var(--blue); font-size:18px; flex-shrink:0; }

/* ---------- Why (3 columns) ---------- */
.why-grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* ---------- Work: filter + case cards ---------- */
.filter{ display:flex; flex-wrap:wrap; gap:8px; margin:-24px 0 28px; }
.filter button{ font:500 14.5px/1 var(--f); padding:10px 16px; border-radius:999px; border:1px solid var(--line-2); background:#fff; color:var(--ink); cursor:pointer; transition:all .15s; }
.filter button:hover{ border-color:var(--ink); }
.filter button.on{ background:var(--navy); border-color:var(--navy); color:#fff; }
.cases{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.case{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sh-1); transition:box-shadow .25s var(--ease), transform .25s var(--ease); }
.case:hover{ box-shadow:var(--sh-3); transform:translateY(-3px); }
.case[hidden]{ display:none; }
.case-viz{ position:relative; aspect-ratio:16/11; border-bottom:1px solid var(--line); }
.case-body{ padding:20px 22px 24px; }
.case-body h3{ font-size:18px; margin-top:12px; }
.case-body p{ color:var(--slate); font-size:15px; margin-top:6px; }
.case-body strong{ color:var(--ink); }

/* ---------- About ---------- */
.about{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,6vw,80px); align-items:start; }
.about-photo{ position:sticky; top:calc(var(--nav-h) + 24px); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3); }
.about-photo img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.about-copy p{ color:var(--slate); font-size:17px; margin-top:16px; }
.about-copy h2{ margin-bottom:8px; }
.team{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px; }
.member{ display:flex; gap:16px; background:var(--mist); border:1px solid var(--line); border-radius:var(--r); padding:16px; }
.member img{ width:76px; height:76px !important; border-radius:14px; object-fit:cover; flex-shrink:0; }
.member h3{ font-size:17px; }
.member .role{ color:var(--blue) !important; font-weight:600; font-size:14px !important; margin-top:2px !important; }
.member p{ font-size:14.5px !important; margin-top:6px !important; }
.member .li{ display:inline-block; margin-top:8px; color:var(--blue); font-size:18px; }

/* ---------- Service pages ---------- */
.svc-hero-viz .hv-browser{ transform:perspective(1800px) rotateY(-6deg) rotateX(2deg); }
.svc-hero-viz .hv-screen{ aspect-ratio:16/11.2; }
.svc-intro{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px 64px; align-items:start; margin-bottom:clamp(36px,5vw,56px); }
.svc-intro p{ color:var(--slate); font-size:18px; }
.incl-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.note-card{ display:flex; gap:18px; align-items:flex-start; margin-top:20px; padding:24px 26px; border-radius:var(--r); background:var(--tint); border:1px solid #d3e4f5; }
.note-card > .bi{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#fff; color:var(--blue); font-size:19px; flex-shrink:0; }
.note-card h3{ font-size:18px; } .note-card p{ color:var(--slate); margin-top:4px; }
.tools{ display:grid; grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr); gap:32px; align-items:start; }
.tools h2{ font-size:clamp(24px,2.6vw,30px); }
.chips{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.chips li{ padding:7px 14px; border-radius:999px; border:1px solid var(--line); font-size:14.5px; font-weight:500; color:var(--ink); background:#fff; }
.others{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.other{ display:flex; align-items:center; gap:14px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:var(--ink); box-shadow:var(--sh-1); transition:box-shadow .2s, border-color .2s; }
.other:hover{ color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-2); }
.other > span:nth-child(2){ display:flex; flex-direction:column; flex:1; min-width:0; }
.other b{ font-weight:600; font-size:16px; }
.other small{ color:var(--slate); font-size:13.5px; line-height:1.4; margin-top:2px; }
.other .svc-ic{ margin:0; width:38px; height:38px; flex-shrink:0; }
.other .go{ color:var(--blue); }
.other-web .svc-ic{ background:var(--blue); }
.others-lost{ margin:8px 0 32px; }

/* ---------- Contact, legal ---------- */
.map-frame{ margin-top:20px; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.map-frame iframe{ display:block; width:100%; height:220px; border:0; }
.muted{ color:var(--muted); font-weight:400; font-size:13.5px; }
.form-h{ font-size:22px; }
.form-sub{ color:var(--slate); margin:6px 0 24px; font-size:15px; }
.page-hero-sm{ padding-bottom:clamp(48px,6vw,72px) !important; }
.wrap-narrow{ max-width:820px; }
.legal{ color:var(--slate); font-size:16.5px; line-height:1.7; }
.legal .meta{ display:flex; flex-wrap:wrap; gap:8px 28px; padding:14px 18px; background:var(--mist); border:1px solid var(--line); border-radius:12px; font-size:14.5px; margin-bottom:24px; }
.legal h2{ font-size:24px; margin:40px 0 12px; }
.legal h3{ font-size:18px; margin:22px 0 8px; }
.legal p{ margin:0 0 12px; }
.legal ul{ margin:0 0 14px; padding-left:22px; display:grid; gap:4px; }
.legal strong{ color:var(--ink); }
.legal .info-card{ background:var(--mist); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:grid; gap:14px; }
.legal .info-row{ display:flex; gap:14px; align-items:flex-start; }
.legal .info-row > .bi{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--tint); color:var(--blue); flex-shrink:0; }
.legal .info-row .k{ font-weight:600; color:var(--ink); }

/* ---------- Footer extras ---------- */
.socials{ display:flex; gap:10px; margin-top:18px; }
.socials a{ width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.07); color:#fff !important; font-size:17px; }
.socials a:hover{ background:rgba(255,255,255,.14); text-decoration:none !important; }
.foot-links{ display:flex; gap:20px; flex-wrap:wrap; }
.foot-brand p + p{ margin-top:10px; }

/* ---------- WhatsApp button ---------- */
.wa-fab{ position:fixed; right:20px; bottom:20px; z-index:60; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:#1fa855; color:#fff !important; font-size:26px; box-shadow:0 12px 28px -8px rgba(31,168,85,.6); transition:transform .2s var(--ease); }
.wa-fab:hover{ transform:scale(1.06); }

/* ---------- Responsive (main site) ---------- */
@media (max-width: 1080px){
  .cases{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .industries{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .incl-3, .others{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .why-grid-3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .svc-cards-q{ grid-template-columns:1fr 1fr; max-width:none; }
  .about, .svc-intro, .tools{ grid-template-columns:1fr; }
  .about-photo{ position:static; max-width:520px; }
  .platforms .wrap{ flex-direction:column; align-items:flex-start; gap:16px; }
  .marquee{ width:100%; }
  .svc-hero-viz{ max-width:640px; }
  .svc-hero-viz .hv-browser{ transform:none; }
}
@media (max-width: 680px){
  .svc-cards-q, .cases, .incl-3, .others, .why-grid-3, .team{ grid-template-columns:1fr; }
  .industries{ grid-template-columns:1fr 1fr; gap:10px; }
  .industries li{ padding:14px; font-size:14.5px; gap:10px; }
  .industries .bi{ width:34px; height:34px; font-size:16px; }
  .web-band{ flex-wrap:wrap; }
  .certs{ gap:12px; }
  .certs li{ font-size:13.5px; }
  .filter{ margin-top:-16px; }
  .wa-fab{ right:14px; bottom:14px; width:50px; height:50px; font-size:24px; }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}