/* ============ TOKENS ============ */
:root{
  --bg:#FFFFFF;
  --bg-secondary:#F7F9FC;
  --text:#0B1220;
  --text-muted:#6B7280;
  --accent1:#005BFC;
  --accent2:#091D39;
  --accent:#005BFC;
  --border:#E7EAF0;
  --dark:#091D39;
  --dark-card:#0F2745;

  --font:'Poppins', sans-serif;

  --content-w:1680px;
  --section-x:80px;
  --section-y:150px;
}

@media (max-width: 1100px){
  :root{ --section-x:28px; --section-y:88px; }
}
@media (max-width: 640px){
  :root{ --section-x:18px; --section-y:64px; }
}
@media (max-width: 480px){
  :root{ --section-x:16px; --section-y:52px; }
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  overflow-x:hidden;
  max-width:100%;
  cursor:auto;
}
@media (max-width: 900px), (hover: none) and (pointer: coarse){ body{ cursor:auto; } }

/* ============ LOADER ============ */
.loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px;
}
.loader-done #loader,
.loader-done .loader{
  display:none !important;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}

.wrap{
  max-width:var(--content-w);
  margin:0 auto;
  padding-left:var(--section-x);
  padding-right:var(--section-x);
}

section{
  padding-top:var(--section-y);
  padding-bottom:var(--section-y);
  position:relative;
}

.eyebrow{
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:24px;height:1px;
  background:var(--accent1);
  display:inline-block;
}

h1,h2,h3{
  font-family:var(--font);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.12;
}

.reveal-line{ overflow:hidden; padding-bottom:0.15em; margin-bottom:-0.15em; }
.reveal-line span{ display:inline-block; will-change:transform; }

/* badge */
.badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 20px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-secondary);
  font-size:13px;
  font-weight:500;
  color:var(--text);
  margin-bottom:26px;
}
.badge .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent1);
  box-shadow:0 0 0 3px rgba(0,91,252,0.18);
}
.badge b{ color:var(--accent1); font-weight:600; }

/* ============ GRADIENT CTA BUTTON ============ */
.btn{
  font-size:14px;
  font-weight:500;
  letter-spacing:0.01em;
  padding:15px 26px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:10px;
  position:relative;
  box-shadow:0 14px 30px -12px rgba(0,91,252,0.55);
  transition:box-shadow .35s ease, transform .35s ease;
}
.btn:hover{ box-shadow:0 18px 40px -10px rgba(0,91,252,0.7); }
.btn .arrow-ico{ width:16px; height:16px; flex-shrink:0; }
.arrow-swap{
  position:relative;
  width:16px; height:16px;
  overflow:hidden;
  display:inline-block;
  flex-shrink:0;
}
.arrow-swap .arrow-ico{
  position:absolute; top:0; left:0;
  width:16px; height:16px;
  transition:transform .4s cubic-bezier(0.22, 1, 0.36, 1), opacity .4s cubic-bezier(0.22, 1, 0.36, 1);
  transform:translateY(0); opacity:1;
}
.arrow-swap .arrow-dup{ transform:translateY(150%); opacity:0; }
.btn:hover .arrow-swap .arrow-ico:not(.arrow-dup){ transform:translateY(-150%); opacity:0; }
.btn:hover .arrow-swap .arrow-dup{ transform:translateY(0); opacity:1; }
.btn-outline{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
}
.btn-outline:hover{ background:var(--bg-secondary); box-shadow:none; }

.section-cta{
  margin-top:64px;
  display:flex;
  justify-content:center;
}

.magnetic{ display:inline-block; }

/* ============ CUSTOM CURSOR ============ */
.cursor{
  position:fixed; top:0;left:0;
  width:26px;height:26px;
  border-radius:50%;
  background:transparent;
  border:1.5px solid var(--text);
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  transition:width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), border-width .35s ease, background .35s ease;
}
.cursor-label{
  position:fixed; top:0;left:0;
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:9999;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; background:var(--text); border-radius:50%;
  width:90px;height:90px;
  display:flex;align-items:center;justify-content:center;
  opacity:0; mix-blend-mode:difference;
  transition:opacity .3s ease;
}
@media (max-width: 900px), (hover: none) and (pointer: coarse){ .cursor,.cursor-label{ display:none !important; } }

/* ============ HEADER ============ */
header{
  position:fixed; top:20px; left:50%;
  transform:translateX(-50%);
  width:min(1360px, calc(100% - 40px));
  height:82px; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  border-radius:999px;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(231,234,240,0.8);
  transition:height .4s cubic-bezier(.2,.8,.2,1), background .4s ease, top .4s ease, width .4s ease, padding .4s ease;
}
header.shrink{
  top:12px; height:66px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 30px rgba(9,29,57,0.08);
}
@media (max-width: 640px){
  header{
    top:10px; height:62px;
    width:calc(100% - 24px);
    padding:0 16px;
  }
  header.shrink{ top:6px; height:56px; }
  .logo img{ height:28px; }
  .logo-text{ font-size:15px; }
}
.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo img{ height:34px; width:auto; }
.logo-text{ font-size:17px; font-weight:600; letter-spacing:-0.01em; color:var(--dark); }
.logo-text span{ color:var(--accent1); }
nav{ display:flex; gap:34px; }
@media (max-width: 900px){ nav{ display:none; } }

