/* Google Fonts are now loaded via a non-render-blocking <link> in index.html (the old @import here serialized requests and blocked first paint). */

:root {
  --bg: #080c14;
  --bg2: #0d1424;
  --card: rgba(16,24,48,0.6);
  --border: rgba(255,255,255,0.07);
  --cyan: #22d3ee;
  --purple: #a855f7;
  --pink: #ec4899;
  --green: #10b981;

  /* Typography Scale (Issue 1) - 8 consistent steps */
  --text-xs: 0.75rem;    /* 12px - tags, badges, captions */
  --text-sm: 0.875rem;   /* 14px - meta, notes, small UI */
  --text-base: 1rem;     /* 16px - body copy, inputs, standard buttons */
  --text-lg: 1.125rem;   /* 18px - subtitles, large labels */
  --text-xl: 1.25rem;    /* 20px - h4, subheadings */
  --text-2xl: 1.5rem;    /* 24px - h3, card titles */
  --text-3xl: 2rem;      /* 32px - h2, section headings */
  --text-4xl: clamp(2.5rem, 5vw, 3.5rem); /* Hero h1 */

  /* Text Colors (Issue 2) - 5 core semantic tokens */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-accent: #22d3ee;
  --text-success: #10b981;

  /* Corner Radii Scale (Issue 3) - 6 consistent tiers */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Consolidated Button Tokens (Issue 4) */
  --btn-radius: var(--radius-md);
  --btn-padding-sm: 0.5rem 1rem;
  --btn-padding: 0.85rem 1.6rem;
  --btn-padding-lg: 1rem 2rem;
}

*{margin:0;padding:0;box-sizing:border-box;}
img{max-width:100%;height:auto;}

/* Compact self-hosted brand fonts: no Google Fonts render dependency. */
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin.v1.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk-latin.v1.woff2') format('woff2');font-style:normal;font-weight:300 700;font-display:swap;}

/* 4.3 KB self-hosted subset of Font Awesome Free (only glyphs used here). */
@font-face{font-family:'Velrix Icons';src:url('/assets/fonts/velrix-icons.v1.woff2') format('woff2');font-style:normal;font-weight:900;font-display:swap;}
.fas{font-family:'Velrix Icons';font-style:normal;font-weight:900;display:inline-block;line-height:1;text-rendering:auto;-webkit-font-smoothing:antialiased;}
.fa-arrow-left::before{content:"\f060"}.fa-arrow-right::before{content:"\f061"}.fa-arrow-up-right-from-square::before{content:"\f08e"}.fa-arrows-rotate::before{content:"\f021"}.fa-bolt::before{content:"\f0e7"}.fa-briefcase::before{content:"\f0b1"}.fa-calendar-check::before{content:"\f274"}.fa-camera::before{content:"\f030"}.fa-check::before{content:"\f00c"}.fa-check-circle::before,.fa-circle-check::before{content:"\f058"}.fa-chevron-down::before{content:"\f078"}.fa-circle-info::before{content:"\f05a"}.fa-code::before{content:"\f121"}.fa-code-branch::before{content:"\f126"}.fa-comment::before{content:"\f075"}.fa-comments::before{content:"\f086"}.fa-database::before{content:"\f1c0"}.fa-envelope::before{content:"\f0e0"}.fa-exclamation-circle::before{content:"\f06a"}.fa-flask::before{content:"\f0c3"}.fa-globe::before{content:"\f0ac"}.fa-indian-rupee-sign::before{content:"\e1bc"}.fa-layer-group::before{content:"\f5fd"}.fa-life-ring::before{content:"\f1cd"}.fa-lightbulb::before{content:"\f0eb"}.fa-lock::before{content:"\f023"}.fa-mobile-screen::before{content:"\f3cf"}.fa-mobile-screen-button::before{content:"\f3cd"}.fa-paint-brush::before,.fa-paintbrush::before{content:"\f1fc"}.fa-paper-plane::before{content:"\f1d8"}.fa-pen-ruler::before,.fa-pencil-ruler::before{content:"\f5ae"}.fa-puzzle-piece::before{content:"\f12e"}.fa-rocket::before{content:"\f135"}.fa-server::before{content:"\f233"}.fa-shield-halved::before{content:"\f3ed"}.fa-star::before{content:"\f005"}.fa-tags::before{content:"\f02c"}.fa-times::before{content:"\f00d"}.fa-triangle-exclamation::before{content:"\f071"}.fa-unlock::before{content:"\f09c"}

/* overflow-x:hidden on BOTH html and body kills the sideways/horizontal scroll on
   mobile. body alone wasn't enough because <html> is the real scroll container —
   decorative/animated elements (e.g. roadmap cards with a GSAP translateX slide-in)
   briefly extend past the viewport edge and were making the page shift left-right.
   nav is position:fixed (not sticky), so clipping the root is safe. */
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}

body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:#cbd5e1;
  overflow-x:hidden;
  max-width:100%;
}

/* Scrollbar */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--purple);border-radius:4px;}



/* Glass */
.glass{
  background:var(--card);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
}

