:root{
  --navy:#0b1533;
  --text:#1c2333;
  --muted:#5b6478;
  --border:#e6e9f1;
  --bg-soft:#f6f7fb;
  --teal:#14b8a6;
  --blue:#3b82f6;
  --purple:#8b5cf6;
  --gradient:linear-gradient(90deg,var(--teal),var(--blue) 55%,var(--purple));
  --max:1200px;
  --radius:16px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

.gradient-text{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gradient);border-radius:2px;}

.section{padding:96px 0;}
.section-alt{background:var(--bg-soft);}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.02em;color:var(--navy);}
.section-head p{color:var(--muted);margin-top:14px;font-size:1.03rem;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:100px;font-size:.92rem;font-weight:700;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
  border:1px solid transparent;
}
.btn-solid{background:var(--gradient);color:#fff;box-shadow:0 8px 20px -8px rgba(59,130,246,.55);}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(59,130,246,.6);}
.btn-line{border-color:var(--border);color:var(--navy);background:#fff;}
.btn-line:hover{border-color:var(--purple);color:var(--purple);}

/* =========================
SCROLL REVEAL + ENTRANCE
========================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-group .reveal:nth-child(1){transition-delay:0s;}
.reveal-group .reveal:nth-child(2){transition-delay:.08s;}
.reveal-group .reveal:nth-child(3){transition-delay:.16s;}
.reveal-group .reveal:nth-child(4){transition-delay:.24s;}
.reveal-group .reveal:nth-child(5){transition-delay:.32s;}
.reveal-group .reveal:nth-child(6){transition-delay:.4s;}
.reveal-group .reveal:nth-child(7){transition-delay:.48s;}
.reveal-group .reveal:nth-child(8){transition-delay:.56s;}
.reveal-group .reveal:nth-child(9){transition-delay:.64s;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

header{transition:box-shadow .3s ease;}
header.scrolled{box-shadow:0 4px 18px -12px rgba(15,23,42,.25);}

.hero-inner > *{opacity:0;transform:translateY(18px);animation:heroIn .7s ease forwards;}
.hero-inner .eyebrow{animation-delay:.05s;}
.hero-inner h1{animation-delay:.15s;}
.hero-inner p.lead{animation-delay:.28s;}
.hero-inner .hero-actions{animation-delay:.4s;}
.hero-inner .hero-stats{animation-delay:.52s;}
@keyframes heroIn{to{opacity:1;transform:translateY(0);}}

.page-hero-inner > *{opacity:0;transform:translateY(16px);animation:heroIn .6s ease forwards;}
.page-hero-inner .breadcrumb{animation-delay:0s;}
.page-hero-inner .eyebrow{animation-delay:.05s;}
.page-hero-inner h1{animation-delay:.12s;}
.page-hero-inner p{animation-delay:.22s;}

/* =========================
HEADER
========================= */
header{
  position:sticky;top:0;left:0;width:100%;z-index:999;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav{
  max-width:var(--max);margin:0 auto;padding:0 24px;
  height:76px;display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;}
.brand img{height:58px;width:auto;object-fit:contain;}

.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links > a{font-size:.92rem;font-weight:600;color:var(--muted);transition:color .2s ease;}
.nav-links > a:hover,.nav-links > a.active{color:var(--navy);}

.nav-right{display:flex;align-items:center;gap:18px;}
.nav-cta{padding:11px 22px;font-size:.85rem;white-space:nowrap;}

.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;}
.burger span{width:22px;height:2px;background:var(--navy);border-radius:2px;}

/* Services dropdown */
.has-dropdown{position:relative;}
.dropdown-toggle{
  display:flex;align-items:center;gap:6px;cursor:pointer;background:none;border:none;
  font:inherit;font-size:.92rem;font-weight:600;color:var(--muted);padding:0;
}
.dropdown-toggle:hover,.dropdown-toggle.active{color:var(--navy);}
.dropdown-caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s ease;margin-top:-4px;}
.has-dropdown.open .dropdown-caret{transform:rotate(-135deg);margin-top:4px;}
.dropdown-menu{
  position:absolute;top:calc(100% + 18px);left:50%;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 48px -22px rgba(15,23,42,.28);
  padding:10px;width:280px;
  display:grid;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:50;
}
.has-dropdown.open .dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
.dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:.88rem;font-weight:600;color:var(--text);}
.dropdown-menu a:hover{background:var(--bg-soft);color:var(--purple);}
.dropdown-menu .dropdown-all{border-top:1px solid var(--border);margin-top:6px;padding-top:12px;color:var(--purple);}

