/* ============ SHARED DESIGN SYSTEM (mirrors homepage) ============ */
:root{
  --bg:#0a0b0e;
  --bg-elev:#0d0f13;
  --card:#12141a;
  --card-hover:#161a22;
  --border:rgba(255,255,255,0.09);
  --border-strong:rgba(255,255,255,0.18);
  --blue:#3d7fff;
  --blue-soft:#6ba0ff;
  --purple:#9b87f5;
  --emerald:#34d399;
  --text:#ffffff;
  --text-secondary:#b7bec9;
  --text-tertiary:#828a96;
  --radius:16px;
  --radius-sm:10px;
  --ease:cubic-bezier(.16,.8,.24,1);
}
[data-theme="light"]{
  --bg:#f7f7f8; --bg-elev:#ffffff; --card:#ffffff; --card-hover:#fbfbfc;
  --border:rgba(10,11,14,0.1); --border-strong:rgba(10,11,14,0.18);
  --text:#0a0b0e; --text-secondary:#454b54; --text-tertiary:#6c7078;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text); font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .4s var(--ease), color .4s var(--ease);
}
::selection{ background:var(--blue); color:#fff; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
.container{ max-width:1200px; margin:0 auto; padding:0 32px; }
h1,h2,h3,h4{ font-family:'Space Grotesk',sans-serif; letter-spacing:-0.02em; line-height:1.1; }
.mono{ font-family:'JetBrains Mono',monospace; }
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:0.06em; color:var(--blue-soft);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--emerald); box-shadow:0 0 8px var(--emerald); }

section{ position:relative; z-index:1; padding:96px 0; }
@media (max-width:768px){ section{ padding:64px 0; } .container{ padding:0 20px; } }
.section-head{ max-width:600px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(28px,4vw,42px); font-weight:600; margin-bottom:14px; letter-spacing:-0.02em; }
.section-head p{ color:var(--text-secondary); font-size:16.5px; line-height:1.6; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

::view-transition-old(root){ animation:vtFadeOut .35s var(--ease) forwards; }
::view-transition-new(root){ animation:vtFadeIn .45s var(--ease) forwards; }
@keyframes vtFadeOut{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes vtFadeIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* ============ CUSTOM CURSOR ============ */
@media (pointer:fine) and (hover:hover){
  body.has-custom-cursor{ cursor:none; }
  body.has-custom-cursor a, body.has-custom-cursor button, body.has-custom-cursor input,
  body.has-custom-cursor textarea, body.has-custom-cursor [role="tab"]{ cursor:none; }
}
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; will-change:transform; opacity:0; transition:opacity .3s var(--ease);
}
.cursor-dot{ width:6px; height:6px; background:var(--text); transform:translate3d(-50%,-50%,0); }
.cursor-ring{
  width:32px; height:32px; border:1px solid color-mix(in srgb, var(--text) 45%, transparent);
  transform:translate3d(-50%,-50%,0);
  transition:opacity .3s var(--ease), width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.cursor-ring.is-hovering{
  width:52px; height:52px; background:color-mix(in srgb, var(--text) 6%, transparent);
  border-color:color-mix(in srgb, var(--text) 65%, transparent);
}
.cursor-dot.is-visible, .cursor-ring.is-visible{ opacity:1; }
.cursor-ring.is-hovering ~ .cursor-dot{ opacity:0; }

/* ============ NAV ============ */
header{
  position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:50;
  width:90vw; max-width:1400px; height:76px; border-radius:9999px;
  background:rgba(10,10,15,0.45);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
  animation:headerFadeIn .7s var(--ease) both;
  overflow:hidden;
}
@keyframes headerFadeIn{ from{ opacity:0; transform:translateX(-50%) translateY(-14px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:100%; padding:0 14px 0 28px; max-width:none; margin:0; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; }
.logo-mark{
  width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--blue), var(--purple));
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700; color:#fff;
  letter-spacing:0.03em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 2px 8px rgba(0,0,0,0.28);
}
.nav-links{ display:flex; align-items:center; gap:40px; }
.nav-links a{ font-size:14.5px; color:var(--text-secondary); position:relative; transition:color .3s var(--ease), transform .3s var(--ease); display:inline-block; }
.nav-links a:hover{ transform:translateY(-2px); }
.nav-links a::after{ content:''; position:absolute; bottom:-6px; left:0; width:0; height:1px; background:var(--blue-soft); transition:width .3s var(--ease); }
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:14px; }

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:11px; font-size:14.5px; font-weight:500; border:1px solid transparent;
  overflow:hidden; white-space:nowrap; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.btn-primary{
  background:linear-gradient(135deg, #4d8aff, #6a5ff0 55%, #8a5cf6); color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset, 0 8px 20px -10px color-mix(in srgb, var(--blue) 45%, transparent);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease), border-color .3s;
}
.btn-primary:hover{
  transform:translateY(-2px); filter:brightness(1.04);
  box-shadow:0 0 0 1px rgba(255,255,255,0.1) inset, 0 12px 26px -10px color-mix(in srgb, var(--blue) 50%, transparent);
}
.btn-secondary{ background:var(--card); color:var(--text); border-color:var(--border); }
.btn-secondary:hover{ border-color:var(--border-strong); transform:translateY(-2px); background:var(--card-hover); }
.btn-sm{ padding:10px 20px; font-size:13.5px; }
.ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,0.35); transform:scale(0); animation:ripple .6s ease-out; pointer-events:none; }
@keyframes ripple{ to{ transform:scale(3.2); opacity:0; } }

