/* ==========================================================================
   Wibbow Technologies — Design System
   ========================================================================== */

:root{
  --navy-950:#050916;
  --navy-900:#0A1128;
  --navy-800:#0F1B3C;
  --navy-700:#152452;
  --navy-600:#1C2F66;
  --teal-400:#3FFCD1;
  --teal-500:#14E0B4;
  --teal-600:#0BBE9A;
  --indigo-400:#8B7FFF;
  --indigo-500:#6C63FF;
  --indigo-600:#5348E8;
  --ink-900:#0B1220;
  --ink-700:#33394A;
  --gray-600:#5B6472;
  --gray-400:#8A93A6;
  --gray-200:#E4E8F0;
  --gray-100:#F2F4F9;
  --surface:#FFFFFF;
  --surface-alt:#F6F8FC;
  --danger:#FF6B6B;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --shadow-sm:0 2px 10px rgba(10,17,40,.06);
  --shadow-md:0 12px 32px rgba(10,17,40,.10);
  --shadow-lg:0 24px 64px rgba(10,17,40,.18);
  --shadow-glow:0 0 0 1px rgba(63,252,209,.15), 0 20px 60px rgba(108,99,255,.25);
  --container:1240px;
  --ease:cubic-bezier(.22,.9,.28,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink-900);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{margin:0 0 1em; color:var(--gray-600); line-height:1.75;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
section{position:relative;}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

::selection{background:var(--teal-400); color:var(--navy-950);}

/* Scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--surface-alt);}
::-webkit-scrollbar-thumb{background:var(--gray-400); border-radius:10px;}

/* Eyebrow / kicker */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal-500);
  margin-bottom:14px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--teal-500); display:inline-block; border-radius:2px;}
.eyebrow.on-dark{color:var(--teal-400);}

.section-head{max-width:680px; margin:0 auto 48px; text-align:center;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem); color:var(--navy-900);}
.section-head p{font-size:1.05rem;}
.section-head.left{margin-left:0; text-align:left;}

.section-pad{padding:100px 0;}
@media (max-width:820px){.section-pad{padding:64px 0;}}

.bg-alt{background:var(--surface-alt);}
.bg-navy{background:var(--navy-900); color:#fff;}
.bg-navy p{color:rgba(255,255,255,.68);}
.bg-navy h2,.bg-navy h3{color:#fff;}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:.95rem;
  padding:15px 28px; border-radius:100px; border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg,var(--indigo-500),var(--indigo-600)); color:#fff; box-shadow:0 10px 30px rgba(108,99,255,.35);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(108,99,255,.45);}
.btn-teal{background:linear-gradient(135deg,var(--teal-400),var(--teal-600)); color:var(--navy-950); box-shadow:0 10px 30px rgba(20,224,180,.3);}
.btn-teal:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(20,224,180,.4);}
.btn-ghost{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.35); backdrop-filter:blur(6px);}
.btn-ghost:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6);}
.btn-outline{background:transparent; color:var(--navy-900); border-color:var(--gray-200);}
.btn-outline:hover{border-color:var(--indigo-500); color:var(--indigo-600);}
.btn-block{width:100%;}
.btn svg{width:16px; height:16px; transition:transform .3s var(--ease);}
.btn:hover svg.arrow{transform:translateX(4px);}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:18px 0;
  transition:padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
#site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:rgba(10,17,40,.55);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-radius:100px; padding:10px 12px 10px 20px;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
#site-header.scrolled{padding:10px 0;}
#site-header.scrolled .header-inner{background:rgba(8,13,32,.86); box-shadow:0 14px 40px rgba(5,9,22,.35);}