/* =========================
HERO
========================= */
.hero{padding:76px 0 88px;background:var(--bg-soft);border-bottom:1px solid var(--border);}
.hero-inner{max-width:760px;}
.hero h1{
  font-size:clamp(2.2rem,5.4vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--navy);
}
.hero p.lead{max-width:600px;margin-top:22px;color:var(--muted);font-size:1.08rem;}
.hero-actions{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;}

.hero-stats{
  margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  padding-top:36px;border-top:1px solid var(--border);
}
.hero-stats div h3{font-size:1.9rem;font-weight:800;color:var(--navy);}
.hero-stats div p{font-size:.82rem;color:var(--muted);margin-top:6px;letter-spacing:.02em;}

/* =========================
PAGE HERO (inner pages)
========================= */
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.82rem;color:var(--muted);margin-bottom:20px;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--purple);}
.breadcrumb .sep{color:var(--border);}
.breadcrumb .current{color:var(--navy);font-weight:600;}

.page-hero{padding:56px 0 64px;background:var(--bg-soft);border-bottom:1px solid var(--border);}
.page-hero-inner{max-width:760px;}
.page-hero h1{font-size:clamp(2rem,4.2vw,3rem);font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:1.15;}
.page-hero p{color:var(--muted);margin-top:16px;font-size:1.05rem;max-width:640px;}

/* =========================
ICON
========================= */
.icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);color:var(--purple);flex-shrink:0;
}
.icon svg{width:24px;height:24px;}

/* =========================
ABOUT + MISSION/VISION
========================= */
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.about-grid.reverse{grid-template-columns:.95fr 1.05fr;}
.about-grid.reverse .about-media{order:2;}
.about-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.about-media img{width:100%;height:380px;object-fit:cover;}
.about-copy h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;color:var(--navy);letter-spacing:-.02em;}
.about-copy p{color:var(--muted);margin-top:18px;font-size:1.02rem;}

.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px;}
.mv-card{border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.mv-card h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin-top:14px;}
.mv-card p{color:var(--muted);font-size:.92rem;margin-top:8px;}

/* =========================
WHY CHOOSE / COMMITMENT / SERVICE OPTIONS
========================= */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.feature-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.feature-card{border:1px solid var(--border);border-radius:var(--radius);padding:28px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease;}
.feature-card:hover{border-color:var(--purple);box-shadow:0 12px 30px -16px rgba(139,92,246,.4);}
.feature-card h3{font-size:1.08rem;font-weight:700;color:var(--navy);margin-top:18px;}
.feature-card p{color:var(--muted);font-size:.92rem;margin-top:8px;}
.feature-num{
  width:36px;height:36px;border-radius:10px;background:var(--gradient);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;
}

/* =========================
SERVICES
========================= */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.service-card{border:1px solid var(--border);border-radius:var(--radius);padding:26px;background:#fff;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;display:block;}
.service-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(15,23,42,.22);border-color:var(--border);}
.service-card h3{font-size:1.02rem;font-weight:700;color:var(--navy);margin-top:16px;}
.service-card p{color:var(--muted);font-size:.86rem;margin-top:8px;}
.service-card .card-link{margin-top:14px;font-size:.82rem;font-weight:700;color:var(--purple);display:flex;align-items:center;gap:6px;}