/* ---------- MOBILE NAV TOGGLE + PANEL ---------- */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; align-items:center;
  gap:5px;
  width:40px; height:40px; border-radius:50%;
  flex-shrink:0;
  background:transparent;
  z-index:1001;
}
.nav-toggle span{
  width:18px; height:1.6px; background:var(--dark);
  transition:transform .3s ease, opacity .3s ease;
}
@media (max-width:900px){ .nav-toggle{ display:flex; } }
@media (max-width:900px){ header > a.btn.magnetic{ display:none; } }
.nav-toggle.open span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:999;
  background:rgba(255,255,255,0.98);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:100px 24px 44px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  gap:16px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.mobile-nav.open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear 0s;
}
.mobile-nav nav{ display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; }
.mobile-nav nav a{ font-size:20px; font-weight:500; padding:6px 12px; text-align:center; }
.mobile-nav .btn{ margin-top:20px; padding:14px 28px; width:auto; max-width:280px; justify-content:center; }
nav a{ font-size:14px; font-weight:500; position:relative; padding-bottom:2px; }
nav a::after{
  content:''; position:absolute; left:0; bottom:-2px;
  width:0%; height:1px; background:var(--text);
  transition:width .35s cubic-bezier(.2,.8,.2,1);
}
nav a:hover::after{ width:100%; }
nav a.active{ color:var(--accent1); }
nav a.active::after{ width:100%; background:var(--accent1); }

.inline-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:16px; font-size:14.5px; font-weight:600;
  color:var(--accent1);
  transition:gap .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.inline-link:hover{ gap:11px; opacity:.85; }
