/* VTS AI Overseas - site styles (built on utilities.css) */
:root{
  --blue:#0b5cff; --blue-d:#0847c9; --navy:#07142e; --navy-2:#0b1f45;
  --tint:#eef5ff; --tint-2:#f4f8fe; --text:#13213a; --muted:#5b6b82; --line:#e3eaf5;
  --ff:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
body{font-family:var(--ff);color:var(--text);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased}
.ico{flex:none;vertical-align:middle}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:.6rem}
.eyebrow::before{content:'\2022';margin-right:.4rem}
.eyebrow-light{color:#cfe0ff}
.section{padding:4.5rem 0}
.section-tint{background:linear-gradient(180deg,#eef5ff,#f7faff)}
.section-tint-2{background:#f5f9ff}
.section-title{font-size:clamp(1.6rem,3vw,2.15rem);font-weight:700;line-height:1.25;color:var(--navy)}
.section-title.text-white{color:#fff}
.section-head{max-width:760px;margin-inline:auto}
.grad-text{background:linear-gradient(90deg,#4aa3ff,#7ec4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta .grad-text,.hero .grad-text{background:linear-gradient(90deg,#3d8bff,#78c0ff);-webkit-background-clip:text;background-clip:text}

/* Header */
.site-header .brand{color:var(--navy)}
.brand-mark{font-style:italic;font-weight:800;font-size:1.7rem;letter-spacing:-.04em;color:var(--blue);background:linear-gradient(135deg,#0b5cff,#14c3ff);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.2rem}
.brand-mark-light{background:linear-gradient(135deg,#fff,#a9d4ff);-webkit-background-clip:text;background-clip:text}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-size:1.05rem;font-weight:700}
.brand-text small{font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.site-footer .brand-text small{color:#a9bad6}
.main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;padding:1rem 1.5rem 1.5rem;border-top:1px solid var(--line);box-shadow:0 14px 30px rgba(10,30,70,.1);flex-direction:column}
.main-nav.open{display:flex}
.nav-link{padding:.7rem 0;font-size:.82rem;font-weight:500;color:var(--text);border-bottom:1px solid var(--line);position:relative}
.nav-link.active,.nav-link:hover{color:var(--blue)}
.caret{font-size:.6rem}
.header-phone{color:var(--navy);line-height:1.2}
.header-phone strong{display:block;font-size:.8rem}
.header-phone small{font-size:.68rem;color:var(--muted)}
.phone-bubble{width:36px;height:36px;border-radius:50%;background:var(--tint);color:var(--blue);display:inline-flex;align-items:center;justify-content:center}
.nav-toggle{color:var(--navy)}
@media(min-width:992px){
  .main-nav{display:flex!important;position:static;flex-direction:row;gap:1.4rem;padding:0;border:0;box-shadow:none;background:none}
  .nav-link{border:0;padding:.5rem 0;font-size:.78rem}
  .nav-link.active::after{content:'';position:absolute;left:0;right:0;bottom:0px;height:2px;background:var(--blue)}
}
@media(min-width:1200px){.main-nav{gap:1.8rem}.nav-link{font-size:.82rem}}

/* Hero */
.hero{padding:4rem 0 5rem;min-height:520px;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;
/*background:*/
/*  radial-gradient(900px 500px at 85% 20%,rgba(255,170,90,.38),transparent 60%),*/
/*  radial-gradient(700px 500px at 60% 90%,rgba(40,110,255,.35),transparent 65%),*/
/*  linear-gradient(110deg,#06122b 20%,#0a2a5e 62%,#b4684a 130%)*/
background:url('/../assets/img/hero.jpg');
background-size:cover;
background-repeat:no-repeat;
}
.hero-bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(to top,rgba(6,18,43,.7),transparent 40%)}
.hero-title{font-size:clamp(2rem,3vw,3.1rem);font-weight:700;line-height:1.15}
.hero-lead{color:#dbe6f8;max-width:520px;font-size:.98rem;line-height:1.7}
.play-dot{display:inline-flex;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--navy);align-items:center;justify-content:center}
.hero-visual{position:relative;min-height:360px}
.script-note{position:absolute;top:-8px;left:2%;font-family:'Caveat',cursive;font-size:1.5rem;line-height:1.1;color:#fff;transform:rotate(-8deg);z-index:3}
.panel{position:absolute;width:44%;border-radius:10px;padding:1rem;color:#fff;background:rgba(7,20,46,.62);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);box-shadow:0 20px 40px rgba(0,0,0,.35);transform:perspective(900px) rotateY(-14deg)}
.panel h3{font-size:.8rem;font-weight:700;letter-spacing:.03em;line-height:1.25}
.panel p{font-size:.68rem;color:#cfe0ff;margin-top:.4rem;line-height:1.5}
.panel-art{margin-top:.8rem;height:130px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff}
.art-it{background:linear-gradient(160deg,#1c64f2,#0a2a6e)}
.art-acc{background:linear-gradient(160deg,#5b8def,#243b6e)}
.art-log{background:linear-gradient(160deg,#e9eef7,#8aa0c4);color:#12305f}
.panel-art img{
    width:100%;
}
.panel-it{left:0;top:55px;z-index:1}
.panel-acc{left:28%;top:25px;z-index:2}
.panel-log{left:56%;top:50px;z-index:3}
@media(max-width:767px){
  .hero-visual{min-height:0;display:grid;gap:1rem}
  .panel{position:static;width:100%;transform:none}
}

/* Stats */
.stats{border-bottom:1px solid var(--line);position:relative;z-index:3}
.stats-row{padding:1.4rem 0}
.stat-ico{color:var(--navy)}
.stat small{font-size:.74rem}
@media(min-width:992px){.stat+.stat{border-left:1px solid var(--line)}}

/* Services */
.service-card{display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.service-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(10,30,70,.16)!important}
.service-img{height:170px;position:relative;background-size:cover;background-position:center}
.img-it{
    background:url('/../assets/img/services/it-solution.jpg');
    background-size:cover;
    background-repeat:no-repeat;
}
.img-acc{background:url('/../assets/img/services/acccount.jpg');
    background-size:cover;
    background-repeat:no-repeat;}
.img-log{background:url('/../assets/img/services/logistics-sol.jpg');
    background-size:cover;
    background-repeat:no-repeat;}
.service-badge{position:absolute;left:1.4rem;bottom:-24px;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(10,30,70,.18)}
.service-card .card-body{padding-top:2.2rem;flex:1}
.check-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:#2a3b57;margin-bottom:.55rem}
.check-list .ico{color:var(--blue);margin-top:1px}
.link-arrow{font-weight:600;font-size:.85rem;color:var(--blue)}
.link-arrow:hover{gap:.8rem}

/* Why */
.why{overflow:hidden}
.why-photo{min-height:260px}
.why-building{height:100%;min-height:300px;position:relative;background:
  linear-gradient(90deg,rgba(255,255,255,0) 70%,#fff 100%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 38px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 2px,transparent 2px 38px),
  linear-gradient(160deg,#5aa7e8 0%,#1c4f8f 50%,#0c2a54 100%)}
.why-logo{position:absolute;top:34%;left:30%;font-size:3rem;font-weight:800;font-style:italic;color:rgba(255,255,255,.85)}
.trust-badge{position:absolute;left:1.5rem;bottom:1.5rem;background:rgba(7,20,46,.82);color:#fff;padding:1rem 1.2rem;border-radius:10px;font-size:.85rem;line-height:1.3}
.why-content{padding:3rem 1.5rem}
.why-ico{display:inline-flex;color:var(--blue)}
.why-item small{font-size:.7rem;line-height:1.4}
@media(min-width:992px){.why-content{padding:3rem 3rem 3rem 1rem;max-width:760px}}

/* Process */
.process-row{display:grid;gap:1.4rem}
.step-num{width:52px;height:52px;border-radius:50%;background:#dbe9ff;color:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.step-arrow{color:#9db3d6}
.process-step small{font-size:.74rem;display:block;max-width:190px}
@media(min-width:576px){.process-row{grid-template-columns:1fr 1fr}}
@media(min-width:992px){.process-row{display:flex;justify-content:space-between;align-items:center}}

/* Testimonials */
.t-viewport{overflow:hidden}
.t-track{display:flex;gap:1.5rem;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.t-card{flex:0 0 100%;padding:1.6rem;margin:0}
.t-card blockquote{margin:.6rem 0 0;color:#33445f}
.stars{color:#f5a623;letter-spacing:2px;font-size:.9rem;margin-left:auto}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#0b5cff,#14c3ff);color:#fff;font-weight:600;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;flex:none}
.round-btn{width:38px;height:38px;border-radius:50%;border:1px solid #cfdaee;background:#fff;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.round-btn:hover:not(:disabled){background:var(--blue);color:#fff;border-color:var(--blue)}
.round-btn:disabled{opacity:.4;cursor:not-allowed}
@media(min-width:768px){.t-card{flex-basis:calc((100% - 1.5rem)/2)}}
@media(min-width:992px){.t-card{flex-basis:calc((100% - 3rem)/3)}}

/* Clients */
.logo-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;align-items:center}
.client-logo{font-weight:700;font-size:1.2rem;color:#6a778c;opacity:.85;transition:.2s}
.client-logo:hover{opacity:1;transform:scale(1.05)}
.logo-microsoft{color:#3b3b3b}.logo-aws{color:#232f3e;font-size:1.6rem}.logo-googlecloud{color:#4285f4}
.logo-quickbooks{color:#2ca01c}.logo-xero{color:#13b5ea;font-style:italic}.logo-dhl{color:#d40511;background:#ffcc00;padding:.1rem .6rem;font-style:italic;border-radius:2px}
.logo-fedex{color:#4d148c}.logo-royalmail{color:#d4001c}
@media(min-width:576px){.logo-row{grid-template-columns:repeat(4,1fr)}}
@media(min-width:992px){.logo-row{grid-template-columns:repeat(8,1fr)}}

/* CTA */
.cta{background:linear-gradient(100deg,#07142e,#0a2350)}
.cta-photo{min-height:260px;background:
  linear-gradient(90deg,transparent 60%,#07142e 100%),
  radial-gradient(circle at 30% 60%,rgba(255,255,255,.28),transparent 35%),
  linear-gradient(160deg,#5c7aa3,#25416b 60%,#10223f)}
.cta-content{padding:3rem 1.5rem}
.cta-lead{color:#cfdbf0;max-width:560px;font-size:.92rem}
@media(min-width:992px){.cta-content{padding:4rem 4rem 4rem 2rem}.cta-photo{min-height:340px}}

/* Contact dialog */
.contact-dialog{border:0;border-radius:16px;padding:1.6rem;width:min(560px,92vw);box-shadow:0 30px 80px rgba(0,0,0,.35);font-family:var(--ff);color:var(--text)}
.contact-dialog::backdrop{background:rgba(5,15,35,.65);backdrop-filter:blur(3px)}
.contact-dialog .row>*{margin-bottom:0}

/* Footer */
.site-footer{background:linear-gradient(180deg,#0a1a3a,#06122b)}
.footer-muted{color:#a9bad6}
.footer-list li{margin-bottom:.6rem;font-size:.85rem;color:#c5d3ea}
.footer-list a:hover{color:#fff;text-decoration:underline}
.footer-contact li{display:flex;gap:.7rem;align-items:flex-start}
.footer-contact .ico{margin-top:2px;color:#fff}
.social-link{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.25);display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.social-link:hover{background:var(--blue);border-color:var(--blue)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom a:hover{color:#fff}
.ms-auto{margin-left:auto}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Fixes after render check */
html,body{overflow-x:clip}
.nav-link{white-space:nowrap}
.header-phone,.header-phone strong,.header-phone small{white-space:nowrap}
@media(min-width:992px){.main-nav{gap:1.1rem}.site-header .container{gap:1rem}}
@media(min-width:1200px){.main-nav{gap:1.5rem}}
.hero-title{font-size:clamp(2rem,3vw,2.9rem)}
.hero-title .grad-text{white-space:nowrap}
.script-note{top:-48px;left:6%}
.hero-visual{padding-top:20px}
.panel-it{top:75px}.panel-acc{top:45px}.panel-log{top:70px}
.section-title{text-wrap:balance}

.brand,.brand-text,.brand-text strong,.brand-text small{white-space:nowrap}
.brand-text small{font-size:.5rem}

/* ---- About page ---- */
.page-banner{min-height:300px;display:flex;align-items:center}
.page-banner .hero-bg{background:
  radial-gradient(800px 400px at 85% 10%,rgba(255,170,90,.3),transparent 60%),
  linear-gradient(110deg,#06122b 25%,#0a2a5e 70%,#8a5a55 140%)}
.banner-title{font-size:clamp(2rem,4.5vw,3rem);font-weight:700;line-height:1.15}
.crumbs{color:#cfe0ff}.crumbs a:hover{color:#fff;text-decoration:underline}.crumbs span{margin:0 .35rem}
.story-visual{position:relative;min-height:380px;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(10,30,70,.2);background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 38px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 2px,transparent 2px 38px),
  linear-gradient(160deg,#5aa7e8 0%,#1c4f8f 50%,#0c2a54 100%)}
.story-visual .why-logo{top:35%;left:34%}
.about-stats{border-top:1px solid var(--line);padding-top:1.2rem}
.mv-card .card-body{padding:2rem}
.mv-card{border-top:4px solid var(--blue)}
.division{padding:2rem 1.5rem;border:1px solid var(--line);border-radius:14px;background:#fff;transition:transform .25s,box-shadow .25s}
.division:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(10,30,70,.12)}
.division-ico{display:inline-flex;width:72px;height:72px;border-radius:50%;background:var(--tint);color:var(--blue);align-items:center;justify-content:center}
.value-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.2rem}
.value-card small{font-size:.78rem}
.mx-auto{margin-inline:auto}
.timeline{position:relative;max-width:760px;margin-inline:auto;padding-left:0}
.timeline::before{content:'';position:absolute;left:46px;top:6px;bottom:6px;width:2px;background:#cfdcf2}
.tl-item{display:flex;gap:1.6rem;align-items:flex-start;position:relative;padding-bottom:2rem}
.tl-item:last-child{padding-bottom:0}
.tl-year{flex:none;width:94px;text-align:center;background:var(--blue);color:#fff;font-weight:700;font-size:.85rem;padding:.4rem 0;border-radius:999px;position:relative;z-index:1}
.tl-body{padding-top:.2rem}
.team-photo{height:170px;background:linear-gradient(160deg,#dbe9ff,#a9c8f5);display:flex;align-items:center;justify-content:center}
.team-initials{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#0b5cff,#14c3ff);color:#fff;font-size:1.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(11,92,255,.35)}
.cta .container{padding-block:4rem}