/* ==========================================================================
   VS ITEXPERTS — DESIGN SYSTEM
   Palette: Ink Navy #0A1128, Charcoal #12141C, Off-White #F7F8FA,
            Electric #2F6FED, Signal Teal #2DD4BF, Slate Text #5B6472
   Type: Display/Headings — 'Plus Jakarta Sans'; Body — 'Inter';
         Labels/Data/Eyebrows — 'IBM Plex Mono'
   Signature motif: circuit "node & line" system representing connected
   business systems (PK ⇄ UAE ⇄ Global, and interlinked services).
   ========================================================================== */

:root{
  --ink:        #0A1128;
  --ink-2:      #0F1530;
  --charcoal:   #12141C;
  --white:      #FFFFFF;
  --off:        #F7F8FA;
  --off-2:      #EEF1F6;
  --line:       #E4E8F0;
  --slate:      #5B6472;
  --slate-2:    #8A93A3;
  --electric:   #2F6FED;
  --electric-d: #1D4ED8;
  --teal:       #2DD4BF;
  --amber:      #F5A524;

  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --container: 1200px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(10,17,40,0.06);
  --shadow: 0 8px 30px rgba(10,17,40,0.08);
  --shadow-lg: 0 20px 60px rgba(10,17,40,0.14);
  --ease: cubic-bezier(.22,.9,.32,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.15;letter-spacing:-0.02em;color:var(--ink);}
p{margin:0;}

:focus-visible{outline:2.5px solid var(--electric);outline-offset:3px;border-radius:4px;}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:100px 0;}
.section-tight{padding:64px 0;}
@media (max-width:768px){
  .section{padding:64px 0;}
  .section-tight{padding:44px 0;}
}

.bg-off{background:var(--off);}
.bg-ink{background:var(--ink); color:var(--white);}
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{color:var(--white);}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--electric);
  font-weight:500;
  margin-bottom:16px;
}
.bg-ink .eyebrow{color:var(--teal);}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
  flex-shrink:0;
}

.h-xl{font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800;}
.h-lg{font-size:clamp(2rem,3.6vw,2.75rem); font-weight:800;}
.h-md{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:700;}
.lede{font-size:1.15rem; color:var(--slate); max-width:640px;}
.bg-ink .lede{color:#B7C0D6;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

.section-head{max-width:720px;margin-bottom:56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  padding:14px 26px;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--electric); color:var(--white);}
.btn-primary:hover{background:var(--electric-d); transform:translateY(-2px); box-shadow:0 12px 24px rgba(47,111,237,0.28);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px);}
.bg-ink .btn-ghost,.hero .btn-ghost,.cta-band .btn-ghost,.page-hero .btn-ghost{color:var(--white); border-color:rgba(255,255,255,0.32);}
.bg-ink .btn-ghost:hover,.hero .btn-ghost:hover,.cta-band .btn-ghost:hover,.page-hero .btn-ghost:hover{border-color:var(--white); background:rgba(255,255,255,0.08);}
.btn-white{background:var(--white); color:var(--ink);}
.btn-white:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.btn-whatsapp{background:#1FAA59; color:var(--white);}
.btn-whatsapp:hover{background:#188a48; transform:translateY(-2px); box-shadow:0 12px 24px rgba(31,170,89,0.3);}
.btn-sm{padding:10px 20px;font-size:0.85rem;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.site-header.scrolled{box-shadow:0 4px 24px rgba(10,17,40,0.06);}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--ink);}
.brand .mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--electric),var(--ink) 130%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-mono);font-weight:700;font-size:0.8rem;
  flex-shrink:0;
}
.brand small{display:block;font-family:var(--font-mono);font-weight:400;font-size:0.62rem;letter-spacing:0.1em;color:var(--slate);text-transform:uppercase;}

.nav-main{display:flex;align-items:center;gap:2px;}
.nav-main a{
  padding:10px 16px;border-radius:999px;font-size:0.92rem;font-weight:500;color:var(--ink);
  transition:background .2s, color .2s;
}
.nav-main a:hover{background:var(--off-2);}
.nav-main a.active{color:var(--electric);}
.nav-actions{display:flex;align-items:center;gap:12px;}
.nav-toggle{display:none;background:none;border:none;padding:8px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.3s;}

