/* =====================================================================
   YOURCABS24 — Shared Design System
   ===================================================================== */

:root{
  --navy-950:#060f22;
  --navy-900:#0b1c3a;
  --navy-800:#122a52;
  --navy-700:#1a3766;
  --navy-600:#234a86;
  --gold-500:#d4af37;
  --gold-400:#e6c65c;
  --gold-300:#f0d787;
  --ink:#101826;
  --muted:#5b6474;
  --muted-soft:#8b93a3;
  --paper:#ffffff;
  --bg-grey:#f6f7fb;
  --bg-grey-deep:#eef0f6;
  --line:#e6e8ef;
  --success:#1f9d55;
  --danger:#d0432b;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-pill:999px;

  --shadow-sm:0 2px 10px rgba(11,28,58,.06);
  --shadow-md:0 12px 32px rgba(11,28,58,.10);
  --shadow-lg:0 24px 60px rgba(11,28,58,.16);
  --shadow-gold:0 10px 28px rgba(212,175,55,.30);

  /* Spacing scale — used for consistent vertical rhythm everywhere */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:96px;
  --sp-10:128px;

  --section-pad: var(--sp-9);
  --section-pad-tight: var(--sp-8);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: .22s;
  --dur-med: .45s;
  --dur-slow: .75s;

  --maxw: 1180px;
  --maxw-narrow: 780px;

  --font-body: 'Inter', 'Noto Sans Tamil', system-ui, -apple-system, sans-serif;
  --font-head: 'Poppins', 'Noto Sans Tamil', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

body.lang-ta, body.lang-ta *{ font-family:'Noto Sans Tamil', var(--font-body); }

h1,h2,h3,h4,h5{
  font-family:var(--font-head);
  color:var(--navy-900);
  margin:0;
  line-height:1.18;
  letter-spacing:-.01em;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:var(--maxw-narrow); margin:0 auto; padding:0 24px;}

.section{padding:var(--section-pad) 0;}
.section-tight{padding:var(--section-pad-tight) 0;}
.bg-grey{background:var(--bg-grey);}
.bg-navy{background:linear-gradient(160deg, var(--navy-900), var(--navy-950)); color:#fff;}
.bg-navy h2, .bg-navy h3, .bg-navy h4{color:#fff;}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-500);
  padding:6px 14px 6px 6px;
  position:relative;
}
.eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--gold-500);
  box-shadow:0 0 0 4px rgba(212,175,55,.18);
}
.bg-navy .eyebrow{color:var(--gold-400);}

.section-head{max-width:640px; margin-bottom:var(--sp-7);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(26px,3.4vw,38px); margin-top:10px;}
.section-head p{color:var(--muted); margin-top:14px; font-size:16px; line-height:1.7;}
.bg-navy .section-head p{color:rgba(255,255,255,.72);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--radius-pill);
  font-weight:600; font-size:15px; border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-gold{background:linear-gradient(135deg, var(--gold-400), var(--gold-500)); color:var(--navy-950); box-shadow:var(--shadow-gold);}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(212,175,55,.4);}
.btn-outline{background:transparent; border-color:rgba(255,255,255,.32); color:#fff;}
.btn-outline:hover{border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px);}
.btn-navy{background:var(--navy-900); color:#fff;}
.btn-navy:hover{background:var(--navy-800); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-ghost{background:transparent; color:var(--navy-900); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--navy-700); background:var(--bg-grey);}
.btn-sm{padding:10px 18px; font-size:13.5px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.55; pointer-events:none;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(11,28,58,.06);
  transition:box-shadow var(--dur-fast);
}
.site-header.scrolled{box-shadow:0 6px 24px rgba(11,28,58,.08);}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:76px; gap:14px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:19px; color:var(--navy-900); flex-shrink:0;}
.brand-mark{
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg, var(--navy-800), var(--navy-950));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(11,28,58,.25);
}
.brand-mark svg{width:20px; height:20px;}
.brand span{color:var(--gold-500);}

.main-nav{display:flex; align-items:center; gap:0;}
.main-nav a{
  padding:10px 13px; border-radius:var(--radius-pill); font-size:14px; font-weight:600;
  color:var(--muted); position:relative; transition:color var(--dur-fast), background var(--dur-fast);
  white-space:nowrap;
}
.main-nav a:hover{color:var(--navy-900); background:var(--bg-grey);}
.main-nav a.active{color:var(--navy-900); background:var(--bg-grey-deep);}

