/* =========================================================
   DESIGN TOKENS
   Palette: Midnight Ink / Signal Violet / Flare Pink / Mint Pulse / Cloud
   Type: Space Grotesk (display) + Inter (body) + JetBrains Mono (utility)
   ========================================================= */
:root{
  --ink:        #150E2B;
  --ink-soft:   #241a42;
  --violet:     #7C3AED;
  --violet-2:   #A78BFA;
  --pink:       #FF4D8D;
  --mint:       #2EE6A6;
  --cloud:      #FAF8FF;
  --muted:      #6b6485;
  --line:       rgba(21,14,43,0.10);
  --line-dark:  rgba(255,255,255,0.12);

  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --shadow-lift: 0 20px 60px -20px rgba(21,14,43,0.35);
  --shadow-soft: 0 10px 30px -12px rgba(21,14,43,0.18);

  --maxw: 1180px;
}

@font-face{ font-family:'sg-fallback'; src:local('Arial'); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:var(--cloud);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk', 'sg-fallback', sans-serif;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.02em;
}
p{ margin:0 0 1em; color:var(--muted); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--violet);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';
  width:7px; height:7px; border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 0 4px rgba(255,77,141,0.18);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px;
  border-radius:999px;
  font-weight:600; font-size:.95rem;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary{
  background:var(--ink);
  color:#fff;
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); }
}
.btn-outline{
  border-color:var(--line);
  color:var(--ink);
  background:#fff;
}
@media (hover:hover) and (pointer:fine){
  .btn-outline:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); }
}
.btn-accent{
  background:linear-gradient(135deg, var(--violet), var(--pink));
  color:#fff;
}
@media (hover:hover) and (pointer:fine){
  .btn-accent:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(124,58,237,.5); }
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,248,255,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; }
.brand-mark{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg, var(--violet), var(--pink));
  position:relative;
}
.brand-mark::after{
  content:'';
  position:absolute; inset:8px;
  border-radius:4px;
  background:var(--cloud);
}
.nav-links{ display:flex; gap:34px; align-items:center; }
.nav-links a{ font-size:.94rem; font-weight:500; color:var(--ink); opacity:.8; }
.nav-links a:hover{ opacity:1; }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; background:none; border:0; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:90px 0 120px;
  background:var(--ink);
  color:#fff;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(124,58,237,0.45), transparent 60%),
    radial-gradient(500px 400px at 85% 10%, rgba(255,77,141,0.35), transparent 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(46,230,166,0.15), transparent 60%);
  pointer-events:none;
}
.hero .wrap{ position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
.hero h1{ font-size:clamp(2.4rem, 4.6vw, 3.6rem); color:#fff; }
.hero h1 em{ font-style:normal; background:linear-gradient(135deg,var(--mint),var(--violet-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ color:rgba(255,255,255,.72); font-size:1.08rem; max-width:480px; }
.hero-actions{ display:flex; gap:16px; margin-top:30px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:28px; margin-top:46px; }
.hero-meta div b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1.5rem; color:#fff; }
.hero-meta div span{ font-size:.78rem; color:rgba(255,255,255,.55); font-family:'JetBrains Mono',monospace; }

/* Signature device duo */
.device-stage{ position:relative; height:420px; }
.device-browser{
  position:absolute; top:10px; left:0; width:78%;
  border-radius:14px; background:#100a24; border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-lift);
  transform:rotate(-6deg);
  animation:float1 6s ease-in-out infinite;
}
.device-browser .bar{ display:flex; gap:6px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.device-browser .bar span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.25); }
.device-browser .screen{ padding:22px; }
.device-browser .line{ height:9px; border-radius:5px; background:rgba(255,255,255,.14); margin-bottom:10px; }
.device-browser .line.short{ width:55%; }
.device-browser .blob{
  margin-top:16px; height:90px; border-radius:10px;
  background:linear-gradient(135deg, var(--violet), var(--pink));
  opacity:.85;
}
.device-phone{
  position:absolute; right:6px; bottom:-10px; width:150px; height:300px;
  background:#100a24; border-radius:32px; border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-lift);
  transform:rotate(8deg);
  animation:float2 7s ease-in-out infinite;
}
.device-phone::before{
  content:'';
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:38px; height:5px; border-radius:4px; background:rgba(255,255,255,.2);
}
.device-phone .screen{ position:absolute; inset:26px 10px; border-radius:20px; overflow:hidden; }
.device-phone .card{ height:38%; background:linear-gradient(135deg, var(--mint), var(--violet-2)); }
.device-phone .row{ height:9px; margin:12px 14px; border-radius:5px; background:rgba(255,255,255,.15); }
.device-link{
  position:absolute; left:58%; top:44%; font-family:'JetBrains Mono',monospace;
  font-size:.68rem; letter-spacing:.08em; color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  padding:5px 10px; border-radius:999px; backdrop-filter:blur(4px);
}
@keyframes float1{ 0%,100%{ transform:rotate(-6deg) translateY(0);} 50%{ transform:rotate(-4deg) translateY(-10px);} }
@keyframes float2{ 0%,100%{ transform:rotate(8deg) translateY(0);} 50%{ transform:rotate(6deg) translateY(-14px);} }
@media (prefers-reduced-motion:reduce){ .device-browser,.device-phone{ animation:none; } }

/* ---------- Sections ---------- */
section{ padding:100px 0; }
.section-head{ max-width:640px; margin:0 auto 56px; text-align:center; }
.section-head.left{ margin:0 0 48px; text-align:left; }
.section-head h2{ font-size:clamp(1.8rem,3vw,2.4rem); }

/* Bento services grid */
.bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
}
.bento .card{ grid-column:span 3; }
.bento .card.wide{ grid-column:span 4; }
.bento .card.narrow{ grid-column:span 2; }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px; transition:transform .2s ease, box-shadow .2s ease;
  contain:content;
}
@media (hover:hover) and (pointer:fine){
  .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
}
.card .icon{
  width:44px; height:44px; border-radius:12px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--violet), var(--pink));
  color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700;
}
.card h3{ font-size:1.15rem; }
.card p{ margin:0; font-size:.95rem; }