@media (max-width:1080px){
  .nav-main{position:fixed;inset:78px 0 0 0;background:var(--white);flex-direction:column;align-items:stretch;padding:12px 20px 30px;gap:4px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.28s var(--ease);overflow-y:auto;}
  .nav-main.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-main a{padding:14px 10px;border-bottom:1px solid var(--line);border-radius:0;}
  .nav-toggle{display:block;}
  .nav-actions .btn-ghost{display:none;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(ellipse 900px 500px at 82% -10%, rgba(47,111,237,0.16), transparent),
             linear-gradient(180deg,var(--ink) 0%, var(--ink-2) 100%);
  color:var(--white);
  padding:120px 0 100px;
}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:48px;}}
.hero h1{font-size:clamp(2.4rem,5.2vw,3.9rem);font-weight:800;color:#fff;margin-bottom:22px;}
.hero .lede{color:#C4CCE0;font-size:1.15rem;max-width:560px;margin-bottom:32px;}
.trust-strip{
  margin-top:40px;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;
  font-family:var(--font-mono);font-size:0.82rem;color:#9AA6C4;letter-spacing:0.02em;
}
.trust-strip b{color:#fff;font-weight:600;}
.trust-strip .dot{color:var(--teal);}

.hero-visual{position:relative;height:420px;}
@media (max-width:960px){.hero-visual{height:300px;}}

/* Node/line system graphic — signature element */
.node-canvas{width:100%;height:100%;}
.node-canvas .link{stroke:rgba(93,141,255,0.35);stroke-width:1.4;}
.node-canvas .link-active{stroke:var(--teal);stroke-width:1.6;stroke-dasharray:6 6;animation:dash 3.5s linear infinite;}
.node-canvas .node{fill:#0A1128;stroke:var(--electric);stroke-width:1.6;}
.node-canvas .node-glow{fill:var(--electric);opacity:0.18;}
.node-canvas .node-teal{stroke:var(--teal);}
.node-canvas text{font-family:var(--font-mono);font-size:11px;fill:#C4CCE0;letter-spacing:0.02em;}
@keyframes dash{to{stroke-dashoffset:-60;}}
@keyframes pulse{0%,100%{opacity:0.5;}50%{opacity:1;}}
.node-canvas .pulse{animation:pulse 2.6s ease-in-out infinite;}

/* ---------- Cards ---------- */
.grid{display:grid;gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent;}
.card .icon{
  width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg, rgba(47,111,237,0.12), rgba(45,212,191,0.12));
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  color:var(--electric);
}
.card h3{font-size:1.15rem;margin-bottom:10px;}
.card p{color:var(--slate);font-size:0.95rem;}

/* Why choose us numbered cards */
.why-card{position:relative;}
.why-card .num{
  position:absolute;top:24px;right:26px;
  font-family:var(--font-mono);font-size:0.75rem;color:var(--slate-2);
}

/* Service grid (bento-ish) */
.service-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;display:flex;flex-direction:column;gap:14px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  position:relative;overflow:hidden;
}
.service-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(47,111,237,0.05), transparent 60%);
  opacity:0;transition:opacity .3s;
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.service-card:hover::before{opacity:1;}
.service-card .tag{
  font-family:var(--font-mono);font-size:0.7rem;color:var(--electric);letter-spacing:0.06em;text-transform:uppercase;
}
.service-card h3{font-size:1.2rem;}
.service-card p{color:var(--slate);font-size:0.93rem;flex-grow:1;}
.service-card .learn{
  font-weight:600;font-size:0.88rem;color:var(--electric);display:inline-flex;align-items:center;gap:6px;
}
.service-card .learn svg{transition:transform .25s;}
.service-card:hover .learn svg{transform:translateX(4px);}

/* Tech badges */
.tech-grid{display:flex;flex-wrap:wrap;gap:14px;}
.tech-badge{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;border-radius:14px;
  background:var(--white);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:0.88rem;font-weight:500;color:var(--ink);
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.tech-badge:hover{transform:translateY(-4px);border-color:var(--electric);box-shadow:var(--shadow);}
.tech-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0;}

/* Process */
.process-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;}
@media (max-width:960px){.process-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.process-row{grid-template-columns:1fr;}}
.process-step{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 22px;position:relative;
}
.process-step .step-num{
  font-family:var(--font-mono);font-size:0.85rem;color:var(--electric);letter-spacing:0.06em;margin-bottom:14px;display:block;
}
.process-step h3{font-size:1.05rem;margin-bottom:8px;}
.process-step p{color:var(--slate);font-size:0.88rem;}

/* Journey (reach -> engage -> generate -> convert -> grow) */
.journey{display:flex;flex-wrap:wrap;gap:0;align-items:stretch;}
.journey-step{
  flex:1 1 160px;background:var(--white);border:1px solid var(--line);
  padding:26px 20px;text-align:center;position:relative;
}
.journey-step:first-child{border-radius:16px 0 0 16px;}
.journey-step:last-child{border-radius:0 16px 16px 0;}
@media (max-width:768px){.journey-step:first-child,.journey-step:last-child{border-radius:16px;}}
.journey-step h4{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--electric);margin-bottom:8px;}
.journey-step p{font-size:0.85rem;color:var(--slate);}
.journey-arrow{display:flex;align-items:center;justify-content:center;width:36px;color:var(--slate-2);flex-shrink:0;}
@media (max-width:768px){.journey-arrow{width:100%;height:20px;transform:rotate(90deg);}}