.header-actions{display:flex; align-items:center; gap:10px;}
.lang-toggle{display:flex; background:var(--bg-grey-deep); border-radius:var(--radius-pill); padding:3px; gap:2px;}
.lang-toggle button{
  border:none; background:transparent; padding:7px 13px; border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:700; color:var(--muted); transition:all var(--dur-fast);
}
.lang-toggle button.active{background:var(--navy-900); color:#fff; box-shadow:var(--shadow-sm);}

.hamburger{display:none; flex-direction:column; gap:4px; background:none; border:none; padding:8px;}
.hamburger span{width:22px; height:2px; background:var(--navy-900); border-radius:2px; transition:all var(--dur-fast);}

.mobile-menu{
  position:fixed; inset:76px 0 0 0; background:#fff; z-index:190;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:all var(--dur-med) var(--ease-out); overflow-y:auto;
}
.mobile-menu.open{transform:translateY(0); opacity:1; pointer-events:auto;}
.mobile-menu .wrap{padding-top:20px; padding-bottom:28px;}
.mobile-menu a{display:block; padding:16px 4px; font-size:19px; font-weight:600; color:var(--navy-900); border-bottom:1px solid var(--line);}
.mobile-menu .btn{margin-top:22px;}
.mobile-close{background:none; border:none; font-size:26px; line-height:1; color:var(--navy-900); padding:8px 10px; border-radius:10px;}
.mobile-close:hover{background:var(--bg-grey);}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color:#fff; padding:72px 0 88px;
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(560px 320px at 12% 0%, rgba(212,175,55,.16), transparent 60%),
    radial-gradient(480px 300px at 92% 100%, rgba(35,74,134,.5), transparent 60%);
  pointer-events:none;
}
.page-hero .wrap{position:relative;}
.page-hero .crumb{display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.55); margin-bottom:18px;}
.page-hero .crumb a{color:rgba(255,255,255,.75);}
.page-hero .crumb a:hover{color:var(--gold-400);}
.page-hero h1{font-size:clamp(30px,4.2vw,46px); color:#fff; max-width:760px;}
.page-hero p{margin-top:16px; color:rgba(255,255,255,.72); font-size:16.5px; max-width:600px; line-height:1.7;}
.page-hero .stat-row{display:flex; gap:36px; margin-top:36px; flex-wrap:wrap;}
.page-hero .stat b{display:block; font-family:var(--font-head); font-size:26px; color:var(--gold-400);}
.page-hero .stat span{font-size:12.5px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.06em;}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
.reveal.visible{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.94); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
.reveal-scale.visible{opacity:1; transform:scale(1);}
.reveal-left{opacity:0; transform:translateX(-32px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
.reveal-left.visible{opacity:1; transform:translateX(0);}
.reveal-right{opacity:0; transform:translateX(32px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
.reveal-right.visible{opacity:1; transform:translateX(0);}
.stagger > *{transition-delay:calc(var(--i, 0) * 90ms);}

@keyframes floatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(212,175,55,.45);} 100%{box-shadow:0 0 0 14px rgba(212,175,55,0);}}
@keyframes shimmer{0%{background-position:-200% 0;} 100%{background-position:200% 0;}}
@keyframes fadeSlideIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Home Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color:#fff; padding:64px 0 0;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(680px 420px at 10% 10%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(600px 380px at 95% 30%, rgba(35,74,134,.55), transparent 60%);
  pointer-events:none;
}
.hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding-bottom:60px;}
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); padding:8px 16px 8px 8px; border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.85); margin-bottom:24px;
}
.hero-badge .dot{width:8px; height:8px; border-radius:50%; background:var(--gold-500); animation:pulseRing 2s infinite;}
.hero h1{font-size:clamp(34px,4.6vw,54px); color:#fff; letter-spacing:-.02em;}
.hero h1 em{font-style:normal; color:var(--gold-400); position:relative;}
.hero p.lead{margin-top:20px; font-size:17.5px; color:rgba(255,255,255,.72); max-width:520px; line-height:1.75;}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:0; margin-top:52px; border-top:1px solid rgba(255,255,255,.14); padding-top:28px;}
.hero-stats .stat{flex:1; padding-right:20px;}
.hero-stats .stat b{display:block; font-family:var(--font-head); font-size:30px; color:#fff;}
.hero-stats .stat span{font-size:12.5px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.06em;}

.hero-art{position:relative; height:460px;}
.hero-art .card-float{
  position:absolute; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:18px 20px; display:flex; align-items:center; gap:12px; animation:floatY 5s ease-in-out infinite;
}
.hero-art .card-1{top:2%; left:-6%; width:220px;}
.hero-art .card-2{bottom:2%; right:-6%; width:200px; animation-delay:-2.2s;}
.hero-art .card-3{top:60%; left:-10%; width:185px; animation-delay:-3.6s;}
.hero-art .icon-chip{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.hero-art .icon-chip svg{width:22px; height:22px;}
.hero-art .card-1 .icon-chip{background:#fff4de; color:#c98a12;}
.hero-art .card-2 .icon-chip{background:#e6f6ec; color:var(--success);}
.hero-art .card-3 .icon-chip{background:#e8f0ff; color:var(--navy-700);}
.hero-art .card-float b{display:block; font-size:14.5px; color:var(--navy-900);}
.hero-art .card-float span{font-size:12px; color:var(--muted);}
.hero-art .art-photo{
  position:absolute; inset:14% 8%; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); border:6px solid rgba(255,255,255,.08);
}
.hero-art .art-photo img{width:100%; height:100%; object-fit:cover;}

.marquee-strip{background:var(--navy-950); border-top:1px solid rgba(255,255,255,.08); padding:20px 0; overflow:hidden;}
.marquee-track{display:flex; gap:56px; width:max-content; animation:marquee 26s linear infinite;}
.marquee-track span{font-size:13px; color:rgba(255,255,255,.45); font-weight:600; letter-spacing:.04em; white-space:nowrap;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- Cards / Grids ---------- */
.grid{display:grid; gap:26px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:#fff; border-radius:var(--radius-lg); padding:30px 26px;
  border:1px solid var(--line); transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med);
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent;}
.card .icon-chip{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#fff6e2,#fbecc4); color:#a97a0e; margin-bottom:18px;
  transition:transform var(--dur-med) var(--ease-out);
}
.card:hover .icon-chip{transform:scale(1.08) rotate(-4deg);}
.card .icon-chip svg{width:24px; height:24px;}
.card h3{font-size:18px; margin-bottom:8px;}
.card p{color:var(--muted); font-size:14.5px; line-height:1.7;}

.trust-strip{margin-top:-56px; position:relative; z-index:5;}
.trust-card{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:34px 20px; display:grid; grid-template-columns:repeat(4,1fr);
}
.trust-item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:0 14px; position:relative;}
.trust-item + .trust-item::before{content:''; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--line);}
.trust-item .icon-chip{width:46px; height:46px; border-radius:13px; background:var(--bg-grey-deep); color:var(--navy-800); display:flex; align-items:center; justify-content:center;}
.trust-item .icon-chip svg{width:22px; height:22px;}
.trust-item b{font-size:14.5px; color:var(--navy-900);}
.trust-item span{font-size:12.5px; color:var(--muted);}

/* ---------- Steps ---------- */
.steps-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; counter-reset:step;}
.step-item{padding:0 22px 0 0; position:relative;}
.step-item:not(:last-child)::after{
  content:''; position:absolute; top:26px; left:calc(100% - 16px); width:calc(100% - 4px); height:2px;
  background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
}
.step-num{
  width:52px; height:52px; border-radius:16px; background:var(--navy-900); color:var(--gold-400);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:19px;
  margin-bottom:20px; position:relative; z-index:2; box-shadow:var(--shadow-md);
}
.step-item h3{font-size:16.5px; margin-bottom:8px;}
.step-item p{color:var(--muted); font-size:14px; line-height:1.65;}

/* ---------- Split section (image/text) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.split-media{position:relative;}
.split-media .media-frame{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:relative;
  aspect-ratio:4/3.1;
}
.split-media .media-frame img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out);}
.split-media:hover .media-frame img{transform:scale(1.045);}
.split-media .media-badge{
  position:absolute; bottom:-22px; left:-22px; background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:16px 20px; display:flex; align-items:center; gap:12px; max-width:230px;
}
.split-media .media-badge .icon-chip{width:40px; height:40px; border-radius:11px; background:#e6f6ec; color:var(--success); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.split-media .media-badge .icon-chip svg{width:20px; height:20px;}
.split-media .media-badge b{font-size:14px; display:block; color:var(--navy-900);}
.split-media .media-badge span{font-size:11.5px; color:var(--muted);}

.about-quote{
  margin-top:22px; padding:20px 22px; border-left:3px solid var(--gold-500); background:var(--bg-grey);
  border-radius:0 var(--radius-md) var(--radius-md) 0; font-style:italic; color:var(--navy-800); font-size:15px;
}

.check-list{margin-top:24px; display:flex; flex-direction:column; gap:14px;}
.check-list li{display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink);}
.check-list .tick{
  width:22px; height:22px; border-radius:50%; background:var(--navy-900); color:var(--gold-400);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}
.check-list .tick svg{width:12px; height:12px;}

/* Accommodation gallery */
.gallery-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:var(--sp-7);}
.gallery-row .g-item{border-radius:var(--radius-md); overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow-sm); position:relative;}
.gallery-row .g-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out);}
.gallery-row .g-item:hover img{transform:scale(1.08);}