.services .inline-link{ color:#fff; }

/* ============ HERO ============ */
.hero{
  padding-top:calc(var(--section-y) + 60px);
  padding-bottom:60px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero h1{
  font-size:clamp(32px, 5.6vw, 60px);
  max-width:880px; font-weight:600;
}
.hero.bp-banner{ overflow:visible; }
.hero-desc{
  margin-top:40px;
  max-width:600px;
  color:var(--text-muted);
  font-size:18px;
  line-height:1.65;
}
@media (max-width:640px){
  .hero-desc{ font-size:16px; margin-top:24px; }
}
.hero-cta-row{ margin-top:38px; display:flex; gap:16px; }
@media (max-width:480px){
  .hero-cta-row{ flex-direction:column; width:100%; max-width:280px; align-items:stretch; }
  .hero-cta-row .btn{ justify-content:center; width:100%; }
}

.hero-video-stage{
  margin-top:70px;
  width:100%;
  display:flex; justify-content:center;
  perspective:1200px;
}
.hero-video-frame{
  width:56%;
  aspect-ratio:16/9;
  border-radius:36px;
  overflow:hidden;
  position:relative;
  box-shadow:0 40px 90px -20px rgba(9,29,57,0.28);
  will-change:transform;
  transform-origin:center center;
}
@media (max-width:900px){ .hero-video-frame{ width:92%; border-radius:20px; } }
.hero-video-frame video{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05);
}
.hero-video-frame::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,29,57,0) 55%, rgba(9,29,57,0.55) 100%);
}
.hero-video-frame .play-label{
  position:absolute; bottom:26px; left:28px; z-index:2;
  color:#fff; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  display:flex; align-items:center; gap:9px; opacity:0.9;
}
.hero-video-frame .play-label::before{ content:''; width:8px;height:8px;border-radius:50%; background:#5CF29A; }

.hero-spacer{ height:20vh; }

/* ============ SERVICES CAROUSEL ============ */
.services{ background:var(--dark); color:#fff; }
.services .eyebrow{ color:rgba(255,255,255,0.5); }
.services .eyebrow::before{ background:var(--accent1); }
.services-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.services-header h2{ font-size:clamp(30px,4vw,52px); color:#fff; margin-top:18px; }
.carousel-arrows{ display:flex; gap:12px; }
.arrow-btn{
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:background .3s ease, transform .3s ease;
  flex-shrink:0;
}
.arrow-btn:hover{ background:rgba(255,255,255,0.1); }
.arrow-btn:active{ transform:scale(0.92); }
.arrow-btn svg{ width:20px; height:20px; }

.services-carousel-wrap{
  margin-top:64px;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
}
.services-carousel-wrap.dragging{ cursor:grabbing; }
.services-track{
  display:flex; gap:26px;
  width:max-content;
  will-change:transform;
  touch-action:pan-y;
}
.service-card{
  width:400px; height:520px;
  border-radius:24px;
  background:var(--dark-card);
  border:1px solid rgba(255,255,255,0.08);
  position:relative; overflow:hidden; flex-shrink:0;
  padding:34px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .8s ease;
  user-select:none;
  opacity:0; transform:translateY(28px) scale(.97);
}
.service-card.in-view{ opacity:1; transform:translateY(0) scale(1); }
@media (max-width:640px){
  .service-card{ width:82vw; max-width:340px; height:440px; padding:24px; }
  .service-card h3{ font-size:24px; }
}
@media (max-width:380px){
  .service-card{ width:86vw; height:420px; padding:20px; }
  .service-card h3{ font-size:21px; }
  .service-card p{ font-size:13.5px; }
}
.service-card:hover{ transform:translateY(-8px); }
.service-card-top{ display:flex; align-items:center; justify-content:space-between; }
.service-card .num{ font-size:13px; color:rgba(255,255,255,0.4); letter-spacing:0.08em; }
.service-icon{ 
  object-fit:contain;
  color:var(--accent1);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), color .4s ease;
}
.service-card:hover .service-icon{ transform:scale(1.12) rotate(-4deg); color:#fff; }
.service-card h3{ font-size:30px; color:#fff; font-weight:500; margin-top:auto; }
.service-card p{ font-size:15px; color:rgba(255,255,255,0.55); margin-top:12px; line-height:1.55; max-width:280px; }
.service-card .glow{
  position:absolute; inset:0;
  background:radial-gradient(circle at 80% 0%, rgba(0,91,252,0.3), transparent 60%);
  opacity:0; transition:opacity .5s ease;
}
.service-card .glow{ opacity:1; }

/* ============ ABOUT ============ */
.about-head{ max-width:640px; margin:0 auto; text-align:center; }
.about-head h2{ font-size:clamp(28px,4vw,46px); margin-top:18px; }
.about-head p{ color:var(--text-muted); font-size:18px; line-height:1.65; margin-top:22px; }

.about-blueprint{
  position:relative;
  margin-top:80px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.about-blueprint::before{
  content:'';
  position:absolute; top:29px; left:12.5%; right:12.5%; height:1px;
  background:repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 16px);
  z-index:0;
}
.about-blueprint-fill{
  position:absolute; top:29px; left:12.5%; width:0%; height:2px;
  max-width:75%;
  background:linear-gradient(90deg, var(--accent1), var(--accent2));
  box-shadow:0 0 10px rgba(0,91,252,0.5);
  z-index:0;
  transition:width 1.6s cubic-bezier(.2,.8,.2,1);
}
@media (max-width:900px){
  .about-blueprint-fill{ top:0; bottom:0; left:29px; width:2px; height:0%; }
}
.about-step{
  position:relative; z-index:1;
  padding:0 18px; text-align:center;
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.about-step.in-view{ opacity:1; transform:translateY(0); }
.about-step-node{
  width:58px; height:58px; margin:0 auto;
  border-radius:50%;
  background:var(--bg);
  border:1.5px solid var(--accent1);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent1);
  box-shadow:0 0 0 6px rgba(0,91,252,0.06);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, background .4s ease, color .4s ease;
  transform:scale(.6);
}
.about-step.in-view .about-step-node{ transform:scale(1); transition:transform .6s cubic-bezier(.34,1.56,.64,1) .1s, box-shadow .4s ease, background .4s ease, color .4s ease; }
.about-step-node svg{ width:22px; height:22px; }
.about-step:hover .about-step-node{
  transform:translateY(-4px) scale(1.06);
  background:var(--accent1); color:#fff;
  box-shadow:0 10px 26px -8px rgba(0,91,252,0.45);
}
.about-step-no{
  display:block; margin-top:18px;
  font-family:'Courier New', monospace; font-size:12px; letter-spacing:0.1em;
  color:var(--accent1);
}
.about-step h4{ font-size:18px; font-weight:500; margin-top:8px; }
.about-step p{ margin-top:10px; font-size:14px; line-height:1.6; color:var(--text-muted); max-width:230px; margin-left:auto; margin-right:auto; }
@media (max-width:900px){
  .about-blueprint{ grid-template-columns:1fr; gap:44px; margin-top:60px; }
  .about-blueprint::before{ top:0; bottom:0; left:29px; right:auto; width:1px; height:auto; background:repeating-linear-gradient(180deg, var(--border) 0 8px, transparent 8px 16px); }
  .about-step{ text-align:left; padding-left:76px; }
  .about-step-node{ position:absolute; left:0; top:0; margin:0; }
  .about-step p{ margin-left:0; margin-right:0; max-width:360px; }
}
@media (max-width:480px){
  .about-blueprint::before{ left:24px; }
  .about-blueprint-fill{ left:24px !important; }
  .about-step{ padding-left:64px; }
  .about-step-node{ width:48px; height:48px; }
  .about-step-node svg{ width:18px; height:18px; }
}

.stats{
  margin-top:130px; display:grid; grid-template-columns:repeat(5,1fr); gap:28px;
  border-top:1px solid var(--border); padding-top:52px;
  text-align:center;
}
@media (max-width:900px){
  .stats{ grid-template-columns:repeat(2,1fr); gap:36px 20px; margin-top:80px; padding-top:40px; }
  .stat:last-child:nth-child(odd){ grid-column: span 2; }
}
@media (max-width:480px){
  .stats{ grid-template-columns:1fr 1fr; gap:28px 16px; }
  .stat h3{ font-size:28px; }
  .stat span{ font-size:12.5px; }
}
.stat h3{ font-size:clamp(34px,4vw,52px); }
.stat span{ display:block; color:var(--text-muted); font-size:14px; margin-top:8px; }

/* ============ INDUSTRIES — SaaS-style tile grid (homepage) ============ */
.section-label{ margin-bottom:20px; }
.section-label h2{ font-size:clamp(28px,4vw,44px); font-weight:500; margin-top:16px; }
.section-label.center{ text-align:center; }
.section-label.center h2{ margin-left:auto; margin-right:auto; }
.section-label.center .eyebrow{ justify-content:center; }
.section-sub{ margin-top:18px; color:var(--text-muted); font-size:16.5px; line-height:1.65; max-width:560px; }
.section-label.center .section-sub{ margin-left:auto; margin-right:auto; }

.industries-saas{ background:var(--bg-secondary); }
.industry-tiles{
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:auto;
  grid-auto-flow:dense;
  align-items:stretch;
  gap:22px;
}
.industry-tile{
  position:relative; overflow:hidden;
  border-radius:20px; padding:30px 26px;
  background:rgba(255,255,255,0.7);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease, opacity .6s ease;
  transform-style:preserve-3d;
  opacity:0; transform:translateY(22px);
  display:flex; flex-direction:column; justify-content:center;
}
.industry-tile-body{ display:flex; flex-direction:column; }
.industry-tile.tile-wide{
  flex-direction:row; align-items:center; gap:24px;
}
.industry-tile.tile-wide .industry-tile-icon{ flex-shrink:0; }
.industry-tile.tile-wide .industry-tile-body{ flex:1; min-width:0; }
.industry-tile.tile-wide .industry-tile-body h3{ margin-top:0; }
.industry-tile.tile-wide p{ max-width:420px; }
.industry-tile.tile-hero{ grid-column:span 2; grid-row:span 2; }
.industry-tile.tile-hero h3{ font-size:26px; }
.industry-tile.tile-hero p{ max-width:340px; font-size:15px; }
.industry-tile.tile-tall{ grid-column:span 1; grid-row:span 2; }
.industry-tile.tile-tall p{ font-size:13.5px; }
.industry-tile.tile-wide{ grid-column:span 2; grid-row:span 1; }
.industry-tile.in-view{ opacity:1; transform:translateY(0); }
.industry-tile:hover{ transform:translateY(-6px); border-color:transparent; box-shadow:0 30px 60px -26px rgba(9,29,57,0.26); }
.industry-tile::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background-image:var(--tile-img);
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity .5s ease, transform .6s ease;
}
.industry-tile:hover::before{ opacity:.22; transform:scale(1); }
.industry-tile::after{ z-index:1; }
.industry-tile.dark{
  background:linear-gradient(155deg, var(--dark), #0F2745);
  border-color:rgba(255,255,255,0.08);
}
.industry-tile.dark h3, .industry-tile.dark .industry-tile-index{ color:#fff; }
.industry-tile.dark p{ color:rgba(255,255,255,0.6); }
.industry-tile.dark .industry-tile-icon{ background:rgba(255,255,255,0.08); color:#fff; }
.industry-tile.dark:hover .industry-tile-icon{ background:var(--accent1); }
.industry-tile.dark .industry-tile-stat{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12); color:rgba(255,255,255,0.7); }
.industry-tile.dark .industry-tile-stat .dot{ background:#5CA8FF; }
.industry-tile.dark .industry-tile-cta{ color:#5CA8FF; }

.industry-tile-index{
  position:absolute; top:22px; right:24px; z-index:2;
  font-family:'Courier New', monospace; font-size:10.5px; letter-spacing:0.08em;
  color:var(--text-muted); opacity:.6;
}
.industry-tile-icon{
  width:46px; height:46px; border-radius:12px;
  background:var(--bg-secondary);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent1);
  position:relative; z-index:2;
  transition:background .35s ease, color .35s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.industry-tile-icon svg{ width:22px; height:22px; }
.industry-tile:hover .industry-tile-icon{ background:var(--accent1); color:#fff; transform:scale(1.1) rotate(-8deg); }
.industry-tile h3{ font-size:18px; font-weight:500; margin-top:20px; position:relative; z-index:2; }
.industry-tile p{ font-size:14px; color:var(--text-muted); line-height:1.6; margin-top:8px; position:relative; z-index:2; }

.industry-tile-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:18px;
  position:relative;
  z-index:2;
}
.industry-tile-stat{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  background:var(--bg-secondary); border:1px solid var(--border);
  font-size:11.5px; font-weight:500; color:var(--text-muted);
  position:relative; z-index:2; width:fit-content;
}
.industry-tile-stat .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent1); }
.industry-tile-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--accent1);
  position:relative; z-index:2;
  opacity:0; transform:translateX(-6px);
  transition:opacity .35s ease, transform .35s ease;
}
.industry-tile-cta svg{ width:13px; height:13px; transition:transform .3s ease; }
.industry-tile:hover .industry-tile-cta{ opacity:1; transform:translateX(0); }
.industry-tile:hover .industry-tile-cta svg{ transform:translateX(3px); }

/* Touch devices always show CTA */
@media (hover: none) and (pointer: coarse){
  .industry-tile-cta{ opacity:1; transform:none; }
}

@media (max-width:1000px){
  .industry-tiles{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:auto; gap:18px; }
  .industry-tile.tile-hero{ grid-column:span 2; grid-row:span 1; }
  .industry-tile.tile-tall{ grid-column:span 1; grid-row:span 1; }
  .industry-tile.tile-wide{ grid-column:span 2; grid-row:span 1; }
  .industry-tile-cta{ opacity:1; transform:none; }
}

@media (max-width:600px){
  .industry-tiles{ grid-template-columns:1fr; grid-auto-rows:auto; gap:16px; margin-top:36px; }
  .industry-tile.tile-hero, .industry-tile.tile-tall, .industry-tile.tile-wide{ grid-column:span 1; grid-row:span 1; }
  .industry-tile{ padding:24px 20px; border-radius:18px; }
  .industry-tile.tile-wide{ flex-direction:column; align-items:flex-start; gap:16px; }
  .industry-tile.tile-wide .industry-tile-body h3{ margin-top:16px; }
  .industry-tile.tile-hero h3{ font-size:22px; }
  .industry-tile-index{ top:18px; right:20px; font-size:10px; }
  .industry-tile-meta{ margin-top:14px; gap:8px 12px; }
  .industry-tile-cta{ opacity:1; transform:none; }
}

@media (max-width:480px){
  .section-label.center h2{ font-size:clamp(24px, 6vw, 32px); }
  .section-sub{ font-size:14.5px; margin-top:12px; }
  .industry-tiles{ gap:14px; margin-top:28px; }
  .industry-tile{ padding:20px 16px; border-radius:16px; }
  .industry-tile-index{ top:16px; right:16px; font-size:9.5px; }
  .industry-tile h3{ font-size:17.5px; margin-top:14px; }
  .industry-tile p{ font-size:13px; line-height:1.55; }
  .industry-tile-stat{ font-size:11px; padding:4px 10px; }
  .industry-tile-cta{ font-size:12px; }
}

/* ============ INDUSTRIES CARD (photo grid — used on services.html) ============ */
.industry-cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
@media (max-width:640px){ .industry-cards{ grid-template-columns:1fr; } }
.industry-card{
  border-radius:20px; overflow:hidden; position:relative;
  aspect-ratio:4/3;
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
  opacity:0; transform:scale(1.25) translateY(120px);
}
.industry-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,29,57,0) 40%, rgba(9,29,57,0.82) 100%);
}
.industry-card-content{
  position:relative; z-index:2; color:#fff; padding:22px;
  display:flex; align-items:center; gap:12px;
  width:100%;
}
.industry-open-arrow{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.35);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .3s ease, transform .3s ease;
}
.industry-open-arrow svg{ width:16px; height:16px; }
.industry-card:hover .industry-open-arrow{ background:var(--accent1); transform:rotate(45deg); }
.industry-card-text h3{ font-size:19px; font-weight:500; }
.industry-card-text p{ font-size:13px; color:rgba(255,255,255,0.7); margin-top:4px; line-height:1.4; }
.industry-card-cta{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px; font-size:12.5px; font-weight:600; color:#fff;
  opacity:0; transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
.industry-card-cta svg{ width:13px; height:13px; transition:transform .3s ease; }
.industry-card:hover .industry-card-cta{ opacity:1; transform:translateY(0); }
.industry-card:hover .industry-card-cta svg{ transform:translateX(3px); }

/* ============ BLOG ============ */
.blog-post{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  padding:52px 0; border-bottom:1px solid var(--border);
}
@media (max-width:900px){ .blog-post{ grid-template-columns:1fr; } }
.blog-visual{ aspect-ratio:3/2; border-radius:16px; background-size:cover; background-position:center; }
.blog-meta{ display:flex; gap:16px; font-size:13px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
.blog-copy h3{ font-size:clamp(22px,2.6vw,32px); font-weight:500; margin-top:14px; }
.blog-copy p{ color:var(--text-muted); margin-top:12px; font-size:16px; line-height:1.6; }
.blog-copy .btn{ margin-top:22px; padding:12px 22px; font-size:13px; }

/* ============ CAREERS (full bg banner) ============ */
.careers-full{
  min-height:640px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background-size:cover; background-position:center;
  position:relative; color:#fff;
}
.careers-full::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,29,57,0.55), rgba(9,29,57,0.86));
}
.careers-inner{ position:relative; z-index:2; max-width:720px; padding:0 24px; }
.careers-inner .eyebrow{ justify-content:center; color:rgba(255,255,255,0.65); }
.careers-inner .eyebrow::before{ background:#fff; }
.careers-inner h2{ color:#fff; font-size:clamp(38px,6vw,80px); margin-top:20px; }
.careers-inner p{ color:rgba(255,255,255,0.75); margin-top:20px; font-size:18px; line-height:1.6; }
.careers-inner .section-cta{ margin-top:36px; justify-content:center; }

/* ============ CONTACT ============ */
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:90px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }
.contact-grid h2{ font-size:clamp(30px,4.4vw,52px); max-width:440px; }
.contact-grid p{ color:var(--text-muted); margin-top:18px; font-size:17px; max-width:400px; line-height:1.6; }
.field{ position:relative; margin-bottom:36px; }
.field input, .field textarea{
  display:block;
  width:100%; border:none; border-bottom:1px solid var(--border);
  padding:12px 0; font-size:17px; font-family:inherit; background:transparent;
  outline:none; color:var(--text); resize:none;
}
.field label{ position:absolute; left:0; top:12px; color:var(--text-muted); font-size:17px; transition:all .3s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label{
  top:-14px; font-size:12px; letter-spacing:0.04em; color:var(--accent1);
}
.field .underline{ position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--accent1); transition:width .4s cubic-bezier(.2,.8,.2,1); }
.field input:focus ~ .underline, .field textarea:focus ~ .underline{ width:100%; }

/* ============ FOOTER ============ */
footer{ background:var(--dark); color:#fff; padding-top:90px; }
.marquee{ overflow:hidden; border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1); padding:36px 0; }
.marquee-track{ display:flex; gap:56px; width:max-content; animation:marquee 26s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-track span{ font-weight:600; font-size:clamp(32px,5.6vw,72px); white-space:nowrap; color:#fff; }
.marquee-track span.outline{ -webkit-text-stroke:1px rgba(255,255,255,0.5); color:transparent; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding:76px var(--section-x) 40px; max-width:var(--content-w); margin:0 auto; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:40px 30px; padding:60px var(--section-x) 36px; } }
@media (max-width:540px){ .footer-grid{ grid-template-columns:1fr; gap:32px; padding:44px var(--section-x) 28px; } }
.footer-grid h4{ font-size:13px; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.4); margin-bottom:18px; }
.footer-grid a, .footer-grid p{ display:block; font-size:15px; color:rgba(255,255,255,0.75); margin-bottom:11px; }
.footer-grid a:hover{ color:#fff; }
.footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-logo img{ height:30px; }
.footer-logo span{ font-size:16px; font-weight:600; color:#fff; }
.footer-social{ display:flex; gap:10px; margin-top:22px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, transform .3s ease;
}
.footer-social a:hover{ background:var(--accent1); transform:translateY(-3px); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding:26px var(--section-x); max-width:var(--content-w); margin:0 auto; display:flex; justify-content:space-between; color:rgba(255,255,255,0.4); font-size:13px; flex-wrap:wrap; gap:12px; }
@media (max-width:600px){
  .footer-bottom{ flex-direction:column; text-align:center; align-items:center; gap:8px; }
}

/* ============ QUICK CONTACT MODAL ============ */
.modal-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(9,29,57,0.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
  padding:20px;
}
.modal-overlay.active{ opacity:1; pointer-events:auto; }
.modal-panel{
  width:min(440px, 100%);
  max-height:90vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
  border-radius:24px;
  padding:44px 36px;
  position:relative;
  transform:scale(0.92) translateY(16px);
  opacity:0;
  transition:transform .4s cubic-bezier(0.22,1,0.36,1), opacity .4s cubic-bezier(0.22,1,0.36,1);
}
@media (max-width:480px){
  .modal-panel{ padding:36px 20px; border-radius:20px; }
  .modal-panel h3{ font-size:22px; }
}
.modal-overlay.active .modal-panel{ transform:scale(1) translateY(0); opacity:1; }
.modal-close{
  position:absolute; top:20px; right:20px;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease;
}
.modal-close:hover{ background:var(--bg-secondary); }
.modal-close svg{ width:14px; height:14px; }
.modal-panel h3{ font-size:26px; font-weight:600; max-width:300px; }
.modal-panel p{ color:var(--text-muted); margin-top:10px; font-size:15px; }
.modal-panel form{ margin-top:30px; }
.modal-panel .field{ margin-bottom:28px; }
.modal-panel .btn{ width:100%; justify-content:center; margin-top:6px; }
.modal-success{ display:none; text-align:center; padding:20px 0; }
.modal-success.active{ display:block; }
.modal-success svg{ width:52px; height:52px; margin:0 auto 18px; }
.modal-success h3{ max-width:none; }

/* Mobile input zoom prevention */
@media (max-width: 640px){
  .field input, .field textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea{
    font-size:16px !important;
  }
}

/* ============ FLOATING ACTION BUTTONS ============ */
.floating-actions{
  position:fixed; right:24px; bottom:24px; z-index:900;
  display:flex; flex-direction:column; gap:14px; cursor:auto;
}
.float-btn{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(9,29,57,0.28);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.float-btn:hover{ transform:scale(1.08); }
.float-btn svg{ width:28px; height:28px; }
.whatsapp-btn{ background:#25D366; }
.gmail-btn{ background:#fff; border:1px solid var(--border); position:relative; }
.gmail-btn::before, .gmail-btn::after{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid #EA4335;
  opacity:0.6;
  animation:gmailRipple 2.2s ease-out infinite;
}
.gmail-btn::after{ animation-delay:1.1s; }
@keyframes gmailRipple{
  0%{ transform:scale(1); opacity:0.6; }
  100%{ transform:scale(1.7); opacity:0; }
}
@media (max-width:640px){
  .floating-actions{ right:16px; bottom:88px; }
  .float-btn{ width:48px; height:48px; }
  .float-btn svg{ width:24px; height:24px; }
}

/* ============ COOKIE & CACHE CONSENT POPUP ============ */
.cookie-popup{
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translate(-50%, 120%) scale(0.96);
  z-index:9999;
  width:min(1050px, calc(100vw - 36px));
  max-width:1050px;
  background:rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  border:1px solid rgba(226, 232, 240, 0.9);
  border-radius:22px;
  padding:24px 28px;
  box-shadow:0 24px 60px -15px rgba(9, 29, 57, 0.16), 0 0 0 1px rgba(0, 91, 252, 0.06);
  color:#0B1220;
  opacity:0;
  pointer-events:none;
  transition:transform .5s cubic-bezier(0.16, 1, 0.3, 1), opacity .4s ease;
}
.cookie-popup.active{
  transform:translate(-50%, 0) scale(1);
  opacity:1;
  pointer-events:auto;
}
.cookie-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.cookie-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 12px;
  background:rgba(0, 91, 252, 0.06);
  border:1px solid rgba(0, 91, 252, 0.14);
  border-radius:999px;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--accent1);
}
.cookie-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#10B981;
  box-shadow:0 0 8px rgba(16, 185, 129, 0.5);
  display:inline-block;
}
.cookie-close{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9CA3AF;
  background:transparent;
  border:none;
  cursor:pointer;
  transition:color .25s ease, background .25s ease;
}
.cookie-close:hover{
  color:#1F2937;
  background:rgba(0, 0, 0, 0.05);
}
.cookie-close svg{
  width:14px;
  height:14px;
}
.cookie-title{
  font-size:18.5px;
  font-weight:600;
  color:#091D39;
  letter-spacing:-0.015em;
  line-height:1.3;
}
.cookie-text{
  font-size:13.5px;
  line-height:1.6;
  color:#4B5563;
  margin-top:6px;
}
.cookie-popup .d-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-top:16px;
}
.cookie-pills{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:0;
  width:fit-content;
}
.cookie-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:8px;
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  font-size:11.5px;
  font-weight:500;
  color:#334155;
}
.cookie-pill svg{
  width:12px;
  height:12px;
  color:var(--accent1);
}
.cookie-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:0;
  width:300px;
  max-width:100%;
  flex-wrap:wrap;
}
.cookie-btn-accept{
  padding:10px 18px;
  font-size:13px;
  font-weight:600;
  flex:1;
  min-width:130px;
  justify-content:center;
  background:var(--accent1);
  color:#fff;
  box-shadow:0 6px 18px -4px rgba(0, 91, 252, 0.35);
  transition:background .3s ease, transform .25s ease, box-shadow .3s ease;
  white-space:nowrap;
}
.cookie-btn-accept:hover{
  background:#004AD6;
  transform:translateY(-1px);
  box-shadow:0 8px 22px -4px rgba(0, 91, 252, 0.45);
}
.cookie-btn-essential{
  padding:10px 18px;
  font-size:13px;
  font-weight:500;
  flex:1;
  min-width:130px;
  color:#374151;
  border:1px solid #D1D5DB;
  background:transparent;
  justify-content:center;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.cookie-btn-essential:hover{
  background:#F3F4F6;
  border-color:#9CA3AF;
  color:#111827;
}

@media (max-width:768px){
  .cookie-popup .d-flex{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  .cookie-actions{
    width:100%;
  }
}

@media (max-width:600px){
  .cookie-popup{
    left:16px;
    right:16px;
    bottom:84px;
    width:auto;
    max-width:none;
    transform:translateY(120%) scale(0.96);
    padding:20px;
    border-radius:18px;
  }
  .cookie-popup.active{
    transform:translateY(0) scale(1);
  }
  .cookie-title{ font-size:17px; }
  .cookie-text{ font-size:13px; }
  .cookie-actions{
    flex-direction:column;
    gap:8px;
    width:100%;
  }
  .cookie-btn-accept, .cookie-btn-essential{
    width:100%;
  }
}

/* ============ STICKY BOTTOM MENU (MOBILE) ============ */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 84px;
  }

  .floating-actions {
    bottom: 88px;
    right: 16px;
  }

  .cookie-popup {
    bottom: 84px;
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 480px;
    height: 64px;
    z-index: 950;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 999px;
    box-shadow: 0 14px 40px -8px rgba(9, 29, 57, 0.16), 0 0 0 1px rgba(0, 91, 252, 0.05);
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    color: #64748B;
    text-decoration: none;
    position: relative;
    border-radius: 999px;
    padding: 6px 4px;
    transition: color 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .bottom-nav-item svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.2s ease;
  }

  .bottom-nav-item span {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  .bottom-nav-item:hover {
    color: var(--accent1);
  }

  .bottom-nav-item:active {
    transform: scale(0.92);
  }

  .bottom-nav-item.active {
    color: var(--accent1);
  }

  .bottom-nav-item.active svg {
    stroke: var(--accent1);
    transform: translateY(-1px);
  }

  .bottom-nav-item.active span {
    color: var(--accent1);
    font-weight: 600;
  }

  .bottom-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent1);
    box-shadow: 0 0 6px rgba(0, 91, 252, 0.6);
  }
}