.brand{display:flex; align-items:center; gap:10px; color:#fff; flex-shrink:0;}
.brand img{height:34px; width:auto;}
.brand-text{display:flex; flex-direction:column; line-height:1.1;}
.brand-text strong{font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:.01em;}
.brand-text span{font-size:.62rem; color:var(--teal-400); letter-spacing:.06em; text-transform:uppercase;}

.main-nav{display:flex; align-items:center; gap:2px;}
.main-nav > ul{display:flex; align-items:center; gap:2px; list-style:none;}
.main-nav a.nav-link{
  display:flex; align-items:center; gap:6px;
  color:rgba(255,255,255,.82); font-family:'Montserrat',sans-serif; font-weight:600; font-size:.88rem;
  padding:10px 16px; border-radius:100px; transition:background .25s, color .25s;
}
.main-nav a.nav-link:hover, .main-nav li.active > a.nav-link{background:rgba(255,255,255,.1); color:#fff;}
.main-nav li.has-sub{position:relative;}
.main-nav .chev{width:10px; height:10px; transition:transform .3s var(--ease);}
.main-nav li.has-sub:hover .chev{transform:rotate(180deg);}

.mega{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  width:640px; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:4px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  border:1px solid var(--gray-200);
}
.main-nav li.has-sub:hover .mega{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.mega a{
  display:flex; align-items:flex-start; gap:12px; padding:11px 12px; border-radius:14px; color:var(--navy-900);
  transition:background .2s;
}
.mega a:hover{background:var(--surface-alt);}
.mega .ic{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(108,99,255,.12),rgba(20,224,180,.14)); color:var(--indigo-600);
}
.mega .ic svg{width:18px; height:18px;}
.mega strong{display:block; font-family:'Montserrat',sans-serif; font-size:.86rem; font-weight:700;}
.mega small{display:block; font-size:.74rem; color:var(--gray-400); margin-top:2px; font-weight:500;}

.header-cta{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.header-cta .btn{padding:11px 22px; font-size:.85rem;}

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06); align-items:center; justify-content:center; flex-shrink:0;
}
.nav-toggle span{position:relative; width:18px; height:12px; display:block;}
.nav-toggle span::before,.nav-toggle span::after,.nav-toggle i{
  content:""; position:absolute; left:0; width:100%; height:2px; background:#fff; border-radius:2px; transition:all .3s var(--ease);
}
.nav-toggle span::before{top:0;}
.nav-toggle i{top:5px; display:block; position:absolute;}
.nav-toggle span::after{top:10px;}
.nav-toggle.open span::before{transform:translateY(5px) rotate(45deg);}
.nav-toggle.open span::after{transform:translateY(-5px) rotate(-45deg);}
.nav-toggle.open i{opacity:0;}

/* ==========================================================================
   Mobile nav — full-screen panel (fixes original overflow bug)
   ========================================================================== */
#mobile-nav{
  position:fixed; inset:0; z-index:1200; background:var(--navy-950);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .45s var(--ease);
  overflow-y:auto;
}
#mobile-nav.open{transform:translateX(0);}
.mobile-nav-top{display:flex; align-items:center; justify-content:space-between; padding:18px 20px;}
.mobile-nav-list{list-style:none; padding:10px 20px 40px; margin:0; flex:1;}
.mobile-nav-list > li{border-bottom:1px solid rgba(255,255,255,.08);}
.mobile-nav-list a.m-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 4px; color:#fff; font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.15rem;
}
.mobile-nav-list .m-sub-toggle svg{width:16px; height:16px; transition:transform .3s var(--ease); color:var(--teal-400);}
.mobile-nav-list li.open .m-sub-toggle svg{transform:rotate(180deg);}
.mobile-sub{max-height:0; overflow:hidden; transition:max-height .4s var(--ease); list-style:none; padding:0 4px;}
.mobile-nav-list li.open .mobile-sub{max-height:600px; padding-bottom:14px;}
.mobile-sub a{display:block; padding:11px 14px; color:rgba(255,255,255,.68); font-size:.92rem; font-weight:600; border-radius:10px;}
.mobile-sub a:hover{background:rgba(255,255,255,.06); color:#fff;}
.mobile-nav-cta{padding:10px 20px 30px;}
body.nav-open{overflow:hidden;}

/* ==========================================================================
   Hero (shared, split layout — solid gradient so nothing ever flashes)
   ========================================================================== */
.hero{
  position:relative; padding:190px 0 110px; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(108,99,255,.35), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(20,224,180,.22), transparent 55%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  color:#fff;
}
.hero-grid-lines{position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(circle at 70% 30%, black, transparent 70%);
}
.hero canvas#hero-net{position:absolute; inset:0; width:100%; height:100%; opacity:.55;}
.hero .container{position:relative; z-index:2;}
.hero-flex{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero-copy .crumbs{display:flex; align-items:center; gap:8px; font-size:.8rem; color:rgba(255,255,255,.5); margin-bottom:20px; font-weight:600;}
.hero-copy .crumbs a{color:rgba(255,255,255,.5);}
.hero-copy .crumbs a:hover{color:var(--teal-400);}
.hero h1{font-size:clamp(2.1rem,4.2vw,3.4rem); color:#fff; margin-bottom:20px;}
.hero h1 .grad{background:linear-gradient(100deg,var(--teal-400),var(--indigo-400)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-copy p.lede{font-size:1.12rem; color:rgba(255,255,255,.72); max-width:520px; margin-bottom:32px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-media{position:relative;}
.hero-media .frame{
  position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-glow);
  border:1px solid rgba(255,255,255,.14); aspect-ratio:4/3.1;
}
.hero-media .frame img{width:100%; height:100%; object-fit:cover;}
.hero-media .frame::after{content:""; position:absolute; inset:0; background:linear-gradient(200deg, transparent 55%, rgba(5,9,22,.65)); pointer-events:none;}
.hero-media .float-card{
  position:absolute; bottom:-22px; left:-22px; background:#fff; color:var(--navy-900); border-radius:18px;
  padding:16px 18px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:12px; max-width:230px;
}
@media (max-width:900px){.hero-media .float-card{display:none;}}
.hero-media .float-card .ic{width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--teal-400),var(--indigo-500)); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;}
.hero-media .float-card .ic svg{width:20px; height:20px;}
.hero-media .float-card strong{display:block; font-size:1rem;}
.hero-media .float-card span{font-size:.76rem; color:var(--gray-400);}

.hero.hero-compact{padding:170px 0 90px;}
.hero.hero-compact .hero-flex{grid-template-columns:1fr; text-align:center;}
.hero.hero-compact .hero-copy p.lede{margin-left:auto; margin-right:auto;}
.hero.hero-compact .hero-actions{justify-content:center;}
.hero.hero-compact .crumbs{justify-content:center;}

@media (max-width:980px){
  .hero-flex{grid-template-columns:1fr; text-align:center;}
  .hero-copy p.lede{margin-left:auto; margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-copy .crumbs{justify-content:center;}
  .hero-media{max-width:460px; margin:0 auto;}
}

/* ==========================================================================
   Stats strip with animated counters
   ========================================================================== */
.stats-strip{background:var(--navy-900); padding:56px 0; position:relative;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.stat-item strong{
  display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(1.9rem,3.4vw,2.7rem);
  background:linear-gradient(100deg,var(--teal-400),var(--indigo-400)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-item span{color:rgba(255,255,255,.62); font-size:.86rem; font-weight:600; letter-spacing:.02em;}
@media (max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr); row-gap:32px;}}

/* ==========================================================================
   Cards — services / values / features
   ========================================================================== */
.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:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  padding:32px 26px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  position:relative; overflow:hidden;
}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent;}
.card .ic-wrap{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(108,99,255,.12), rgba(20,224,180,.16)); color:var(--indigo-600);
  margin-bottom:20px; transition:transform .4s var(--ease), background .4s;
}
.card:hover .ic-wrap{transform:scale(1.08) rotate(-4deg); background:linear-gradient(135deg,var(--indigo-500),var(--teal-500)); color:#fff;}
.card .ic-wrap svg{width:26px; height:26px;}
.card h3{font-size:1.08rem; margin-bottom:8px; color:var(--navy-900);}
.card p{font-size:.92rem; margin-bottom:14px;}
.card .card-link{display:inline-flex; align-items:center; gap:6px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.82rem; color:var(--indigo-600);}
.card .card-link svg{width:14px; height:14px; transition:transform .3s var(--ease);}
.card:hover .card-link svg{transform:translateX(4px);}
.card .num{position:absolute; top:14px; right:20px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:2.2rem; color:var(--gray-100); z-index:0;}

.card-photo{border-radius:var(--radius-lg); overflow:hidden; background:#fff; border:1px solid var(--gray-200); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.card-photo:hover{transform:translateY(-8px); box-shadow:var(--shadow-md);}
.card-photo .ph{aspect-ratio:16/11; overflow:hidden; position:relative;}
.card-photo .ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.card-photo:hover .ph img{transform:scale(1.08);}
.card-photo .cp-body{padding:20px 22px 24px;}
.card-photo h3{font-size:1rem; margin-bottom:6px;}
.card-photo p{font-size:.88rem; margin-bottom:0;}

.value-card{text-align:center; padding:34px 22px;}
.value-card .ic-wrap{margin-left:auto; margin-right:auto;}

/* Why choose - icon list */
.feature-row{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--gray-200);}
.feature-row:last-child{border-bottom:none;}
.feature-row .ic-wrap{width:48px; height:48px; margin-bottom:0; flex-shrink:0;}
.feature-row h3{font-size:1rem; margin-bottom:4px;}
.feature-row p{margin-bottom:0; font-size:.9rem;}

/* ==========================================================================
   Logo marquee
   ========================================================================== */
.marquee-wrap{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex; align-items:center; gap:64px; width:max-content; animation:marquee 34s linear infinite;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
.marquee-track img{height:34px; width:auto; max-width:130px; object-fit:contain; opacity:.62; filter:grayscale(1); transition:opacity .3s, filter .3s;}
.marquee-track img:hover{opacity:1; filter:grayscale(0);}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ==========================================================================
   Timeline (projects)
   ========================================================================== */
.timeline{position:relative; max-width:920px; margin:0 auto;}
.timeline::before{content:""; position:absolute; left:28px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--gray-200),var(--gray-200)); }
@media (max-width:720px){.timeline::before{left:19px;}}
.t-item{position:relative; padding-left:76px; margin-bottom:56px;}
@media (max-width:720px){.t-item{padding-left:52px;}}
.t-item:last-child{margin-bottom:0;}
.t-dot{position:absolute; left:10px; top:2px; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--indigo-500),var(--teal-500)); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 0 0 6px #fff, 0 0 0 7px var(--gray-200);}
@media (max-width:720px){.t-dot{left:1px; width:30px; height:30px;}}
.t-dot svg{width:17px; height:17px;}
.t-card{background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);}
.t-card .t-media{display:grid; grid-template-columns:repeat(3,1fr);}
.t-card .t-media img{width:100%; height:150px; object-fit:cover;}
.t-card .t-media.one{grid-template-columns:1fr;}
.t-card .t-media.one img{height:230px;}
.t-body{padding:26px 28px 30px;}
.t-tag{display:inline-block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--indigo-600); background:rgba(108,99,255,.1); padding:5px 12px; border-radius:100px; margin-bottom:12px;}
.t-tag.progress{color:#B7791F; background:rgba(214,158,46,.14);}
.t-body h3{font-size:1.28rem; margin-bottom:10px;}
.t-body p{font-size:.94rem;}
.t-list{list-style:none; margin-top:14px; display:grid; gap:9px;}
.t-list li{display:flex; gap:10px; font-size:.88rem; color:var(--ink-700); align-items:flex-start;}
.t-list li svg{width:16px; height:16px; color:var(--teal-600); flex-shrink:0; margin-top:3px;}
.t-video{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-weight:700; font-size:.86rem; color:var(--indigo-600);}
.t-video svg{width:16px; height:16px;}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  border-radius:var(--radius-xl); padding:64px 48px; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--indigo-600),var(--indigo-500) 45%, var(--teal-500));
  color:#fff;
}
.cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 15% 0%, rgba(255,255,255,.25), transparent 60%);}
.cta-band > *{position:relative; z-index:1;}
.cta-band h2{color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:14px;}
.cta-band p{color:rgba(255,255,255,.85); max-width:520px; margin:0 auto 28px;}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.cta-band .btn-outline{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.5);}
.cta-band .btn-outline:hover{background:rgba(255,255,255,.18);}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{background:var(--navy-950); color:rgba(255,255,255,.6); padding-top:80px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.08);}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand .brand{margin-bottom:16px;}
.footer-brand p{color:rgba(255,255,255,.5); font-size:.9rem; max-width:280px;}
.f-social{display:flex; gap:10px; margin-top:20px;}
.f-social a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; transition:background .3s, transform .3s;}
.f-social a:hover{background:var(--indigo-500); transform:translateY(-3px);}
.f-social svg{width:16px; height:16px; color:#fff;}
footer h4{color:#fff; font-family:'Montserrat',sans-serif; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:20px;}
.f-links{list-style:none; display:grid; gap:12px;}
.f-links a{font-size:.9rem; color:rgba(255,255,255,.6); transition:color .25s, padding-left .25s;}
.f-links a:hover{color:var(--teal-400); padding-left:4px;}
.f-contact{list-style:none; display:grid; gap:14px;}
.f-contact li{display:flex; gap:12px; font-size:.88rem; align-items:flex-start;}
.f-contact svg{width:17px; height:17px; color:var(--teal-400); flex-shrink:0; margin-top:2px;}
.f-contact a{color:rgba(255,255,255,.7);}
.f-contact a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:.8rem; color:rgba(255,255,255,.4); flex-wrap:wrap; gap:10px;}
.footer-bottom a{color:rgba(255,255,255,.4);}
.footer-bottom a:hover{color:var(--teal-400);}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
[data-reveal].in{opacity:1; transform:translateY(0);}
[data-reveal="fade"]{transform:none;}
[data-reveal="left"]{transform:translateX(-40px);}
[data-reveal="left"].in{transform:translateX(0);}
[data-reveal="right"]{transform:translateX(40px);}
[data-reveal="right"].in{transform:translateX(0);}
[data-reveal-group] > *{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
[data-reveal-group].in > *{opacity:1; transform:translateY(0);}
[data-reveal-group].in > *:nth-child(1){transition-delay:.03s;}
[data-reveal-group].in > *:nth-child(2){transition-delay:.10s;}
[data-reveal-group].in > *:nth-child(3){transition-delay:.17s;}
[data-reveal-group].in > *:nth-child(4){transition-delay:.24s;}
[data-reveal-group].in > *:nth-child(5){transition-delay:.31s;}
[data-reveal-group].in > *:nth-child(6){transition-delay:.38s;}
[data-reveal-group].in > *:nth-child(7){transition-delay:.45s;}
[data-reveal-group].in > *:nth-child(8){transition-delay:.52s;}

/* ==========================================================================
   Breadcrumb (in-page, light sections)
   ========================================================================== */
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--gray-400); font-weight:600; margin-bottom:18px; flex-wrap:wrap;}
.breadcrumb a{color:var(--gray-600);}
.breadcrumb a:hover{color:var(--indigo-600);}