/* Process strip */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.process .step{ position:relative; padding-top:34px; }
.process .step .num{
  font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--pink);
  position:absolute; top:0; left:0;
}
.process .step h4{ font-size:1.05rem; margin-bottom:8px; }
.process .step p{ font-size:.92rem; margin:0; }

/* Client / portfolio grid */
.clients-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.client-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px; display:flex; flex-direction:column; gap:14px;
  transition:transform .2s ease, box-shadow .2s ease;
  contain:content;
}
@media (hover:hover) and (pointer:fine){
  .client-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
}
.client-logo{
  width:56px; height:56px; border-radius:12px; object-fit:contain;
  background:var(--cloud); border:1px solid var(--line); padding:8px;
}
.client-card h3{ font-size:1.05rem; margin:0; }
.client-card p{ font-size:.9rem; margin:0; flex-grow:1; }
.client-card .visit{
  font-family:'JetBrains Mono',monospace; font-size:.75rem; color:var(--violet);
  display:inline-flex; align-items:center; gap:6px;
}
.empty-state{
  text-align:center; padding:60px 20px; border:1px dashed var(--line); border-radius:var(--radius-md); color:var(--muted);
}

/* CTA band */
.cta-band{
  background:var(--ink); color:#fff; border-radius:var(--radius-lg);
  padding:60px; display:flex; align-items:center; justify-content:space-between; gap:30px;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(500px 300px at 90% 0%, rgba(124,58,237,.5), transparent 60%);
}
.cta-band h2{ color:#fff; position:relative; font-size:1.8rem; }
.cta-band p{ color:rgba(255,255,255,.7); position:relative; margin:0; }
.cta-band .actions{ position:relative; flex-shrink:0; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:7px; }
.field input, .field textarea{
  width:100%; padding:13px 15px; border-radius:var(--radius-sm);
  border:1px solid var(--line); font-family:inherit; font-size:.95rem;
  background:#fff;
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--violet); outline-offset:1px; }
.contact-info .item{ display:flex; gap:14px; margin-bottom:22px; align-items:flex-start; }
.contact-info .item .ic{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:var(--cloud); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; color:var(--violet); font-size:.8rem;
}