/* =========================
WORK / CAPABILITIES
========================= */
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.work-card{position:relative;min-height:260px;background:#fff;overflow:hidden;}
.work-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.work-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,21,51,.82),rgba(11,21,51,.05) 55%);}
.work-card .content{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;}
.work-tag{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#cfe0ff;}
.work-card h3{font-size:1.15rem;font-weight:700;color:#fff;margin-top:6px;}

/* =========================
PORTFOLIO
========================= */
.portfolio-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.filter-btn{
  padding:10px 20px;border-radius:100px;border:1px solid var(--border);background:#fff;
  color:var(--muted);font-size:.85rem;font-weight:600;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.filter-btn:hover{border-color:var(--purple);color:var(--purple);}
.filter-btn.active{background:var(--gradient);color:#fff;border-color:transparent;}

.filter-group{margin-bottom:20px;}
.filter-group + .filter-group{margin-bottom:36px;}
.filter-group .portfolio-filters{margin-bottom:0;}
.filter-label{
  display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:10px;
}
.filter-btn .count{margin-left:7px;font-size:.72rem;font-weight:700;opacity:.55;}
.filter-btn.is-empty{opacity:.45;}
.industry-btn.active{background:var(--navy);color:#fff;border-color:transparent;}
.portfolio-empty{
  grid-column:1/-1;text-align:center;padding:56px 24px;
  border:1px dashed var(--border);border-radius:var(--radius);background:#fff;
}
.portfolio-empty h3{font-size:1.15rem;margin-bottom:8px;}
.portfolio-empty p{color:var(--muted);font-size:.92rem;max-width:520px;margin:0 auto 18px;}
.portfolio-empty[hidden]{display:none;}

.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.portfolio-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;transition:transform .2s ease,box-shadow .2s ease,opacity .25s ease;}
.portfolio-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(15,23,42,.22);}
.portfolio-card.filtered-out{display:none;}
.portfolio-cta{margin-top:44px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
.portfolio-thumb{aspect-ratio:4/3;overflow:hidden;}
.portfolio-thumb img{width:100%;height:100%;object-fit:cover;}
.portfolio-body{padding:20px 22px 24px;}
.portfolio-tag{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);}
.portfolio-body h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin-top:8px;}
.portfolio-body p{color:var(--muted);font-size:.88rem;margin-top:6px;}

/* =========================
INDUSTRIES
========================= */
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.industry-card{
  position:relative;border-radius:var(--radius);overflow:hidden;min-height:220px;
  display:block;border:1px solid var(--border);
  transition:transform .2s ease,box-shadow .2s ease;
}
.industry-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(15,23,42,.3);}
.industry-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.industry-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,21,51,.88),rgba(11,21,51,.15) 60%);}
.industry-card .content{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;}
.industry-card h3{font-size:1.1rem;font-weight:700;color:#fff;}
.industry-card p{font-size:.82rem;color:#cfe0ff;margin-top:5px;}

/* Industry detail blocks */
.industry-block{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding:56px 0;border-bottom:1px solid var(--border);}
.industry-block:last-child{border-bottom:none;}
.industry-block.reverse .industry-media{order:2;}
.industry-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.industry-media img{width:100%;height:320px;object-fit:cover;}
.industry-copy h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;color:var(--navy);letter-spacing:-.02em;}
.industry-copy > p{color:var(--muted);margin-top:14px;}
.industry-list{margin-top:22px;display:grid;gap:10px;}
.industry-list li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--text);}
.industry-list li::before{
  content:"";flex-shrink:0;width:18px;height:18px;border-radius:50%;margin-top:3px;
  background:var(--gradient);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12.5 10 17.5 19 7'/></svg>") center/13px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12.5 10 17.5 19 7'/></svg>") center/13px no-repeat;
}
.industry-actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;}