@media (max-width: 480px) {
  .mobile-bottom-nav {
    height: 60px;
    bottom: 10px;
    width: calc(100% - 20px);
    padding: 0 4px;
  }

  .bottom-nav-item svg {
    width: 19px;
    height: 19px;
  }

  .bottom-nav-item span {
    font-size: 10px;
  }

  .floating-actions {
    bottom: 82px;
    right: 14px;
  }

  .cookie-popup {
    bottom: 80px;
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .mobile-bottom-nav {
      bottom: calc(12px + env(safe-area-inset-bottom));
    }
    body {
      padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }
    .floating-actions {
      bottom: calc(88px + env(safe-area-inset-bottom));
    }
    .cookie-popup {
      bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    }
  }
  @media (max-width: 480px) {
    .mobile-bottom-nav {
      bottom: calc(10px + env(safe-area-inset-bottom));
    }
    .floating-actions {
      bottom: calc(82px + env(safe-area-inset-bottom));
    }
    .cookie-popup {
      bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ============ WHATSAPP CHAT BOARD ============ */
.wa-chat-board {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 20px 50px -10px rgba(9, 29, 57, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06);
  z-index: 920;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.95);
  transform-origin: bottom right;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.wa-chat-board.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Header */
.wa-chat-header {
  background: linear-gradient(135deg, #075E54 0%, #128C7E 100%);
  color: #FFFFFF;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.wa-chat-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wa-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.wa-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #FFFFFF;
  color: #075E54;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  letter-spacing: -0.02em;
}

.wa-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #25D366;
  border: 2px solid #075E54;
  box-shadow: 0 0 6px rgba(37, 211, 102, 0.8);
}

.wa-profile-info {
  display: flex;
  flex-direction: column;
}

.wa-profile-name {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #FFFFFF;
  line-height: 1.2;
}

.wa-verified {
  width: 15px;
  height: 15px;
  color: #25D366;
}

.wa-profile-status {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 3px;
  font-weight: 400;
}

.wa-chat-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.wa-chat-close:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.05);
}

.wa-chat-close svg {
  width: 16px;
  height: 16px;
}

/* Body / Messages */
.wa-chat-body {
  background: #EFEAE2;
  background-image: 
    radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 0),
    radial-gradient(rgba(0, 0, 0, 0.03) 1px, #EFEAE2 0);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  padding: 16px;
  height: 290px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.wa-date-pill {
  align-self: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  color: #54656F;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(11, 20, 26, 0.08);
  margin-bottom: 4px;
}

.wa-msg {
  display: flex;
  flex-direction: column;
  max-width: 88%;
  animation: waMsgFadeIn 0.3s ease-out;
}

@keyframes waMsgFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.wa-msg-incoming {
  align-self: flex-start;
}

.wa-msg-outgoing {
  align-self: flex-end;
}

.wa-msg-bubble {
  padding: 8px 12px 6px;
  border-radius: 0 12px 12px 12px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 20, 26, 0.12);
  position: relative;
}

.wa-msg-outgoing .wa-msg-bubble {
  background: #D9FDD3;
  border-radius: 12px 0 12px 12px;
}

.wa-msg-author {
  font-size: 11.5px;
  font-weight: 600;
  color: #128C7E;
  margin-bottom: 2px;
}

.wa-msg-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: #111B21;
  word-break: break-word;
}

