/* ==========================================================================
   LINK — link360.vn | Shared stylesheet
   ========================================================================== */

:root{
  --navy:#070d3a;
  --navy-2:#050a2e;
  --navy-3:#0b1450;
  --blue:#2a49e0;
  --blue-2:#4f7bff;
  --blue-dark:#1b32b0;
  --blue-soft:#eaf0ff;
  --cyan:#22d3ee;
  --violet:#8b5cf6;
  --ink:#111737;
  --ink-2:#3a4568;
  --muted:#5a6485;
  --muted-2:#8a93b0;
  --line:#e9edf6;
  --bg-soft:#f5f7fc;
  --white:#fff;
  --radius:20px;
  --radius-sm:12px;
  --shadow-card:0 18px 44px rgba(10,18,80,.12);
  --shadow-lg:0 30px 70px -20px rgba(7,13,58,.35);
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --grad-brand:linear-gradient(120deg,#4f7bff,#8b5cf6 45%,#22d3ee);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:118px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);background:var(--white);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:var(--blue-dark);}
button{font-family:inherit;}
::selection{background:rgba(79,123,255,.25);}

.container{max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px;}

/* Scroll progress */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;background:var(--grad-brand);box-shadow:0 0 14px rgba(79,123,255,.7);transition:width .1s linear;}

/* Grain overlay for dark surfaces */
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15.5px;padding:15px 32px;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s ease,color .2s ease;line-height:1.2;position:relative;overflow:hidden;}
.btn svg{width:18px;height:18px;transition:transform .25s var(--ease);}
.btn::before{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .55s ease;}
.btn:hover::before{left:130%;}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{background:linear-gradient(120deg,#4f7bff,#2a49e0 50%,#6d3bf0);background-size:180% 180%;color:#fff;box-shadow:0 10px 26px -6px rgba(42,73,224,.55);animation:btnGrad 6s ease infinite;}
@keyframes btnGrad{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.btn-primary:hover{color:#fff;box-shadow:0 18px 40px -8px rgba(42,73,224,.65);transform:translateY(-3px);}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(8px);}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-3px);border-color:rgba(255,255,255,.4);}
.btn-accent{color:#fff;}
.btn-accent:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.06);}

/* ---------- Topbar ---------- */
.topbar{background:var(--navy);color:#dfe4ff;font-size:13.5px;}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:9px;padding-bottom:9px;}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:22px;}
.topbar a{color:#dfe4ff;display:inline-flex;align-items:center;gap:7px;}
.topbar a:hover{color:#fff;}
.topbar svg{width:16px;height:16px;color:#9fb0ff;}
.topbar-item{display:inline-flex;align-items:center;gap:8px;}
.topbar-sep{width:1px;height:16px;background:rgba(255,255,255,.22);}
@media(max-width:991px){.topbar{display:none;}}

/* ---------- Header / Navbar ---------- */
.site-header{position:sticky;top:0;z-index:1000;}
.navbar{background:#fff;border-bottom:1px solid #eef1f8;box-shadow:0 4px 18px rgba(10,18,80,.05);transition:padding .3s var(--ease),box-shadow .3s ease,background .3s ease;}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;padding-bottom:12px;transition:padding .3s var(--ease);}
.site-header.stuck .navbar{box-shadow:0 10px 34px rgba(10,18,80,.12);}
.site-header.stuck .navbar-inner{padding-top:7px;padding-bottom:7px;}
.site-header.stuck .brand img{height:34px !important;}
.brand img{transition:height .3s var(--ease);}

.brand{display:flex;align-items:center;gap:11px;flex:none;}

.nav-desktop{display:flex;align-items:center;gap:30px;}
.nav-link{font-weight:600;font-size:14px;letter-spacing:.4px;text-transform:uppercase;color:var(--navy);transition:color .15s ease;display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:none;border:none;padding:0;position:relative;}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--grad-brand);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);transform-origin:left;}
.nav-link:hover,.nav-link.active{color:var(--blue);}
.nav-link svg{width:15px;height:15px;transition:transform .25s ease;}

/* nav-item không phải gốc định vị nữa — dropdown neo vào navbar để luôn nằm giữa */
.navbar{position:relative;z-index:2;}
.nav-item{position:static;padding:14px 0;}
.nav-item:hover .nav-link svg{transform:rotate(180deg);}

/* dropdown trượt ra từ BÊN DƯỚI navbar (z-index thấp hơn) */
.dropdown{position:absolute;top:100%;left:50%;z-index:1;
  transform:translateX(-50%) translateY(-14px);width:980px;max-width:calc(100vw - 40px);
  background:#fff;
  border:1px solid var(--line);border-top:none;border-radius:0 0 24px 24px;
  box-shadow:0 40px 90px -30px rgba(7,13,58,.45);
  padding:10px;display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:10px;
  opacity:0;visibility:hidden;
  transition:opacity .22s ease,transform .38s var(--ease),visibility .22s;}
.nav-item:hover .dropdown,.nav-item.open .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
/* vùng đệm để chuột không "rơi" khỏi menu */
.dropdown::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px;}
.dd-caret{display:none;}

/* cột trái: danh sách */
.dd-list{display:flex;flex-direction:column;gap:2px;padding:8px;min-width:0;}
.dd-tile{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;position:relative;min-width:0;
  transition:background .2s ease;opacity:0;transform:translateY(8px);}
.nav-item:hover .dd-tile,.nav-item.open .dd-tile{animation:ddIn .34s var(--ease) forwards;animation-delay:calc(var(--i) * 30ms + 50ms);}
@keyframes ddIn{to{opacity:1;transform:none;}}
.dd-tile.on{background:#fff;box-shadow:0 10px 24px -14px rgba(10,18,80,.35);}
.dd-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;
  transition:transform .3s var(--ease),box-shadow .3s ease;box-shadow:0 6px 14px -6px rgba(10,18,80,.45);}
.dd-tile.on .dd-icon{transform:scale(1.06) rotate(-5deg);box-shadow:0 12px 22px -8px rgba(10,18,80,.55);}
.dd-icon svg{width:21px;height:21px;color:#fff;}
.dd-text{min-width:0;}
.dd-tile b{font-weight:600;font-size:14.8px;color:#0f1b3d;display:flex;align-items:center;gap:7px;line-height:1.3;}
.dd-tile small{display:block;font-size:12.3px;color:var(--muted-2);margin-top:3px;font-weight:400;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dd-hot{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#fff;background:linear-gradient(120deg,#f04a5a,#d82c40);padding:2px 7px;border-radius:100px;flex:none;}
.dd-arrow{margin-left:auto;opacity:0;flex:none;transition:opacity .2s ease,transform .25s var(--ease);transform:translate(-4px,4px);}
.dd-arrow svg,svg.dd-arrow{width:16px;height:16px;color:var(--blue);}
.dd-tile.on .dd-arrow{opacity:1;transform:none;}

/* cột phải: preview */
.dd-preview{padding:14px 16px 18px;border-left:1px solid #eef1f8;min-width:0;}
.dd-shot{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:14px;border:1px solid var(--line);
  background:var(--shot-grad,linear-gradient(135deg,#4f7bff,#2a49e0));background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;box-shadow:0 16px 34px -18px rgba(10,18,80,.5);}
.dd-shot::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.28),transparent 55%);}
.dd-shot.has-img .dd-shot-icon,.dd-shot.has-img .dd-shot-bars{display:none;}
.dd-shot-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);z-index:1;}
.dd-shot-icon svg{width:28px;height:28px;color:#fff;}
/* thanh mock giả lập giao diện sản phẩm */
.dd-shot-bars{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;z-index:1;}
.dd-shot-bars i{height:7px;border-radius:100px;background:rgba(255,255,255,.4);}
.dd-shot-bars i:nth-child(1){width:70%;}
.dd-shot-bars i:nth-child(2){width:52%;}
.dd-shot-bars i:nth-child(3){width:84%;background:rgba(255,255,255,.25);}
.dd-shot-bars i:nth-child(4){width:38%;background:rgba(255,255,255,.25);}
.dd-pv-title{margin:16px 0 6px;font-size:16px;font-weight:700;color:var(--navy);line-height:1.35;}
.dd-pv-desc{margin:0;font-size:13.5px;line-height:1.65;color:var(--muted);}
.dd-preview.swap .dd-shot,.dd-preview.swap .dd-pv-title,.dd-preview.swap .dd-pv-desc{animation:pvIn .35s var(--ease) both;}
.dd-preview.swap .dd-pv-title{animation-delay:.04s;}
.dd-preview.swap .dd-pv-desc{animation-delay:.08s;}
@keyframes pvIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.nav-phone{display:flex;align-items:center;gap:10px;flex:none;}
.nav-phone-icon{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue-2),var(--blue));display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 16px rgba(42,73,224,.32);position:relative;}
.nav-phone-icon::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(42,73,224,.5);animation:ping 2.4s ease-out infinite;}
@keyframes ping{0%{transform:scale(1);opacity:.8;}100%{transform:scale(1.7);opacity:0;}}
.nav-phone-icon svg{width:19px;height:19px;color:#fff;}
.nav-phone small{display:block;font-size:12px;color:var(--muted-2);line-height:1.25;}
.nav-phone b{display:block;font-weight:700;font-size:16px;color:var(--navy);line-height:1.25;}

.nav-toggle{display:none;border:1px solid #e6eaf2;background:#fff;border-radius:12px;width:46px;height:46px;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:1202;}
.nav-toggle svg{width:24px;height:24px;color:var(--navy);}

/* ---------- Mobile drawer ---------- */
.nav-scrim{position:fixed;inset:0;background:rgba(7,13,58,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;z-index:1100;}
.nav-scrim.open{opacity:1;visibility:visible;}
.nav-mobile{position:fixed;top:0;right:0;bottom:0;width:min(88vw,380px);background:linear-gradient(170deg,#0b1450,#050a2e);color:#fff;z-index:1201;transform:translateX(102%);transition:transform .42s var(--ease);display:flex;flex-direction:column;padding:22px 20px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;box-shadow:-30px 0 70px rgba(0,0,0,.4);}
.nav-mobile.open{transform:none;}
.nm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.nm-close{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.nm-close svg{width:22px;height:22px;}
.nav-mobile>a,.nm-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 4px;font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.4px;color:#fff;border:none;border-bottom:1px solid rgba(255,255,255,.09);background:none;cursor:pointer;text-align:left;opacity:0;transform:translateX(22px);}
.nav-mobile.open>a,.nav-mobile.open .nm-group{animation:nmIn .5s var(--ease) forwards;}
.nav-mobile.open>*:nth-child(2){animation-delay:.06s;}
.nav-mobile.open>*:nth-child(3){animation-delay:.12s;}
.nav-mobile.open>*:nth-child(4){animation-delay:.18s;}
.nav-mobile.open>*:nth-child(5){animation-delay:.24s;}
.nav-mobile.open>*:nth-child(6){animation-delay:.3s;}
.nav-mobile.open>*:nth-child(7){animation-delay:.36s;}
@keyframes nmIn{to{opacity:1;transform:none;}}
.nav-mobile.open>a{opacity:0;animation-name:nmIn;}
.nm-group{opacity:0;transform:translateX(22px);}
.nm-group .nm-toggle{opacity:1;transform:none;}
.nm-toggle svg{width:20px;height:20px;transition:transform .25s ease;}
.nm-group.open .nm-toggle svg{transform:rotate(180deg);}
.nm-group.open .nm-toggle{color:var(--blue-2);}
.nm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease);}
.nm-group.open .nm-sub{grid-template-rows:1fr;}
.nm-sub-inner{overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:0 2px;}
.nm-group.open .nm-sub-inner{padding:8px 2px 12px;}
.nm-sub a{padding:11px 14px;color:#b9c4ee;font-size:15px;border-radius:10px;background:rgba(255,255,255,.04);}
.nm-sub a:active,.nm-sub a:hover{background:rgba(79,123,255,.25);color:#fff;}
.nm-phone{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);margin-top:22px;}
.nm-phone small{color:#9fb0ff;}
.nm-phone b{color:#fff;}
.nm-phone .nav-phone-icon::before{display:none;}

@media(max-width:991px){
  .nav-desktop,.nav-phones{display:none;}
  .nav-toggle{display:flex;}
}
.nav-phones{display:flex;align-items:center;gap:18px;}
@media(max-width:1180px){.nav-phones .nav-phone:last-child{display:none;}}
@media(max-width:991px){.nav-phones{display:none;}}

/* ---------- Mobile sticky action bar ---------- */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:900;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -8px 30px rgba(10,18,80,.1);transform:translateY(110%);transition:transform .4s var(--ease);}
.mobile-bar.show{transform:none;}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border-radius:12px;font-weight:600;font-size:14.5px;}
.mobile-bar svg{width:18px;height:18px;}
.mb-call{background:var(--blue-soft);color:var(--blue);}
.mb-cta{background:linear-gradient(120deg,#4f7bff,#2a49e0 60%,#6d3bf0);color:#fff;box-shadow:0 8px 20px -6px rgba(42,73,224,.6);}
.mb-cta:hover{color:#fff;}
@media(max-width:767px){.mobile-bar{display:flex;}body{padding-bottom:0;}}

/* ---------- Hero ---------- */
.hero{background:var(--navy-2);color:#fff;overflow:hidden;position:relative;isolation:isolate;}
.hero::before{content:'';position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(1000px 600px at 78% 8%,rgba(79,123,255,.5),transparent 60%),
    radial-gradient(760px 520px at 12% 92%,rgba(139,92,246,.42),transparent 62%),
    radial-gradient(620px 420px at 55% 55%,rgba(34,211,238,.18),transparent 65%),
    linear-gradient(160deg,#0b1450,#050a2e 70%);
  background-size:200% 200%;animation:aurora 18s ease-in-out infinite alternate;}
@keyframes aurora{0%{background-position:0% 0%,100% 100%,50% 50%,0 0;}100%{background-position:30% 20%,70% 80%,40% 60%,0 0;}}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 20%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 40%,#000 20%,transparent 78%);}
.hero>.container{position:relative;z-index:1;}

/* floating orbs */
.orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:-1;}
.orb-1{width:420px;height:420px;right:-80px;top:-120px;background:rgba(79,123,255,.45);animation:orbFloat 12s ease-in-out infinite alternate;}
.orb-2{width:340px;height:340px;left:-100px;bottom:-90px;background:rgba(139,92,246,.4);animation:orbFloat 15s ease-in-out 1s infinite alternate-reverse;}
@keyframes orbFloat{from{transform:translate(0,0) scale(1);}to{transform:translate(-50px,55px) scale(1.16);}}

.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:92px;padding-bottom:96px;}
.hero h1{font-size:clamp(34px,4.4vw,58px);font-weight:800;line-height:1.1;margin:0 0 20px;letter-spacing:-1px;}
.hero h1 .hl:not([style]){background:linear-gradient(92deg,#7f9bff,#c4b5fd 40%,#67e8f9 70%,#7f9bff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:220% 100%;animation:hlShift 6s ease-in-out infinite alternate;}
@keyframes hlShift{from{background-position:0% 50%;}to{background-position:100% 50%;}}
.hero h1 .hl{color:#7f9bff;}
.hero-lead{font-size:17px;line-height:1.75;color:#b8c3ea;margin:0 0 34px;max-width:520px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-page .hero-grid{padding-top:74px;padding-bottom:80px;display:block;}
.breadcrumb{display:flex;align-items:center;gap:10px;color:#9fb0ff;font-size:13.5px;flex-wrap:wrap;}
.breadcrumb svg{width:15px;height:15px;}
.breadcrumb .cur{color:#fff;}

.badge{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#cfd8ff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:8px 16px;border-radius:100px;margin-bottom:26px;backdrop-filter:blur(8px);position:relative;overflow:hidden;}
.badge::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22),transparent 60%);transform:translateX(-100%);animation:badgeShine 4s ease-in-out infinite;}
@keyframes badgeShine{0%{transform:translateX(-100%);}50%,100%{transform:translateX(100%);}}
.badge svg{width:15px;height:15px;color:#8fa7ff;}

.hero-stats{display:flex;gap:36px;margin-top:44px;flex-wrap:wrap;}
.hero-stat b{display:block;font-size:32px;font-weight:800;color:#fff;background:linear-gradient(120deg,#fff,#a5b8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-stat span{display:block;font-size:13.5px;color:#9fb0ff;margin-top:2px;}
.hero-stat-sep{width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.28),transparent);}

/* Hero visual: glass stack */
.hero-visual{position:relative;perspective:1200px;}
.hero-media{border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.14);aspect-ratio:4/3.4;background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.02));backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);transform:rotateY(-7deg) rotateX(3deg);transition:transform .6s var(--ease);}
.hero-visual:hover .hero-media{transform:rotateY(0) rotateX(0);}
.hero-media .ph-label,.ph-label{font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px;color:#8fa0e0;letter-spacing:.5px;}
.hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);transform:translateX(-120%);animation:phShine 3.6s ease-in-out infinite;pointer-events:none;}

.hero-float{position:absolute;left:-18px;bottom:26px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);color:var(--navy);border-radius:18px;padding:16px 20px;box-shadow:0 26px 60px rgba(0,0,0,.4);display:flex;align-items:center;gap:14px;z-index:2;}
.hero-float .hf-icon{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#4f7bff,var(--blue));display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 18px -4px rgba(42,73,224,.6);}
.hero-float .hf-icon svg{width:23px;height:23px;color:#fff;}
.hero-float b{display:block;font-size:24px;font-weight:800;line-height:1;}
.hero-float span{display:block;font-size:12.5px;color:#7a86a8;margin-top:3px;}

/* small glass pill floating top-right of visual */
.hero-chip{position:absolute;right:-10px;top:24px;z-index:2;display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:100px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);color:#fff;font-size:13.5px;font-weight:600;box-shadow:0 18px 40px rgba(0,0,0,.3);animation:floatY 5s ease-in-out infinite;}
.hero-chip .dot{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:pulseDot 2s infinite;}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(52,211,153,.7);}70%{box-shadow:0 0 0 10px rgba(52,211,153,0);}100%{box-shadow:0 0 0 0 rgba(52,211,153,0);}}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:44px;padding-top:64px;padding-bottom:70px;}
  .hero-media{transform:none;}
}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;position:relative;padding:26px 0;background:var(--navy-3);
  -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;gap:14px;width:max-content;animation:scrollX 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scrollX{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Chip strip ---------- */
.chipbar{background:var(--navy-3);}
.chipbar-inner{padding-top:20px;padding-bottom:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;}
.chipbar-label{color:#8fa0e0;font-size:13px;text-transform:uppercase;letter-spacing:.6px;font-weight:600;}
.chip{color:#dfe4ff;font-size:14.5px;font-weight:600;padding:8px 18px;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);transition:all .25s var(--ease);white-space:nowrap;}
a.chip:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-2px);border-color:rgba(255,255,255,.3);}

/* ---------- Sections ---------- */
.section{padding:96px 0;position:relative;}
@media(min-width:992px) and (min-height:600px){
  .hero:not(.hero-page){display:flex;align-items:center;min-height:calc(100vh - var(--header-h));}
  .hero:not(.hero-page)>.container{width:100%;}
  .hero-grid{padding-top:48px;padding-bottom:48px;}
  .section:not(.section-auto){min-height:100vh;display:flex;align-items:center;padding-top:72px;padding-bottom:72px;}
  .section:not(.section-auto)>.container{width:100%;}
}
.section-sm{padding:70px 0;}
.section-soft{background:var(--bg-soft);}
.section-soft::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 1px 1px,rgba(10,18,80,.07) 1px,transparent 0);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent);}
.section-soft>.container{position:relative;z-index:1;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);margin-bottom:16px;}
.eyebrow::before{content:'';width:22px;height:2px;background:currentColor;}
.eyebrow.center::after{content:'';width:22px;height:2px;background:currentColor;}
.section-head{text-align:center;max-width:660px;margin:0 auto 52px;}
.section-head h2,.h2{font-size:clamp(26px,3vw,40px);font-weight:800;line-height:1.16;color:var(--navy);margin:0 0 14px;letter-spacing:-.6px;}
.section-head p{font-size:16px;line-height:1.7;color:var(--muted);margin:0;}
.grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media(max-width:1040px){.grid-3{grid-template-columns:1fr 1fr;}}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:44px;}.grid-2{grid-template-columns:1fr;}}
@media(max-width:720px){.grid-3{grid-template-columns:1fr;}}

.media-ph{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:repeating-linear-gradient(45deg,#eef1f8,#eef1f8 12px,#e6eaf4 12px,#e6eaf4 24px);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px -30px rgba(10,18,80,.35);}
.media-ph .ph-label{color:#9aa3bd;}
.media-ph::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);transform:translateX(-120%);animation:phShine 3.6s ease-in-out infinite;pointer-events:none;}
@keyframes phShine{0%{transform:translateX(-120%);}55%,100%{transform:translateX(120%);}}

/* ---------- Cards (spotlight + gradient border) ---------- */
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s ease;display:block;overflow:hidden;isolation:isolate;}
.card::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(79,123,255,.13),transparent 42%);}
.card:hover::before{opacity:1;}
.card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.card:hover::after{transform:scaleX(1);}
.card:hover{border-color:rgba(79,123,255,.45);box-shadow:0 30px 60px -22px rgba(10,18,80,.3);transform:translateY(-8px);}
.card-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:transform .4s var(--ease),box-shadow .3s ease;box-shadow:0 10px 22px -6px rgba(10,18,80,.35);position:relative;}
.card:hover .card-icon{transform:scale(1.12) rotate(-6deg);}
.card-icon svg{width:27px;height:27px;color:#fff;}
.card h3{font-size:19px;font-weight:700;color:var(--navy);margin:0 0 10px;line-height:1.35;}
.card p{font-size:14.5px;line-height:1.7;color:var(--muted);margin:0 0 16px;}
.card-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--blue);}
.card-link svg{width:15px;height:15px;transition:transform .3s var(--ease);}
.card:hover .card-link svg{transform:translateX(4px);}

.check-list{display:flex;flex-direction:column;gap:18px;}
.check-item{display:flex;gap:14px;}
.check-item .ck{width:28px;height:28px;border-radius:9px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px;transition:transform .25s var(--ease);}
.check-item:hover .ck{transform:scale(1.12);background:var(--blue);}
.check-item:hover .ck svg{color:#fff;}
.check-item .ck svg{width:16px;height:16px;color:var(--blue);transition:color .25s;}
.check-item p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.6;}
.check-item b{color:var(--navy);}

.feature-row{display:flex;gap:18px;padding:16px;margin:-16px;border-radius:16px;transition:background .3s ease,transform .3s var(--ease);}
.feature-row:hover{background:#fff;box-shadow:0 20px 44px -22px rgba(10,18,80,.28);transform:translateX(6px);}
.feature-row .fr-icon{width:54px;height:54px;border-radius:15px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;flex:none;transition:all .3s var(--ease);}
.feature-row:hover .fr-icon{background:linear-gradient(135deg,var(--blue-2),var(--blue));box-shadow:0 12px 24px -8px rgba(42,73,224,.6);}
.feature-row:hover .fr-icon svg{color:#fff;}
.feature-row .fr-icon svg{width:25px;height:25px;color:var(--blue);transition:color .3s;}
.feature-row h3{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--navy);}
.feature-row p{margin:0;font-size:15px;line-height:1.7;color:var(--muted);}

/* ---------- Stats band ---------- */
.stats-band{position:relative;overflow:hidden;padding:88px 0;background:linear-gradient(150deg,#0b1450,#050a2e 70%);color:#fff;}
.stats-band::before{content:'';position:absolute;inset:0;
  background:radial-gradient(700px 400px at 20% 0%,rgba(79,123,255,.4),transparent 60%),radial-gradient(600px 400px at 85% 100%,rgba(139,92,246,.35),transparent 60%);}
.stats-band::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:52px 52px;}
.stats-band>.container{position:relative;z-index:1;}
.stats-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;}
.stats-grid>div{padding:26px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);backdrop-filter:blur(6px);transition:transform .35s var(--ease),background .3s;}
.stats-grid>div:hover{transform:translateY(-6px);background:rgba(255,255,255,.08);}
.stat-num{font-size:clamp(38px,5vw,56px);font-weight:800;line-height:1;text-shadow:0 0 40px rgba(127,155,255,.55);}
.stat-num .plus{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.stat-label{margin-top:12px;font-size:15px;color:#bcc7f2;}
@media(max-width:620px){.stats-grid{grid-template-columns:1fr;}}

/* ---------- Testimonials ---------- */
.quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px;transition:all .3s var(--ease);}
.quote-card:hover{border-color:var(--blue);box-shadow:var(--shadow-card);transform:translateY(-5px);}
.quote-card .q-mark svg{width:34px;height:34px;color:#dfe4f5;}
.quote-card blockquote{font-size:16.5px;line-height:1.75;color:#2a3355;margin:16px 0 24px;}
.q-person{display:flex;align-items:center;gap:14px;}
.q-avatar{width:48px;height:48px;border-radius:50%;background:repeating-linear-gradient(45deg,#eef1f8,#eef1f8 6px,#e6eaf4 6px,#e6eaf4 12px);flex:none;}
.q-person b{font-weight:700;color:var(--navy);font-size:15.5px;display:block;}
.q-person span{font-size:13.5px;color:var(--muted-2);}

/* ---------- Process timeline ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;}
.steps::before{content:'';position:absolute;top:30px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,rgba(79,123,255,.4),rgba(139,92,246,.4),transparent);}
.step{position:relative;text-align:center;padding:0 6px;}
.step-no{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;color:#fff;background:linear-gradient(135deg,var(--blue-2),var(--blue));box-shadow:0 12px 26px -8px rgba(42,73,224,.7);position:relative;z-index:1;border:4px solid #fff;transition:transform .35s var(--ease);}
.step:hover .step-no{transform:scale(1.1) translateY(-4px);}
.step h3{font-size:17px;font-weight:700;color:var(--navy);margin:0 0 8px;}
.step p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:0;}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;}.steps::before{display:none;}}
@media(max-width:560px){.steps{grid-template-columns:1fr;gap:26px;}}

/* ---------- Contact ---------- */
.contact-item{display:flex;align-items:center;gap:16px;transition:transform .25s var(--ease);}
.contact-item:hover{transform:translateX(5px);}
.contact-item.top{align-items:flex-start;}
.contact-icon{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--blue-2),var(--blue));display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 12px 24px -10px rgba(42,73,224,.7);}
.contact-icon svg{width:22px;height:22px;color:#fff;}
.contact-item small{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted-2);}
.contact-item b{display:block;font-weight:600;color:var(--navy);font-size:15.5px;line-height:1.5;}

/* ---------- Forms ---------- */
.form-panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px;box-shadow:0 30px 70px -34px rgba(10,18,80,.4);position:relative;overflow:hidden;}
.form-panel::before{content:'';position:absolute;top:-50%;right:-30%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(79,123,255,.12),transparent 70%);pointer-events:none;}
.form-panel.on-white{background:#fff;}
.form-panel h3{margin:0 0 22px;font-size:21px;font-weight:700;color:var(--navy);position:relative;}
.form-stack{display:flex;flex-direction:column;gap:14px;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:520px){.form-grid-2{grid-template-columns:1fr;}}
.input{width:100%;padding:15px 16px;border:1px solid #d9dfee;border-radius:var(--radius-sm);font-size:15px;font-family:inherit;background:#fbfcff;color:var(--navy);transition:border-color .18s ease,box-shadow .18s ease,background .18s;}
.input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(42,73,224,.12);}
textarea.input{resize:vertical;}
.field-error{color:#d8402c;font-size:12.5px;margin-top:5px;display:none;}
.field.invalid .field-error{display:block;}
.field.invalid .input{border-color:#d8402c;}
.form-success{text-align:center;padding:40px 10px;display:none;}
.form-success .fs-icon{width:66px;height:66px;border-radius:50%;background:#e6f7ee;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;}
.form-success .fs-icon svg{width:32px;height:32px;color:#1fa862;}
.form-success h3{margin:0 0 8px;font-size:22px;color:var(--navy);}
.form-success p{margin:0;color:var(--muted);font-size:15px;}
form.sent .form-body{display:none;}
form.sent+.form-success,.form-panel .sent-visible{display:block;}

/* ---------- CTA panel ---------- */
.cta-panel{position:relative;overflow:hidden;max-width:1000px;margin:0 auto;background:linear-gradient(150deg,#0b1450,#050a2e 70%);border-radius:28px;padding:58px 48px;text-align:center;color:#fff;box-shadow:0 40px 90px -40px rgba(7,13,58,.8);}
.cta-panel::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 0%,rgba(79,123,255,.45),transparent 60%),radial-gradient(500px 300px at 10% 100%,rgba(139,92,246,.4),transparent 60%);}
.cta-panel>*{position:relative;z-index:1;}
.cta-panel h2{font-size:clamp(24px,3vw,35px);font-weight:800;margin:0 0 14px;letter-spacing:-.5px;}
.cta-panel p{color:#bcc7f2;font-size:16px;margin:0 0 30px;}
@media(max-width:620px){.cta-panel{padding:40px 24px;}}

/* ---------- Projects ---------- */
.project-card{display:block;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;transition:all .35s var(--ease);}
.project-card:hover{transform:translateY(-8px);box-shadow:0 30px 64px -26px rgba(10,18,80,.4);border-color:rgba(79,123,255,.4);}
.project-media{overflow:hidden;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;}
.project-body{padding:30px 32px;}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);background:#eef2ff;padding:5px 12px;border-radius:100px;margin-bottom:14px;}
.project-body h3{font-size:23px;font-weight:800;color:var(--navy);margin:0 0 12px;letter-spacing:-.3px;}
.project-body p{font-size:15px;line-height:1.75;color:var(--muted);margin:0 0 18px;}

/* ---------- FAQ ---------- */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .2s ease,box-shadow .25s;}
.faq-item:hover{border-color:#c9d3ee;box-shadow:0 12px 30px -18px rgba(10,18,80,.3);}
.faq-item.open{border-color:rgba(79,123,255,.45);box-shadow:0 18px 40px -24px rgba(42,73,224,.5);}
.faq-q{width:100%;background:none;border:none;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;text-align:left;}
.faq-q span{font-size:16.5px;font-weight:600;color:var(--navy);}
.faq-q svg{width:22px;height:22px;color:var(--blue);flex:none;transition:transform .3s var(--ease);}
.faq-a{margin:0;padding:0 26px;max-height:0;overflow:hidden;font-size:15px;line-height:1.75;color:var(--muted);transition:max-height .35s var(--ease),padding .35s var(--ease);}
.faq-item.open .faq-a{padding:0 26px 24px;max-height:400px;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}

/* ---------- Jobs ---------- */
.job-card{border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px;background:#fff;transition:all .3s var(--ease);}
.job-card:hover{border-color:rgba(79,123,255,.4);box-shadow:0 20px 44px -22px rgba(10,18,80,.3);transform:translateY(-4px);}
.job-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.job-no{font-size:22px;font-weight:800;color:#c9d3ee;flex:none;}
.job-icon{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,#4f7bff,var(--blue));display:flex;align-items:center;justify-content:center;flex:none;}
.job-icon svg{width:24px;height:24px;color:#fff;}
.job-head h3{margin:0;font-size:19px;font-weight:700;color:var(--navy);}
.job-head small{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);margin-top:3px;}
.job-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:760px){.job-cols{grid-template-columns:1fr;}}
.job-cols h4{font-size:13px;font-weight:700;color:var(--blue);margin:0 0 10px;}
.job-cols ul{margin:0;padding-left:18px;color:var(--muted);font-size:14.5px;line-height:1.85;}

/* ---------- Blog ---------- */
.post-card{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;transition:all .3s var(--ease);}
.post-card:hover{border-color:rgba(79,123,255,.4);box-shadow:0 24px 50px -24px rgba(10,18,80,.35);transform:translateY(-5px);}
.post-card:hover .post-title{color:var(--blue);}
.post-media{aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;position:relative;}
.post-cat{position:absolute;top:16px;left:16px;font-size:12px;font-weight:700;letter-spacing:.4px;color:#fff;background:var(--blue);padding:6px 13px;border-radius:100px;}
.post-body{padding:30px 32px;}
.post-meta{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--muted-2);margin-bottom:12px;}
.post-meta span{display:flex;align-items:center;gap:6px;}
.post-meta svg{width:14px;height:14px;}
.post-title{font-size:22px;font-weight:800;color:var(--navy);margin:0 0 12px;line-height:1.35;letter-spacing:-.3px;transition:color .15s ease;}
.post-body p{font-size:15px;line-height:1.75;color:var(--muted);margin:0 0 20px;}
.post-more{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;background:#eef2ff;color:var(--blue);padding:10px 20px;border-radius:10px;}
.post-more svg{width:16px;height:16px;}
.blog-layout{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start;}
@media(max-width:900px){.blog-layout{grid-template-columns:1fr;}}
.widget{border:1px solid var(--line);border-radius:18px;padding:24px;}
.widget h3{margin:0 0 18px;font-size:17px;font-weight:700;color:var(--navy);}
.widget-link{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f1f3f9;color:var(--ink-2);font-size:14.5px;font-weight:500;}
.widget-link:hover{color:var(--blue);}
.widget-link svg{width:16px;height:16px;color:#c2cade;}

/* ---------- Footer ---------- */
.site-footer{position:relative;overflow:hidden;background:linear-gradient(160deg,#0b1450,#050a2e 70%);color:#c3cdf5;}
.site-footer::before{content:'';position:absolute;inset:0;background:radial-gradient(900px 420px at 12% 0%,rgba(79,123,255,.35),transparent 60%),radial-gradient(700px 400px at 90% 100%,rgba(139,92,246,.28),transparent 60%);pointer-events:none;}
.site-footer>*{position:relative;z-index:1;}
.footer-grid{padding:70px 0 40px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:44px;}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr;gap:34px;}}
.footer-desc{font-size:14.5px;line-height:1.75;color:#a9b6ea;margin:0;max-width:340px;}
.footer-grid h4{color:#fff;font-size:18px;font-weight:700;margin:0 0 22px;}
.footer-links{display:flex;flex-direction:column;gap:15px;font-size:14.5px;}
.footer-links a{color:#c3cdf5;transition:color .18s ease,padding .18s ease;}
.footer-links a:hover{color:#fff;padding-left:6px;}
.footer-contact p{font-size:14.5px;line-height:1.6;color:#a9b6ea;margin:0 0 14px;}
.footer-contact b{color:#fff;font-weight:600;}
.footer-company{font-size:14.5px;font-weight:700;color:#fff;margin:0 0 16px;line-height:1.5;}
.soc{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:all .25s var(--ease);border:1px solid rgba(255,255,255,.12);}
.soc:hover{background:var(--blue);color:#fff;transform:translateY(-3px);box-shadow:0 12px 24px -8px rgba(42,73,224,.8);}
.soc svg{width:19px;height:19px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);}
.footer-bottom-inner{padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.footer-bottom-inner>span{font-size:13.5px;color:#8fa0e0;}
.footer-bottom-inner b{color:#fff;font-weight:600;}
.footer-bottom a{font-size:13.5px;color:#c3cdf5;}
.footer-bottom a:hover{color:#fff;}
.to-top{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s var(--ease);}
.to-top:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-3px);}
.to-top svg{width:19px;height:19px;}

/* ---------- Reveal animations ---------- */
.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease);will-change:opacity,transform;}
.reveal{transform:translateY(34px);}
.reveal-left{transform:translateX(-48px);}
.reveal-right{transform:translateX(48px);}
.reveal-scale{transform:scale(.92) translateY(18px);}
.reveal.visible,.reveal-left.visible,.reveal-right.visible,.reveal-scale.visible{opacity:1;transform:none;}
.d1{transition-delay:.1s;}
.d2{transition-delay:.2s;}
.d3{transition-delay:.3s;}

/* Hero entrance */
@keyframes heroUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
.hero .badge,.hero h1,.hero .hero-lead,.hero .hero-actions,.hero .hero-stats,.hero .breadcrumb{animation:heroUp .9s var(--ease) both;}
.hero h1{animation-delay:.08s;}
.hero .hero-lead,.hero .breadcrumb{animation-delay:.16s;}
.hero .hero-actions{animation-delay:.24s;}
.hero .hero-stats{animation-delay:.34s;}
.hero-visual{animation:heroUp 1s var(--ease) .18s both;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.hero-float{animation:heroUp .8s var(--ease) .5s both,floatY 4.5s ease-in-out 1.4s infinite;}

[data-count]{font-variant-numeric:tabular-nums;}

/* ==========================================================================
   MOBILE — thiết kế riêng (≤ 767px)
   ========================================================================== */
@media(max-width:767px){
  .container{padding-left:18px;padding-right:18px;}
  .section{padding:64px 0;}
  .section-head{margin-bottom:36px;text-align:left;}
  .section-head .eyebrow.center::after{display:none;}
  .section-head h2,.h2{font-size:27px;line-height:1.24;letter-spacing:-.4px;}
  .section-head p{font-size:15px;}

  /* Hero mobile: gọn, chữ to, CTA full-width */
  .hero-grid{padding-top:44px;padding-bottom:56px;gap:36px;}
  .hero h1{font-size:32px;line-height:1.18;letter-spacing:-.6px;}
  .hero-lead{font-size:15.5px;line-height:1.72;margin-bottom:28px;}
  .badge{font-size:11.5px;padding:7px 13px;margin-bottom:20px;}
  .hero-actions{gap:10px;}
  .hero-actions .btn{flex:1;min-width:0;padding:15px 18px;font-size:15px;}
  .hero-stats{gap:0;margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px 8px;backdrop-filter:blur(8px);}
  .hero-stat b{font-size:23px;}
  .hero-stat span{font-size:11.5px;line-height:1.35;margin-top:4px;}
  .hero-stat-sep{width:1px;height:auto;margin:4px 0;background:rgba(255,255,255,.14);}
  .hero-media{aspect-ratio:4/3;border-radius:20px;}
  .hero-float{left:12px;right:12px;bottom:-22px;padding:13px 16px;border-radius:16px;}
  .hero-float b{font-size:21px;}
  .hero-chip{right:12px;top:14px;font-size:12px;padding:9px 13px;}
  .hero-visual{margin-bottom:26px;}
  .orb-1{width:260px;height:260px;}
  .orb-2{width:220px;height:220px;}

  /* Chipbar → cuộn ngang, không xuống dòng lộn xộn */
  .chipbar-inner{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-top:16px;padding-bottom:16px;}
  .chipbar-inner::-webkit-scrollbar{display:none;}
  .chipbar-label{display:none;}
  .chip{flex:none;font-size:13.5px;padding:9px 16px;}

  /* Cards mobile: gọn hơn, hover → active */
  .card{padding:24px 20px;border-radius:18px;}
  .card:hover{transform:none;}
  .card:active{transform:scale(.985);}
  .card-icon{width:48px;height:48px;border-radius:13px;margin-bottom:16px;}
  .card-icon svg{width:23px;height:23px;}
  .card h3{font-size:17.5px;}
  .card p{font-size:14px;margin-bottom:14px;}
  .grid-3,.grid-2{gap:16px;}

  .split{gap:32px;}
  .media-ph{border-radius:18px;}
  .feature-row{gap:14px;padding:0;margin:0;}
  .feature-row:hover{transform:none;background:none;box-shadow:none;}
  .feature-row .fr-icon{width:46px;height:46px;border-radius:13px;}
  .feature-row .fr-icon svg{width:22px;height:22px;}
  .feature-row h3{font-size:16.5px;}
  .feature-row p{font-size:14.5px;}
  .check-item p{font-size:14.5px;}

  .stats-band{padding:56px 0;}
  .stats-grid{gap:12px;}
  .stats-grid>div{padding:20px 14px;border-radius:16px;}
  .stat-num{font-size:38px;}
  .stat-label{font-size:13.5px;margin-top:8px;}

  .form-panel{padding:24px 20px;border-radius:20px;}
  .form-panel h3{font-size:19px;margin-bottom:18px;}
  .input{padding:14px 15px;font-size:16px;} /* 16px: iOS không tự zoom */
  .btn{width:100%;}
  .hero-actions .btn{width:auto;}
  .contact-icon{width:46px;height:46px;border-radius:13px;}
  .contact-item b{font-size:14.5px;}

  .cta-panel{border-radius:22px;}
  .project-body,.post-body{padding:22px 20px;}
  .project-body h3,.post-title{font-size:19px;}
  .faq-q{padding:18px 18px;}
  .faq-q span{font-size:15.5px;}
  .faq-item.open .faq-a{padding:0 18px 20px;}
  .job-card{padding:24px 20px;}

  /* Footer mobile */
  .footer-grid{padding:52px 0 32px;}
  .footer-grid h4{font-size:16.5px;margin-bottom:16px;}
  .footer-links{gap:12px;}
  .footer-bottom-inner{flex-direction:column;text-align:center;gap:14px;padding-bottom:calc(22px + 76px);} /* chừa chỗ cho mobile-bar */
  .site-footer .footer-bottom{padding-bottom:0;}

  /* reveal nhẹ hơn trên mobile để không giật */
  .reveal-left,.reveal-right{transform:translateY(26px);}
}

@media(max-width:380px){
  .hero h1{font-size:28px;}
  .hero-stat b{font-size:20px;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{animation:none !important;}
}