/* Service hero video */
.service-video{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  background:var(--navy);
}
.service-video video{width:100%;height:420px;object-fit:cover;display:block;}
.service-video::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,21,51,.5),rgba(11,21,51,0) 55%);
}
@media(max-width:900px){ .service-video video{height:300px;} }
@media(max-width:560px){ .service-video video{height:220px;} }

/* Live demo / resource cards */
.demo-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;background:rgba(20,184,166,.12);color:#0f766e;
  margin-bottom:10px;
}
.demo-badge.pdf{background:rgba(139,92,246,.12);color:#6d28d9;}
.demo-badge.data{background:rgba(59,130,246,.12);color:#1d4ed8;}
.portfolio-card .portfolio-body .demo-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
.demo-link{
  font-size:.8rem;font-weight:700;color:var(--purple);
  display:inline-flex;align-items:center;gap:5px;
}
.demo-link:hover{text-decoration:underline;}
.demo-link.muted{color:var(--muted);}

/* =========================
PROCESS
========================= */
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.process-card{position:relative;padding:28px 24px 24px;border:1px solid var(--border);border-radius:var(--radius);}
.process-num{
  width:38px;height:38px;border-radius:50%;background:var(--gradient);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;margin-bottom:16px;
}
.process-card h3{font-size:1.05rem;font-weight:700;color:var(--navy);}
.process-card p{color:var(--muted);font-size:.9rem;margin-top:8px;}

/* =========================
FAQ
========================= */
.faq-list{border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-head{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:22px 0;text-align:left;background:none;border:none;color:inherit;
}
.faq-head h3{font-size:1.02rem;font-weight:600;color:var(--navy);}
.faq-icon{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--border);
  position:relative;flex-shrink:0;
}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:50%;background:var(--navy);transform:translate(-50%,-50%);}
.faq-icon::before{width:10px;height:1.5px;}
.faq-icon::after{width:1.5px;height:10px;transition:transform .2s ease,opacity .2s ease;}
.faq-item.open .faq-icon::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg);}
.faq-body{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-body p{padding-bottom:22px;color:var(--muted);max-width:680px;font-size:.95rem;}

/* =========================
CTA BANNER (inner pages)
========================= */
.cta-banner{background:var(--gradient);border-radius:24px;padding:56px 40px;text-align:center;color:#fff;}
.cta-banner h2{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:800;}
.cta-banner p{margin-top:12px;opacity:.92;max-width:520px;margin-left:auto;margin-right:auto;}
.cta-banner .cta-actions{margin-top:26px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.cta-banner .btn-solid{background:#fff;color:var(--navy);box-shadow:none;}
.cta-banner .btn-solid:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(0,0,0,.25);}
.cta-banner .btn-line{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;}
.cta-banner .btn-line:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1);}

/* =========================
CONTACT
========================= */
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
.contact-side h2{font-size:clamp(1.8rem,3.6vw,2.4rem);font-weight:800;color:var(--navy);}
.contact-side p{color:var(--muted);margin-top:16px;max-width:420px;}
.contact-channel{margin-top:32px;display:flex;flex-direction:column;gap:14px;}
.contact-channel a,.contact-channel div{
  display:flex;align-items:center;gap:12px;font-size:.95rem;font-weight:600;color:var(--navy);
  border-bottom:1px solid var(--border);padding-bottom:14px;
}
.contact-channel .ic{width:20px;height:20px;color:var(--purple);flex-shrink:0;}

.field{position:relative;margin-bottom:22px;}
.field input,.field textarea,.field select{
  width:100%;background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;
  color:var(--text);font-family:inherit;font-size:.96rem;padding:14px 16px;outline:none;resize:none;
  transition:border-color .2s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--purple);}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--navy);margin-bottom:6px;}