/* Footer */
footer{ background:var(--ink); color:rgba(255,255,255,.6); padding:60px 0 30px; }
footer .wrap{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; }
footer .brand{ color:#fff; }
footer .cols{ display:flex; gap:60px; }
footer .col h5{ color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; font-family:'JetBrains Mono',monospace; margin-bottom:14px; }
footer .col a{ display:block; margin-bottom:10px; font-size:.9rem; opacity:.75; }
footer .bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding-top:24px; font-size:.8rem; text-align:center; }

/* Alerts */
.alert{ padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:20px; font-size:.9rem; }
.alert-success{ background:rgba(46,230,166,.15); color:#0d7a56; border:1px solid rgba(46,230,166,.4); }
.alert-error{ background:rgba(255,77,141,.12); color:#b8134f; border:1px solid rgba(255,77,141,.4); }

/* Responsive */
@media (max-width:900px){
  .nav-links{ display:none; }
  .hero .wrap{ grid-template-columns:1fr; }
  .device-stage{ height:340px; margin-top:20px; }
  .bento{ grid-template-columns:1fr 1fr; }
  .bento .card, .bento .card.wide, .bento .card.narrow{ grid-column:span 1; }
  .process{ grid-template-columns:1fr 1fr; }
  .clients-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; text-align:center; padding:40px; }
}
@media (max-width:560px){
  .process{ grid-template-columns:1fr; }
  .clients-grid{ grid-template-columns:1fr; }
}

/* Mobile nav fix - prevent brand name and button wrapping */
@media (max-width:480px){
  .brand{ font-size:1rem; gap:8px; }
  .brand-mark{ width:28px; height:28px; }
  .nav .wrap{ height:64px; }
  .nav-cta .btn{ padding:10px 16px; font-size:.85rem; white-space:nowrap; }
}

/* Split header (heading + button) stacks cleanly on mobile instead of squishing into an odd shape */
.split-head{ display:flex; justify-content:space-between; align-items:flex-end; }
@media (max-width:900px){
  .split-head{ flex-direction:column; align-items:flex-start; gap:18px; }
}

/* Fix mobile grid overflow - cards were pushing past the screen edge */
.bento .card,
.bento .card.wide,
.bento .card.narrow{
  min-width: 0;
}
.wrap{
  overflow-x: hidden;
  overflow-y: visible;
}

/* Stack bento cards one-per-row on phones for a cleaner read */
@media (max-width:600px){
  .bento{ grid-template-columns:1fr; }
}

/* Performance: blurred sticky nav + floating hero animations cause scroll
   jank on many phones. Disable both below the tablet breakpoint.
   Nav is also switched from sticky to normal flow on mobile so hero
   content never slides underneath and disappears behind it. */
@media (max-width:900px){
  .nav{
    position:static;
    backdrop-filter:none;
    background:rgba(250,248,255,0.98);
  }
  .device-browser,
  .device-phone{
    animation:none;
  }
}

/* Fix: touching heading/label text (especially the gradient-clipped hero
   text) made the browser pause to check for a text-selection gesture
   before committing to a scroll, causing a "stuck then jump" feel.
   These elements never need to be selectable, so disable selection on
   them entirely — touch-drag now goes straight to scrolling. */
h1, h2, h3, h4, .eyebrow, .btn{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}