/* ==========================================================
   Viran Info Solutions — Design Tokens & Base Styles
   Palette: Indigo (primary) / Teal (accent) / Coral (highlight)
   Type: Sora (display) + Inter (body) + JetBrains Mono (code/utility)
   ========================================================== */
:root{
  --ink:#11132B;
  --slate:#5B6178;
  --slate-light:#8A8FA3;
  --bg:#FBFBFD;
  --bg-alt:#F3F5F8;
  --white:#FFFFFF;
  --indigo:#3D3FE0;
  --indigo-dark:#2A2BB8;
  --indigo-50:#EEEEFC;
  --teal:#0EA5A4;
  --teal-50:#E3F8F7;
  --coral:#FF6B5B;
  --amber:#F4B740;
  --mint:#5AC8A5;
  --border:#E6E6F0;
  --shadow-sm: 0 2px 8px rgba(17,19,43,0.06);
  --shadow-md: 0 12px 32px rgba(17,19,43,0.08);
  --shadow-lg: 0 24px 60px rgba(40,40,150,0.14);
  --radius: 12px;
  --radius-sm: 8px;
  --ff-display:'Sora', sans-serif;
  --ff-body:'Inter', sans-serif;
  --ff-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:var(--ff-display); font-weight:700; letter-spacing:0; color:var(--ink);}
p{color:var(--slate); line-height:1.7;}
a{text-decoration:none; color:inherit;}
::selection{background:var(--indigo); color:#fff;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.container-xl{max-width:1240px; margin:0 auto; padding:0 20px;}

.eyebrow{
  font-family:var(--ff-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--indigo);
  background:var(--indigo-50);
  border:1px solid #DCDCFB;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:50px;
  margin-bottom:18px;
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--teal-50);}

