/*
Theme Name: Arixeva Technologies
Theme URI: https://arixeva.com
Author: Arixeva Technologies
Author URI: https://arixeva.com
Description: Custom WordPress theme for Arixeva Technologies — a futuristic, tech-forward business theme with animated brand mark, mega menu, WhatsApp lead capture, a dynamic Portfolio (case studies) post type, moderated client reviews, and a quote-request lead system manageable from wp-admin.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arixeva
*/

/* ==========================================================================
   All theme styling below. Colors, spacing, and component styles are
   controlled by the CSS variables at the top of this file (:root).
   ========================================================================== */


/* ============ TOKENS ============ */
:root{
  --navy-deep:#0B1220;
  --navy:#0F172A;
  --navy-soft:#141F38;
  --blue-deep:#1D4ED8;
  --blue-bright:#3B82F6;
  --white:#FFFFFF;
  --ink:#111827;
  --gray:#6B7280;
  --gray-soft:#9AA4B2;
  --border-soft:rgba(255,255,255,0.10);
  --border-light:rgba(17,24,39,0.08);
  --grad: linear-gradient(120deg, var(--blue-deep), var(--blue-bright));
  --grad-shift: linear-gradient(100deg, var(--blue-deep) 0%, var(--blue-bright) 45%, var(--blue-deep) 100%);
  --shadow-card: 0 10px 30px rgba(15,23,42,0.08);
  --shadow-card-lg: 0 20px 50px rgba(15,23,42,0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
ul{list-style:none;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
@media(max-width:640px){.container{padding:0 20px;}}

h1,h2,h3,h4{font-weight:700; letter-spacing:-0.01em; color:var(--ink);}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark p,.on-dark span{color:var(--white);}

.eyebrow{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:12.5px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--blue-bright); margin-bottom:14px;
}
.eyebrow::before,.eyebrow::after{content:''; width:32px; height:1px; background:linear-gradient(90deg, transparent, var(--blue-bright));}
.eyebrow::after{background:linear-gradient(90deg, var(--blue-bright), transparent);}

.section-head{text-align:center; max-width:640px; margin:0 auto 52px;}
.section-head h2{font-size:clamp(28px,4vw,40px); line-height:1.15; margin-bottom:14px;}
.section-head p{color:var(--gray); font-size:16px; line-height:1.7;}
.on-dark .section-head p{color:#AEB9CC;}

section{padding:96px 0;}
@media(max-width:768px){section{padding:64px 0;}}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 30px; border-radius:var(--radius-pill);
  font-weight:600; font-size:14.5px; letter-spacing:0.01em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-position .6s ease;
  white-space:nowrap; position:relative;
}
.btn-primary{
  background:var(--grad-shift); background-size:200% auto; background-position:0% 0;
  color:var(--white); box-shadow:0 8px 24px rgba(29,78,216,0.35);
}
.btn-primary:hover{background-position:100% 0; transform:translateY(-2px) scale(1.02); box-shadow:0 12px 32px rgba(59,130,246,0.45);}
.btn-primary:active{transform:translateY(0) scale(0.98);}
.btn-secondary{
  background:transparent; color:var(--white); border:1.5px solid var(--border-soft);
  backdrop-filter:blur(6px);
}
.btn-secondary:hover{border-color:var(--blue-bright); background:rgba(59,130,246,0.08); transform:translateY(-2px);}
.btn-ghost-dark{color:var(--ink); border:1.5px solid var(--border-light);}
.btn-ghost-dark:hover{border-color:var(--blue-bright); color:var(--blue-deep); background:rgba(59,130,246,0.06); transform:translateY(-2px);}
.btn-sm{padding:10px 20px; font-size:13px;}
.btn:focus-visible{outline:2px solid var(--blue-bright); outline-offset:3px;}

/* ============ LOGO ============ */
.logo-mark{width:34px; height:34px; flex-shrink:0;}
.logo{display:flex; align-items:center; gap:11px;}
.logo-word{display:flex; flex-direction:column; line-height:1;}
.logo-word .word{font-size:19px; font-weight:700; letter-spacing:0.03em; color:var(--ink);}
.on-dark .logo-word .word, header.scrolled-dark .logo-word .word{color:var(--white);}
.logo-word .word .xe{color:var(--blue-bright);}
.logo-word .cap{font-size:8.5px; font-weight:600; letter-spacing:0.28em; color:var(--gray-soft); margin-top:2px;}

.strokeA{stroke-dasharray:140; stroke-dashoffset:140; animation:drawA 1.1s var(--ease) forwards;}
.strokeA2{stroke-dasharray:140; stroke-dashoffset:140; animation:drawA 1.1s var(--ease) .15s forwards;}
.swoosh{opacity:0; transform:translate(-14px,6px); animation:sweepIn .6s var(--ease) .95s forwards;}
@keyframes drawA{to{stroke-dashoffset:0;}}
@keyframes sweepIn{to{opacity:1; transform:translate(0,0);}}
@media (prefers-reduced-motion: reduce){
  .strokeA,.strokeA2,.swoosh{animation:none !important; stroke-dashoffset:0 !important; opacity:1 !important; transform:none !important;}
}

/* loader */

/* ============ HEADER ============ */
header{
  position:sticky; top:0; z-index:500;
  background:rgba(11,18,32,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
header.scrolled-light{background:rgba(255,255,255,0.85); border-bottom:1px solid var(--border-light); box-shadow:0 4px 24px rgba(15,23,42,0.06);}
.navwrap{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:var(--maxw); margin:0 auto;}
.navlinks{display:flex; align-items:center; gap:6px;}
.navlinks > li{position:relative;}
.navlinks > li > a, .navlinks > li > button.navlink{
  display:flex; align-items:center; gap:5px; padding:10px 16px; font-size:14.5px; font-weight:500;
  color:#D7DEEA; border-radius:var(--radius-sm); transition:color .2s ease;
  position:relative;
}
header.scrolled-light .navlinks > li > a, header.scrolled-light .navlinks > li > button.navlink{color:var(--ink);}
.navlinks > li > a::after, .navlinks > li > button.navlink::after{
  content:''; position:absolute; left:16px; right:16px; bottom:6px; height:2px; border-radius:2px;
  background:var(--grad-shift); background-size:200% auto;
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease), background-position .6s ease;
}
.navlinks > li > a:hover, .navlinks > li > a.active, .navlinks > li > button.navlink:hover{color:var(--white);}
header.scrolled-light .navlinks > li > a:hover, header.scrolled-light .navlinks > li > a.active, header.scrolled-light .navlinks > li > button.navlink:hover{color:var(--blue-deep);}
.navlinks > li > a:hover::after, .navlinks > li > a.active::after, .navlinks > li.megaopen > button.navlink::after{transform:scaleX(1); background-position:100% 0;}
.chev{width:11px; height:11px; transition:transform .25s ease;}
.navlinks > li.megaopen .chev{transform:rotate(180deg);}

.nav-cta{display:flex; align-items:center; gap:14px;}
.hamb{display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; color:var(--white); border:1px solid var(--border-soft);}
header.scrolled-light .hamb{color:var(--ink); border-color:var(--border-light);}

/* Mega menu */
.megamenu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  width:min(760px, 92vw); background:rgba(11,18,32,0.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-soft); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,0.45);
  padding:26px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  display:grid; grid-template-columns:1.6fr 1fr; gap:22px;
}
li.megaopen .megamenu{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.mega-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.mega-col-title{font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:12px;}
.mega-item{display:flex; gap:10px; align-items:flex-start; padding:8px 6px; border-radius:10px; transition:background .2s ease, transform .2s ease;}
.mega-item:hover{background:rgba(59,130,246,0.12); transform:translateX(3px);}
.mega-item svg{width:20px; height:20px; flex-shrink:0; color:var(--blue-bright); margin-top:2px;}
.mega-item .t{font-size:13.5px; font-weight:600; color:var(--white); margin-bottom:2px;}
.mega-item .d{font-size:11.5px; color:#9AA7BD; line-height:1.4;}
.mega-viewall{display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; font-weight:600; color:var(--blue-bright);}
.mega-cta{background:linear-gradient(160deg, rgba(59,130,246,0.16), rgba(29,78,216,0.08)); border:1px solid rgba(59,130,246,0.25); border-radius:14px; padding:20px; display:flex; flex-direction:column; justify-content:space-between;}
.mega-cta p{font-size:13.5px; color:#D7DEEA; line-height:1.5; margin-bottom:14px;}
.mega-cta .btn{width:100%;}

@media(max-width:980px){
  .navlinks{display:none;}
  .hamb{display:flex;}
}

/* mobile drawer */
.drawer{position:fixed; inset:0; z-index:600; visibility:hidden;}
.drawer.open{visibility:visible;}
.drawer-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.55); opacity:0; transition:opacity .3s ease;}
.drawer.open .drawer-backdrop{opacity:1;}
.drawer-panel{position:absolute; top:0; right:0; height:100%; width:min(340px,86vw); background:var(--navy-deep); padding:26px 22px; transform:translateX(100%); transition:transform .35s var(--ease); overflow-y:auto;}
.drawer.open .drawer-panel{transform:translateX(0);}
.drawer-panel a, .drawer-panel button.dlink{display:block; width:100%; text-align:left; padding:14px 6px; font-size:16px; font-weight:500; color:#E5EAF2; border-bottom:1px solid var(--border-soft);}
.drawer-close{margin-left:auto; display:block; color:var(--white); width:36px; height:36px;}
.drawer-sub{padding-left:14px; display:none;}
.drawer-sub.open{display:block;}
.drawer-sub a{font-size:14px; color:#9AA7BD; border-bottom:none; padding:10px 6px;}
.drawer .btn{width:100%; margin-top:18px;}

/* mobile sticky quote button */
.mobile-sticky-cta{position:fixed; left:16px; right:16px; bottom:16px; z-index:400; display:none;}
.mobile-sticky-cta .btn{width:100%;}
@media(max-width:640px){.mobile-sticky-cta{display:block;}}

/* WhatsApp floating button */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:450;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(37,211,102,0.45);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  animation:waPulse 2.6s ease-in-out infinite;
}
.wa-float:hover{transform:scale(1.08); box-shadow:0 14px 36px rgba(37,211,102,0.55);}
.wa-float svg{width:29px; height:29px;}
.wa-float .wa-ring{position:absolute; inset:0; border-radius:50%; border:2px solid rgba(37,211,102,0.55); animation:waRing 2.6s ease-out infinite;}
@keyframes waPulse{0%,100%{box-shadow:0 10px 28px rgba(37,211,102,0.45);} 50%{box-shadow:0 10px 34px rgba(37,211,102,0.7);}}
@keyframes waRing{0%{transform:scale(1); opacity:0.6;} 100%{transform:scale(1.6); opacity:0;}}
@media(max-width:640px){.wa-float{right:16px; bottom:92px; width:52px; height:52px;} .wa-float svg{width:26px; height:26px;}}
@media(prefers-reduced-motion:reduce){.wa-float, .wa-float .wa-ring{animation:none;}}

/* review stars input */
.star-input{display:flex; gap:6px; margin-bottom:6px;}
.star-input button{width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:#D8DEE9; transition:color .15s ease, transform .15s ease;}
.star-input button svg{width:26px; height:26px;}
.star-input button.active, .star-input button:hover{color:#F5B301; transform:scale(1.1);}
.review-tag{display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:0.06em; color:var(--blue-deep); background:rgba(59,130,246,0.1); padding:3px 10px; border-radius:var(--radius-pill); margin-bottom:10px;}


/* ============ PAGE ENTER ANIMATION ============ */
.arx-page{animation:pageIn .5s var(--ease);}
@keyframes pageIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

/* ============ HERO ============ */
.hero{
  position:relative; background:radial-gradient(ellipse 120% 90% at 20% -10%, #16223f 0%, var(--navy-deep) 55%), var(--navy-deep);
  color:var(--white); padding:150px 0 110px; overflow:hidden;
}
.hero-inner{display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; position:relative; z-index:2;}
.hero-badge{display:inline-flex; align-items:center; gap:8px; padding:7px 16px 7px 8px; border-radius:var(--radius-pill); background:rgba(59,130,246,0.12); border:1px solid rgba(59,130,246,0.3); font-size:12.5px; font-weight:600; letter-spacing:0.04em; color:#BBD3FF; margin-bottom:26px;}
.hero-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 0 4px rgba(59,130,246,0.25);}
.hero h1{font-size:clamp(34px,5vw,56px); line-height:1.08; margin-bottom:22px; color:#fff;}
.hero h1 .word{display:inline-block; color:inherit;}
html.js-ready .hero h1 .word{opacity:0; transform:translateY(18px); filter:blur(4px); animation:wordUp .7s var(--ease) forwards;}
@keyframes wordUp{to{opacity:1; transform:translateY(0); filter:blur(0);}}
.hero p.lead{font-size:17px; line-height:1.75; color:#AEB9CC; max-width:520px; margin-bottom:34px;}
html.js-ready .hero p.lead{opacity:0; animation:fadeUp .7s var(--ease) .55s forwards;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
html.js-ready .hero-ctas{opacity:0; transform:scale(0.94); animation:ctaIn .55s var(--ease) .8s forwards;}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
@keyframes ctaIn{to{opacity:1; transform:scale(1);}}

.hero-visual{position:relative; height:420px;}
.hero-visual svg{width:100%; height:100%;}
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{height:280px; order:-1;}
  .hero{padding:130px 0 70px;}
}

.grid-bg{position:absolute; inset:0; opacity:0.35; z-index:1;
  background-image:linear-gradient(rgba(59,130,246,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.10) 1px, transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(ellipse 70% 60% at 30% 30%, black, transparent 75%);
  animation:driftGrid 26s linear infinite;
}
@keyframes driftGrid{from{background-position:0 0, 0 0;} to{background-position:120px 60px, 120px 60px;}}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:0.26; z-index:1; animation:blobFloat 14s ease-in-out infinite; pointer-events:none;}
.blob1{width:300px; height:300px; background:var(--blue-deep); top:-90px; right:-60px;}
.blob2{width:190px; height:190px; background:var(--blue-bright); bottom:-40px; right:8%; left:auto; animation-delay:-6s;}
@keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-20px,20px) scale(1.08);}}
@media(prefers-reduced-motion:reduce){.grid-bg,.blob,.hero h1 .word,.hero p.lead,.hero-ctas{animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;}}

/* network graphic */
.netline{stroke:url(#lineGrad); stroke-width:1.2; opacity:0; stroke-dasharray:6 400; animation:netDraw 2.4s ease forwards;}
@keyframes netDraw{to{stroke-dashoffset:0; opacity:0.8; stroke-dasharray:400 0;}}
.netnode{opacity:0; animation:nodeIn .5s ease forwards;}
@keyframes nodeIn{to{opacity:1;}}

/* ============ SECTIONS: shared ============ */
.section-alt{background:#F6F8FC;}
.divider-top{height:3px; background:var(--grad); width:100%;}

/* service cards */
.grid-6{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:900px){.grid-6{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.grid-6{grid-template-columns:1fr;}}
.card{
  background:var(--white); border-radius:var(--radius); padding:32px 26px; border:1px solid var(--border-light);
  box-shadow:var(--shadow-card); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s ease;
}
html.js-ready .card{opacity:0; transform:translateY(24px);}
.card.reveal{animation:cardUp .6s var(--ease) forwards;}
@keyframes cardUp{to{opacity:1; transform:translateY(0);}}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow-card-lg); border-color:rgba(59,130,246,0.25);}
.icon-wrap{width:52px; height:52px; border-radius:14px; background:linear-gradient(160deg, rgba(59,130,246,0.14), rgba(29,78,216,0.06)); display:flex; align-items:center; justify-content:center; margin-bottom:20px; transition:transform .35s var(--ease);}
.card:hover .icon-wrap{transform:scale(1.08) rotate(-4deg);}
.icon-wrap svg{width:26px; height:26px; color:var(--blue-deep);}
.icon-draw{stroke-dasharray:60; stroke-dashoffset:60;}
html:not(.js-ready) .icon-draw, html:not(.js-ready) .check-badge svg{stroke-dashoffset:0 !important;}
.reveal .icon-draw{animation:iconDraw 1s ease forwards .25s;}
@keyframes iconDraw{to{stroke-dashoffset:0;}}
.card h3{font-size:18.5px; margin-bottom:10px;}
.card p{font-size:14.5px; color:var(--gray); line-height:1.65; margin-bottom:16px;}
.card .link-arrow{font-size:13.5px; font-weight:600; color:var(--blue-deep); display:inline-flex; align-items:center; gap:6px;}
.card .link-arrow svg{width:14px; height:14px; transition:transform .25s ease;}
.card:hover .link-arrow svg{transform:translateX(4px);}

/* checkmark list */
.check-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
@media(max-width:700px){.check-grid{grid-template-columns:1fr;}}
.check-item{display:flex; gap:16px; align-items:flex-start; padding:18px; border-radius:14px; transition:background .3s ease;}
.check-item:hover{background:rgba(59,130,246,0.06);}
.check-badge{width:30px; height:30px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 14px rgba(29,78,216,0.35);}
.check-badge svg{width:15px; height:15px; color:#fff; stroke-dasharray:20; stroke-dashoffset:20;}
.check-item.reveal .check-badge svg{animation:checkDraw .5s ease forwards .3s;}
@keyframes checkDraw{to{stroke-dashoffset:0;}}
.check-item h4{font-size:15.5px; margin-bottom:5px;}
.check-item p{font-size:13.5px; color:var(--gray); line-height:1.6;}
.on-dark .check-item p{color:#AEB9CC;}

/* process stepper */
.stepper{display:flex; justify-content:space-between; position:relative; margin-top:60px;}
.stepper::before{content:''; position:absolute; top:26px; left:26px; right:26px; height:2px; background:var(--border-light); z-index:0;}
.stepper-line{position:absolute; top:26px; left:26px; height:2px; background:var(--grad); width:0; z-index:1; transition:width 1.4s var(--ease);}
.step{position:relative; z-index:2; flex:1; text-align:center; padding:0 8px;}
.step-dot{width:54px; height:54px; border-radius:50%; background:var(--white); border:2px solid var(--border-light); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; transition:border-color .4s ease, background .4s ease, transform .4s var(--ease);}
.step-dot svg{width:24px; height:24px; color:var(--gray-soft); transition:color .4s ease;}
.step.active .step-dot{border-color:var(--blue-bright); background:var(--grad); transform:scale(1.1);}
.step.active .step-dot svg{color:#fff;}
.step h4{font-size:15px; margin-bottom:6px;}
.step p{font-size:12.5px; color:var(--gray); line-height:1.5;}
@media(max-width:820px){
  .stepper{flex-direction:column; gap:34px; align-items:flex-start;}
  .stepper::before{width:2px; height:calc(100% - 52px); top:26px; left:26px; right:auto;}
  .stepper-line{width:2px !important; height:0; left:26px; top:26px;}
  .step{display:flex; align-items:flex-start; gap:18px; text-align:left; padding:0;}
  .step-dot{margin:0; flex-shrink:0;}
}

/* portfolio */
.filter-bar{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:44px;}
.filter-btn{padding:9px 20px; border-radius:var(--radius-pill); font-size:13.5px; font-weight:600; border:1.5px solid var(--border-light); color:var(--gray); transition:all .25s ease;}
.filter-btn.active, .filter-btn:hover{border-color:var(--blue-bright); color:var(--blue-deep); background:rgba(59,130,246,0.08);}
.port-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media(max-width:900px){.port-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.port-grid{grid-template-columns:1fr;}}
.port-card{border-radius:var(--radius); overflow:hidden; background:var(--white); border:1px solid var(--border-light); box-shadow:var(--shadow-card); transition:transform .4s var(--ease); perspective:1000px;}
.port-card:hover{transform:translateY(-6px);}
.port-thumb{aspect-ratio:16/10; background:linear-gradient(135deg, var(--navy-deep), var(--navy-soft) 40%, var(--blue-deep)); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.port-thumb::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(59,130,246,0.35), transparent 60%);}
.port-thumb .initial{font-size:44px; font-weight:800; color:rgba(255,255,255,0.9); letter-spacing:-0.02em; position:relative; z-index:1;}
.port-body{padding:22px;}
.port-tag{font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:8px; display:inline-block;}
.port-body h4{font-size:16.5px; margin-bottom:8px;}
.port-body p{font-size:13.5px; color:var(--gray); line-height:1.6; margin-bottom:14px;}

/* testimonials */
.test-strip{display:flex; gap:22px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory;}
.test-strip::-webkit-scrollbar{height:6px;}
.test-strip::-webkit-scrollbar-thumb{background:var(--border-light); border-radius:10px;}
.test-card{flex:0 0 min(360px,84vw); scroll-snap-align:start; background:var(--white); border:1px solid var(--border-light); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-card);}
.stars{display:flex; gap:3px; margin-bottom:14px;}
.stars svg{width:15px; height:15px; color:#F5B301;}
.test-card p.quote{font-size:14.5px; color:var(--ink); line-height:1.7; margin-bottom:18px;}
.test-person{display:flex; align-items:center; gap:12px;}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px;}
.test-person .name{font-size:13.5px; font-weight:600;}
.test-person .role{font-size:12px; color:var(--gray);}
/* floating stat badges over hero visual */
.stat-badge{
  position:absolute; background:rgba(15,23,42,0.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-soft); border-radius:16px; padding:16px 20px;
  box-shadow:0 16px 40px rgba(0,0,0,0.35); animation:badgeFloat 5s ease-in-out infinite;
}
.stat-badge .num{font-size:26px; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1;}
.stat-badge .lbl{font-size:11px; color:#AEB9CC; letter-spacing:0.04em; margin-top:4px;}
.stat-badge-1{top:6%; left:-4%; animation-delay:0s;}
.stat-badge-2{bottom:10%; right:-2%; animation-delay:-2.4s;}
@keyframes badgeFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}
@media(max-width:960px){.stat-badge-1{left:0;} .stat-badge-2{right:0;}}
@media(max-width:640px){.stat-badge{padding:12px 16px;} .stat-badge .num{font-size:20px;}}
@media(prefers-reduced-motion:reduce){.stat-badge{animation:none;}}

/* marquee ticker */
.marquee-wrap{background:var(--navy-deep); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); overflow:hidden; padding:20px 0;}
.marquee-track{display:flex; width:max-content; animation:marqueeScroll 28s linear infinite;}
.marquee-track .marquee-item{display:flex; align-items:center; gap:14px; font-size:16px; font-weight:600; color:#C6CEDD; letter-spacing:0.02em; padding:0 28px; white-space:nowrap;}
.marquee-track .marquee-item .diamond{display:inline-block; width:7px; height:7px; background:var(--grad); transform:rotate(45deg); flex-shrink:0;}
@keyframes marqueeScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.marquee-track{animation-duration:70s;}}

/* spotlight featured service */
.spotlight{display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px; align-items:center; background:var(--navy-deep); border-radius:28px; padding:56px; position:relative; overflow:hidden;}
.spotlight::before{content:''; position:absolute; width:340px; height:340px; background:var(--blue-bright); border-radius:50%; filter:blur(120px); opacity:0.22; top:-100px; right:-60px;}
.spotlight-visual{aspect-ratio:4/3; border-radius:20px; position:relative; background:linear-gradient(150deg,#0F1B33,#0B1220); border:1px solid var(--border-soft); overflow:hidden; display:flex; align-items:center; justify-content:center;}
.spotlight-visual::before{content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(59,130,246,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.14) 1px, transparent 1px); background-size:30px 30px; opacity:0.7;}
.spotlight-visual svg{position:relative; z-index:1; width:62%; height:62%;}
.spotlight-badge{position:absolute; z-index:2; background:rgba(11,18,32,0.7); backdrop-filter:blur(10px); border:1px solid var(--border-soft); border-radius:14px; padding:10px 16px; font-size:12px; font-weight:600; color:#fff; display:flex; align-items:center; gap:8px; animation:badgeFloat 4.5s ease-in-out infinite;}
.spotlight-badge svg{width:14px; height:14px; color:var(--blue-bright);}
.spotlight-badge-1{top:14px; left:14px; animation-delay:0s;}
.spotlight-badge-2{bottom:14px; right:14px; animation-delay:-2s;}
.spotlight-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:16px;}
.spotlight h3{font-size:clamp(24px,3vw,32px); margin-bottom:14px;}
.spotlight p.desc{color:#AEB9CC; font-size:15px; line-height:1.75; margin-bottom:22px; max-width:480px;}
@media(max-width:860px){.spotlight{grid-template-columns:1fr; padding:32px;}}

/* avatar stack */
.avatar-stack-row{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:14px;}
.avatar-stack{display:flex;}
.avatar-stack .avatar{width:36px; height:36px; border:2.5px solid var(--white); margin-left:-10px; font-size:12px;}
.avatar-stack .avatar:first-child{margin-left:0;}
.avatar-stack-row .count-lbl{font-size:13.5px; color:var(--gray); font-weight:500;}

.logo-strip{display:flex; gap:44px; justify-content:center; flex-wrap:wrap; margin-top:50px; opacity:0.6;}
.logo-strip span{font-weight:700; font-size:15px; letter-spacing:0.03em; color:var(--gray);}

/* CTA banner */
.cta-banner{position:relative; background:linear-gradient(120deg, var(--navy-deep), #101d3a 60%, var(--navy-deep)); border-radius:28px; padding:64px 40px; text-align:center; overflow:hidden; margin:0 28px;}
@media(min-width:1200px){.cta-banner{margin:0 auto; max-width:calc(var(--maxw) - 0px);}}
.cta-banner h2{color:#fff; font-size:clamp(24px,3.6vw,34px); margin-bottom:14px;}
.cta-banner p{color:#AEB9CC; margin-bottom:30px; font-size:15.5px;}
.cta-banner .ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:2;}
.cta-glow{position:absolute; width:400px; height:400px; background:var(--blue-bright); border-radius:50%; filter:blur(100px); opacity:0.25; top:-150px; left:50%; transform:translateX(-50%); animation:blobFloat 10s ease-in-out infinite;}

/* stats bar */
.stats-bar{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; background:var(--navy-deep); border-radius:24px; padding:44px 30px;}
@media(max-width:700px){.stats-bar{grid-template-columns:repeat(2,1fr);}}
.stat{text-align:center;}
.stat .num{font-size:clamp(28px,4vw,40px); font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:6px;}
.stat .lbl{font-size:12.5px; color:#9AA7BD; letter-spacing:0.03em;}

/* values grid / team */
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:800px){.values-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.values-grid{grid-template-columns:1fr;}}
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}
.team-card{text-align:center;}
.team-avatar{width:100%; aspect-ratio:1; border-radius:18px; background:linear-gradient(150deg, #E7EDFB, #F6F8FC); display:flex; align-items:center; justify-content:center; margin-bottom:16px; border:1px solid var(--border-light);}
.team-avatar svg{width:42%; height:42%; color:var(--blue-bright); opacity:0.55;}
.team-card h4{font-size:15px; margin-bottom:3px;}
.team-card p{font-size:12.5px; color:var(--gray);}

/* service detail blocks */
.svc-block{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:56px 0; border-bottom:1px solid var(--border-light);}
.svc-block:last-child{border-bottom:none;}
.svc-block.reverse{direction:rtl;}
.svc-block.reverse > *{direction:ltr;}
.svc-visual{aspect-ratio:4/3; border-radius:22px; background:linear-gradient(150deg, var(--navy-deep), var(--navy-soft)); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.svc-visual::before{content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(59,130,246,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.14) 1px, transparent 1px); background-size:34px 34px; opacity:0.6;}
.svc-visual svg{width:34%; height:34%; color:var(--blue-bright); position:relative; z-index:1;}
.svc-num{font-size:12px; font-weight:700; letter-spacing:0.16em; color:var(--blue-bright); margin-bottom:14px;}
.svc-block h3{font-size:26px; margin-bottom:14px;}
.svc-block p.desc{color:var(--gray); font-size:15px; line-height:1.75; margin-bottom:22px;}
.svc-list{margin-bottom:24px;}
.svc-list li{display:flex; gap:10px; align-items:center; font-size:14px; color:var(--ink); margin-bottom:11px;}
.svc-list li .dot-check{width:20px; height:20px; border-radius:50%; background:var(--grad); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.svc-list li .dot-check svg{width:11px; height:11px; color:#fff;}
@media(max-width:820px){.svc-block, .svc-block.reverse{grid-template-columns:1fr; direction:ltr;}}

/* FAQ */
.faq{max-width:780px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border-light);}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:center; padding:22px 4px; text-align:left; font-size:15.5px; font-weight:600;}
.faq-q svg{width:18px; height:18px; flex-shrink:0; transition:transform .3s var(--ease); color:var(--blue-deep);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.faq-a p{padding:0 4px 22px; font-size:14.5px; color:var(--gray); line-height:1.7; max-width:680px;}

/* contact */
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:flex-start;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.form-card{background:var(--white); border:1px solid var(--border-light); border-radius:22px; padding:36px; box-shadow:var(--shadow-card-lg);}
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--ink);}
.field input, .field select, .field textarea{
  width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--border-light); font-family:inherit; font-size:14.5px; color:var(--ink);
  transition:border-color .25s ease, box-shadow .25s ease; background:#FBFCFE;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--blue-bright); box-shadow:0 0 0 4px rgba(59,130,246,0.14);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:520px){.field-row{grid-template-columns:1fr;}}
.contact-info-card{background:var(--navy-deep); border-radius:22px; padding:34px; color:#fff;}
.info-row{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--border-soft);}
.info-row:last-of-type{border-bottom:none;}
.info-row svg{width:20px; height:20px; color:var(--blue-bright); flex-shrink:0; margin-top:2px;}
.info-row .t{font-size:12px; color:#9AA7BD; margin-bottom:3px;}
.info-row .v{font-size:14.5px; font-weight:500;}
.map-ph{margin-top:22px; aspect-ratio:16/9; border-radius:16px; background:linear-gradient(150deg,#16223f,#0B1220); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-soft);}
.map-ph::before{content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(59,130,246,0.35) 1px, transparent 1px); background-size:18px 18px; opacity:0.5;}
.map-ph svg{width:34px; height:34px; color:var(--blue-bright); position:relative; z-index:1;}
.social-row{display:flex; gap:10px; margin-top:22px;}
.social-row a{width:38px; height:38px; border-radius:10px; border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; transition:all .25s ease;}
.social-row a:hover{background:var(--grad); border-color:transparent; transform:translateY(-3px);}
.social-row svg{width:16px; height:16px; color:#fff;}

/* about story */
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media(max-width:860px){.story-grid{grid-template-columns:1fr;}}
.story-visual{aspect-ratio:1; border-radius:26px; background:linear-gradient(150deg,var(--navy-deep),var(--navy-soft)); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.story-visual svg{width:52%; height:52%;}

/* case study */
.case-hero{background:var(--navy-deep); padding:150px 0 70px; color:#fff;}
.case-meta{display:flex; gap:36px; flex-wrap:wrap; margin-top:30px;}
.case-meta div .t{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:#8FA0BE; margin-bottom:6px;}
.case-meta div .v{font-size:14.5px; font-weight:600;}
.case-body{max-width:820px; margin:0 auto;}
.case-body h3{font-size:22px; margin:44px 0 14px;}
.case-body p{color:var(--gray); font-size:15px; line-height:1.8;}
.case-imgrow{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:40px 0;}
.case-imgrow .ph{aspect-ratio:4/3; border-radius:16px; background:linear-gradient(150deg,#eef2fb,#f6f8fc); border:1px solid var(--border-light);}

/* skeleton */
.skeleton{background:linear-gradient(90deg,#EEF1F7 25%, #F7F9FC 37%, #EEF1F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite;}
@keyframes sk{0%{background-position:100% 0;} 100%{background-position:0 0;}}

/* modal */
.modal-overlay{position:fixed; inset:0; background:rgba(6,10,20,0.6); backdrop-filter:blur(4px); z-index:800; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;}
.modal-overlay.open{opacity:1; visibility:visible;}
.modal-box{background:var(--white); border-radius:22px; width:min(560px,100%); max-height:88vh; overflow-y:auto; padding:36px; position:relative; transform:translateY(20px) scale(0.97); transition:transform .35s var(--ease); box-shadow:0 30px 80px rgba(0,0,0,0.4);}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
.modal-close{position:absolute; top:20px; right:20px; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--gray); border:1px solid var(--border-light); transition:all .2s ease;}
.modal-close:hover{color:var(--blue-deep); border-color:var(--blue-bright); transform:rotate(90deg);}
.modal-box h3{font-size:22px; margin-bottom:6px;}
.modal-box p.sub{color:var(--gray); font-size:14px; margin-bottom:26px;}
.success-msg{display:none; text-align:center; padding:20px 0;}
.success-msg.show{display:block;}
.success-msg .check-badge{width:56px; height:56px; margin:0 auto 18px;}
.success-msg .check-badge svg{width:26px; height:26px; stroke-dashoffset:0;}
.success-msg h4{font-size:19px; margin-bottom:8px;}
.success-msg p{color:var(--gray); font-size:14px;}

/* footer */
footer{background:var(--navy-deep); color:#fff; padding-top:0;}
.footer-top{padding:64px 0 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr; gap:36px;}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr;}}
.footer-top p.tag{color:#9AA7BD; font-size:14px; line-height:1.7; margin:16px 0 20px; max-width:280px;}
.footer-col h5{font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:#7C8BA8; margin-bottom:18px;}
.footer-col li{margin-bottom:12px;}
.footer-col a{font-size:14px; color:#C6CEDD; transition:color .2s ease;}
.footer-col a:hover{color:var(--blue-bright);}
.newsletter-row{display:flex; gap:8px; margin-top:14px;}
.newsletter-row input{flex:1; min-width:0; padding:11px 14px; border-radius:10px; border:1px solid var(--border-soft); background:rgba(255,255,255,0.04); color:#fff; font-size:13.5px;}
.newsletter-row input::placeholder{color:#6E7C99;}
.newsletter-row input:focus{outline:none; border-color:var(--blue-bright);}
.newsletter-row button{padding:11px 16px; border-radius:10px; background:var(--grad); color:#fff; font-weight:600; font-size:13px; flex-shrink:0;}
.footer-bottom{border-top:1px solid var(--border-soft); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.footer-bottom p{font-size:12.5px; color:#7C8BA8;}
.footer-social{display:flex; gap:10px;}
.footer-social a{width:34px; height:34px; border-radius:9px; border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; transition:all .25s ease;}
.footer-social a:hover{background:var(--grad); border-color:transparent; transform:translateY(-2px);}
.footer-social svg{width:15px; height:15px; color:#fff;}

/* scroll reveal generic */
.reveal-init{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-init.in{opacity:1; transform:translateY(0);}
html:not(.js-ready) .reveal-init{opacity:1 !important; transform:none !important;}
@media(prefers-reduced-motion:reduce){.reveal-init{opacity:1 !important; transform:none !important; transition:none !important;}}

/* utility */
.mt-64{margin-top:64px;}
.center{text-align:center;}
.tag-pill{display:inline-block; padding:6px 14px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:600; background:rgba(59,130,246,0.1); color:var(--blue-deep); margin-bottom:16px;}