/* ============================================================
   TOKENS
   ============================================================ */

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:#f7f6f2;
  color:#0a0b12;
  font-family:'Inter', sans-serif;
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:'Manrope', sans-serif; font-weight:800; letter-spacing:-0.02em; line-height:1.08;}
.wrap{max-width:1280px; margin:0 auto; padding:0 6vw;}
.dark{background:#0a0b12; color:#f7f6f2;}
section{position:relative;}
.pad{padding:7.5rem 0;}
@media(max-width:768px){.pad{padding:4.5rem 0;}}

::selection{background:#6c5cff; color:#fff;}

.grain-overlay{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* eyebrow label */
.eyebrow{
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:'Inter', sans-serif; font-weight:600; font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase;
  color:#8b7cff;
}
.dark .eyebrow{color:#22c1e8;}
section:not(.dark) .eyebrow{color:#6c5cff;}
.eyebrow::before{content:""; width:18px; height:2px; background:currentColor; display:inline-block; border-radius:2px;}

.section-head{max-width:640px; margin-bottom:3.2rem;}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem); margin-top:0.7rem;}
.section-head p{color:#5c5f74; margin-top:1rem; max-width:52ch; font-size:1.02rem;}
.dark .section-head p{color:#9a9cb3;}

/* reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.22,.68,0,1), transform .8s cubic-bezier(.22,.68,0,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.d1{transition-delay:.08s;} .d2{transition-delay:.16s;} .d3{transition-delay:.24s;} .d4{transition-delay:.32s;} .d5{transition-delay:.4s;} .d6{transition-delay:.48s;}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:'Inter', sans-serif; font-weight:600; font-size:0.9rem; letter-spacing:0.01em;
  padding:0.92rem 1.6rem; border-radius:9px;
  transition:transform .3s cubic-bezier(.22,.68,0,1), background-position .4s cubic-bezier(.22,.68,0,1), color .3s cubic-bezier(.22,.68,0,1), box-shadow .3s cubic-bezier(.22,.68,0,1), border-color .3s cubic-bezier(.22,.68,0,1);
}
.btn-solid{background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%); background-size:160% 100%; background-position:0% 0%; color:#fff; box-shadow:0 1px 0 0 rgba(255,255,255,0.15) inset, 0 10px 24px -12px rgba(108,92,255,0.5);}
.btn-solid:hover{transform:translateY(-1px); background-position:100% 0%; box-shadow:0 1px 0 0 rgba(255,255,255,0.2) inset, 0 14px 28px -12px rgba(108,92,255,0.55);}
.btn-ghost{border:1px solid rgba(247,246,242,0.10); color:#f7f6f2;}
.dark .btn-ghost{border-color:rgba(247,246,242,0.10); color:#f7f6f2;}
section:not(.dark) .btn-ghost{border-color:rgba(10,11,18,0.09); color:#0a0b12;}
.btn-ghost:hover{background:rgba(255,255,255,0.05); border-color:rgba(108,92,255,0.5); transform:translateY(-1px);}
.btn .arrow{transition:transform .35s cubic-bezier(.22,.68,0,1);}
.btn:hover .arrow{transform:translateX(4px);}
.link-u{
  display:inline-flex; align-items:center; gap:0.45rem; font-weight:600; font-size:0.92rem;
  border-bottom:1px solid currentColor; padding-bottom:2px; transition:color .3s cubic-bezier(.22,.68,0,1), gap .3s cubic-bezier(.22,.68,0,1);
}
.link-u:hover{color:#6c5cff; gap:0.7rem;}

/* ============================================================
   CUSTOM CURSOR (desktop only)
   ============================================================ */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
  transition:opacity .3s ease;
}
.cursor-dot{width:6px; height:6px; background:#8b7cff;}
.cursor-ring{width:32px; height:32px; border:1px solid rgba(139,124,255,0.55); transition:width .25s cubic-bezier(.22,.68,0,1), height .25s cubic-bezier(.22,.68,0,1), border-color .25s cubic-bezier(.22,.68,0,1), transform .06s linear;}
.cursor-ring.hover{width:52px; height:52px; border-color:#8b7cff;}
@media (pointer:coarse){.cursor-dot, .cursor-ring{display:none;}}

/* ============================================================
   NAVIGATION
   ============================================================ */
.topbar{
  background:#0a0b12; color:#9a9cb3; font-size:0.76rem;
  padding:0.5rem 0; border-bottom:1px solid rgba(247,246,242,0.10);
}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center;}
.topbar a:hover{color:#f7f6f2;}
@media(max-width:700px){.topbar{display:none;}}

header{
  position:sticky; top:0; z-index:200;
  background:rgba(10,11,18,0.0);
  transition:background .4s cubic-bezier(.22,.68,0,1), padding .35s cubic-bezier(.22,.68,0,1), backdrop-filter .4s cubic-bezier(.22,.68,0,1), border-color .4s cubic-bezier(.22,.68,0,1);
  border-bottom:1px solid transparent;
}
header.solid{
  background:rgba(10,11,18,0.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-color:rgba(247,246,242,0.10);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:1.35rem 6vw; transition:padding .35s cubic-bezier(.22,.68,0,1);}
header.solid .nav-inner{padding:0.9rem 6vw;}
.logo{display:flex; align-items:center; gap:0.6rem; font-family:'Manrope', sans-serif; font-weight:800; font-size:1.2rem; color:#f7f6f2;}
.logo .dot{width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg, #8b7cff, #22c1e8);}
.logo-img{height:34px; width:auto; display:block;}
.footer-logo-img{height:38px;}

.nav-links{display:flex; align-items:center; gap:2.1rem;}
.nav-links > li{position:relative;}
.nav-links > li > a{color:#f7f6f2; font-size:0.9rem; font-weight:500; display:flex; align-items:center; gap:0.3rem; padding:0.5rem 0;}
.nav-links > li > a:hover{color:#8b7cff;}

.mega{
  position:absolute; top:100%; left:50%; transform:translate(-50%,10px);
  width:560px; background:#11131d; border:1px solid rgba(247,246,242,0.10); border-radius:16px;
  padding:1.8rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
  opacity:0; pointer-events:none; transition:opacity .3s cubic-bezier(.22,.68,0,1), transform .3s cubic-bezier(.22,.68,0,1);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
}
.nav-links > li:hover .mega{opacity:1; pointer-events:auto; transform:translate(-50%,0);}
.mega h5{font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:#9a9cb3; margin-bottom:0.9rem; font-family:'Inter', sans-serif; font-weight:600;}
.mega ul li{margin-bottom:0.65rem;}
.mega ul li a{font-size:0.88rem; color:#f7f6f2; transition:color .25s cubic-bezier(.22,.68,0,1), padding-left .25s cubic-bezier(.22,.68,0,1);}
.mega ul li a:hover{color:#8b7cff; padding-left:4px;}

.nav-cta{display:flex; align-items:center; gap:1.4rem;}
.hamburger{display:none; flex-direction:column; gap:5px; width:24px; z-index:300;}
.hamburger span{height:2px; width:100%; background:#f7f6f2; transition:transform .3s cubic-bezier(.22,.68,0,1), opacity .3s cubic-bezier(.22,.68,0,1);}
@media(max-width:960px){
  .nav-links, .nav-cta .btn{display:none;}
  .hamburger{display:flex;}
}

.mobile-menu{
  position:fixed; inset:0; background:#0a0b12; z-index:250;
  transform:translateY(-100%); transition:transform .5s cubic-bezier(.22,.68,0,1);
  display:flex; flex-direction:column; padding:6.5rem 8vw 3rem; overflow-y:auto;
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu a.mm-link{
  font-family:'Manrope', sans-serif; font-weight:700; font-size:1.7rem; color:#f7f6f2;
  padding:0.75rem 0; border-bottom:1px solid rgba(247,246,242,0.10);
  opacity:0; transform:translateY(14px); transition:opacity .5s cubic-bezier(.22,.68,0,1), transform .5s cubic-bezier(.22,.68,0,1);
}
.mobile-menu.open a.mm-link{opacity:1; transform:translateY(0);}
.mobile-menu .btn{margin-top:2rem; align-self:flex-start;}
.mm-close{position:absolute; top:1.6rem; right:6vw; width:26px; height:26px;}
.mm-close span{position:absolute; width:100%; height:2px; background:#f7f6f2; top:50%; left:0; }
.mm-close span:first-child{transform:rotate(45deg);}
.mm-close span:last-child{transform:rotate(-45deg);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:#0a0b12; color:#f7f6f2;
  padding:6.5rem 0 5rem;
  overflow:hidden;
  position:relative;
}
.hero-glow{
  position:absolute; width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle, rgba(108,92,255,0.16), transparent 65%);
  top:-380px; right:-280px; z-index:0; filter:blur(10px);
}
.hero-grid-lines{
  position:absolute; inset:0; z-index:0; opacity:0.5;
  background-image:linear-gradient(rgba(247,246,242,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(247,246,242,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 60% 20%, black 10%, transparent 65%);
}
.hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; gap:3vw; align-items:center;}
.hero-copy .eyebrow{margin-bottom:1.3rem;}
.hero-copy h1{font-size:clamp(2.6rem,4.9vw,4.15rem); max-width:14ch; letter-spacing:-0.03em;}
.hero-copy h1 .accent{background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-copy p{color:#9a9cb3; font-size:1.06rem; max-width:46ch; margin:1.4rem 0 2.1rem;}
.hero-btns{display:flex; gap:1rem; flex-wrap:wrap; align-items:center;}
.scroll-cue{
  margin-top:2.6rem; display:inline-flex; align-items:center; gap:0.6rem; font-size:0.86rem; color:#9a9cb3;
  cursor:pointer;
}
.scroll-cue span.arrow-d{display:inline-block; animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);}}

/* HERO VISUAL: AI network + floating cards */
.hero-visual{position:relative; height:460px;}
#aiCanvas{position:absolute; inset:0; width:100%; height:100%;}
.float-card{
  position:absolute; background:rgba(24,27,40,0.75); border:1px solid rgba(247,246,242,0.10); border-radius:14px;
  padding:0.9rem 1.1rem; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 45px -18px rgba(0,0,0,0.55);
  transition:transform .12s linear;
}
.float-card .fc-label{font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; color:#9a9cb3; margin-bottom:0.3rem;}
.float-card .fc-value{font-family:'Manrope', sans-serif; font-weight:800; font-size:1.35rem;}
.float-card .fc-value.up{color:#22c1e8;}
.fc-1{top:6%; left:2%;}
.fc-2{top:18%; right:0%;}
.fc-3{bottom:10%; left:12%;}
.fc-4{bottom:26%; right:10%;}
.fc-mini-chart{width:70px; height:22px; margin-top:0.4rem;}
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{height:340px; margin-top:1rem;}
}

/* ============================================================
   STATS
   ============================================================ */
.stats{background:#0a0b12; border-top:1px solid rgba(247,246,242,0.10); border-bottom:1px solid rgba(247,246,242,0.10); padding:3.4rem 0;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;}
.stat-num{font-family:'Manrope', sans-serif; font-weight:800; font-size:clamp(1.9rem,3vw,2.6rem); color:#f7f6f2;}
.stat-num .plus{color:#8b7cff;}
.stat-label{color:#9a9cb3; font-size:0.86rem; margin-top:0.4rem;}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr); row-gap:2.2rem;}}

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.svc-card{
  position:relative; padding:2.1rem; border-radius:20px; background:#ffffff;
  border:1px solid rgba(10,11,18,0.09); overflow:hidden;
  transition:transform .45s cubic-bezier(.22,.68,0,1), box-shadow .45s cubic-bezier(.22,.68,0,1), border-color .45s cubic-bezier(.22,.68,0,1);
}
.svc-card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .45s cubic-bezier(.22,.68,0,1);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,20%), rgba(108,92,255,0.10), transparent 60%);
}
.svc-card:hover{transform:translateY(-6px); box-shadow:0 30px 50px -24px rgba(20,20,40,0.25); border-color:rgba(108,92,255,0.35);}
.svc-card:hover::before{opacity:1;}
.svc-icon{
  width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%); margin-bottom:1.3rem;
  transition:transform .45s cubic-bezier(.22,.68,0,1);
}
.svc-card:hover .svc-icon{transform:rotate(-8deg) scale(1.06);}
.svc-icon svg{width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.8;}
.svc-card h3{font-size:1.18rem; margin-bottom:0.6rem; position:relative;}
.svc-card p{color:#5c5f74; font-size:0.92rem; position:relative;}
.svc-card .link-u{margin-top:1.1rem; font-size:0.85rem; position:relative;}
@media(max-width:960px){.services-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.services-grid{grid-template-columns:1fr;}}

/* ============================================================
   AI FLOW SECTION
   ============================================================ */
.ai-flow-row{
  display:flex; align-items:center; justify-content:space-between; gap:0; margin-top:3.5rem; flex-wrap:wrap;
}
.flow-node{
  display:flex; flex-direction:column; align-items:center; gap:0.7rem; text-align:center; width:110px;
}
.flow-dot{
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#11131d; border:1px solid rgba(108,92,255,0.35);
  font-family:'Manrope', sans-serif; font-weight:700; font-size:0.8rem; color:#f7f6f2;
  box-shadow:0 0 0 0 rgba(108,92,255,0.4);
  animation:pulseGlow 4.5s ease-in-out infinite;
  transition:border-color .3s cubic-bezier(.22,.68,0,1);
}
.flow-node:hover .flow-dot{border-color:rgba(108,92,255,0.85);}
.flow-node:nth-child(2) .flow-dot{animation-delay:.5s;}
.flow-node:nth-child(3) .flow-dot{animation-delay:1s;}
.flow-node:nth-child(4) .flow-dot{animation-delay:1.5s;}
.flow-node:nth-child(5) .flow-dot{animation-delay:2s;}
.flow-node:nth-child(6) .flow-dot{animation-delay:2.5s;}
@keyframes pulseGlow{
  0%,80%,100%{box-shadow:0 0 0 0 rgba(108,92,255,0.3);}
  40%{box-shadow:0 0 0 7px rgba(108,92,255,0);}
}
.flow-node span{font-size:0.82rem; color:#9a9cb3;}
.flow-line{flex:1; height:2px; min-width:24px; margin:0 -6px;
  background:linear-gradient(90deg, rgba(108,92,255,0.15), rgba(49,216,201,0.5), rgba(108,92,255,0.15));
  background-size:200% 100%; animation:flowMove 3s linear infinite;
  align-self:center; margin-top:-2.2rem;
}
@keyframes flowMove{ from{background-position:200% 0;} to{background-position:-200% 0;} }
@media(max-width:860px){
  .ai-flow-row{flex-direction:column; gap:1.6rem;}
  .flow-line{width:2px; height:32px; min-width:0; align-self:center; margin:0;}
}

/* ============================================================
   GROWTH ENGINE (circular)
   ============================================================ */
.engine-wrap{position:relative; width:520px; max-width:100%; aspect-ratio:1/1; margin:3.5rem auto 0;}
.engine-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:150px; height:150px; border-radius:50%;
  background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Manrope', sans-serif; font-weight:800; font-size:1.05rem; padding:1rem;
  box-shadow:0 0 40px rgba(108,92,255,0.3);
  color:#fff;
}
.engine-ring{
  position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(108,92,255,0.3);
  animation:spin 40s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.engine-node{
  position:absolute; width:96px; height:96px; margin:-48px; border-radius:50%;
  background:#11131d; border:1px solid rgba(247,246,242,0.10);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:0.78rem; font-weight:600; color:#f7f6f2; padding:0.5rem;
  cursor:pointer; transition:transform .3s cubic-bezier(.22,.68,0,1), border-color .3s cubic-bezier(.22,.68,0,1), background .3s cubic-bezier(.22,.68,0,1);
}
.engine-node:hover{transform:scale(1.12); border-color:#22c1e8; background:#1c2033;}
.engine-tip{
  position:absolute; bottom:120%; left:50%; transform:translateX(-50%) translateY(6px);
  background:#0a0b12; color:#f7f6f2; font-size:0.75rem; padding:0.5rem 0.8rem; border-radius:8px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .25s cubic-bezier(.22,.68,0,1), transform .25s cubic-bezier(.22,.68,0,1);
  border:1px solid rgba(247,246,242,0.10);
}
.engine-node:hover .engine-tip{opacity:1; transform:translateX(-50%) translateY(0);}
@media(max-width:560px){
  .engine-wrap{width:340px;}
  .engine-node{width:74px; height:74px; margin:-37px; font-size:0.68rem;}
  .engine-center{width:110px; height:110px; font-size:0.85rem;}
}

/* ============================================================
   WEB DEV SECTION (browser mockup)
   ============================================================ */
.webdev-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:5vw; align-items:center;}
.browser-mock{
  border-radius:16px; overflow:hidden; border:1px solid rgba(10,11,18,0.09);
  box-shadow:0 40px 70px -30px rgba(20,20,40,0.35);
  background:#ffffff;
}
.browser-bar{display:flex; align-items:center; gap:0.4rem; padding:0.7rem 1rem; background:#eceaf5; border-bottom:1px solid rgba(10,11,18,0.09);}
.browser-bar span{width:9px; height:9px; border-radius:50%; background:#d3d0e6;}
.browser-body{padding:1.6rem; background:linear-gradient(180deg, #fdfdff, #f3f2fb);}
.bm-nav{display:flex; justify-content:space-between; margin-bottom:1.4rem;}
.bm-nav .bm-logo{width:70px; height:10px; border-radius:4px; background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%);}
.bm-nav .bm-links{display:flex; gap:0.5rem;}
.bm-nav .bm-links span{width:34px; height:8px; border-radius:4px; background:#dcdaee;}
.bm-hero{height:200px; border-radius:12px; overflow:hidden; position:relative;}
.bm-hero img{width:100%; height:100%; object-fit:cover;}
.webdev-copy h2{font-size:clamp(1.9rem,3.4vw,2.7rem); margin-top:0.6rem;}
.webdev-copy p{color:#5c5f74; margin:1.1rem 0; max-width:48ch;}
.webdev-list{display:flex; flex-direction:column; gap:0.7rem; margin:1.4rem 0 1.8rem;}
.webdev-list li{display:flex; align-items:center; gap:0.6rem; font-size:0.94rem; color:#0a0b12;}
.webdev-list li::before{content:""; width:6px; height:6px; border-radius:50%; background:#6c5cff; flex-shrink:0;}
@media(max-width:900px){.webdev-grid{grid-template-columns:1fr;}}

/* ============================================================
   DATA DASHBOARD SECTION
   ============================================================ */
.dash-card{
  background:#11131d; border:1px solid rgba(247,246,242,0.10); border-radius:20px; padding:2.4rem;
  display:grid; grid-template-columns:1.3fr 1fr; gap:2rem;
}
.dash-metrics{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;}
.dash-metric h4{font-size:0.78rem; color:#9a9cb3; text-transform:uppercase; letter-spacing:0.06em; font-weight:500; margin-bottom:0.4rem;}
.dash-metric .val{font-family:'Manrope', sans-serif; font-weight:800; font-size:1.7rem; color:#f7f6f2;}
.dash-metric .val .up{color:#22c1e8; font-size:0.9rem; font-weight:700; margin-left:0.4rem;}
.dash-chart-wrap{display:flex; flex-direction:column; justify-content:center;}
.dash-chart-wrap svg{width:100%; height:140px;}
.dash-chart-wrap .chart-label{font-size:0.78rem; color:#9a9cb3; margin-bottom:0.6rem; text-transform:uppercase; letter-spacing:0.06em;}
@media(max-width:820px){.dash-card{grid-template-columns:1fr;}}

/* ============================================================
   PROCESS TIMELINE
   ============================================================ */
.process-row{display:flex; gap:0; position:relative; margin-top:3rem;}
.process-row::before{content:""; position:absolute; top:26px; left:5%; right:5%; height:1px; background:rgba(10,11,18,0.09);}
.proc-step{flex:1; text-align:left; padding:0 1rem; position:relative;}
.proc-num{
  width:52px; height:52px; border-radius:50%; background:#ffffff; border:1px solid rgba(10,11,18,0.09);
  display:flex; align-items:center; justify-content:center; font-family:'Manrope', sans-serif; font-weight:800; color:#6c5cff;
  margin-bottom:1.2rem; position:relative; z-index:1;
}
.proc-step h3{font-size:1.08rem; margin-bottom:0.5rem;}
.proc-step p{color:#5c5f74; font-size:0.9rem;}
@media(max-width:860px){
  .process-row{flex-direction:column; gap:2rem;}
  .process-row::before{display:none;}
  .proc-step{padding-left:1.5rem; border-left:2px solid rgba(10,11,18,0.09);}
}

/* ============================================================
   WHY US
   ============================================================ */
.why-head-row{display:grid; grid-template-columns:1fr 0.9fr; gap:4vw; align-items:end; margin-bottom:0;}
.why-photo{border-radius:16px; overflow:hidden; aspect-ratio:16/10; border:1px solid rgba(247,246,242,0.10);}
.why-photo img{width:100%; height:100%; object-fit:cover;}
@media(max-width:860px){.why-head-row{grid-template-columns:1fr;}}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(247,246,242,0.10); margin-top:3rem; border-radius:20px; overflow:hidden;}
.why-item{background:#0a0b12; padding:2.2rem;}
.why-item h3{font-size:1.08rem; margin-bottom:0.6rem; color:#f7f6f2;}
.why-item p{color:#9a9cb3; font-size:0.9rem;}
.why-item .wi-icon{width:36px; height:36px; border-radius:10px; background:rgba(108,92,255,0.15); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem;}
.why-item .wi-icon svg{width:18px; height:18px; stroke:#8b7cff; fill:none; stroke-width:1.8;}
@media(max-width:860px){.why-grid{grid-template-columns:1fr;}}

/* ============================================================
   CASE STUDIES
   ============================================================ */
.case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem;}
.case-card{border-radius:18px; overflow:hidden; background:#ffffff; border:1px solid rgba(10,11,18,0.09); transition:transform .4s cubic-bezier(.22,.68,0,1), box-shadow .4s cubic-bezier(.22,.68,0,1);}
.case-card:hover{transform:translateY(-6px); box-shadow:0 30px 55px -26px rgba(20,20,40,0.3);}
.case-visual{height:280px; position:relative; overflow:hidden; background:#0a0b12;}
.case-visual img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.68,0,1);}
.case-card:hover .case-visual img{transform:scale(1.06);}
.case-visual::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,11,18,0.05), rgba(10,11,18,0.35)); pointer-events:none;}
.case-visual .cv-tag{position:absolute; top:1rem; left:1rem; z-index:2; background:rgba(247,246,242,0.12); border:1px solid rgba(247,246,242,0.22); color:#fff; font-size:0.7rem; font-weight:600; letter-spacing:0.04em; padding:0.35rem 0.7rem; border-radius:6px; backdrop-filter:blur(6px);}

/* ============================================================
   PHONE FRAME (real screenshot inside a device mockup)
   ============================================================ */
.phone-frame-wrap{width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 30% 20%, #181b28, #0a0b12 70%); padding:1.1rem 0;}
.phone-frame{position:relative; width:160px; height:100%; max-height:320px; background:#0a0b12; border-radius:26px; padding:6px; box-shadow:0 20px 40px -18px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.06); transition:transform .5s cubic-bezier(.22,.68,0,1);}
.case-card:hover .phone-frame{transform:translateY(-4px) scale(1.02);}
.phone-frame .notch{position:absolute; top:6px; left:50%; transform:translateX(-50%); width:46%; height:16px; background:#0a0b12; border-radius:0 0 10px 10px; z-index:3;}
.phone-frame .screen{width:100%; height:100%; border-radius:20px; overflow:hidden; position:relative; background:#111;}
.phone-frame .screen img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
.case-body{padding:1.5rem;}
.case-body h3{font-size:1.05rem; margin-bottom:0.5rem;}
.case-body p{color:#5c5f74; font-size:0.88rem; margin-bottom:1rem;}
.case-metric{font-family:'Manrope', sans-serif; font-weight:800; color:#6c5cff; font-size:1.3rem;}
.case-metric-label{font-size:0.72rem; color:#5c5f74; text-transform:uppercase; letter-spacing:0.06em;}
@media(max-width:900px){.case-grid{grid-template-columns:1fr;}}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-wrap{position:relative; max-width:780px; margin:3rem auto 0; text-align:center;}
.testi-slide{display:none;}
.testi-slide.active{display:block; animation:fadeIn .6s cubic-bezier(.22,.68,0,1);}
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.testi-slide blockquote{font-family:'Manrope', sans-serif; font-weight:600; font-size:clamp(1.2rem,2.4vw,1.6rem); line-height:1.4; color:#f7f6f2;}
.testi-who{margin-top:1.6rem; display:flex; align-items:center; justify-content:center; gap:0.8rem;}
.testi-avatar{
  width:42px; height:42px; border-radius:50%; background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%);
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Manrope', sans-serif; font-weight:700; font-size:0.82rem;
}
.testi-name{font-weight:700; font-size:0.92rem; color:#f7f6f2;}
.testi-role{font-size:0.8rem; color:#9a9cb3;}
.testi-controls{display:flex; justify-content:center; gap:0.8rem; margin-top:2.2rem;}
.testi-controls button{width:40px; height:40px; border-radius:50%; border:1px solid rgba(247,246,242,0.10); color:#f7f6f2; display:flex; align-items:center; justify-content:center; transition:background .3s cubic-bezier(.22,.68,0,1), border-color .3s cubic-bezier(.22,.68,0,1);}
.testi-controls button:hover{background:rgba(255,255,255,0.06); border-color:#8b7cff;}

/* ============================================================
   TECH / TOOLS
   ============================================================ */
.tools-row{display:flex; flex-wrap:wrap; gap:0.9rem; justify-content:center; margin-top:2.6rem;}
.tool-chip{
  padding:0.65rem 1.2rem; border-radius:8px; border:1px solid rgba(10,11,18,0.09); font-size:0.84rem; font-weight:600;
  color:#5c5f74; background:#ffffff; transition:transform .3s cubic-bezier(.22,.68,0,1), border-color .3s cubic-bezier(.22,.68,0,1), color .3s cubic-bezier(.22,.68,0,1);
}
.tool-chip:hover{transform:translateY(-2px); border-color:#6c5cff; color:#6c5cff;}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{background:#0a0b12; color:#f7f6f2; text-align:center; padding:8rem 0; position:relative; overflow:hidden;}
#ctaCanvas{position:absolute; inset:0; width:100%; height:100%; opacity:0.85;}
.final-cta .wrap{position:relative; z-index:2;}
.final-cta h2{font-size:clamp(2rem,4.6vw,3.3rem); max-width:16ch; margin:1rem auto 1.2rem;}
.final-cta p{color:#9a9cb3; max-width:44ch; margin:0 auto 2.2rem;}
.final-cta .hero-btns{justify-content:center;}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:#11131d; color:#f7f6f2; padding:5rem 0 2rem; border-top:1px solid rgba(247,246,242,0.10);}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(247,246,242,0.10);}
.footer-brand p{color:#9a9cb3; margin-top:1rem; max-width:32ch; font-size:0.9rem;}
.footer-col h4{font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:#9a9cb3; margin-bottom:1.1rem;}
.footer-col ul{display:flex; flex-direction:column; gap:0.65rem;}
.footer-col a{font-size:0.9rem; color:#9a9cb3; transition:color .3s cubic-bezier(.22,.68,0,1);}
.footer-col a:hover{color:#8b7cff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:2rem; flex-wrap:wrap; gap:1rem;}
.footer-bottom p{font-size:0.78rem; color:#9a9cb3;}
.f-socials{display:flex; gap:1rem;}
.f-socials a{width:34px; height:34px; border-radius:50%; border:1px solid rgba(247,246,242,0.10); display:flex; align-items:center; justify-content:center; font-size:0.7rem; transition:border-color .3s cubic-bezier(.22,.68,0,1), color .3s cubic-bezier(.22,.68,0,1);}
.f-socials a:hover{border-color:#8b7cff; color:#8b7cff;}
@media(max-width:860px){.footer-top{grid-template-columns:1fr 1fr; row-gap:2.2rem;}}
@media(max-width:520px){.footer-top{grid-template-columns:1fr;}}

/* ============================================================
   PROJECTS (filterable portfolio)
   ============================================================ */
.proj-filters{display:flex; gap:0.7rem; flex-wrap:wrap; margin-bottom:2.6rem;}
.proj-filter-btn{
  padding:0.6rem 1.2rem; border-radius:8px; border:1px solid rgba(10,11,18,0.09); font-size:0.86rem; font-weight:600;
  color:#5c5f74; background:#ffffff; transition:all .3s cubic-bezier(.22,.68,0,1);
}
.proj-filter-btn.active{color:#fff; border-color:transparent; background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%);}
.proj-filter-btn:not(.active):hover{border-color:#6c5cff; color:#6c5cff;}
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.proj-card{
  border-radius:16px; overflow:hidden; position:relative; aspect-ratio:4/3;
  transition:opacity .4s cubic-bezier(.22,.68,0,1), transform .4s cubic-bezier(.22,.68,0,1);
}
.proj-card.hide{display:none;}
.proj-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.68,0,1);}
.proj-card:hover img{transform:scale(1.08);}
.proj-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.4rem;
  background:linear-gradient(0deg, rgba(10,11,18,0.92) 0%, rgba(10,11,18,0.15) 55%, transparent 100%);
}
.proj-cat{font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#22c1e8; margin-bottom:0.35rem;}
.proj-overlay h3{color:#fff; font-size:1.08rem;}
@media(max-width:900px){.proj-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.proj-grid{grid-template-columns:1fr;}}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; align-items:stretch;}.price-card{
  border-radius:20px; border:1px solid rgba(10,11,18,0.09); background:#ffffff; padding:2.2rem;
  display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.22,.68,0,1), box-shadow .4s cubic-bezier(.22,.68,0,1);
}
.price-card:hover{transform:translateY(-6px); box-shadow:0 30px 55px -26px rgba(20,20,40,0.25);}
.price-card.featured{
  position:relative; border:none; background:#0a0b12; color:#f7f6f2;
  box-shadow:0 30px 60px -20px rgba(108,92,255,0.35);
}
.price-card.featured::before{
  content:""; position:absolute; inset:0; border-radius:20px; padding:1.5px; background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.price-badge{
  display:inline-block; align-self:flex-start; font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%); color:#fff; padding:0.3rem 0.7rem; border-radius:100px; margin-bottom:1rem;
}
.price-tier{font-size:0.86rem; font-weight:600; color:#5c5f74; margin-bottom:0.5rem;}
.price-card.featured .price-tier{color:#9a9cb3;}
.price-amount{font-family:'Manrope', sans-serif; font-weight:800; font-size:2.3rem; margin-bottom:0.3rem;}
.price-amount span{font-size:0.95rem; font-weight:500; color:#5c5f74;}
.price-card.featured .price-amount span{color:#9a9cb3;}
.price-desc{font-size:0.88rem; color:#5c5f74; margin-bottom:1.6rem;}
.price-card.featured .price-desc{color:#9a9cb3;}
.price-features{display:flex; flex-direction:column; gap:0.75rem; margin-bottom:2rem; flex-grow:1;}
.price-features li{display:flex; align-items:flex-start; gap:0.6rem; font-size:0.9rem;}
.price-features li svg{width:16px; height:16px; flex-shrink:0; margin-top:2px; stroke:#6c5cff; fill:none; stroke-width:2.4;}
.price-card.featured .price-features li svg{stroke:#22c1e8;}
.price-card .btn{justify-content:center; width:100%;}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto;}}

a:focus-visible, button:focus-visible{outline:2px solid #8b7cff; outline-offset:3px;}

/* ============================================================
   SERVICE CARD BUTTONS + DETAIL PANEL (services.html)
   ============================================================ */
.svc-card-btn{
  width:100%; text-align:left; font-family:inherit; cursor:pointer;
  border:1px solid rgba(10,11,18,0.09);
}
.svc-card-btn.active{
  border-color:#6c5cff; box-shadow:0 20px 40px -22px rgba(108,92,255,0.35);
}
.svc-card-btn.active::before{opacity:1;}
.svc-detail-panel{
  margin-top:2.5rem; display:grid; grid-template-columns:0.85fr 1.15fr; gap:4vw; align-items:center;
  background:#0a0b12; border-radius:24px; padding:2.6rem; color:#f7f6f2;
}
.svc-detail-media{border-radius:16px; overflow:hidden; aspect-ratio:4/3;}
.svc-detail-media img{width:100%; height:100%; object-fit:cover; transition:opacity .3s ease;}
.svc-detail-copy .eyebrow{color:#22c1e8;}
.svc-detail-copy h2{font-size:clamp(1.6rem,3vw,2.2rem); margin:0.6rem 0 1rem;}
.svc-detail-copy p{color:#9a9cb3; margin-bottom:1.3rem;}
.svc-detail-copy .webdev-list{margin-bottom:1.6rem;}
.svc-detail-copy .webdev-list li{color:#f7f6f2;}
.svc-detail-copy .webdev-list li::before{background:#22c1e8;}
.svc-detail-proof{
  display:inline-flex; align-items:baseline; gap:0.7rem; margin-bottom:1.6rem;
  border-left:2px solid #6c5cff; padding-left:1rem;
}
.svc-detail-metric{font-family:'Manrope', sans-serif; font-weight:800; font-size:1.8rem; color:#8b7cff;}
.svc-detail-metric-label{font-size:0.82rem; color:#9a9cb3;}
@media(max-width:860px){.svc-detail-panel{grid-template-columns:1fr; padding:1.8rem;}}

/* ============================================================
   HERO LEAD FORM (mobile-app-development.html)
   ============================================================ */
.hero-form-card{
  background:#11131d; border:1px solid rgba(247,246,242,0.10); border-radius:20px;
  padding:2rem; box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
}
.hero-form-card h3{color:#f7f6f2; font-size:1.15rem; margin-bottom:0.3rem;}
.hero-form-card .form-sub{color:#9a9cb3; font-size:0.86rem; margin-bottom:1.4rem;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; margin-bottom:0.9rem;}
.form-field{display:flex; flex-direction:column; gap:0.4rem; margin-bottom:0.9rem;}
.form-field label{font-size:0.76rem; color:#9a9cb3; font-weight:600;}
.form-field input, .form-field select, .form-field textarea{
  background:#0a0b12; border:1px solid rgba(247,246,242,0.10); border-radius:8px; color:#f7f6f2;
  padding:0.75rem 0.9rem; font-family:inherit; font-size:0.9rem; transition:border-color .3s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:#8b7cff;
}
.form-field textarea{resize:vertical; min-height:70px;}
.hero-form-card .btn-solid{width:100%; justify-content:center; margin-top:0.4rem;}
.form-note{font-size:0.72rem; color:#9a9cb3; text-align:center; margin-top:0.9rem;}
.form-success{
  display:none; text-align:center; padding:2rem 0.5rem; color:#f7f6f2;
}
.form-success.show{display:block;}
.form-success .fs-icon{
  width:52px; height:52px; border-radius:50%; background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1rem;
}
.form-success .fs-icon svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:2.4;}
.form-success h4{font-family:'Manrope', sans-serif; font-weight:700; margin-bottom:0.5rem;}
.form-success p{color:#9a9cb3; font-size:0.88rem;}
@media(max-width:520px){.form-row{grid-template-columns:1fr;}}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list{max-width:800px; margin:0 auto;}
.faq-item{border-bottom:1px solid rgba(10,11,18,0.09); padding:1.3rem 0;}
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
  font-family:'Manrope', sans-serif; font-weight:700; font-size:1rem; color:#0a0b12;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .faq-plus{
  width:22px; height:22px; flex-shrink:0; border-radius:50%; border:1px solid rgba(10,11,18,0.09);
  display:flex; align-items:center; justify-content:center; font-size:1rem; color:#6c5cff;
  transition:transform .3s ease; margin-left:1rem;
}
.faq-item[open] summary .faq-plus{transform:rotate(45deg);}
.faq-item p{color:#5c5f74; margin-top:0.9rem; font-size:0.92rem;}

/* ============================================================
   INDUSTRY / SIMPLE CHIP GRID
   ============================================================ */
.industry-chip-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:rgba(247,246,242,0.10); border-radius:16px; overflow:hidden;}
.industry-chip{background:#11131d; padding:1.6rem 1rem; text-align:center; color:#f7f6f2; font-size:0.88rem; font-weight:600;}
@media(max-width:768px){.industry-chip-grid{grid-template-columns:repeat(2,1fr);}}

/* ============================================================
   TRUST STRIP / PARTNER LOGOS
   ============================================================ */
.trust-strip{background:#ffffff; border-bottom:1px solid rgba(10,11,18,0.09); padding:2.4rem 0;}
.trust-strip .wrap{display:flex; align-items:center; gap:2.6rem; flex-wrap:wrap; justify-content:space-between;}
.trust-strip-label{font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:#5c5f74; font-weight:600; white-space:nowrap;}
.trust-logos{display:flex; align-items:center; gap:2.6rem; flex-wrap:wrap; flex:1;}
.trust-logo{font-family:'Manrope', sans-serif; font-weight:800; font-size:1.05rem; color:#0a0b12; opacity:0.55; letter-spacing:-0.01em; transition:opacity .3s cubic-bezier(.22,.68,0,1);}
.trust-logo:hover{opacity:1;}
@media(max-width:768px){.trust-strip .wrap{justify-content:center; text-align:center;} .trust-logos{justify-content:center;}}

/* ============================================================
   ACCOLADES / RATINGS
   ============================================================ */
.accolade-grid{display:grid; grid-template-columns:1.1fr repeat(3,1fr); gap:1.2rem; margin-top:2.6rem;}
.accolade-rating-card{background:#ffffff; border:1px solid rgba(10,11,18,0.09); border-radius:18px; padding:1.8rem; display:flex; flex-direction:column; justify-content:center; gap:0.6rem;}
.accolade-rating-card .ar-top{display:flex; align-items:center; gap:0.7rem;}
.accolade-rating-card .ar-logo{width:34px; height:34px; border-radius:8px; background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%); flex-shrink:0;}
.accolade-rating-card .ar-name{font-weight:700; font-size:0.95rem;}
.accolade-rating-card .ar-score{font-family:'Manrope', sans-serif; font-weight:800; font-size:1.7rem;}
.accolade-rating-card .ar-stars{color:#ffb54a; font-size:0.9rem; letter-spacing:0.12em;}
.accolade-badge-card{background:#0a0b12; border-radius:18px; padding:1.8rem 1.4rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.9rem;}
.accolade-badge-ring{width:64px; height:64px; border-radius:50%; border:2px solid #8b7cff; display:flex; align-items:center; justify-content:center; position:relative;}
.accolade-badge-ring::before{content:""; position:absolute; inset:5px; border-radius:50%; border:1px dashed rgba(139,124,255,0.4);}
.accolade-badge-ring svg{width:26px; height:26px; stroke:#8b7cff; fill:none; stroke-width:1.8;}
.accolade-badge-card h4{color:#f7f6f2; font-size:0.88rem; font-weight:700; line-height:1.3;}
.accolade-badge-card p{color:#9a9cb3; font-size:0.76rem;}
@media(max-width:960px){.accolade-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.accolade-grid{grid-template-columns:1fr;}}

/* ============================================================
   MID-PAGE CTA BANNER
   ============================================================ */
.mid-cta{background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%); border-radius:26px; padding:3.4rem 3.6rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; position:relative; overflow:hidden;}
.mid-cta::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(255,255,255,0.25), transparent 55%);}
.mid-cta-copy{position:relative; z-index:2; max-width:520px;}
.mid-cta-copy h3{color:#fff; font-size:clamp(1.4rem,2.6vw,1.9rem); margin-bottom:0.6rem;}
.mid-cta-copy p{color:rgba(255,255,255,0.88); font-size:0.96rem;}
.mid-cta .btn{position:relative; z-index:2; background:#fff; color:#0a0b12; flex-shrink:0;}
.mid-cta .btn:hover{transform:translateY(-1px); box-shadow:0 14px 28px -12px rgba(0,0,0,0.35);}
@media(max-width:768px){.mid-cta{padding:2.4rem 2rem; text-align:center; justify-content:center;} .mid-cta-copy{max-width:100%;}}

/* ============================================================
   VERTICAL PROCESS TIMELINE
   ============================================================ */
.timeline{position:relative; margin-top:4rem; max-width:900px; margin-left:auto; margin-right:auto;}
.timeline::before{content:""; position:absolute; top:6px; bottom:6px; left:50%; width:2px; background:linear-gradient(180deg, transparent, rgba(247,246,242,0.10) 5%, rgba(247,246,242,0.10) 95%, transparent); transform:translateX(-50%);}
.tl-row{display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; margin-bottom:2.6rem;}
.tl-row:last-child{margin-bottom:0;}
.tl-card{background:#11131d; border:1px solid rgba(247,246,242,0.10); border-radius:16px; padding:1.6rem 1.8rem;}
.tl-row:nth-child(odd) .tl-card{grid-column:1; text-align:right;}
.tl-row:nth-child(odd) .tl-spacer{grid-column:3;}
.tl-row:nth-child(even) .tl-card{grid-column:3; text-align:left;}
.tl-row:nth-child(even) .tl-spacer{grid-column:1;}
.tl-node{grid-column:2; width:52px; height:52px; border-radius:50%; background:#0a0b12; border:2px solid #8b7cff; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; margin:0 auto;}
.tl-node svg{width:22px; height:22px; stroke:#8b7cff; fill:none; stroke-width:1.8;}
.tl-node .tl-num{position:absolute; top:-10px; right:-6px; background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%); color:#fff; font-size:0.68rem; font-weight:800; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Manrope', sans-serif;}
.tl-card h3{color:#f7f6f2; font-size:1.12rem; margin-bottom:0.5rem;}
.tl-card p{color:#9a9cb3; font-size:0.9rem;}
@media(max-width:768px){
  .timeline::before{left:26px;}
  .tl-row{grid-template-columns:52px 1fr; margin-bottom:1.8rem;}
  .tl-node{grid-column:1;}
  .tl-row:nth-child(odd) .tl-card, .tl-row:nth-child(even) .tl-card{grid-column:2; text-align:left;}
  .tl-row:nth-child(odd) .tl-spacer, .tl-row:nth-child(even) .tl-spacer{display:none;}
}

/* ============================================================
   TECH ICON GRID
   ============================================================ */
.tech-icon-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:1rem; margin-top:2.8rem;}
.tech-tile{background:#11131d; border:1px solid rgba(247,246,242,0.10); border-radius:14px; padding:1.3rem 0.6rem; display:flex; flex-direction:column; align-items:center; gap:0.6rem; transition:transform .3s cubic-bezier(.22,.68,0,1), border-color .3s cubic-bezier(.22,.68,0,1);}
.tech-tile:hover{transform:translateY(-4px); border-color:#8b7cff;}
.tech-tile-icon{width:38px; height:38px; border-radius:10px; background:linear-gradient(100deg, #22c1e8 0%, #4a6cf7 38%, #8b5cf6 68%, #c026d3 100%); display:flex; align-items:center; justify-content:center; font-family:'Manrope', sans-serif; font-weight:800; color:#fff; font-size:0.9rem;}
.tech-tile span{font-size:0.72rem; color:#9a9cb3; text-align:center; font-weight:600;}
@media(max-width:900px){.tech-icon-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:480px){.tech-icon-grid{grid-template-columns:repeat(3,1fr);}}

/* ============================================================
   INDUSTRY ICON CARDS
   ============================================================ */
.industry-icon-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; margin-top:2.8rem;}
.industry-icon-card{background:#ffffff; border:1px solid rgba(10,11,18,0.09); border-radius:16px; padding:1.8rem 1rem; text-align:center; transition:transform .3s cubic-bezier(.22,.68,0,1), box-shadow .3s cubic-bezier(.22,.68,0,1);}
.industry-icon-card:hover{transform:translateY(-5px); box-shadow:0 24px 40px -22px rgba(20,20,40,0.22);}
.industry-icon-card .ii-icon{width:44px; height:44px; border-radius:12px; background:rgba(108,92,255,0.1); display:flex; align-items:center; justify-content:center; margin:0 auto 0.9rem;}
.industry-icon-card .ii-icon svg{width:22px; height:22px; stroke:#6c5cff; fill:none; stroke-width:1.7;}
.industry-icon-card span{font-size:0.86rem; font-weight:600; color:#0a0b12;}
@media(max-width:900px){.industry-icon-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.industry-icon-grid{grid-template-columns:repeat(2,1fr);}}



.nav-links > li > a.active, .mm-link.active{color:#8b7cff;}

/* Layout rules extracted from this page. */
.mobile-app-development-layout-1.mobile-app-development-layout-1 { padding-top:7rem; }
.mobile-app-development-layout-2.mobile-app-development-layout-2 { margin:0 auto 0; text-align:center; }
.mobile-app-development-layout-3.mobile-app-development-layout-3 { justify-content:center; }
.mobile-app-development-layout-4.mobile-app-development-layout-4 { margin:1rem auto 0; text-align:center; }
.mobile-app-development-layout-5.mobile-app-development-layout-5 { margin-bottom:0; }
.mobile-app-development-layout-6.mobile-app-development-layout-6 { margin-top:1rem; }
.mobile-app-development-layout-7.mobile-app-development-layout-7 { background:radial-gradient(circle at 30% 20%, #181b28, #0a0b12 70%); aspect-ratio:16/11; }
.mobile-app-development-layout-8.mobile-app-development-layout-8 { max-height:360px; }
.mobile-app-development-layout-9.mobile-app-development-layout-9 { padding-top:0; }
.mobile-app-development-layout-10.mobile-app-development-layout-10 { text-align:center; }
.mobile-app-development-layout-11.mobile-app-development-layout-11 { margin:0 auto; text-align:center; }
.mobile-app-development-layout-12.mobile-app-development-layout-12 { align-items:center; }
.mobile-app-development-layout-13.mobile-app-development-layout-13 { order:1; }
.mobile-app-development-layout-14.mobile-app-development-layout-14 { margin-bottom:0; order:2; }
.mobile-app-development-layout-15.mobile-app-development-layout-15 { margin-top:1.6rem; }
.mobile-app-development-layout-16.mobile-app-development-layout-16 { background:rgba(10,11,18,0.09); }
.mobile-app-development-layout-17.mobile-app-development-layout-17 { background:#ffffff; }
.mobile-app-development-layout-18.mobile-app-development-layout-18 { background:rgba(108,92,255,0.1); }
.mobile-app-development-layout-19.mobile-app-development-layout-19 { color:#0a0b12; }
.mobile-app-development-layout-20.mobile-app-development-layout-20 { color:#5c5f74; }
.mobile-app-development-layout-21.mobile-app-development-layout-21 { margin:0 auto 2.5rem; text-align:center; }
.mobile-app-development-layout-22.mobile-app-development-layout-22 { background:#ffffff; border-radius:20px; padding:0.5rem 2rem; }