.submit-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gradient);color:#fff;padding:14px 30px;border-radius:100px;border:none;
  font-weight:700;font-size:.92rem;transition:transform .2s ease;
}
.submit-btn:hover{transform:translateY(-2px);}
.privacy-note{margin-top:14px;font-size:.78rem;color:var(--muted);}
.form-status{margin-top:12px;font-size:.85rem;color:var(--teal);font-weight:600;display:none;}
.form-status.show{display:block;}

/* =========================
FOOTER
========================= */
footer{border-top:1px solid var(--border);padding:56px 0 30px;background:var(--bg-soft);}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;}
.footer-brand{display:flex;align-items:center;}
.footer-brand img{height:46px;width:auto;object-fit:contain;}
.footer-social{display:flex;gap:20px;}
.footer-social a{font-size:.88rem;font-weight:600;color:var(--muted);transition:color .2s ease;}
.footer-social a:hover{color:var(--purple);}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;}
.footer-links a{font-size:.85rem;color:var(--muted);transition:color .2s ease;}
.footer-links a:hover{color:var(--purple);}
.footer-bottom{
  margin-top:36px;padding-top:22px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:.82rem;color:var(--muted);
}

/* =========================
WHATSAPP FLOATING BUTTON
========================= */
.whatsapp-fab{
  position:fixed;right:24px;bottom:24px;z-index:998;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -8px rgba(37,211,102,.6);
  transition:transform .2s ease,box-shadow .2s ease;
}
.whatsapp-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 28px -8px rgba(37,211,102,.7);}