/* ---------- Vehicles ---------- */
.vehicle-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow var(--dur-med), transform var(--dur-med);}
.vehicle-card:hover{box-shadow:var(--shadow-md); transform:translateY(-6px);}
.vehicle-card .v-photo{aspect-ratio:16/10.5; overflow:hidden; background:var(--bg-grey-deep);}
.vehicle-card .v-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out);}
.vehicle-card:hover .v-photo img{transform:scale(1.06);}
.vehicle-card .v-body{padding:22px 22px 26px;}
.vehicle-card h3{font-size:17px; margin-bottom:8px;}
.vehicle-card p{color:var(--muted); font-size:14px; line-height:1.65;}

/* ---------- Benefits detail ---------- */
.benefit-row{display:flex; gap:20px; padding:24px 0; border-bottom:1px solid var(--line);}
.benefit-row:first-child{padding-top:0;}
.benefit-row .icon-chip{
  width:50px; height:50px; border-radius:14px; background:var(--bg-grey-deep); color:var(--navy-800);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.benefit-row .icon-chip svg{width:23px; height:23px;}
.benefit-row h4{font-size:16px; margin-bottom:6px;}
.benefit-row p{color:var(--muted); font-size:14.5px; line-height:1.7;}

/* ---------- Team ---------- */
.team-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:22px;}
.team-card{
  background:#fff; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.team-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md);}
.team-card .team-photo{aspect-ratio:1/1; overflow:hidden; position:relative;}
.team-card .team-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out);}
.team-card:hover .team-photo img{transform:scale(1.07);}
.team-card .team-photo::after{
  content:''; position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(to top, rgba(6,15,34,.55), transparent);
}
.team-card-body{padding:16px 16px 20px; text-align:center;}
.team-card-body h4{font-size:15.5px; margin-bottom:3px;}
.team-card-body span{font-size:12.5px; color:var(--gold-500); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}