.nav-toggle{ display:none; width:40px; height:40px; border:1px solid var(--border); border-radius:9px; background:var(--card); align-items:center; justify-content:center; }
.nav-toggle svg{ width:18px; height:18px; }
@media (max-width:900px){ .nav-links{ display:none; } .nav-toggle{ display:flex; } .nav-actions .btn-primary.desktop-only{ display:none; } }

.mobile-menu{
  position:fixed; top:108px; left:0; right:0; z-index:49; background:var(--bg-elev); border-bottom:1px solid var(--border);
  padding:24px 20px 32px; display:flex; flex-direction:column; gap:20px;
  transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .35s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-menu a{ font-size:16px; color:var(--text-secondary); }

.back-link{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-secondary);
  padding:9px 16px 9px 12px; border:1px solid var(--border); border-radius:30px; background:var(--card);
  transition:all .3s var(--ease);
}
.back-link:hover{ color:var(--text); border-color:var(--border-strong); transform:translateX(-3px); }
.back-link svg{ width:15px; height:15px; }

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.stagger > *{ transition-delay:calc(var(--i,0) * 80ms); }

/* ============ SHARED CARD ============ */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
  position:relative; overflow:hidden;
}

/* ============ BACK TO TOP ============ */
.back-to-top{
  position:fixed; bottom:28px; right:28px; z-index:40; width:46px; height:46px; border-radius:50%;
  background:var(--card); border:1px solid var(--border); color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), border-color .3s, color .3s;
}
.back-to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover{ border-color:var(--blue-soft); color:var(--blue-soft); }
.back-to-top svg{ width:18px; height:18px; }

/* magnetic wrapper */
.magnetic{ display:inline-block; }

/* ============ FOOTER ============ */
.footer-minimal{ border-top:1px solid var(--border); padding:32px 0; }
.footer-minimal-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-minimal-inner p{ color:var(--text-secondary); font-size:13.5px; }
.social-row{ display:flex; gap:12px; }
.social-icon{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:all .3s var(--ease); }
.social-icon:hover{ border-color:var(--blue-soft); color:var(--blue-soft); transform:translateY(-3px); }
.social-icon svg{ width:16px; height:16px; }

/* ============ SERVICE PAGE — HERO ============ */
.service-hero{ padding:168px 0 90px; text-align:center; position:relative; }
@media (max-width:768px){ .service-hero{ padding:140px 0 60px; } }
.service-hero .back-link{ margin-bottom:34px; }
.service-hero .eyebrow{ justify-content:center; }
.service-hero h1{ font-size:clamp(34px,5.4vw,58px); font-weight:600; letter-spacing:-0.03em; margin:0 auto 18px; max-width:820px; }
.service-hero .subtitle{ color:var(--text-secondary); font-size:17.5px; max-width:560px; margin:0 auto 34px; line-height:1.65; }
.badges-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.badge{
  font-family:'JetBrains Mono',monospace; font-size:12px; padding:7px 14px; border-radius:20px;
  border:1px solid var(--border-strong); color:var(--text-secondary); background:var(--card);
  transition:all .3s var(--ease);
}
.badge:hover{ color:var(--blue-soft); border-color:var(--blue-soft); transform:translateY(-2px); }

/* ============ OVERVIEW ============ */
.overview-text{ max-width:760px; }
.overview-text p{ color:var(--text-secondary); font-size:16.5px; line-height:1.8; margin-bottom:16px; }

/* ============ PROBLEMS ============ */
.problems-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:560px){ .problems-grid{ grid-template-columns:1fr; } }
.problem-card{ padding:18px 20px; display:flex; align-items:center; gap:14px; }
.problem-card:hover{ transform:translateY(-3px); border-color:var(--border-strong); background:var(--card-hover); }
.problem-icon{
  width:38px; height:38px; border-radius:10px; margin-bottom:0; color:#f0a5a5; flex-shrink:0;
  background:color-mix(in srgb, #f0a5a5 12%, transparent); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.problem-icon svg{ width:18px; height:18px; }
.problem-card h4{ font-size:15px; font-weight:600; margin-bottom:0; }

/* ============ BENEFITS ============ */
.benefits-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .benefits-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .benefits-grid{ grid-template-columns:1fr; } }
.benefit-card{ padding:26px 22px; text-align:left; }
.benefit-card:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--emerald) 45%, var(--border)); box-shadow:0 20px 46px -28px color-mix(in srgb, var(--emerald) 35%, transparent); }
.benefit-icon{
  width:38px; height:38px; border-radius:10px; margin-bottom:14px; color:var(--emerald);
  background:color-mix(in srgb, var(--emerald) 14%, transparent); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.benefit-icon svg{ width:18px; height:18px; }
.benefit-card h4{ font-size:15.5px; font-weight:600; margin-bottom:6px; }
.benefit-card p{ color:var(--text-tertiary); font-size:13px; line-height:1.55; }

/* ============ TECH LOGOS ============ */
.tech-logos-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.tech-logo{
  display:flex; align-items:center; gap:9px; padding:12px 18px; border-radius:12px;
  background:var(--card); border:1px solid var(--border); color:var(--text-secondary); font-size:13.5px; font-weight:500;
  transition:all .3s var(--ease);
}
.tech-logo:hover{ color:var(--text); border-color:var(--blue-soft); transform:translateY(-3px); }
.tech-logo svg{ width:18px; height:18px; }

/* ============ SERVICE CTA ============ */
.service-cta{ text-align:center; }
.service-cta-box{
  border-radius:24px; padding:60px 40px; position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--border);
}
.service-cta-box h2{ font-size:clamp(26px,3.6vw,38px); font-weight:600; margin-bottom:14px; position:relative; }
.service-cta-box p{ color:var(--text-secondary); font-size:15.5px; max-width:460px; margin:0 auto 30px; position:relative; line-height:1.6; }
.service-cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; }