/* Industries */
.industry-chip{
  padding:16px 22px;border-radius:14px;background:var(--off);border:1px solid var(--line);
  font-weight:600;font-size:0.95rem;display:flex;align-items:center;gap:10px;
  transition:.25s var(--ease);
}
.industry-chip:hover{background:var(--ink);color:#fff;transform:translateY(-3px);}
.industry-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);}

/* Global presence */
.route{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-family:var(--font-mono);font-size:1rem;}
.route .stop{display:flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid rgba(255,255,255,0.18);border-radius:999px;color:#fff;}
.route .arrow{color:var(--teal);font-size:1.2rem;}

/* Portfolio */
.portfolio-card{
  border-radius:var(--radius);overflow:hidden;background:var(--white);border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.portfolio-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.portfolio-media{
  height:190px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--ink),var(--electric-d));
  display:flex;align-items:center;justify-content:center;
}
.portfolio-media span{font-family:var(--font-mono);font-size:0.72rem;color:rgba(255,255,255,0.6);letter-spacing:0.08em;text-transform:uppercase;}
.portfolio-body{padding:24px;}
.portfolio-tag{font-family:var(--font-mono);font-size:0.7rem;color:var(--electric);letter-spacing:0.06em;text-transform:uppercase;}
.portfolio-body h3{font-size:1.1rem;margin:8px 0 6px;}
.portfolio-body .meta{color:var(--slate);font-size:0.85rem;margin-bottom:12px;}
.portfolio-body .result{
  font-size:0.85rem;font-weight:600;color:var(--ink);background:var(--off);
  padding:10px 14px;border-radius:10px;margin-bottom:16px;
}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.pill{font-size:0.75rem;padding:5px 11px;border-radius:999px;background:var(--off-2);color:var(--slate);}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
@media (max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat{padding:20px;}
.stat .num{font-family:var(--font-mono);font-size:clamp(2.2rem,4vw,3rem);font-weight:700;color:var(--white);}
.stat .num span{color:var(--teal);}
.stat .label{color:#9AA6C4;font-size:0.88rem;margin-top:6px;font-family:var(--font-mono);letter-spacing:0.02em;}

/* Testimonials */
.testi-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;display:flex;flex-direction:column;gap:18px;
}
.testi-quote{font-size:1.02rem;color:var(--ink);font-style:normal;}
.testi-quote::before{content:"“";color:var(--electric);font-family:var(--font-display);}
.testi-quote::after{content:"”";color:var(--electric);font-family:var(--font-display);}
.testi-person{display:flex;align-items:center;gap:12px;}
.testi-avatar{
  width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--electric),var(--teal));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--font-display);flex-shrink:0;
}
.testi-name{font-weight:700;font-size:0.92rem;}
.testi-role{font-size:0.82rem;color:var(--slate);}