.about-pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
.about-pills span{
  padding:9px 16px; border-radius:var(--radius-pill); background:var(--bg-grey); font-size:13px; font-weight:600;
  color:var(--navy-800); border:1px solid var(--line);
}

/* ---------- FAQ ---------- */
.faq-list{display:flex; flex-direction:column; gap:12px;}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; transition:border-color var(--dur-fast), box-shadow var(--dur-fast);}
.faq-item.open{border-color:var(--gold-500); box-shadow:var(--shadow-sm);}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  background:none; border:none; padding:20px 22px; text-align:left; font-family:var(--font-head);
  font-size:15.5px; font-weight:600; color:var(--navy-900);
}
.faq-q .plus{
  width:26px; height:26px; border-radius:50%; background:var(--bg-grey-deep); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:transform var(--dur-med) var(--ease-out), background var(--dur-fast);
  position:relative;
}
.faq-q .plus::before, .faq-q .plus::after{content:''; position:absolute; background:var(--navy-800); border-radius:2px;}
.faq-q .plus::before{width:11px; height:2px;}
.faq-q .plus::after{width:2px; height:11px; transition:opacity var(--dur-fast);}
.faq-item.open .plus{background:var(--navy-900); transform:rotate(180deg);}
.faq-item.open .plus::before, .faq-item.open .plus::after{background:var(--gold-400);}
.faq-item.open .plus::after{opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out);}
.faq-a-inner{padding:0 22px 20px; color:var(--muted); font-size:14.5px; line-height:1.75;}