/* ==========================================================================
   Two-col content blocks (service pages)
   ========================================================================== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:36px;}}
.split.rev .split-media{order:2;}
.split-media img{border-radius:var(--radius-lg); box-shadow:var(--shadow-md); width:100%; aspect-ratio:6/5; object-fit:cover;}
.split-copy .tag-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:22px;}
.pill{font-size:.76rem; font-weight:700; font-family:'Montserrat',sans-serif; color:var(--indigo-600); background:rgba(108,99,255,.09); padding:7px 14px; border-radius:100px;}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr; gap:44px;}}
.info-card{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--gray-200);}
.info-card:last-child{border-bottom:none;}
.info-card .ic-wrap{width:46px; height:46px; margin-bottom:0; flex-shrink:0;}
.info-card h3{font-size:.98rem; margin-bottom:6px;}
.info-card p{margin-bottom:2px; font-size:.9rem;}
.map-embed{border-radius:var(--radius-lg); overflow:hidden; margin-top:30px; border:1px solid var(--gray-200); box-shadow:var(--shadow-sm);}
.map-embed iframe{width:100%; height:280px; border:0; display:block;}

.form-card{background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-xl); padding:40px; box-shadow:var(--shadow-md);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:18px;}
.field label{display:block; font-size:.82rem; font-weight:700; font-family:'Montserrat',sans-serif; margin-bottom:8px; color:var(--navy-900);}
.field input, .field select, .field textarea{
  width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--gray-200); font-family:inherit; font-size:.94rem;
  transition:border-color .25s, box-shadow .25s; background:var(--surface-alt); color: var(--ink-900);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--indigo-500); box-shadow:0 0 0 4px rgba(108,99,255,.12); background:#fff;}
.field textarea{resize:vertical; min-height:120px;}
.form-note{font-size:.78rem; color:var(--gray-400); margin-top:14px; text-align:center;}
#form-success{display:none; text-align:center; padding:30px 10px;}
#form-success.show{display:block;}
#form-success .ic-wrap{margin:0 auto 18px; background:linear-gradient(135deg,var(--teal-400),var(--teal-600)); color:#fff;}

/* ==========================================================================
   About page extras
   ========================================================================== */