.wa-msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 3px;
}

.wa-msg-time {
  font-size: 10px;
  color: #667781;
}

/* Quick Inquiries Chips */
.wa-chips-wrap {
  margin-top: 4px;
}

.wa-chips-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #667781;
  margin-bottom: 6px;
}

.wa-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wa-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid rgba(18, 140, 126, 0.2);
  border-radius: 10px;
  color: #111B21;
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.wa-chip:hover {
  background: #F0FDF4;
  border-color: #25D366;
  color: #075E54;
  transform: translateX(3px);
}

.wa-chip span {
  font-size: 14px;
}

/* Footer / Input */
.wa-chat-footer {
  background: #F0F2F5;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #E2E8F0;
}

.wa-chat-input {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  font-size: 13.5px;
  color: #111B21;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wa-chat-input:focus {
  border-color: #25D366;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.15);
}

.wa-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}

.wa-send-btn:hover {
  background: #20BA5A;
  transform: scale(1.06);
}

.wa-send-btn svg {
  width: 17px;
  height: 17px;
  margin-left: 2px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .wa-chat-board {
    bottom: 84px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: 420px;
    margin: 0 auto;
    border-radius: 18px;
    transform-origin: bottom center;
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .wa-chat-board {
      bottom: calc(84px + env(safe-area-inset-bottom));
    }
  }
}