.section{padding:96px 0;}
.section-sm{padding:64px 0;}
.section-title{font-size:clamp(2rem,3.4vw,2.85rem); margin-bottom:14px;}
.section-sub{color:var(--slate); font-size:1.08rem; max-width:600px;}
.section-heading{gap:24px;}
.section-heading > div{max-width:720px;}
.text-gradient{
  background:linear-gradient(95deg,var(--indigo) 0%, var(--teal) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Buttons */
.btn-vi-primary{
  background:var(--indigo);
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  padding:13px 28px;
  border-radius:10px;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 10px 24px rgba(61,63,224,.28);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-vi-primary:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(61,63,224,.36); background:var(--indigo-dark); color:#fff;}
.btn-vi-outline{
  background:transparent;
  color:var(--ink);
  font-weight:600;
  font-size:.95rem;
  padding:12px 27px;
  border-radius:10px;
  border:1.5px solid var(--border);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all .25s ease;
}
.btn-vi-outline:hover{border-color:var(--indigo); color:var(--indigo); background:var(--indigo-50);}

/* Glass card */
.glass-card{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
.card-soft{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-soft:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:#D7D7F7;}

/* ===================== NAVBAR ===================== */
.vi-navbar{
  position:sticky; top:0; z-index:1000;
  background:rgba(250,250,252,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:14px 0;
  transition:padding .25s ease, box-shadow .25s ease;
}
.vi-navbar.scrolled{padding:8px 0; box-shadow:0 4px 20px rgba(17,19,43,.06);}
.vi-logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--ff-display);
  color:var(--ink);
  text-decoration:none;
  line-height:1;
}
.vi-logo:hover{color:var(--ink);}
.vi-logo-mark{
  width:42px;
  height:42px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg, #fff 0%, #F2F6FF 100%);
  border:1px solid rgba(6,60,130,.12);
  box-shadow:0 10px 22px rgba(3,42,104,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.vi-logo-mark img{width:34px; height:34px; display:block;}
.vi-logo-text{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  font-size:1.12rem;
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap;
}
.vi-logo-text strong{font-weight:800;}
.vi-logo-text span{
  color:transparent;
  background:linear-gradient(90deg, #2547E8 0%, #0EA5E9 100%);
  -webkit-background-clip:text;
  background-clip:text;
  font-weight:900;
  position:relative;
}
.vi-logo-text span::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-5px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(37,71,232,.85), rgba(14,165,233,.25));
}
.vi-nav-link{
  font-weight:600; font-size:.94rem; color:var(--ink); padding:10px 16px; border-radius:10px; position:relative;
  transition:color .2s ease, background .2s ease;
}
.vi-nav-link:hover, .vi-nav-link.active{color:var(--indigo); background:var(--indigo-50);}

/* ===================== HERO / PRODUCT BOARD ===================== */
.hero{
  position:relative;
  padding:76px 0 54px;
  background:
    linear-gradient(180deg, #fff 0%, var(--bg) 74%),
    repeating-linear-gradient(90deg, rgba(17,19,43,.045) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(17,19,43,.035) 0 1px, transparent 1px 72px);
  overflow:hidden;
}
.hero::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--border);
}
.hero-shell{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(420px, 1.05fr);
  align-items:center;
  gap:64px;
}
.hero-copy h1{
  max-width:680px;
  font-size:clamp(2.55rem,5vw,4.8rem);
  line-height:1.02;
  margin:0;
}
.hero-lede{
  max-width:590px;
  margin:22px 0 0;
  font-size:1.14rem;
  line-height:1.75;
}
.hero-badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px;}
.hero-badge{
  font-family:var(--ff-mono);
  font-size:.76rem;
  color:var(--slate);
  border:1px solid var(--border);
  padding:7px 11px;
  border-radius:8px;
  background:rgba(255,255,255,.86);
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.hero-badge i{color:var(--teal);}
.hero-product{position:relative;}
.delivery-board{
  position:relative;
  background:#101326;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 28px 80px rgba(17,19,43,.25);
  overflow:hidden;
  padding:18px;
}
.delivery-board::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(90,200,165,.17), transparent 34%),
    linear-gradient(315deg, rgba(255,107,91,.14), transparent 42%);
  pointer-events:none;
}
.delivery-topbar,
.board-grid,
.timeline-panel,
.stack-row{position:relative; z-index:1;}
.delivery-topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding:6px 6px 18px;
}
.panel-kicker{
  font-family:var(--ff-mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  color:#9BA1CF;
}
.delivery-topbar h2{
  color:#fff;
  font-size:1.55rem;
  margin:3px 0 0;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:8px;
  padding:8px 10px;
  color:#073C36;
  background:#A6F2DC;
  font-weight:700;
  font-size:.8rem;
  white-space:nowrap;
}
.board-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:12px;
}
.board-card{
  min-height:144px;
  border-radius:12px;
  padding:18px;
  background:rgba(255,255,255,.94);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.12);
}
.board-card span,
.board-card small{
  display:block;
  color:var(--slate);
  font-size:.84rem;
}
.board-card strong{
  display:block;
  margin-top:10px;
  font-family:var(--ff-display);
  font-size:2.35rem;
  line-height:1;
}
.board-card-dark{
  background:linear-gradient(135deg, #2F31D6 0%, #0EA5A4 100%);
  color:#fff;
}
.board-card-dark span{color:rgba(255,255,255,.78);}
.progress-rail{
  height:8px;
  border-radius:8px;
  background:rgba(255,255,255,.25);
  overflow:hidden;
  margin-top:24px;
}
.progress-rail span{
  display:block;
  height:100%;
  border-radius:8px;
  background:#fff;
}
.timeline-panel{
  display:grid;
  gap:10px;
  margin-top:12px;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.timeline-item{
  display:grid;
  grid-template-columns:36px 1fr;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
}
.timeline-item i{
  width:36px;
  height:36px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#101326;
  background:#fff;
}
.timeline-item.done i{background:#A6F2DC;}
.timeline-item.active i{background:#FFD178;}
.timeline-item strong{display:block; color:#fff; font-size:.94rem;}
.timeline-item span{display:block; color:#BFC4E9; font-size:.82rem; margin-top:2px;}
.stack-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.stack-row span{
  flex:1 1 auto;
  min-width:72px;
  text-align:center;
  border-radius:8px;
  padding:9px 10px;
  background:rgba(255,255,255,.09);
  color:#E9EBFF;
  font-family:var(--ff-mono);
  font-size:.78rem;
}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:14px;
}
.hero-stats div{
  padding:18px 16px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.hero-stats strong{
  display:block;
  font-family:var(--ff-display);
  font-size:1.65rem;
  line-height:1;
  color:var(--ink);
}
.hero-stats span{
  display:block;
  margin-top:7px;
  font-size:.78rem;
  color:var(--slate);
}
.proof-strip{
  padding:18px 0;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.proof-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--border);
}
.proof-grid div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:68px;
  background:#fff;
  color:var(--ink);
  font-weight:700;
  font-size:.92rem;
}
.proof-grid i{color:var(--teal); font-size:1.1rem;}

.stat-pill{
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; box-shadow:var(--shadow-sm);
}
.stat-pill .num{font-family:var(--ff-display); font-size:1.9rem; font-weight:700; color:var(--ink);}
.stat-pill .lbl{font-size:.82rem; color:var(--slate);}

/* Logo strip */
.logo-strip{filter:grayscale(1); opacity:.55;}
.logo-strip img{height:26px;}

/* Service / icon blocks */
.icon-box{
  width:52px; height:52px; border-radius:10px;
  background:var(--indigo-50); color:var(--indigo);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  margin-bottom:18px;
}
.service-card{padding:32px; height:100%;}
.service-card:hover .icon-box{background:var(--indigo); color:#fff;}
.service-card h5,
.service-card h4{line-height:1.3;}

/* Process */
.process-section,
.testimonial-section{
  background:
    linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.process-step{
  position:relative;
  padding:28px 24px;
  height:100%;
  background:transparent;
  border-left:2px solid var(--border);
}
.process-step::before{
  content:'';
  position:absolute;
  left:-6px;
  top:32px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 6px rgba(255,107,91,.12);
}
.process-num{font-family:var(--ff-mono); font-size:.78rem; color:var(--teal); margin-bottom:10px; display:block;}
.process-step .icon-box{background:#fff; border:1px solid var(--border);}

/* Portfolio */
.portfolio-card{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); height:100%;}
.portfolio-card img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease;}
.portfolio-card:hover img{transform:scale(1.06);}
.portfolio-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,19,43,0) 35%, rgba(17,19,43,.88) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:24px; color:#fff;
}
.portfolio-tag{font-family:var(--ff-mono); font-size:.72rem; color:#9CF; text-transform:uppercase; letter-spacing:.06em;}

/* Testimonials */
.testi-card{padding:30px; height:100%;}
.testi-stars{color:#F5A623; font-size:.9rem; margin-bottom:14px;}
.testi-avatar{width:46px; height:46px; border-radius:50%; object-fit:cover; background:var(--indigo-50);}

/* Blog */
.blog-card img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius) var(--radius) 0 0;}
.blog-meta{font-family:var(--ff-mono); font-size:.76rem; color:var(--slate-light); text-transform:uppercase; letter-spacing:.05em;}

/* CTA band */
.cta-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  background:#101326;
  border-radius:18px;
  padding:48px;
  color:#fff;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.cta-band::after{
  content:'';
  position:absolute;
  inset:auto 0 0 auto;
  width:44%;
  height:100%;
  background:linear-gradient(135deg, transparent, rgba(90,200,165,.28));
  pointer-events:none;
}
.cta-band > *{position:relative; z-index:1;}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.78); max-width:560px;}
.eyebrow-light{
  color:#fff;
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.16);
}
.cta-button{background:#fff; color:var(--ink); box-shadow:none; white-space:nowrap;}
.cta-button:hover{background:#A6F2DC; color:#073C36; box-shadow:none;}

/* Forms */
.form-control-vi, .form-select-vi{
  border:1.5px solid var(--border); border-radius:12px; padding:13px 16px; font-size:.95rem;
  background:var(--white); width:100%;
}
.form-control-vi:focus, .form-select-vi:focus{outline:none; border-color:var(--indigo); box-shadow:0 0 0 4px var(--indigo-50);}
label.form-label-vi{font-weight:600; font-size:.86rem; margin-bottom:6px; display:block; color:var(--ink);}
.contact-detail-list{display:flex; flex-direction:column; gap:12px; margin-top:4px;}
.contact-detail-item{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:linear-gradient(180deg, #fff 0%, #FAFAFD 100%);
}
.contact-detail-index{
  width:34px;
  height:34px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--indigo-50);
  color:var(--indigo);
  font-family:var(--ff-mono);
  font-size:.78rem;
  font-weight:700;
}
.contact-detail-item strong{display:block; color:var(--ink); font-size:.9rem; margin-bottom:3px;}
.contact-detail-item span:last-child,
.contact-detail-item a{display:block; color:var(--slate); font-size:.86rem; line-height:1.55;}
.contact-detail-item a{text-decoration:none;}
.contact-detail-item a:hover{color:var(--indigo);}
.contact-country-card{
  padding:16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, #fff 0%, #FAFAFD 100%);
}
.contact-country-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.contact-country-head strong{font-family:var(--ff-display); color:var(--ink);}
.contact-country-row{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:10px;
  align-items:start;
  color:var(--slate);
  font-size:.9rem;
  line-height:1.55;
  padding:8px 0;
  border-top:1px solid rgba(230,230,240,.85);
}
.contact-country-row i{color:var(--indigo); margin-top:2px;}
.contact-country-row a{color:var(--slate); text-decoration:none;}
.contact-country-row a:hover{color:var(--indigo);}

/* Footer */
.vi-footer{background:var(--ink); color:#B7B9D6; padding:72px 0 28px;}
.vi-footer h6{color:#fff; font-family:var(--ff-display); margin-bottom:18px;}
.vi-footer a{color:#B7B9D6; transition:color .2s ease;}
.vi-footer a:hover{color:var(--teal);}
.footer-brand{display:flex; align-items:center; gap:14px;}
.footer-brand img{flex:0 0 auto; width:54px; height:54px;}
.footer-brand-name{font-family:var(--ff-display); font-size:1.18rem; font-weight:800; color:#fff; line-height:1.1;}
.footer-brand-name span{color:#62D2E8;}
.footer-brand-caption{margin-top:6px; color:#DDE2F8; font-size:.88rem; font-weight:600; letter-spacing:.02em;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:24px; font-size:.85rem;}
.social-circle{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:all .2s ease;
}
.social-circle:hover{background:var(--teal); border-color:var(--teal); transform:translateY(-3px);}

/* Page header (inner pages) */
.page-header{
  padding:54px 0 50px;
  background:linear-gradient(180deg, var(--indigo-50) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--border);
}
.breadcrumb-vi{font-family:var(--ff-mono); font-size:.82rem; color:var(--slate);}
.breadcrumb-vi a{color:var(--indigo);}

/* Animations */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* Misc */
.divider-dot{width:5px; height:5px; border-radius:50%; background:var(--slate-light); display:inline-block; margin:0 8px;}
.badge-vi{font-family:var(--ff-mono); font-size:.74rem; background:var(--teal-50); color:#0B8281; padding:4px 10px; border-radius:6px;}

@media (max-width:991px){
  .hero{padding:58px 0 42px;}
  .hero-shell{grid-template-columns:1fr; gap:40px;}
  .hero-copy h1{font-size:clamp(2.35rem,10vw,4rem);}
  .proof-grid{grid-template-columns:repeat(2, 1fr);}
  .section{padding:64px 0;}
  .cta-band{align-items:flex-start; flex-direction:column; padding:36px 28px;}
}
@media (max-width:575px){
  .container-xl{padding:0 16px;}
  .vi-logo{gap:9px;}
  .vi-logo-mark{width:38px; height:38px; border-radius:10px;}
  .vi-logo-mark img{width:30px; height:30px;}
  .vi-logo-text{gap:5px; font-size:1rem;}
  .hero{padding-top:44px;}
  .hero-copy h1{font-size:2.42rem; line-height:1.06;}
  .hero-lede{font-size:1rem;}
  .delivery-board{border-radius:14px; padding:12px;}
  .delivery-topbar{flex-direction:column; padding:4px 4px 12px;}
  .board-grid,
  .hero-stats,
  .proof-grid{grid-template-columns:1fr;}
  .board-card{min-height:auto;}
  .timeline-item{grid-template-columns:32px 1fr; padding:10px;}
  .timeline-item i{width:32px; height:32px;}
  .hero-stats div{padding:16px;}
  .proof-grid div{justify-content:flex-start; padding:0 18px;}
  .section-sm{padding:48px 0;}
  .cta-band{padding:30px 22px;}
  .cta-button{width:100%; justify-content:center;}
}
.is-invalid-vi{border-color:var(--coral) !important; box-shadow:0 0 0 4px rgba(255,107,91,.12) !important;}