/* ---------- Forms ---------- */
.form-card{background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:38px; border:1px solid var(--line);}
.form-group{margin-bottom:20px;}
.form-group label{display:block; font-size:13px; font-weight:700; color:var(--navy-900); margin-bottom:8px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
input[type=text], input[type=email], input[type=tel], select, textarea{
  width:100%; padding:13px 15px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  font-size:14.5px; color:var(--ink); background:#fff; transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--navy-700); box-shadow:0 0 0 4px rgba(26,55,102,.10);}
textarea{resize:vertical; min-height:110px;}
.field-error{border-color:var(--danger) !important;}
.error-msg{color:var(--danger); font-size:12.5px; margin-top:6px; display:none;}
.error-msg.show{display:block;}

.chip-group{display:flex; flex-wrap:wrap; gap:10px;}
.chip-opt{
  padding:10px 18px; border-radius:var(--radius-pill); border:1.5px solid var(--line); background:#fff;
  font-size:13.5px; font-weight:600; color:var(--muted); transition:all var(--dur-fast);
}
.chip-opt:hover{border-color:var(--navy-600);}
.chip-opt.sel{background:var(--navy-900); border-color:var(--navy-900); color:#fff;}

.progress-track{display:flex; gap:8px; margin-bottom:34px;}
.progress-track .seg{flex:1; height:5px; border-radius:3px; background:var(--line); overflow:hidden; position:relative;}
.progress-track .seg i{position:absolute; inset:0; background:var(--gold-500); transform:translateX(-100%); transition:transform .45s var(--ease-out);}
.progress-track .seg.done i, .progress-track .seg.active i{transform:translateX(0);}
.progress-steps{display:flex; justify-content:space-between; font-size:12px; color:var(--muted-soft); margin-bottom:6px; font-weight:600;}
.progress-steps .on{color:var(--navy-900);}

.reg-step{display:none; animation:fadeSlideIn .45s var(--ease-out);}
.reg-step.active{display:block;}
.reg-nav{display:flex; justify-content:space-between; margin-top:28px; gap:14px;}

.success-panel{text-align:center; padding:40px 20px;}
.success-panel .ok-circle{
  width:78px; height:78px; border-radius:50%; background:#e6f6ec; color:var(--success);
  display:flex; align-items:center; justify-content:center; margin:0 auto 22px; animation:popIn .5s var(--ease-out);
}
.success-panel .ok-circle svg{width:36px; height:36px;}
@keyframes popIn{0%{transform:scale(.5); opacity:0;} 100%{transform:scale(1); opacity:1;}}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:48px;}
.info-card{background:var(--navy-900); color:#fff; border-radius:var(--radius-lg); padding:36px 30px;}
.info-card h3{color:#fff; font-size:19px; margin-bottom:22px;}
.info-row{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1);}
.info-row:last-child{border-bottom:none; padding-bottom:0;}
.info-row .icon-chip{width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.09); color:var(--gold-400); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.info-row .icon-chip svg{width:19px; height:19px;}
.info-row b{display:block; font-size:14px; margin-bottom:3px;}
.info-row span{font-size:13.5px; color:rgba(255,255,255,.6);}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-950));
  border-radius:var(--radius-lg); padding:56px 50px; display:flex; align-items:center; justify-content:space-between;
  gap:30px; position:relative; overflow:hidden; color:#fff;
}
.cta-banner::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(420px 240px at 90% 0%, rgba(212,175,55,.22), transparent 65%);
}
.cta-banner .cta-text{position:relative; max-width:520px;}
.cta-banner h2{color:#fff; font-size:clamp(22px,2.8vw,30px);}
.cta-banner p{color:rgba(255,255,255,.72); margin-top:10px; font-size:15px;}
.cta-banner .cta-actions{position:relative; display:flex; gap:14px; flex-shrink:0; flex-wrap:wrap;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-950); color:rgba(255,255,255,.62); padding:64px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:44px;}
.footer-brand p{margin-top:16px; font-size:13.5px; line-height:1.75; color:rgba(255,255,255,.5); max-width:280px;}
.footer-social{display:flex; gap:10px; margin-top:20px;}
.footer-social a{width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast), transform var(--dur-fast);}
.footer-social a:hover{background:var(--gold-500); color:var(--navy-950); transform:translateY(-3px);}
.footer-social svg{width:16px; height:16px;}
.footer-col h5{color:#fff; font-size:14px; margin-bottom:18px; letter-spacing:.02em;}
.footer-col ul{display:flex; flex-direction:column; gap:12px;}
.footer-col a{font-size:13.5px; transition:color var(--dur-fast); color:rgba(255,255,255,.6);}
.footer-col a:hover{color:var(--gold-400);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); padding:22px 0; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; flex-wrap:wrap; gap:10px;}
.footer-bottom a{color:rgba(255,255,255,.45);}

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:150; background:#fff;
  border-top:1px solid var(--line); padding:10px 14px; box-shadow:0 -8px 24px rgba(11,28,58,.08);
  display:none; gap:8px;
}
.mobile-cta a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 8px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:700;
}
.mobile-cta a svg{width:16px; height:16px;}
.mobile-cta .m-call{background:var(--bg-grey-deep); color:var(--navy-900);}
.mobile-cta .m-wa{background:#e6f6ec; color:var(--success);}
.mobile-cta .m-join{background:linear-gradient(135deg, var(--gold-400), var(--gold-500)); color:var(--navy-950);}

/* ---------- Floating social buttons ---------- */
.float-social{
  position:fixed; right:22px; bottom:30px; z-index:250;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.float-btn{
  position:relative; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:var(--shadow-lg); text-decoration:none;
  animation:floatIn .6s var(--ease-out) both, floatY 3.6s ease-in-out 1s infinite;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.float-btn svg{width:27px; height:27px;}
.float-btn:hover{animation-play-state:paused; transform:scale(1.08) translateY(-2px); box-shadow:var(--shadow-lg), 0 0 0 6px rgba(11,28,58,.06);}
.float-btn:active{transform:scale(.94);}
.float-wa{background:#25d366; animation:floatIn .6s var(--ease-out) both, floatY 3.6s ease-in-out 1s infinite, waPulse 2.4s ease-out 1s infinite;}
.float-ig{width:44px; height:44px; background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7); animation-delay:.15s, 1.15s;}
.float-ig svg{width:20px; height:20px;}
.float-tip{
  position:absolute; right:calc(100% + 14px); top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--navy-950); color:#fff; padding:7px 13px; border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:700; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity var(--dur-fast), transform var(--dur-fast); box-shadow:var(--shadow-md);
}
.float-btn:hover .float-tip{opacity:1; transform:translateY(-50%) translateX(0);}
@keyframes floatIn{0%{opacity:0; transform:translateY(30px) scale(.4);} 100%{opacity:1; transform:translateY(0) scale(1);}}
@keyframes waPulse{
  0%{box-shadow:var(--shadow-lg), 0 0 0 0 rgba(37,211,102,.5);}
  70%{box-shadow:var(--shadow-lg), 0 0 0 18px rgba(37,211,102,0);}
  100%{box-shadow:var(--shadow-lg), 0 0 0 18px rgba(37,211,102,0);}
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); z-index:400;
  background:var(--navy-950); color:#fff; padding:14px 22px; border-radius:var(--radius-pill);
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none;
  transition:all var(--dur-med) var(--ease-out); display:flex; align-items:center; gap:10px;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast .dot{width:8px; height:8px; border-radius:50%; background:var(--gold-500);}

/* ---------- Misc ---------- */
.divider-fade{height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); margin:0 0 0;}
.badge-soft{display:inline-block; padding:5px 12px; border-radius:var(--radius-pill); background:var(--bg-grey-deep); font-size:11.5px; font-weight:700; color:var(--navy-800); letter-spacing:.03em;}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1080px){
  .team-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 980px){
  .main-nav{display:none;}
  .hamburger{display:flex;}
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .hero p.lead{margin-left:auto; margin-right:auto;}
  .hero-cta{justify-content:center;}
  .hero-stats{justify-content:center; flex-wrap:wrap; gap:28px;}
  .hero-stats .stat{flex:none; padding-right:0;}
  .hero-art{display:none;}
  .grid-2, .grid-3, .grid-4{grid-template-columns:repeat(2,1fr);}
  .trust-card{grid-template-columns:repeat(2,1fr); gap:24px 0;}
  .trust-item:nth-child(2)::before{display:none;}
  .steps-row{grid-template-columns:repeat(2,1fr); gap:34px 0;}
  .step-item:nth-child(2)::after{display:none;}
  .split{grid-template-columns:1fr; gap:40px;}
  .split.reverse .split-media{order:2;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .team-grid{grid-template-columns:repeat(3,1fr);}
  .cta-banner{flex-direction:column; text-align:center; align-items:center;}
  .cta-banner .cta-actions{justify-content:center;}
  .mobile-cta{display:block;}
  body{padding-bottom:72px;}
  .gallery-row{grid-template-columns:repeat(2,1fr);}
  .float-social{right:14px; bottom:88px; gap:10px;}
  .float-btn{width:50px; height:50px;}
  .float-btn svg{width:23px; height:23px;}
  .float-ig{width:38px; height:38px;}
  .float-ig svg{width:17px; height:17px;}
  .float-tip{display:none;}
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; text-align:center;}
  .section{padding:var(--sp-8) 0;}
  .form-card{padding:26px 20px;}
  .page-hero{padding:52px 0 64px;}
  .hero-badge{font-size:11.5px;}
  .cta-banner{padding:40px 26px;}
  .info-card{padding:28px 22px;}
}