@media(max-width:900px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
  .about-grid{grid-template-columns:1fr;}
  .about-grid.reverse .about-media{order:0;}
  .mv-grid{grid-template-columns:repeat(2,1fr);}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .work-grid{grid-template-columns:repeat(2,1fr);}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .industry-grid{grid-template-columns:repeat(2,1fr);}
  .industry-block{grid-template-columns:1fr;gap:32px;}
  .industry-block.reverse .industry-media{order:0;}
  .contact-inner{grid-template-columns:1fr;}
  .footer-top{flex-direction:column;align-items:flex-start;}

  /* mobile dropdown becomes an inline accordion inside the stacked menu */
  .nav-links{position:absolute;top:76px;left:0;width:100%;flex-direction:column;align-items:flex-start;gap:0;background:#fff;padding:8px 24px 20px;border-bottom:1px solid var(--border);}
  .nav-links > a{padding:12px 0;width:100%;}
  .has-dropdown{width:100%;}
  .dropdown-toggle{width:100%;justify-content:space-between;padding:12px 0;font-size:.92rem;}
  .dropdown-menu{
    position:static;width:100%;box-shadow:none;border:none;padding:0 0 8px 12px;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    display:none;
  }
  .has-dropdown.open .dropdown-menu{display:grid;}
  .dropdown-menu a{padding:9px 0;}
}
@media(max-width:560px){
  .nav-right{gap:10px;}
  .nav-cta{padding:8px 12px;font-size:.72rem;}
  .brand img{height:44px;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
  .mv-grid{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .work-grid{grid-template-columns:1fr;}
  .portfolio-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .industry-grid{grid-template-columns:1fr;}
  .cta-banner{padding:40px 24px;}
}

/* =========================
DESIGN PREVIEW (view-only)
========================= */
button.demo-link{border:0;background:none;padding:0;font:inherit;}

.doc-viewer{
  position:fixed;inset:0;z-index:200;display:none;overflow:auto;padding:24px;
  background:rgba(11,21,51,.88);backdrop-filter:blur(6px);
}
.doc-viewer.open{display:block;}
.doc-shell{max-width:940px;margin:0 auto;}
.doc-bar{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;
  padding:14px 18px;margin-bottom:18px;background:#fff;border-radius:14px;
  box-shadow:0 14px 34px -18px rgba(15,23,42,.6);
}
.doc-title{font-weight:700;color:var(--navy);}
.doc-count{font-size:.82rem;color:var(--muted);margin-right:auto;}
.doc-close{
  width:36px;height:36px;border-radius:50%;background:var(--bg-soft);
  font-size:1.5rem;line-height:1;color:var(--navy);
}
.doc-close:hover{background:#e6e9f1;}
.doc-pages{display:flex;flex-direction:column;gap:18px;}
.doc-page{
  position:relative;border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 24px 54px -26px rgba(0,0,0,.8);
}
.doc-page img{
  width:100%;display:block;pointer-events:none;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
}
.doc-page::after{content:"";position:absolute;inset:0;}
.doc-note{margin:20px 0 6px;text-align:center;color:#cfd8ee;font-size:.86rem;}
.doc-note a{color:#fff;text-decoration:underline;}

@media (max-width:600px){
  .doc-viewer{padding:12px;}
  .doc-bar{padding:12px 14px;gap:10px;}
  .doc-title{font-size:.92rem;}
  .doc-count{display:none;}
}

/* ============================================================
   UI/UX PROCESS — 6 steps with a visual for each
   Scoped to .ux-* so it cannot affect anything else on the site.
   ============================================================ */

.ux-flow{
  display:flex;align-items:center;gap:0;flex-wrap:nowrap;overflow-x:auto;
  padding:6px 2px 16px;margin-bottom:56px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.ux-flow::-webkit-scrollbar{height:4px;}
.ux-flow::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.ux-flow-step{
  flex:0 0 auto;display:flex;flex-direction:column;gap:4px;
  padding:12px 18px;border:1px solid var(--border);border-radius:100px;
  background:#fff;white-space:nowrap;
}
.ux-flow-step b{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);font-weight:700;
}
.ux-flow-step span{font-size:.68rem;color:var(--muted);letter-spacing:.06em;}
.ux-flow-step:first-child{border-color:transparent;background:var(--gradient);}
.ux-flow-step:first-child b{color:#fff;}
.ux-flow-step:first-child span{color:rgba(255,255,255,.8);}
.ux-flow-arrow{flex:0 0 auto;width:26px;height:1px;background:var(--border);position:relative;}
.ux-flow-arrow::after{
  content:"";position:absolute;right:0;top:-3px;
  border-left:6px solid var(--border);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
}

.ux-steps{display:grid;gap:clamp(48px,6vw,88px);}

.ux-step{
  display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4.5vw,64px);
  align-items:center;
}
.ux-step:nth-child(even) .ux-step-body{order:2;}
.ux-step:nth-child(even) .ux-step-visual{order:1;}

.ux-step-num{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin-bottom:14px;
}
.ux-step-num i{
  font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--gradient);color:#fff;font-size:.76rem;letter-spacing:0;
}
.ux-step-body h3{font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.2;margin-bottom:12px;color:var(--navy);}
.ux-step-body p{color:var(--muted);margin-bottom:18px;}
.ux-step-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;}
.ux-step-tags li{
  font-size:.76rem;color:var(--text);background:var(--bg-soft);
  border:1px solid var(--border);border-radius:100px;padding:6px 13px;
}

.ux-step-visual{
  border:1px solid var(--border);border-radius:var(--radius);background:#fff;
  padding:clamp(14px,2.2vw,22px);box-shadow:0 18px 44px -34px rgba(11,21,51,.55);
}
.ux-step-visual svg{display:block;width:100%;height:auto;}
.ux-step-cap{
  display:block;margin-top:12px;font-size:.74rem;color:var(--muted);
  letter-spacing:.06em;text-align:center;
}

.ux-closing{
  margin-top:clamp(56px,7vw,90px);padding:clamp(32px,5vw,56px) clamp(24px,4vw,48px);
  border-radius:var(--radius);background:var(--navy);text-align:center;
}
.ux-closing p{
  font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:1.35;color:#fff;
  max-width:22ch;margin:0 auto;font-weight:600;
}
.ux-closing p em{
  font-style:normal;background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

@media(max-width:860px){
  .ux-step{grid-template-columns:1fr;gap:24px;}
  .ux-step:nth-child(even) .ux-step-body{order:1;}
  .ux-step:nth-child(even) .ux-step-visual{order:2;}
}

/* ============================================================
   TOOL STRIP — "what we work in", per service page
   ============================================================ */
.tool-strip{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.tool-strip li{
  border:1px solid var(--border);border-radius:100px;
  padding:11px 20px;font-size:.92rem;color:var(--text);
  background:#fff;transition:border-color .2s ease,transform .2s ease;
}
.tool-strip li:hover{border-color:var(--teal);transform:translateY(-2px);}
.section-alt .tool-strip li{background:var(--bg-soft);}


/* ============================================================
   MOBILE PASS
   Measured on a real 390px viewport, not a resized desktop window.
   Fixes found: 96px section padding top AND bottom (192px of dead
   space between every section), form inputs under 16px which makes
   iOS Safari zoom the page on focus, tap targets under 44px, and a
   filter block 355px tall — most of a phone screen before any work
   is visible.
   ============================================================ */

@media (max-width:600px){

  /* 96px top + bottom was costing ~190px of empty scroll per section */
  .section{padding:56px 0;}
  .section-head{margin-bottom:32px;}
  .wrap{padding:0 20px;}

  .field{margin-bottom:18px;}

  /* two CTAs of different widths read as a mistake — match them */
  .hero-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch;}
  .hero-actions .btn{width:100%;}

  /* The scrollable row is .portfolio-filters; .filter-group is the label + row
     wrapper around it. Wrapped, the two rows cost 368px — most of a phone screen
     before any work shows. One scrollable line each. */
  .portfolio-filters{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    padding-bottom:10px;margin-bottom:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .portfolio-filters::-webkit-scrollbar{display:none;}
  .portfolio-filters .filter-btn{flex:0 0 auto;white-space:nowrap;}
  .filter-group{margin-bottom:14px;}
  .filter-label{display:block;margin-bottom:6px;}

  /* the burger was 28px tall — under the 44px tap floor */
  .burger{padding:12px 10px;min-height:44px;min-width:44px;justify-content:center;}
}

/* The mobile menu turns on at 900px, so everything touch-related belongs here,
   not at 600px — a tablet at 768px is still a finger, not a mouse. */
@media (max-width:900px){

  /* iOS zooms the whole page when a focused field is under 16px */
  .field input,.field textarea,.field select{font-size:16px;}

  /* 44px is the tap-target floor on both iOS and Android */
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;}
  .filter-btn,.filter{min-height:44px;display:inline-flex;align-items:center;}
  .main-nav a{min-height:44px;display:flex;align-items:center;}
  .burger{padding:12px 10px;min-height:44px;min-width:44px;justify-content:center;}

  /* The desktop rule .has-dropdown.open .dropdown-menu sets
     transform:translate(-50%,0) and is more specific (0,3,0) than the mobile
     .dropdown-menu{transform:none} (0,1,0). So the moment Services was opened on a
     phone the submenu jumped half its own width to the left and the links were cut
     off — "Website Development" showed as "ent". Same specificity, later in the
     file, wins it back. */
  .has-dropdown.open .dropdown-menu{transform:none;left:auto;top:auto;}

  /* submenu links get the same 44px tap floor as everything else */
  .dropdown-menu a{min-height:44px;display:flex;align-items:center;}

  /* a clear left rule reads as "these belong to Services" */
  .has-dropdown.open .dropdown-menu{
    border-left:2px solid var(--border);
    margin:2px 0 8px;padding-left:14px;
  }
  .dropdown-caret{flex:0 0 auto;}

  /* stop long words breaking the layout on narrow screens */
  h1,h2,h3{overflow-wrap:break-word;}
}

@media (max-width:400px){
  .wrap{padding:0 16px;}
  .section{padding:48px 0;}
}