/* CTA band */
.cta-band{
  background:linear-gradient(135deg,var(--ink) 0%,#152058 100%);
  color:#fff;border-radius:var(--radius-lg);padding:64px 56px;position:relative;overflow:hidden;
}
@media (max-width:768px){.cta-band{padding:44px 26px;}}
.cta-band h2{color:#fff;}
.cta-band .lede{color:#C4CCE0;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.form-field{margin-bottom:18px;}
.form-field label{display:block;font-size:0.85rem;font-weight:600;margin-bottom:7px;}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--font-body);font-size:0.95rem;background:var(--off);transition:border-color .2s;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--electric);outline:none;background:#fff;}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:520px){.form-row-2{grid-template-columns:1fr;}}
.contact-info-card{background:var(--ink);color:#fff;border-radius:var(--radius);padding:36px;}
.contact-info-card h3{color:#fff;margin-bottom:20px;}
.contact-line{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.12);}
.contact-line:last-child{border-bottom:none;}
.contact-line .ic{width:38px;height:38px;border-radius:10px;background:rgba(47,111,237,0.2);display:flex;align-items:center;justify-content:center;color:var(--teal);flex-shrink:0;}
.contact-line b{display:block;font-size:0.95rem;}
.contact-line small{color:#9AA6C4;font-size:0.8rem;}

/* Footer */
.site-footer{background:var(--charcoal);color:#B7BECC;padding:72px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,0.08);}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.site-footer h4{color:#fff;font-size:0.9rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:18px;font-family:var(--font-mono);font-weight:600;}
.site-footer .brand{color:#fff;}
.site-footer .brand small{color:#8A93A3;}
.site-footer p.desc{font-size:0.9rem;color:#9098A8;margin:16px 0 22px;max-width:320px;}
.site-footer ul li{margin-bottom:11px;}
.site-footer ul a{font-size:0.9rem;color:#B7BECC;transition:color .2s;}
.site-footer ul a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:26px 0;flex-wrap:wrap;gap:14px;font-size:0.82rem;color:#7C8494;}
.social-row{display:flex;gap:10px;}
.social-row a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;transition:.2s;}
.social-row a:hover{background:var(--electric);}

/* WhatsApp floating button */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:999;
  width:60px;height:60px;border-radius:50%;background:#1FAA59;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(31,170,89,0.4);
  transition:transform .25s var(--ease);
}
.wa-float:hover{transform:scale(1.08);}
.wa-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #1FAA59;
  animation:wa-ping 2.2s ease-out infinite;
}
@keyframes wa-ping{0%{transform:scale(1);opacity:0.7;}100%{transform:scale(1.6);opacity:0;}}
@media (max-width:520px){.wa-float{width:52px;height:52px;bottom:18px;right:18px;}}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* Breadcrumb / page hero (interior pages) */
.page-hero{
  padding:64px 0 56px;
  background:linear-gradient(180deg,var(--ink),var(--ink-2));
  color:#fff;
}
.page-hero .crumb{font-family:var(--font-mono);font-size:0.78rem;color:#9AA6C4;margin-bottom:16px;letter-spacing:0.03em;}
.page-hero .crumb a:hover{color:#fff;}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.2vw,3rem);max-width:820px;}
.page-hero .lede{color:#C4CCE0;margin-top:16px;max-width:640px;}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px;}}

.check-list li{display:flex;gap:12px;padding:10px 0;font-size:0.96rem;align-items:flex-start;}
.check-list .ck{width:22px;height:22px;border-radius:50%;background:rgba(47,111,237,0.12);color:var(--electric);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}

.divider-node{display:flex;align-items:center;gap:10px;margin:0 0 40px;color:var(--slate-2);}
.divider-node .ln{flex-grow:1;height:1px;background:var(--line);}
.divider-node .dt{width:6px;height:6px;border-radius:50%;background:var(--electric);}

.mini-nav{display:flex;flex-wrap:wrap;gap:10px;}
.mini-nav a{padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:0.85rem;font-weight:500;}
.mini-nav a.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.mini-nav a:hover:not(.active){border-color:var(--electric);color:var(--electric);}

.faq-item{border-bottom:1px solid var(--line);padding:20px 0;}
.faq-item h3{font-size:1rem;font-weight:700;margin-bottom:8px;}
.faq-item p{color:var(--slate);font-size:0.94rem;}

/* ---------- Announcement bar ---------- */
.announce-bar{
  background:var(--ink); color:#fff; overflow:hidden;
  max-height:48px; transition:max-height .35s var(--ease), padding .35s var(--ease);
}
.announce-bar.hidden{max-height:0;}
.announce-inner{
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  padding:11px 24px; font-size:0.85rem; position:relative;
}
.announce-inner span{color:#C4CCE0;font-family:var(--font-mono);letter-spacing:0.01em;}
.announce-inner .announce-link{color:var(--teal); font-weight:600; display:inline-flex; align-items:center; gap:5px;}
.announce-close{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  background:none;border:none;color:#8A93A3;font-size:1.1rem;line-height:1;padding:4px 8px;
}
.announce-close:hover{color:#fff;}
@media (max-width:640px){.announce-inner{font-size:0.78rem; gap:10px;} .announce-close{right:8px;}}

/* ---------- WhatsApp widget (expandable) ---------- */
.wa-widget{position:fixed; bottom:26px; right:26px; z-index:1000; display:flex; flex-direction:column; align-items:flex-end;}
.wa-panel{
  width:308px; max-width:calc(100vw - 40px); background:var(--white); border-radius:18px;
  box-shadow:var(--shadow-lg); overflow:hidden; margin-bottom:16px;
  transform:translateY(16px) scale(0.96); opacity:0; pointer-events:none;
  transition:.25s var(--ease); border:1px solid var(--line);
}
.wa-widget.open .wa-panel{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;}
.wa-panel-head{background:#1FAA59; color:#fff; padding:16px 18px;}
.wa-panel-head b{display:block;font-size:0.95rem;}
.wa-panel-head span{font-size:0.76rem; color:rgba(255,255,255,0.85);}
.wa-panel-body{padding:16px 18px 6px;}
.wa-panel-body>p{font-size:0.88rem; color:var(--slate); margin-bottom:12px;}
.wa-quick{
  display:block; padding:11px 14px; border:1px solid var(--line); border-radius:12px;
  font-size:0.85rem; font-weight:500; margin-bottom:10px; transition:.2s;
}
.wa-quick:hover{border-color:#1FAA59; background:#F3FBF6;}
.wa-panel-foot{padding:6px 18px 18px;}
.wa-toggle{
  width:60px;height:60px;border-radius:50%;background:#1FAA59;color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(31,170,89,0.4);
  transition:transform .25s var(--ease); position:relative;
}
.wa-toggle:hover{transform:scale(1.08);}
.wa-toggle::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #1FAA59;animation:wa-ping 2.2s ease-out infinite;}
.wa-widget.open .wa-toggle::after{display:none;}
.wa-toggle .icon-close{display:none;}
.wa-widget.open .wa-toggle .icon-chat{display:none;}
.wa-widget.open .wa-toggle .icon-close{display:block;}
@keyframes wa-ping{0%{transform:scale(1);opacity:0.7;}100%{transform:scale(1.6);opacity:0;}}
@media (max-width:520px){.wa-widget{bottom:84px; right:16px;} .wa-toggle{width:52px;height:52px;}}

/* ---------- Mobile sticky CTA bar ---------- */
.mobile-cta-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:998;
  background:var(--white); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(10,17,40,0.08);
}
.mobile-cta-bar .row{display:grid; grid-template-columns:1fr 1fr 1.15fr;}
.mobile-cta-bar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:10px 4px 12px; font-size:0.72rem; font-weight:600; color:var(--ink); border-right:1px solid var(--line);
}
.mobile-cta-bar a:last-child{border-right:none; background:var(--electric); color:#fff;}
.mobile-cta-bar a svg{width:19px;height:19px;}
@media (max-width:760px){
  .mobile-cta-bar{display:block;}
  body{padding-bottom:64px;}
  .wa-widget{display:none;}
}