/* ---------- Small phones ---------- */
@media (max-width: 480px){
  .wrap, .wrap-narrow{padding:0 16px;}

  /* Header: brand + lang toggle + Join button + hamburger were crowding
     onto one line and colliding on narrow screens. Drop the header
     Join button (the sticky bottom bar already offers it) and tighten
     gaps so brand + lang toggle + hamburger sit comfortably. */
  .header-inner{height:66px; gap:8px;}
  .brand{font-size:16px; gap:8px;}
  .brand-mark{width:32px; height:32px; border-radius:9px;}
  .brand-mark svg{width:17px; height:17px;}
  .header-actions{gap:6px;}
  .header-actions > a.btn{display:none;}
  .lang-toggle button{padding:6px 10px; font-size:11.5px;}
  .hamburger{padding:6px;}
  .mobile-menu{inset:66px 0 0 0;}

  /* Hero */
  .hero{padding:40px 0 0;}
  .hero-badge{margin-left:auto; margin-right:auto;}
  .hero h1{font-size:28px;}
  .hero p.lead{font-size:15.5px; max-width:100%;}
  .hero-cta{flex-direction:column; align-items:stretch; gap:10px;}
  .hero-cta .btn{width:100%;}
  .hero-stats{flex-direction:column; align-items:center; gap:18px; margin-top:36px; padding-top:22px;}
  .hero-stats .stat{text-align:center; width:100%;}

  .page-hero{padding:40px 0 52px; text-align:center;}
  .page-hero .crumb{justify-content:center;}
  .page-hero h1{max-width:100%;}
  .page-hero p{margin-left:auto; margin-right:auto;}
  .page-hero .stat-row{justify-content:center; text-align:center; gap:22px 30px;}

  /* Section heads center up so intro copy doesn't look left-stranded
     under a centered heading */
  .section-head{text-align:center; margin-left:auto; margin-right:auto;}

  /* Trust strip / steps: 2-up grids get too tight under ~380px */
  .trust-card{grid-template-columns:1fr 1fr; gap:22px 0; padding:26px 16px;}
  .trust-item + .trust-item::before{display:none;}
  .steps-row{grid-template-columns:1fr; gap:26px;}
  .step-item{padding:0;}
  .step-item::after{display:none !important;}
  .step-item{text-align:center;}
  .step-num{margin-left:auto; margin-right:auto;}

  .split{gap:30px;}
  .split-media .media-badge{left:0; right:0; margin:0 auto; max-width:calc(100% - 32px);}

  .gallery-row{grid-template-columns:repeat(2,1fr); gap:12px;}
  .team-grid{grid-template-columns:repeat(2,1fr); gap:14px;}

  .cta-banner{padding:32px 20px; text-align:center;}
  .cta-banner .cta-actions{flex-direction:column; width:100%;}
  .cta-banner .cta-actions .btn{width:100%;}

  .contact-grid{gap:28px;}
  .info-card{padding:24px 18px;}

  .footer-social{justify-content:center;}
  .footer-brand{text-align:center;}
  .footer-brand p{margin-left:auto; margin-right:auto;}
  .footer-col{text-align:center;}

  /* Registration form: 4-label progress row overlapped on narrow
     screens — shrink and truncate each label instead of wrapping */
  .progress-steps{font-size:10.5px; gap:4px;}
  .progress-steps span{flex:1; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .chip-group{gap:8px;}
  .chip-opt{padding:9px 14px; font-size:13px;}
  .reg-nav{gap:10px;}
  .reg-nav .btn{flex:1;}

  .mobile-cta a{font-size:11.5px; padding:11px 4px;}
}