.vision-card{border-radius:var(--radius-xl); padding:56px; text-align:center; background:linear-gradient(120deg,var(--indigo-600),var(--teal-500)); color:#fff;}
.vision-card p{color:#fff; font-size:1.25rem; font-family:'Montserrat',sans-serif; font-weight:600; max-width:760px; margin:0 auto; line-height:1.5;}
.timeline-mini{display:flex; gap:0; justify-content:space-between; margin-top:56px; position:relative;}
.timeline-mini::before{content:"";position:absolute; top:19px; left:6%; right:6%; height:2px; background:var(--gray-200);}
.tm-item{flex:1; text-align:center; position:relative;}
.tm-dot{width:40px; height:40px; border-radius:50%; background:#fff; border:2px solid var(--indigo-500); color:var(--indigo-600); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:.8rem; position:relative; z-index:1;}
.tm-item strong{display:block; font-family:'Montserrat',sans-serif; font-size:.86rem;}
.tm-item span{font-size:.78rem; color:var(--gray-400);}
@media (max-width:760px){.timeline-mini{flex-direction:column; gap:28px;} .timeline-mini::before{display:none;}}

/* Team / certs */
.cert-row{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:10px;}
.cert-chip{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--gray-200); padding:12px 20px; border-radius:100px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.86rem; color:var(--navy-900); box-shadow:var(--shadow-sm);}
.cert-chip svg{width:18px; height:18px; color:var(--teal-600);}

/* ==========================================================================
   Popup / announcement toast
   ========================================================================== */
#announce-toast{
  position:fixed; left:24px; bottom:24px; z-index:1400; max-width:380px;
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--gray-200);
  padding:20px; display:flex; gap:14px; transform:translateY(140%); transition:transform .5s var(--ease);
}
#announce-toast.show{transform:translateY(0);}
#announce-toast .ic-wrap{margin-bottom:0; flex-shrink:0; width:44px; height:44px;}
#announce-toast h4{font-size:.88rem; margin-bottom:6px;}
#announce-toast p{font-size:.82rem; margin-bottom:10px;}
#announce-toast .toast-close{position:absolute; top:10px; right:12px; color:var(--gray-400); font-size:1.1rem; line-height:1; background:none; border:none;}
#announce-toast a.card-link{font-size:.78rem;}
@media (max-width:520px){#announce-toast{left:14px; right:14px; max-width:none;}}

/* back to top */
#to-top{
  position:fixed; right:24px; bottom:24px; width:48px; height:48px; border-radius:50%; z-index:900;
  background:var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s, transform .3s, visibility .3s;
}
#to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
#to-top svg{width:18px; height:18px;}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:820px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gallery-grid a{display:block; border-radius:14px; overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow-sm);}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.gallery-grid a:hover img{transform:scale(1.1);}

/* Utility */
.mt-0{margin-top:0;} .center{text-align:center;} .max-w{max-width:760px; margin-left:auto; margin-right:auto;}