/* Gradient text */
.grad{
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.grad2{
  background:linear-gradient(135deg,var(--purple),var(--pink));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:72px;
  display:flex;align-items:center;
  padding:0 5%;
  background:rgba(8,12,20,0.8);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  /* nav is static & always visible (position:fixed, top:0). No entrance animation:
     keeps it robust (never stuck hidden) and off the LCP/GSAP critical path. */
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav-inner{max-width:1280px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;text-decoration:none;}
.logo-img{
  height:52px;width:auto;max-width:200px;
  object-fit:contain;display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.35));
  transition:transform .25s ease, filter .25s ease;
}
.logo:hover .logo-img{
  transform:scale(1.03);
  filter:drop-shadow(0 0 14px rgba(34,211,238,0.45));
}
.logo-icon{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#fff;
  box-shadow:0 0 20px rgba(34,211,238,.3);
}
.logo-text{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:700;color:#fff;}
.logo-text span{color:var(--cyan);}
.nav-links{display:flex;align-items:center;gap:2rem;}
.nav-links a{color:#94a3b8;font-size:.9rem;font-weight:500;text-decoration:none;transition:.2s;}
.nav-links a:hover{color:#fff;}
.nav-links a.nav-cta{
  padding:.7rem 1.6rem;border-radius:50px;
  background:linear-gradient(135deg, var(--cyan), var(--purple));
  color:#ffffff !important;
  font-size:.9rem;font-weight:700;
  text-decoration:none;transition:all .3s ease;
  box-shadow:0 4px 15px rgba(34,211,238,.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-left: 1.25rem; /* Visual separation from FAQ (Issue 26) */
}
.nav-cta:hover{transform:scale(1.05);box-shadow:0 0 30px rgba(168,85,247,.4);}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px;}
.hamburger span{display:block;width:24px;height:2px;background:#94a3b8;border-radius:2px;transition:.3s;}
.mobile-menu{
  display:none;position:fixed;top:72px;left:0;right:0;
  background:rgba(8,12,20,.98);backdrop-filter:blur(20px);
  padding:1.5rem;border-bottom:1px solid var(--border);
  flex-direction:column;gap:1rem;z-index:999;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{color:#94a3b8;font-size:1rem;font-weight:500;text-decoration:none;padding:.75rem 0;border-bottom:1px solid var(--border);}
.mobile-menu a.nav-cta {
  padding: .8rem 1.6rem;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .3s ease;
  box-shadow: 0 4px 15px rgba(34, 211, 238, .3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
  margin-top: 0.5rem;
  text-align: center;
}
.mobile-menu a.nav-cta:hover {
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(168, 85, 247, .4);
}


/* HERO */
.hero{
  min-height:100vh;display:flex;align-items:center;
  padding:100px 5% 60px;position:relative;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(34,211,238,.07),transparent),
              radial-gradient(ellipse 60% 80% at 80% 50%,rgba(168,85,247,.07),transparent);
}
.hero-grid{
  max-width:1280px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
  position:relative;z-index:1;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:.4rem 1rem;border-radius:50px;
  background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.2);
  font-size:.75rem;font-weight:600;color:var(--cyan);letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:1.5rem;
}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:blink 1.5s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}

/* Respect users who prefer reduced motion: near-disable animations & transitions */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}
.hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1.15;color:#f1f5f9;margin-bottom:1.5rem;}
.hero p{font-size:1.1rem;color:#64748b;line-height:1.8;max-width:480px;margin-bottom:2rem;}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;}
.btn-primary{
  padding:.9rem 2.2rem;border-radius:50px;
  background:linear-gradient(135deg, var(--cyan), var(--purple));
  color:#ffffff !important;
  font-weight:700;font-size:1rem;text-decoration:none;
  box-shadow:0 8px 20px rgba(34,211,238,.3);transition:all .3s ease;
  display:inline-flex;align-items:center;gap:.5rem;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(168,85,247,.4);}
.btn-outline{
  padding:.85rem 2rem;border-radius:50px;
  border:1px solid rgba(255,255,255,.12);
  color:#94a3b8;font-weight:600;font-size:.95rem;text-decoration:none;
  transition:.3s;display:inline-flex;align-items:center;gap:.5rem;
}
.btn-outline:hover{border-color:rgba(255,255,255,.3);color:#fff;}
.hero-stats{display:flex;gap:2.5rem;margin-top:2.5rem;flex-wrap:wrap;}
.stat-item h3{font-size:2rem;font-weight:800;color:#f1f5f9;font-family:'Space Grotesk',sans-serif;}
.stat-item p{font-size:.8rem;color:#64748b;font-weight:500;margin-top:.2rem;}

/* Hero visual */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;}
.hero-phone{
  width:420px;position:relative;z-index:2;
  border-radius:48px;overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 60px rgba(34,211,238,.15);
  border:1px solid rgba(255,255,255,.1);
}
.hero-phone picture,.hero-phone img{width:100%;display:block;}
.hero-phone img{height:auto;}
.orbit{
  position:absolute;border-radius:50%;
  border:1px dashed rgba(255,255,255,.08);
}
.orbit1{width:500px;height:500px;animation:spin 20s linear infinite;}
.orbit2{width:650px;height:650px;animation:spin 30s linear infinite reverse;}
.orbit3{width:800px;height:800px;animation:spin 40s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.orbit-dot{
  position:absolute;width:10px;height:10px;border-radius:50%;top:-5px;left:calc(50% - 5px);
  box-shadow:0 0 12px currentColor;
}
.orb-blue{background:var(--cyan);color:var(--cyan);}
.orb-purple{background:var(--purple);color:var(--purple);}
.orb-pink{background:var(--pink);color:var(--pink);}

/* TICKER */
.ticker-section{
  padding:2rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:rgba(13,20,36,.6);overflow:hidden;
}
.ticker-track{
  display:flex;
  width: max-content;
  animation: ticker 30s linear infinite;
  will-change: transform;
}
.ticker-section:hover .ticker-track {
  animation-play-state: paused;
}
@keyframes ticker{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-item{
  display:flex;align-items:center;gap:.6rem;padding:0 2.5rem;
  font-size:.9rem;font-weight:600;color:#94a3b8;white-space:nowrap;
}
.ticker-item span{font-size:1.2rem;}
.ticker-sep{color:#1e293b;margin:0 .5rem;}

/* SECTIONS */
section{padding:100px 5%;}
.section-inner{max-width:1280px;margin:0 auto;}
.section-label{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:none;color:var(--cyan);margin-bottom:.8rem;}
.section-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:700;color:#f1f5f9;line-height:1.2;}
.section-sub{color:#64748b;font-size:1rem;margin-top:.8rem;max-width:520px;}
.section-head{margin-bottom:4rem;}
.center{text-align:center;}.center .section-sub{margin:auto;}

/* SERVICES */
.services-bg{background:rgba(13,20,36,.5);}
/* Fixed 3-column grid so 6 cards always tile evenly as 3 x 3,
   regardless of screen width (no orphan / empty-gap rows). */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  max-width:1080px;
  margin:0 auto;
}
@media(max-width:920px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .services-grid{grid-template-columns:1fr;}
}
.service-card{
  padding:2rem;border-radius:20px;border:1px solid var(--border);
  background:rgba(16,24,48,.4);transition:.3s;cursor:default;position:relative;overflow:hidden;
}
.service-card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:.3s;
  background:linear-gradient(135deg,rgba(34,211,238,.04),rgba(168,85,247,.04));
}
.service-card:hover{border-color:rgba(168,85,247,.3);transform:translateY(-4px);}
.service-card:hover::before{opacity:1;}
.service-icon{
  width:52px;height:52px;border-radius:14px;margin-bottom:1.2rem;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
}
.service-card h3{font-size:1.1rem;font-weight:600;color:#f1f5f9;margin-bottom:.6rem;}
.service-card p{font-size:.875rem;color:#64748b;line-height:1.7;}
.icon-cyan{background:rgba(34,211,238,.1);color:var(--cyan);}
.icon-purple{background:rgba(168,85,247,.1);color:var(--purple);}
.icon-pink{background:rgba(236,72,153,.1);color:var(--pink);}
.icon-green{background:rgba(16,185,129,.1);color:var(--green);}
.icon-orange{background:rgba(249,115,22,.1);color:#f97316;}
.icon-yellow{background:rgba(234,179,8,.1);color:#eab308;}

/* Optional secondary services (website / software) — deliberately understated
   vs the bright app grid above, so apps stay the clear main focus (~80/20). */
.services-optional{
  max-width:1080px;margin:3rem auto 0;
  display:flex;gap:2rem;align-items:flex-start;
  padding:2.5rem;border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,0.1);
  background:linear-gradient(135deg, rgba(16,24,48,0.7), rgba(13,20,36,0.85));
  box-shadow:0 12px 36px -10px rgba(0,0,0,0.5);
  transition:border-color .3s ease, transform .3s ease;
}
.services-optional:hover{
  border-color:rgba(34,211,238,0.3);transform:translateY(-2px);
}
.services-optional-icon{
  width:58px;height:58px;border-radius:var(--radius-md);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  background:rgba(34,211,238,0.1);color:var(--cyan);
  border:1px solid rgba(34,211,238,0.2);
}
.services-optional-label{
  display:inline-block;font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;
  text-transform:none;color:var(--cyan);margin-bottom:.4rem;
}
.services-optional h3{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:700;color:var(--text-primary);margin-bottom:.6rem;}
.services-optional p{font-size:var(--text-base);color:var(--text-secondary);line-height:1.7;max-width:760px;}
.services-optional-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.25rem 0 .5rem;}
.opt-pill{
  padding:.35rem .75rem;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500;
  background:rgba(148,163,184,0.08);border:none;color:var(--text-secondary);cursor:default;user-select:none;
}
.services-optional-note{font-size:var(--text-sm)!important;color:var(--text-secondary)!important;line-height:1.6;margin-top:1.25rem;display:flex;align-items:center;gap:.65rem;}
.services-optional-note i{color:var(--cyan);font-size:var(--text-base);}

/* PROJECTS */
.projects-grid{display:flex;flex-direction:column;gap:6rem;}
.project-item{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.project-item.reverse{direction:rtl;}
.project-item.reverse>*{direction:ltr;}
.project-img{border-radius:24px;overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,.5);}
.project-img img{width:100%;display:block;transition:.5s;}
.project-img:hover img{transform:scale(1.04);}
.work-tag, .project-tag{
  display:inline-flex;align-items:center;padding:.28rem .85rem;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.85rem;
  line-height:1.2;width:fit-content;
}
.tag-green{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);color:#34d399;}
.tag-blue{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);color:#60a5fa;}
.tag-purple{background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.25);color:#c084fc;}
.tag-pink{background:rgba(236,72,153,.12);border:1px solid rgba(236,72,153,.25);color:#f472b6;}
.tag-amber{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);color:#fbbf24;}
.tag-lime{background:rgba(132,204,22,.12);border:1px solid rgba(132,204,22,.25);color:#a3e635;}
.project-info h3{font-family:'Space Grotesk',sans-serif;font-size:var(--text-3xl);font-weight:700;color:var(--text-primary);margin-bottom:.8rem;}
.project-info p{color:var(--text-secondary);line-height:1.8;margin-bottom:1.5rem;font-size:var(--text-base);}
.tech-stack{display:flex;gap:.6rem;flex-wrap:wrap;}
.tech-pill{
  display:inline-flex;align-items:center;padding:.22rem .65rem;border-radius:var(--radius-xs);
  font-size:var(--text-xs);font-weight:500;background:rgba(255,255,255,.05);border:none;color:var(--text-secondary);
  cursor:default;user-select:none;letter-spacing:.02em;line-height:1.3;
}

/* PROCESS */
.process-bg{background:rgba(13,20,36,.5);}
.process-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;position:relative;}
.process-steps::before{
  content:'';position:absolute;top:30px;left:10%;right:10%;height:1px;
  background:linear-gradient(to right,transparent,var(--border),transparent);
}
.process-step{text-align:center;padding:2rem 1rem;position:relative;}
.step-num{
  width:60px;height:60px;border-radius:50%;margin:0 auto 1.2rem;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;
  background:linear-gradient(135deg,var(--cyan),var(--purple));color:#fff;
  box-shadow:0 0 30px rgba(34,211,238,.2);position:relative;z-index:1;
}
.process-step h4{font-size:1rem;font-weight:600;color:#f1f5f9;margin-bottom:.5rem;}
.process-step p{font-size:.82rem;color:#64748b;line-height:1.7;}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;}
.stat-card{
  padding:2.5rem;border-radius:20px;border:1px solid var(--border);
  background:rgba(16,24,48,.4);text-align:center;
}
.stat-card h2{font-family:'Space Grotesk',sans-serif;font-size:3rem;font-weight:800;color:#f1f5f9;line-height:1;}
.stat-card p{font-size:.9rem;color:#64748b;margin-top:.5rem;}


/* TESTIMONIALS */
.testi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
}
.testi-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}
.nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
.nav-btn:hover {
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}
.testi-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.testi-grid {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: max-content;
  cursor: grab;
  user-select: none;
  padding: 10px 0;
}
.testi-grid:active {
  cursor: grabbing;
}
.testi-card {
  flex: 0 0 380px;
  max-width: calc(100vw - 3rem);
  padding: 2rem;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--card);
  transition: 0.3s;
}
.testi-card:hover {
  border-color: rgba(34, 211, 238, 0.3);
  transform: translateY(-5px);
}
.testi-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.stars {
  color: #fbbf24;
  font-size: 0.8rem;
  display: flex;
  gap: 2px;
}
.testi-text {
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.7;
  font-style: italic;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-info h5 {
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
}
.author-info p {
  font-size: 0.75rem;
  color: var(--pink);
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 2px;
}
.testi-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 3rem;
}
.testi-dots .dot {
  width: 30px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.1);
  transition: 0.3s;
}
.testi-dots .dot.active {
  background: var(--cyan);
  width: 40px;
}

/* ROADMAP PREMIUM - Linear Sequential Timeline (Issues 6, 7, 8, 12) */
.roadmap-section {
  padding: 100px 5%;
  position: relative;
}
.roadmap-container {
  max-width: 1000px;
  margin: 4rem auto 0;
  position: relative;
}
.roadmap-container::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(34,211,238,0.25), rgba(168,85,247,0.25), rgba(16,185,129,0.25));
  transform: translateX(-50%);
}
.roadmap-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 3.5rem;
  width: 100%;
  position: relative;
}
.roadmap-item.reverse {
  flex-direction: row;
}
/* Ensure consistent non-interleaved layout for all items (eliminates zigzag scanning friction) */
.roadmap-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 3rem;
  padding-left: 0;
  box-sizing: border-box;
}
.roadmap-item.reverse .roadmap-content {
  order: 0;
  padding-right: 3rem;
  padding-left: 0;
}
.roadmap-info {
  text-align: left !important;
  max-width: 440px;
}
.roadmap-item.reverse .roadmap-info {
  text-align: left !important;
}
/* Standardized icon placement directly above heading for every step (Issue 7) */
.roadmap-icon,
.roadmap-item .roadmap-icon,
.roadmap-item.reverse .roadmap-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  margin-bottom: 1rem;
  margin-left: 0 !important;
  margin-right: auto !important;
  background: rgba(34, 211, 238, 0.1);
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.25);
}
.roadmap-item:nth-child(1) .roadmap-icon { background: rgba(34, 211, 238, 0.1); color: var(--cyan); border-color: rgba(34, 211, 238, 0.25); }
.roadmap-item:nth-child(2) .roadmap-icon { background: rgba(168, 85, 247, 0.1); color: var(--purple); border-color: rgba(168, 85, 247, 0.25); }
.roadmap-item:nth-child(3) .roadmap-icon { background: rgba(34, 211, 238, 0.1); color: var(--cyan); border-color: rgba(34, 211, 238, 0.25); }
.roadmap-item:nth-child(4) .roadmap-icon { background: rgba(236, 72, 153, 0.1); color: var(--pink); border-color: rgba(236, 72, 153, 0.25); }
.roadmap-item:nth-child(5) .roadmap-icon { background: rgba(16, 185, 129, 0.1); color: var(--green); border-color: rgba(16, 185, 129, 0.25); }

.roadmap-info h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.8rem;
  line-height: 1.25;
}
.roadmap-info p {
  text-align: left !important;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.65;
}
.roadmap-dot {
  width: 28px;
  height: 28px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 50%;
}
.dot-inner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
}
.roadmap-item:nth-child(2) .dot-inner { border-color: var(--purple); box-shadow: 0 0 8px rgba(168, 85, 247, 0.6); }
.roadmap-item:nth-child(3) .dot-inner { border-color: var(--cyan); box-shadow: 0 0 8px rgba(34, 211, 238, 0.6); }
.roadmap-item:nth-child(4) .dot-inner { border-color: var(--pink); box-shadow: 0 0 8px rgba(236, 72, 153, 0.6); }
.roadmap-item:nth-child(5) .dot-inner { border-color: var(--green); box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }

.roadmap-card-wrapper {
  width: 50%;
  padding-left: 3rem;
  padding-right: 0;
  box-sizing: border-box;
}
.roadmap-item.reverse .roadmap-card-wrapper {
  order: 2;
  padding-left: 3rem;
  padding-right: 0;
  display: flex;
  justify-content: flex-start;
}
/* Subdue neon glow and borders (Issue 8) */
.roadmap-card {
  width: 100%;
  max-width: 420px;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 24, 48, 0.55);
  backdrop-filter: blur(12px);
  position: relative;
  border-left: 3px solid var(--cyan);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.roadmap-item:nth-child(2) .roadmap-card { border-left-color: var(--purple); }
.roadmap-item:nth-child(3) .roadmap-card { border-left-color: var(--cyan); }
.roadmap-item:nth-child(4) .roadmap-card { border-left-color: var(--pink); }
.roadmap-item:nth-child(5) .roadmap-card { border-left-color: var(--green); }

.card-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 0.85rem;
  letter-spacing: 0.06em;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-transform: uppercase;
}
.card-tag.tag-purple { color: var(--purple) !important; }
.card-tag.tag-pink { color: var(--pink) !important; }
.card-tag.tag-green { color: var(--green) !important; }

.card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0;
  margin: 0;
}
.card-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.card-list li i {
  color: var(--cyan);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.roadmap-item:nth-child(2) .card-list li i { color: var(--purple); }
.roadmap-item:nth-child(3) .card-list li i { color: var(--cyan); }
.roadmap-item:nth-child(4) .card-list li i { color: var(--pink); }
.roadmap-item:nth-child(5) .card-list li i { color: var(--green); }

/* FAQ */
.faq-bg{background:rgba(13,20,36,.5);}
.faq-list{display:flex;flex-direction:column;gap:.8rem;max-width:800px;margin:0 auto;}
.faq-item{border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.faq-q{
  padding:1.2rem 1.5rem;display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;color:#f1f5f9;font-weight:500;font-size:.95rem;
  background:rgba(16,24,48,.4);transition:.2s;
  list-style:none;
}
.faq-q:hover{background:rgba(168,85,247,.05);}
.faq-q::marker{display:none;}
.faq-q .arrow{transition:.3s;color:#64748b;font-size:1.2rem;}
details[open] .arrow{transform:rotate(180deg);color:var(--purple);}
.faq-a{padding:1rem 1.5rem 1.2rem;font-size:.875rem;color:#64748b;line-height:1.8;border-top:1px solid var(--border);background:rgba(8,12,20,.3);}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;align-items:start;}
.contact-info h2{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700;color:#f1f5f9;margin-bottom:.8rem;}
.contact-info p{color:#64748b;line-height:1.8;margin-bottom:2rem;}
.contact-items{display:flex;flex-direction:column;gap:1.2rem;}
.contact-item{display:flex;align-items:center;gap:1rem;}
.ci-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
}
.contact-item h3{font-size:.8rem;color:#64748b;text-transform:none;letter-spacing:.06em;font-weight:600;}
.contact-item p, .contact-item a{font-size:.9rem;color:#f1f5f9;text-decoration:none;}
.contact-form{
  padding:2.5rem;border-radius:24px;border:1px solid var(--border);
  background:rgba(16,24,48,.5);
}
.form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.2rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
label{font-size:.82rem;font-weight:500;color:#94a3b8;}
input, textarea, select{
  padding:.9rem 1.1rem;border-radius:12px;
  background:rgba(8,12,20,.5);border:1px solid rgba(255,255,255,.08);
  color:#f1f5f9;font-size:.9rem;font-family:inherit;transition:.2s;width:100%;
}
input:focus, textarea:focus, select:focus{
  outline:none;border-color:rgba(34,211,238,.4);
  box-shadow:0 0 0 3px rgba(34,211,238,.08);
}
textarea{resize:vertical;min-height:120px;}
select option{background:#0d1424;}
.submit-btn{
  width:100%;padding:1rem;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  color:#fff;font-size:.95rem;font-weight:600;font-family:inherit;
  transition:.3s;margin-top:.5rem;
}
.submit-btn:hover{opacity:.9;transform:translateY(-1px);}


/* Legal Section Title Scaling (Issue 18) */
.legal-section {
  padding: 2.5rem 5% 2rem !important;
}
.legal-section .section-head {
  margin-bottom: 1.25rem !important;
}
.legal-section .section-title {
  font-size: var(--text-2xl) !important;
  margin-bottom: 0.75rem;
}

/* FOOTER */
footer{
  padding:4rem 5% 2rem;border-top:1px solid var(--border);
  background:rgba(8,12,20,.9);
}
.footer-grid{max-width:1280px;margin:0 auto;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem;}
.footer-brand p{color:#475569;font-size:.875rem;line-height:1.8;margin-top:1rem;max-width:280px;}
.footer-col h3{font-size:.8rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.1em;margin-top:0;margin-bottom:1.2rem;}
.footer-col a{display:block;color:#94a3b8;font-size:.875rem;text-decoration:none;margin-bottom:.15rem;padding:.55rem 0;transition:.2s;}
.footer-col a:hover{color:var(--cyan);}
.social-row{display:flex;gap:.8rem;margin-top:1.2rem;}
.social-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:#475569;font-size:1.1rem;text-decoration:none;transition:.2s;
}
.social-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:2rem;border-top:1px solid var(--border);
  font-size:.8rem;color:#94a3b8;flex-wrap:wrap;gap:1rem;
}


main{position:relative;z-index:1;}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
.fade-up{opacity:0;animation:fadeUp .7s ease forwards;}
/* Hero content must be visible on first paint for LCP — keep a tasteful slide via
   transform only (no opacity gate, GPU-composited). Overrides the generic .fade-up. */
.hero-content.fade-up{opacity:1;animation:none;transform:none;}
.hero-visual.fade-up{opacity:1;animation:none;transform:none;}
.delay-1{animation-delay:.1s;}
.delay-2{animation-delay:.2s;}
.delay-3{animation-delay:.3s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
.floating{animation:float 5s ease-in-out infinite;}

/* RESPONSIVE */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{
    display:flex;
    margin-top:3rem;
    width:100%;
    justify-content:center;
  }
  .hero-phone{
    width:280px;
    border-radius:32px;
  }
  .project-item{grid-template-columns:1fr;}
  .project-item.reverse{direction:ltr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .process-steps::before{display:none;}
  
  .testi-header { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .roadmap-container::before { left: 20px; }
  .roadmap-item, .roadmap-item.reverse { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 3.5rem; }
  .roadmap-content, .roadmap-card-wrapper, .roadmap-item.reverse .roadmap-content, .roadmap-item.reverse .roadmap-card-wrapper { width: 100%; padding-left: 50px; padding-right: 0; box-sizing: border-box; }
  .roadmap-dot { left: 20px; transform: none; }
  .roadmap-item.reverse .roadmap-info { text-align: left; }
  .roadmap-item.reverse .roadmap-icon { margin-left: 0; }
}
@media(max-width:640px){
  .nav-links{display:none;}
  .hamburger{display:flex;width:44px;height:44px;padding:10px;align-items:center;justify-content:center;}
  section{padding:70px 5%;}
  .footer-top{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
}

/* ====================================================
   VelrixTech Premium Upgrades - Custom Styles
   ==================================================== */

/* 0. Premium Preloader — removed for performance.
   A full-screen opaque overlay gated the Largest Contentful Paint until JS ran,
   pushing mobile LCP to ~4.4s. The hero now fades in via CSS (.fade-up) instead. */

/* 2. AJAX Glassmorphic Success Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 20, 0.85);
  backdrop-filter: blur(12px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal-content {
  max-width: 480px;
  width: 90%;
  padding: 3rem 2.5rem;
  border-radius: 28px;
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.modal-overlay.open .modal-content {
  transform: scale(1);
}
.modal-icon {
  font-size: 4rem;
  color: var(--green);
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.4));
  animation: modalPulse 2s infinite;
}
@keyframes modalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.modal-content h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 1rem;
}
.modal-content p {
  color: #94a3b8;
  line-height: 1.6;
  font-size: 0.95rem;
  margin-bottom: 2rem;
}
.modal-content .btn-primary {
  width: 100%;
  justify-content: center;
}

/* 3. Project Mockup Swapper Interactive Controls */
.project-swapper {
  position: relative;
  overflow: hidden;
}
.swapper-inner {
  display: flex;
  width: 100%;
  height: 100%;
}
.swapper-inner img {
  width: 100%;
  display: none !important;
  transition: opacity 0.5s ease-in-out;
  object-fit: cover;
}
.swapper-inner img.active {
  display: block !important;
}
.swapper-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(8, 12, 20, 0.7);
  backdrop-filter: blur(5px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 5;
  opacity: 0;
}
.project-swapper:hover .swapper-arrow {
  opacity: 1;
}
.swapper-arrow:hover {
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}
.swapper-arrow.left { left: 1rem; }
.swapper-arrow.right { right: 1rem; }
.swapper-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.swapper-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s;
}
.swapper-dots .dot.active {
  background: var(--cyan);
  width: 24px;
  border-radius: 4px;
}

/* 5. Process Roadmap Step Details (Expandable) */
.roadmap-container::before {
  background: linear-gradient(to bottom, var(--cyan), var(--purple), var(--pink), var(--green));
  opacity: 0.08;
}
.roadmap-container::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  height: var(--roadmap-glow-height, 0%);
  width: 1px;
  background: linear-gradient(to bottom, var(--cyan), var(--purple), var(--pink), var(--green));
  transform: translateX(-50%);
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px var(--cyan);
  z-index: 1;
}
@media(max-width:900px) {
  .roadmap-container::after {
    left: 20px;
    transform: none;
  }
}
.roadmap-item {
  cursor: pointer;
}
.roadmap-item .roadmap-card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.roadmap-item.active .roadmap-card {
  border-color: var(--cyan);
  box-shadow: 0 15px 30px rgba(34, 211, 238, 0.15);
  background: rgba(34, 211, 238, 0.03);
  transform: scale(1.03);
}
.roadmap-item:nth-child(2).active .roadmap-card { border-color: var(--purple); box-shadow: 0 15px 30px rgba(168, 85, 247, 0.15); background: rgba(168, 85, 247, 0.03); }
.roadmap-item:nth-child(3).active .roadmap-card { border-color: var(--cyan); box-shadow: 0 15px 30px rgba(34, 211, 238, 0.15); background: rgba(34, 211, 238, 0.03); }
.roadmap-item:nth-child(4).active .roadmap-card { border-color: var(--pink); box-shadow: 0 15px 30px rgba(236, 72, 153, 0.15); background: rgba(236, 72, 153, 0.03); }
.roadmap-item:nth-child(5).active .roadmap-card { border-color: var(--green); box-shadow: 0 15px 30px rgba(16, 185, 129, 0.15); background: rgba(16, 185, 129, 0.03); }

/* 6. Magnetic Glow Button Hover states */
.btn-primary, .submit-btn, .nav-cta {
  position: relative;
  overflow: hidden;
}
.btn-primary::before, .submit-btn::before, .nav-cta::before {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  top: var(--y, -150px);
  left: var(--x, -150px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: top 0.1s, left 0.1s;
  z-index: 1;
}




/* 8. Floating Scroll Progress Glow Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(to right, var(--cyan), var(--purple), var(--pink));
  z-index: 100001;
  box-shadow: 0 1px 8px rgba(34, 211, 238, 0.4);
  transition: transform 0.1s ease;
}

/* 9. Custom Toast System */
.toast-container {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 100002;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  pointer-events: none;
  max-width: 350px;
  width: 90%;
}
.toast-card {
  pointer-events: auto;
  padding: 1rem 1.5rem;
  border-radius: 14px;
  background: rgba(16, 24, 48, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: #fff;
  font-size: 0.9rem;
  transform: translateX(-120%);
  opacity: 0;
  animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.toast-card.success {
  border-left: 3px solid var(--green);
}
.toast-card.error {
  border-left: 3px solid var(--pink);
}
.toast-icon {
  font-size: 1.15rem;
}
.toast-card.success .toast-icon {
  color: var(--green);
  filter: drop-shadow(0 0 5px var(--green));
}
.toast-card.error .toast-icon {
  color: var(--pink);
  filter: drop-shadow(0 0 5px var(--pink));
}
@keyframes toastSlideIn {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toastFadeOut {
  to {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ====================================================
   VelrixTech High-Trust Upgrades - Style Specifications
   ==================================================== */

/* 2. WhatsApp Live Chat Widget */
.whatsapp-widget-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 10000;
  font-family: 'Inter', sans-serif;
}
.whatsapp-badge {
  position: absolute;
  top: -5px;
  right: -2px;
  background: var(--pink);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px var(--pink);
  animation: badgePulse 2s infinite;
  z-index: 3;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.whatsapp-trigger-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 24px rgba(37, 211, 102, 0.45);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: none;
  position: relative;
  z-index: 2;
}
.whatsapp-trigger-btn:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}
.whatsapp-widget-container.active .whatsapp-trigger-btn {
  background: #dc3545;
  transform: rotate(135deg);
  box-shadow: 0 4px 20px rgba(220, 53, 69, 0.4);
}
.whatsapp-chat-box {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 360px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(16, 24, 48, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
  overflow: hidden;
}
.whatsapp-widget-container.active .whatsapp-chat-box {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
.whatsapp-chat-header {
  background: linear-gradient(135deg, #128c7e, #075e54);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.whatsapp-chat-header .chat-avatar-wrapper {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
}
.whatsapp-chat-header .chat-avatar-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.whatsapp-chat-header .chat-avatar-wrapper .chat-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #25d366;
  border-radius: 50%;
  border: 2px solid #075e54;
  box-shadow: 0 0 8px #25d366;
  animation: dotPulse 1.8s infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.whatsapp-chat-header .chat-user-info .chat-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}
.whatsapp-chat-header .chat-user-info p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  margin-top: 1px;
}
.whatsapp-chat-body {
  padding: 1.25rem;
  background: radial-gradient(ellipse at center, rgba(16,24,48,0.7) 0%, rgba(8,12,20,0.9) 100%);
  min-height: 180px;
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.whatsapp-msg-bubble {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #cbd5e1;
  position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.whatsapp-msg-bubble.incoming {
  background: rgba(30, 41, 59, 0.9);
  border-top-left-radius: 2px;
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.whatsapp-msg-bubble.incoming::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 6px 0;
  border-color: transparent rgba(30, 41, 59, 0.9) transparent transparent;
}
.whatsapp-msg-time {
  display: block;
  text-align: right;
  font-size: 0.65rem;
  color: #64748b;
  margin-top: 4px;
}
.whatsapp-typing-indicator {
  align-self: flex-start;
  background: rgba(30, 41, 59, 0.9);
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  border-top-left-radius: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.whatsapp-typing-indicator span {
  width: 6px;
  height: 6px;
  background: #94a3b8;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite;
  display: inline-block;
}
.whatsapp-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.whatsapp-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 100%, 80% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
}
.whatsapp-chat-footer {
  padding: 0.85rem 1rem;
  background: rgba(16, 24, 48, 0.95);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.whatsapp-chat-footer input {
  flex: 1;
  padding: 0.65rem 0.85rem;
  border-radius: 50px;
  background: rgba(8, 12, 20, 0.6);
  border: 1px solid rgba(255,255,255,0.06);
  color: #f1f5f9;
  font-size: 0.85rem;
  outline: none;
}
.whatsapp-chat-footer input:focus {
  border-color: #25d366;
}
.whatsapp-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #128c7e;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s;
}
.whatsapp-send-btn:hover {
  background: #25d366;
  transform: scale(1.05);
}
@media(max-width: 480px) {
  .whatsapp-chat-box {
    width: calc(100vw - 2rem);
    right: -1rem;
  }
}

/* 3. Case Study Details Modal Overlay (Issues 14, 15, 16) */
.case-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 20, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10005;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  padding: 1.5rem;
}
.case-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
/* Ensure background interactive chat is suppressed while modal is open (Issue 16) */
.case-modal-overlay.open ~ #whatsapp-widget {
  display: none !important;
}
.case-modal-content {
  background: #0d1527;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  max-width: 900px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(34, 211, 238, 0.15);
  transform: translateY(30px) scale(0.95);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: flex;
  flex-direction: column;
}
.case-modal-overlay.open .case-modal-content {
  transform: translateY(0) scale(1);
}
.case-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 10;
}
.case-modal-close:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
  transform: rotate(90deg);
}
.case-modal-body {
  padding: 3rem 2.5rem;
}
.case-modal-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr;
  gap: 3rem;
  align-items: start;
}
.case-modal-visual {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(34,211,238,.15), transparent 60%),
    radial-gradient(120% 120% at 80% 100%, rgba(168,85,247,.15), transparent 55%),
    #0b1120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.case-modal-visual img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}
.case-modal-tag {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.case-modal-info h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.2;
}
.case-modal-desc {
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.case-details-section {
  margin-bottom: 1.5rem;
}
.case-details-section h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.6rem;
}
.case-details-section p {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.6;
}
.case-features-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.case-features-list li {
  font-size: 0.85rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.case-features-list li i {
  color: var(--purple);
  font-size: 0.8rem;
}
.case-modal-tech {
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 1.5rem;
}
.case-modal-btns {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.case-modal-btns a {
  padding: 0.75rem 1.75rem;
  font-size: 0.9rem;
}
@media(max-width: 850px) {
  .case-modal-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .case-modal-body {
    padding: 2rem 1.5rem;
  }
  .case-features-list {
    grid-template-columns: 1fr;
  }
}

/* Above-the-fold content and image paint immediately with no opacity or JS gate. */
.hero-phone.floating {
  animation: float 5s ease-in-out infinite;
}

/* ============================================================
   PROFESSIONAL OVERHAUL ADDITIONS
   ============================================================ */

/* Hero trust chips under the CTAs */
.hero-trust{
  display:grid;grid-template-columns:repeat(2, max-content);gap:.75rem 1.2rem;margin-top:1.6rem;
}
@media (min-width: 1200px){
  .hero-trust{grid-template-columns:repeat(4, max-content);}
}
@media (max-width: 480px){
  .hero-trust{grid-template-columns:1fr;}
}
.hero-trust span{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .85rem;border-radius:50px;
  background:rgba(16,24,48,.55);border:1px solid var(--border);
  font-size:.8rem;color:#cbd5e1;font-weight:500;white-space:nowrap;
}
.hero-trust span i{color:var(--green);font-size:.8rem;}

/* Make contact items behave like clean clickable cards */
.contact-item{
  padding:1rem 1.1rem;border-radius:14px;
  border:1px solid var(--border);background:rgba(16,24,48,.4);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
  cursor:pointer;text-decoration:none;
}
a.contact-item:hover{
  transform:translateY(-2px);
  border-color:rgba(34,211,238,.35);
  background:rgba(16,24,48,.7);
}
/* Tidy the label + value column inside each contact box */
.contact-item > div:not(.ci-icon){
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;min-width:0;
}
.contact-item h3{
  margin:0;font-size:.72rem;color:#94a3b8;
  text-transform:none;letter-spacing:.08em;font-weight:600;text-decoration:none;
}
.contact-info .contact-item p{
  margin:0;font-size:1rem;color:#f1f5f9;font-weight:600;line-height:1.3;
  text-decoration:none;word-break:break-word;
}

/* Contact trust badges */
.contact-trust{
  display:flex;flex-direction:column;gap:0.95rem;margin-top:2rem;
}
.contact-trust span{
  display:inline-flex;align-items:center;gap:0.65rem;
  font-size:var(--text-sm);color:#cbd5e1;font-weight:500;
}
.contact-trust i, .contact-trust span i{color:var(--green)!important;font-size:1rem;width:20px;text-align:center;flex-shrink:0;}

.form-actions{
  display:flex;gap:1rem;margin-top:1.25rem;flex-wrap:wrap;align-items:stretch;
}
.form-actions .submit-btn{
  flex:1;min-width:200px;height:48px;min-height:48px;padding:0 1.5rem;border-radius:var(--radius-md);
  border:none;cursor:pointer;background:linear-gradient(135deg,var(--cyan),var(--purple));
  color:#fff;font-size:var(--text-base);font-weight:600;font-family:inherit;box-sizing:border-box;
  transition:.3s;margin:0!important;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;line-height:1;vertical-align:middle;
}
.form-actions .submit-btn:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 4px 20px rgba(34,211,238,0.35);}
.form-actions .form-wa-btn{
  flex:1;min-width:200px;height:48px;min-height:48px;padding:0 1.5rem;border-radius:var(--radius-md);
  border:1.5px solid #25d366;cursor:pointer;background:rgba(37,211,102,0.18);
  color:#4ade80;font-size:var(--text-base);font-weight:600;font-family:inherit;box-sizing:border-box;
  transition:.3s;margin:0!important;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;line-height:1;vertical-align:middle;text-decoration:none;
  box-shadow:0 4px 15px rgba(37,211,102,0.12);
}
.form-actions .form-wa-btn:hover{background:#25d366;color:#080c14;border-color:#25d366;transform:translateY(-1px);box-shadow:0 6px 22px rgba(37,211,102,0.4);}
.form-status{
  margin-top:1.25rem;padding:1rem 1.25rem;border-radius:var(--radius-md);font-size:var(--text-sm);line-height:1.5;
}
.form-status.success{background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.35);color:#34d399;}
.form-status.error{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.35);color:#f87171;}
.required-star{color:var(--pink);margin-left:2px;}

/* Form reassurance line (above submit) */
.form-reassure{
  display:flex;align-items:flex-start;gap:.6rem;
  margin:0 0 1rem;padding:.85rem 1rem;border-radius:12px;
  background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.18);
  font-size:.82rem;color:#cbd5e1;line-height:1.6;
}
.form-reassure i{color:var(--green);margin-top:.15rem;flex-shrink:0;}

/* Form helper note */
.form-note{
  margin-top:.9rem;font-size:.8rem;color:#94a3b8;line-height:1.6;text-align:center;
}
.submit-btn i{margin-right:.5rem;}

/* ---- About / Founder section ---- */
.about-section{padding:6rem 5%;}
.about-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:4rem;align-items:center;
}
.about-photo{position:relative;}
.about-photo-frame{
  position:relative;border-radius:24px;overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(34,211,238,.12),rgba(168,85,247,.12));
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.about-photo-frame img{display:block;width:100%;height:auto;object-fit:cover;}
.about-photo-badge{
  position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.1rem;border-radius:50px;
  background:rgba(8,12,20,.92);border:1px solid rgba(16,185,129,.35);
  color:#e2e8f0;font-size:.82rem;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.4);backdrop-filter:blur(10px);
}
.about-photo-badge i{color:var(--green);}
.about-content .section-title{margin-bottom:1.2rem;}
.about-lead{font-size:1.15rem;color:#e2e8f0;line-height:1.7;margin-bottom:1.2rem;font-weight:500;}
.about-content p{color:#94a3b8;line-height:1.8;margin-bottom:1rem;}
.about-points{list-style:none;margin:1.4rem 0;display:grid;gap:.7rem;}
.about-points li{display:flex;align-items:flex-start;gap:.7rem;color:#cbd5e1;font-size:.95rem;}
.about-points li i{
  color:var(--green);margin-top:.2rem;
  background:rgba(16,185,129,.12);border-radius:50%;
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0;
}
.about-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem;}

/* Promise section: honest "launch projects" on-ramp note */
.promise-onramp{
  max-width:720px;margin:2.6rem auto 0;
  display:flex;align-items:flex-start;gap:.6rem;
  padding:1rem 1.25rem;border-radius:14px;
  background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.18);
  font-size:.92rem;color:#cbd5e1;line-height:1.65;text-align:left;
}
.promise-onramp i{color:var(--green);margin-top:.2rem;flex-shrink:0;}

/* Legal section spacing */
.legal-section .faq-list{max-width:820px;}

@media(max-width:850px){
  .about-grid{grid-template-columns:1fr;gap:3rem;}
  .about-photo{max-width:380px;margin:0 auto;}
  .about-cta{justify-content:flex-start;}
}

/* ---- Accessibility: visible keyboard focus everywhere (WCAG 2.4.7) ---- */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px;}
.faq-q:focus-visible,.work-card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

/* ---- Readability: lift secondary copy toward WCAG AA contrast ---- */
.section-sub,
.hero p,
.service-card p,
.process-step p,
.contact-info p,
.about-content p,
.faq-a{color:#94a3b8;}
.footer-col a,
.footer-brand p{color:#94a3b8;}
.footer-col a:hover{color:#f1f5f9;}

/* ---- Featured Work: image-led, balanced portfolio cards ---- */
.work-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.75rem;
  max-width:1120px;margin:0 auto;
}
@media(max-width:720px){
  .work-grid{grid-template-columns:1fr;}
}

.work-card{
  display:flex;flex-direction:column;
  background:linear-gradient(155deg,rgba(20,30,56,.82),rgba(10,16,32,.9));
  border:1px solid var(--border);
  border-radius:22px;overflow:hidden;
  box-shadow:0 18px 45px -30px rgba(0,0,0,.9);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.work-card[data-case]{cursor:pointer;}
.work-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(34,211,238,.35);
}
.work-card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

/* A consistent 16:9 image stage keeps every supplied app banner clear. */
.work-thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(120% 120% at 80% 100%, rgba(168,85,247,.16), transparent 55%),
    #0b1120;
  border-bottom:1px solid rgba(148,163,184,.12);
}
.work-thumb img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;}

/* Gradient scrim anchors the overlay and unifies thumbnails */
.work-thumb::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(8,12,20,.85) 0%, rgba(8,12,20,.15) 45%, transparent 70%);
  opacity:0;transition:opacity .35s;
}
.work-card:hover .work-thumb::after,
.work-card:focus-within .work-thumb::after{opacity:.82;}

/* Hover/focus-revealed CTA overlay */
.work-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:1.1rem 1.2rem;opacity:0;transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;z-index:2;
}
.work-card:hover .work-overlay,
.work-card:focus-visible .work-overlay,
.work-overlay:focus-within{opacity:1;transform:translateY(0);}
.work-actions{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}

.work-body p{
  color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6;margin-bottom:1.25rem;
}
.work-tech{
  display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.25rem;
}
.work-foot{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;
  padding-top:1rem;border-top:1px solid rgba(255,255,255,.05);margin-top:auto;
}
.work-view-btn{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  border:none;border-radius:var(--radius-md);
  height:40px;min-height:40px;box-sizing:border-box;vertical-align:middle;line-height:1;
  padding:0 1.25rem;color:#fff!important;font-weight:600;font-size:var(--text-sm);
  font-family:inherit;transition:all .25s ease;
  box-shadow:0 4px 14px rgba(34,211,238,.25);text-decoration:none;white-space:nowrap;
}
.work-view-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(168,85,247,.4);}
.work-view-btn i{transition:transform .25s ease;}
.work-view-btn:hover i{transform:translateX(3px);}
.card-play-btn{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border-radius:var(--radius-md);
  height:40px;min-height:40px;box-sizing:border-box;vertical-align:middle;line-height:1;
  padding:0 1rem;font-size:var(--text-sm);font-weight:500;
  color:var(--text-primary);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  text-decoration:none;transition:all .25s ease;white-space:nowrap;
}
.card-play-btn:hover{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.4);color:#ffffff;transform:translateY(-1px);}
.work-thumb{cursor:pointer;}
.work-thumb img{transition:transform .35s ease;}
.work-card:hover .work-thumb img, .work-thumb:focus-visible img{transform:scale(1.04);}
.card-play-btn svg{fill:currentColor;flex-shrink:0;}
.work-cta{text-align:center;margin-top:3rem;}
.work-cta p{color:#94a3b8;font-size:1rem;margin-bottom:1.2rem;}

/* ============================================================
   SCROLL REVEAL (native IntersectionObserver — replaces GSAP/ScrollTrigger)
   The .reveal class is added by JS only when IntersectionObserver is
   supported and the user hasn't requested reduced motion, so if the script
   fails the content simply stays visible (never stuck hidden).
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.reveal.reveal-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .hero-phone, .hero-phone.floating{animation:none !important;opacity:1 !important;}
}

/* ============================================================
   MOBILE PAINT BUDGET: backdrop-filter blur is GPU-expensive and the fixed
   nav repaints on every scroll frame. On small screens we drop the blur and
   use a near-opaque solid instead — visually almost identical, far cheaper
   (helps Speed Index / smoothness on phones).
   ============================================================ */
@media (max-width: 768px){
  nav{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(8,12,20,0.92);
  }
  .mobile-menu{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(8,12,20,0.98);
  }
  .logo-img{height:42px;max-width:165px;}
}

/* ============================================================
   MOBILE — the hero CTAs stay side by side and Featured Work uses
   full-width image cards so supplied banners remain readable.
   Everything else (Services, My Promise, footer, spacing, roadmap, …)
   uses the site's ORIGINAL responsive layout — reverted on request.
   ============================================================ */
@media (max-width: 600px){
  /* (1) Hero CTAs stay SIDE BY SIDE instead of wrapping onto two rows */
  .hero-btns{flex-wrap:nowrap;gap:.6rem;}
  .hero-btns .btn-primary,
  .hero-btns .btn-outline{
    flex:1 1 0;min-width:0;justify-content:center;
    padding:.85rem .5rem;font-size:.82rem;white-space:nowrap;gap:.4rem;
  }

  .work-grid{grid-template-columns:1fr;gap:1.25rem;}
  .work-body{padding:1.15rem 1.2rem 1.25rem;}
  .work-body h3{font-size:var(--text-lg);margin-bottom:.35rem;}
  .work-body p{font-size:var(--text-sm);line-height:1.55;margin-bottom:.85rem;}
  .work-tag{font-size:var(--text-xs);padding:.22rem .65rem;margin-bottom:.6rem;}
  .work-foot .tech-pill{font-size:var(--text-xs);padding:.18rem .5rem;}
  .work-view-btn{height:38px;min-height:38px;padding:0 1rem;font-size:var(--text-xs);}
  .card-play-btn{height:38px;min-height:38px;padding:0 .85rem;font-size:var(--text-xs);}
  .work-cta p{font-size:var(--text-sm);}
}

@media (max-width: 380px){
  /* Very small phones: drop the CTA arrow so both hero buttons fit cleanly */
  .hero-btns .btn-primary i{display:none;}
}

/* SEO Heading Pruning & Accessible Links Compatibility */
.roadmap-info .step-title { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.service-card .service-extra-title { font-size: 1.15rem; font-weight: 600; color: #fff; margin-bottom: 0.5rem; }
.promise-grid .promise-title { font-size: 1.15rem; font-weight: 600; color: #fff; margin-bottom: 0.5rem; }
.contact-item .contact-method-title { font-size: 1.1rem; font-weight: 600; color: #fff; margin-bottom: 0.25rem; }
.footer-col .footer-col-title { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 1.2rem; text-transform: uppercase; letter-spacing: 0.05em; }
.modal-content .modal-title { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 0.75rem; }
.case-modal-info .modal-title { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.case-details-section .case-sub-title { font-size: 1.1rem; font-weight: 600; color: var(--cyan); margin-bottom: 0.5rem; }
.author-info .client-name { font-size: 1rem; font-weight: 600; color: #fff; }
.work-body .work-title { font-size: 1.35rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.share-site-container { margin: 2.5rem 0 1.5rem; padding: 1.25rem 1.5rem; background: rgba(16, 24, 48, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; backdrop-filter: blur(10px); }
.share-label { font-size: 0.95rem; font-weight: 600; color: #e2e8f0; display: inline-flex; align-items: center; gap: 0.5rem; }
.share-buttons { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; font-size: 0.85rem; font-weight: 500; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #cbd5e1; text-decoration: none; cursor: pointer; transition: all 0.25s ease; }
.share-btn:hover { transform: translateY(-2px); color: #fff; border-color: rgba(34, 211, 238, 0.4); background: rgba(34, 211, 238, 0.1); }
.share-btn.share-wa:hover { border-color: rgba(37, 211, 102, 0.4); background: rgba(37, 211, 102, 0.12); color: #25d366; }
.share-btn.share-li:hover { border-color: rgba(10, 102, 194, 0.4); background: rgba(10, 102, 194, 0.12); color: #38bdf8; }
.share-btn.share-tw:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); color: #fff; }