/* =========================================================
   360° PREMIUM PRO STYLE (SAME COLORS)
   - Cleaner rhythm, better glass, tighter UI, more premium
   - Keep your existing HTML structure
========================================================= */
:root{

  /* =========================
     GLOBAL THEME COLORS
  ========================= */

  --brand1:#8b5cf6;
  --brand2:#06b6d4;

  --brand1-rgb:139,92,246;
  --brand2-rgb:6,182,212;

  --grad:
    linear-gradient(
      135deg,
      var(--brand1),
      var(--brand2)
    );

  /* =========================
     MAIN COLORS
  ========================= */

  --dark:#050816;
  --soft:#0f172a;

  --text:#f8fafc;
  --muted:#94a3b8;

  --card:
    rgba(15,23,42,.74);

  --line:
    rgba(255,255,255,.08);

  /* =========================
     GLASS SYSTEM
  ========================= */

  --glass:
    rgba(255,255,255,.05);

  --glass-strong:
    rgba(255,255,255,.08);

  --glass-border:
    rgba(255,255,255,.12);

  /* =========================
     EXTRA UI TOKENS
  ========================= */

  --softGrad:
    linear-gradient(
      135deg,
      rgba(var(--brand1-rgb),.12),
      rgba(var(--brand2-rgb),.10)
    );

  --img-bg:
    linear-gradient(
      135deg,
      rgba(var(--brand1-rgb),.10),
      rgba(var(--brand2-rgb),.08)
    );

  --focus:
    0 0 0 4px rgba(var(--brand1-rgb),.24);

  /* =========================
     RADIUS
  ========================= */

  --radius:18px;
  --radius2:26px;

  /* =========================
     SHADOWS
  ========================= */

  --shadow:
    0 10px 40px rgba(0,0,0,.35);

  --shadow2:
    0 20px 70px rgba(0,0,0,.48);

  --shadow3:
    0 8px 24px rgba(0,0,0,.28);

  /* =========================
     LAYOUT
  ========================= */

  --container:1200px;

  --pad:
    clamp(16px, 2vw, 26px);

  /* =========================
     MOTION
  ========================= */

  --ease:
    cubic-bezier(.2,.8,.2,1);

  --dur:220ms;

  /* =========================
     EFFECTS
  ========================= */

  --tint1:
    rgba(var(--brand1-rgb),.08);

  --tint2:
    rgba(var(--brand2-rgb),.06);
}

/* =========================
   GLOBAL RESET + PREMIUM TYPE
========================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;

  color:var(--text);

  background:
    radial-gradient(
      1000px 500px at 10% -10%,
      rgba(var(--brand1-rgb),.16),
      transparent 60%
    ),
    radial-gradient(
      900px 450px at 95% 0%,
      rgba(var(--brand2-rgb),.14),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      var(--dark),
      var(--soft)
    );

  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;

  text-rendering:geometricPrecision;
}

/* =========================
   GLOBAL ELEMENTS
========================= */

a{
  text-decoration:none;
  color:inherit;
}

img{
  display:block;
  max-width:100%;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad);
}

.section{
  padding:
    clamp(56px, 6vw, 96px) 0;

  position:relative;
}

.section.soft{
  background:
    radial-gradient(
      900px 320px at 15% 0%,
      rgba(var(--brand1-rgb),.10),
      transparent 60%
    ),
    radial-gradient(
      900px 320px at 85% 0%,
      rgba(var(--brand2-rgb),.08),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(15,23,42,.96),
      rgba(15,23,42,.92)
    );
}

.muted{
  color:var(--muted);
}

.small{
  font-size:12px;
}

.strong{
  font-weight:900;
}

h1,
h2,
h3,
h4{
  color:var(--text);
  letter-spacing:-.03em;
}

h2{
  font-size:
    clamp(22px, 3vw, 36px);

  line-height:1.1;
}

p{
  line-height:1.75;
  color:var(--muted);
}

/* =========================
   ACCESSIBLE INTERACTIONS
========================= */

:where(a, button, input, textarea, summary):focus{
  outline:none;
}

:where(a, button, input, textarea, summary):focus-visible{
  box-shadow:var(--focus);
  border-radius:12px;
}

/* =========================
   BUTTONS
========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:12px 18px;

  border-radius:14px;

  font-weight:950;
  font-size:14px;

  border:1px solid transparent;

  cursor:pointer;

  user-select:none;

  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    filter var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.btn:hover{
  transform:translateY(-1px);
}

.btn:active{
  transform:
    translateY(0px)
    scale(.99);
}

.btn-primary{
  color:#fff;

  background:var(--grad);

  box-shadow:
    0 14px 28px rgba(var(--brand1-rgb),.24),
    0 12px 24px rgba(var(--brand2-rgb),.18);
}

.btn-primary:hover{
  filter:
    saturate(1.08)
    brightness(1.03);
}

.btn-ghost{
  background:
    rgba(255,255,255,.06);

  border-color:
    rgba(255,255,255,.12);

  color:#fff;

  backdrop-filter:
    blur(14px);
}

.btn-ghost:hover{
  background:var(--softGrad);

  border-color:
    rgba(var(--brand1-rgb),.24);

  box-shadow:
    0 10px 24px rgba(0,0,0,.22);
}

/* =========================
   CARDS
========================= */

.card,
.case-card,
.blog-card,
.t-card,
.info-card,
.tx-card{
  background:var(--card);

  border:1px solid var(--glass-border);

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  backdrop-filter:blur(18px);
}

/* =========================
   INPUTS
========================= */

input,
textarea,
select{
  background:
    rgba(255,255,255,.05);

  border:
    1px solid rgba(255,255,255,.10);

  color:var(--text);

  border-radius:14px;

  padding:12px 14px;
}

input::placeholder,
textarea::placeholder{
  color:var(--muted);
}

input:focus,
textarea:focus,
select:focus{
  border-color:
    rgba(var(--brand1-rgb),.35);

  box-shadow:var(--focus);
}

/* =========================
   TABLES
========================= */

table{
  width:100%;
  border-collapse:collapse;
}

th{
  color:#cbd5e1;

  background:
    rgba(255,255,255,.04);
}

td{
  color:var(--text);

  border-bottom:
    1px solid rgba(255,255,255,.06);
}

/* =========================
   MODALS
========================= */

.modal-panel{
  background:var(--card);

  border:
    1px solid var(--glass-border);

  backdrop-filter:
    blur(20px);

  box-shadow:var(--shadow2);
}




/* =========================================
   BUTTONS
========================================= */

.btn-ghost:hover{
  background:
    rgba(255,255,255,.10);

  border-color:
    rgba(var(--brand1-rgb),.24);
}

/* Soft button */

.btn-soft{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.04)
    );

  border:
    1px solid rgba(255,255,255,.10);

  box-shadow:
    var(--shadow3);

  color:
    var(--text);

  backdrop-filter:
    blur(14px);
}

.btn-soft:hover{
  transform:
    translateY(-1px);

  box-shadow:
    var(--shadow2);

  border-color:
    rgba(var(--brand1-rgb),.24);

  background:
    var(--softGrad);
}

/* =========================================
   GRIDS
========================================= */

.grid-3{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:18px;
}

.grid-2{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;
}

/* =========================================
   SECTION HEAD
========================================= */

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:14px;

  margin-bottom:18px;
}

.section-head h2{
  margin:0;
}

.center-head{
  text-align:center;
  margin-bottom:18px;
}

.center-head.left{
  text-align:left;
}

.center-head h2{
  margin:0;
}

/* =========================================
   ICON BUTTONS
========================================= */

.icon-btn{
  width:44px;
  height:44px;

  border-radius:14px;

  border:
    1px solid var(--glass-border);

  background:
    rgba(255,255,255,.05);

  color:
    var(--text);

  cursor:pointer;

  backdrop-filter:
    blur(14px);

  box-shadow:
    var(--shadow3);

  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.icon-btn:hover{
  transform:
    translateY(-1px);

  box-shadow:
    var(--shadow2);

  background:
    var(--softGrad);

  border-color:
    rgba(var(--brand1-rgb),.24);
}

.arrows{
  display:flex;
  gap:10px;
}

/* =========================================
   HEADER
========================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:60;

  background:
    rgba(5,8,22,.72);

  backdrop-filter:
    blur(20px);

  border-bottom:
    1px solid rgba(255,255,255,.08);
}

.site-header::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:-1px;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(var(--brand1-rgb),.55),
      rgba(var(--brand2-rgb),.55),
      transparent
    );

  opacity:.45;

  pointer-events:none;
}

.nav-wrap{
  height:78px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;
}

.brand{
  min-width:0;

  display:flex;
  align-items:center;
  gap:10px;
}

.brand img{
  height:34px;
}

.brand-text{
  color:#fff;

  font-weight:1000;

  letter-spacing:.3px;

  white-space:nowrap;
}

/* =========================================
   NAV LINKS
========================================= */

.nav-links{
  display:flex;
  gap:8px;
}

.nav-links a{
  color:
    rgba(255,255,255,.78);

  font-weight:900;
  font-size:13px;

  padding:10px 12px;

  border-radius:14px;

  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.nav-links a.active,
.nav-links a:hover{
  background:
    rgba(255,255,255,.08);

  border:
    1px solid rgba(var(--brand1-rgb),.18);

  color:#fff;

  transform:
    translateY(-1px);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;

  flex-shrink:0;
}

.nav-actions .btn{
  padding:10px 14px;

  border-radius:12px;

  font-size:13px;

  white-space:nowrap;
}

/* =========================================
   BURGER
========================================= */

.burger{
  display:none;

  align-items:center;
  justify-content:center;
  gap:8px;

  height:44px;

  padding:0 14px;

  background:
    rgba(255,255,255,.06);

  border:
    1px solid rgba(255,255,255,.12);

  color:#fff;

  border-radius:14px;

  cursor:pointer;

  backdrop-filter:
    blur(12px);

  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.burger:hover{
  transform:
    translateY(-1px);

  background:
    var(--softGrad);

  border-color:
    rgba(var(--brand1-rgb),.24);
}

/* =========================================
   HERO
========================================= */

.hero{
  position:relative;

  min-height:
    clamp(540px,72vh,760px);

  overflow:hidden;

  display:flex;
  align-items:stretch;
}

/* Slides */

.hero-slides{
  position:absolute;
  inset:0;

  z-index:0;
}

.hero-slide{
  position:absolute;
  inset:0;

  opacity:0;

  transform:scale(1.03);

  transition:
    opacity 650ms var(--ease);

  background-size:cover;
  background-position:center;

  filter:
    saturate(1.02)
    contrast(1.02);
}

.hero-slide.active{
  opacity:1;
}

/* Overlay */

.hero::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      900px 400px at 25% 0%,
      rgba(var(--brand1-rgb),.22),
      transparent 55%
    ),
    radial-gradient(
      900px 400px at 85% 0%,
      rgba(var(--brand2-rgb),.18),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.24),
      rgba(0,0,0,.56)
    );

  z-index:1;
}

.hero::after{
  content:"";

  position:absolute;
  inset:-2px;

  background:
    radial-gradient(
      900px 280px at 50% 105%,
      rgba(255,255,255,.08),
      transparent 60%
    );

  z-index:1;

  pointer-events:none;
}

/* Content */

.hero-inner{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    1.2fr .8fr;

  align-items:center;

  gap:
    clamp(14px,2.2vw,24px);

  width:100%;

  min-height:
    clamp(540px,72vh,760px);
}

.hero-left{
  padding:
    clamp(34px,4.5vw,72px) 0;
}

.hero-kicker{
  color:
    rgba(255,255,255,.72);

  font-weight:950;

  font-size:12px;

  letter-spacing:1.2px;

  text-transform:uppercase;
}

.hero-title{
  margin:10px 0 12px;

  color:#fff;

  font-weight:1000;

  font-size:
    clamp(34px,5.1vw,64px);

  line-height:1.02;

  text-transform:uppercase;
}

.hero-sub{
  color:
    rgba(255,255,255,.74);

  max-width:640px;

  font-size:
    clamp(14px,1.35vw,16px);
}

.hero-actions{
  display:flex;
  gap:12px;

  margin-top:18px;

  flex-wrap:wrap;
}

.hero-pager{
  display:flex;
  gap:18px;

  margin-top:22px;

  font-weight:1000;
}

.hero-pager .p{
  color:var(--brand1);
}

.hero-pager .dim{
  color:
    rgba(255,255,255,.38);
}

/* =========================================
   HERO CONTROLS
========================================= */

.hero-controls{
  position:absolute;

  left:50%;

  transform:
    translateX(-50%);

  bottom:74px;

  z-index:4;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  width:
    min(980px,calc(100% - (var(--pad) * 2)));
}

.hero-dots{
  display:flex;
  gap:8px;
}

.hero-dot{
  width:10px;
  height:10px;

  border-radius:999px;

  border:
    1px solid rgba(255,255,255,.28);

  background:
    rgba(255,255,255,.12);

  cursor:pointer;

  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.hero-dot.active{
  background:
    var(--brand1);

  border-color:
    var(--brand1);

  transform:
    scale(1.12);
}

.hero-arrows{
  display:flex;
  gap:10px;
}

.hero-arrow{
  width:44px;
  height:44px;

  border-radius:14px;

  border:
    1px solid rgba(255,255,255,.12);

  background:
    rgba(255,255,255,.06);

  color:#fff;

  backdrop-filter:
    blur(12px);

  cursor:pointer;

  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.hero-arrow:hover{
  transform:
    translateY(-1px);

  background:
    var(--softGrad);

  border-color:
    rgba(var(--brand1-rgb),.24);
}

/* =========================================
   HERO SOCIAL
========================================= */

.hero-right{
  display:flex;
  justify-content:flex-end;
}

.hero-social{
  display:flex;
  flex-direction:column;
  gap:14px;

  opacity:.75;

  transform:
    rotate(90deg);
}

.hero-social a{
  color:#fff;

  font-weight:900;
  font-size:12px;

  letter-spacing:.7px;
}

.hero-social a:hover{
  opacity:.92;
}

/* =========================================
   HERO STRIP
========================================= */

.hero-strip{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  background:var(--grad);

  height:56px;

  display:flex;
  align-items:center;

  z-index:3;

  overflow:hidden;

  border-top:
    1px solid rgba(255,255,255,.10);
}

.partner-marquee{
  width:100%;
  overflow:hidden;
}

.partner-track{
  display:flex;

  gap:48px;

  width:max-content;

  animation:
    marquee-left 30s linear infinite;
}

.partner{
  font-size:14px;

  font-weight:800;

  letter-spacing:.10em;

  text-transform:uppercase;

  color:
    rgba(255,255,255,.82);

  white-space:nowrap;
}

@keyframes marquee-left{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}

/* =========================================
   CARD SYSTEM
========================================= */

.card,
.case-card,
.t-card,
.tx-card,
.how-image,
.info-card,
.blog-card,
.step-card{
  border-radius:var(--radius2);

  border:
    1px solid var(--glass-border);

  box-shadow:
    var(--shadow);

  background:
    var(--card);

  backdrop-filter:
    blur(18px);
}

.case-card,
.blog-card,
.t-card,
.info-card,
.step-card{
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.case-card:hover,
.blog-card:hover,
.t-card:hover,
.info-card:hover,
.step-card:hover{
  transform:
    translateY(-4px);

  box-shadow:
    var(--shadow2);

  border-color:
    rgba(var(--brand1-rgb),.24);

  background:
    rgba(15,23,42,.82);
}


/* Case */
/* =========================================
   CASE CARD
========================================= */

.case-card{
  overflow:hidden;
}

.case-img{
  height:188px;

  background:
    var(--img-bg);

  position:relative;
}

.case-img::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(0,0,0,.32)
    );

  opacity:.78;
}

.case-img img{
  width:100%;
  height:188px;

  object-fit:cover;
}

.case-body{
  padding:18px;
}

.case-body h4{
  margin:0 0 8px;

  font-size:15px;

  color:var(--text);
}

.case-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;

  margin-top:12px;

  font-weight:900;
  font-size:12px;

  color:var(--muted);
}

/* =========================================
   TESTIMONIAL
========================================= */

.t-card{
  padding:20px;
}

.t-text{
  color:var(--text);

  margin:0 0 14px;

  line-height:1.75;
}

.t-foot{
  display:flex;
  gap:12px;
  align-items:center;

  position:relative;
}

.avatar{
  width:44px;
  height:44px;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      rgba(var(--brand1-rgb),.22),
      rgba(var(--brand2-rgb),.16)
    );

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:1000;

  color:#fff;
}

.t-name{
  font-weight:1000;

  color:var(--text);
}

.quote{
  position:absolute;

  right:0;
  top:-6px;

  color:
    rgba(var(--brand1-rgb),.24);

  font-size:32px;

  font-weight:1000;
}

/* =========================================
   TABS + TABLE
========================================= */

.tabs{
  display:flex;
  gap:10px;

  justify-content:center;

  margin-top:12px;

  flex-wrap:wrap;
}

.tab{
  border:
    1px solid var(--glass-border);

  background:
    rgba(255,255,255,.05);

  color:var(--text);

  border-radius:999px;

  padding:9px 16px;

  font-weight:1000;
  font-size:12px;

  cursor:pointer;

  backdrop-filter:
    blur(12px);

  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.tab:hover{
  transform:
    translateY(-1px);

  box-shadow:
    var(--shadow3);

  border-color:
    rgba(var(--brand1-rgb),.22);
}

.tab.active{
  background:
    var(--grad);

  color:#fff;

  border-color:transparent;
}

.tx-card{
  max-width:780px;

  margin:18px auto 0;

  overflow:hidden;
}

.tx-head{
  background:
    var(--grad);

  color:#fff;

  font-weight:1000;
  font-size:12px;

  display:grid;

  grid-template-columns:
    1.3fr .7fr 1fr;

  gap:12px;

  padding:12px 16px;
}

.tx-row{
  display:grid;

  grid-template-columns:
    1.3fr .7fr 1fr;

  gap:12px;

  padding:12px 16px;

  border-top:
    1px solid rgba(255,255,255,.08);

  color:var(--text);
}

.tx-row .strong{
  font-weight:1000;
}

/* =========================================
   STATS
========================================= */

.stats-strip{
  background:
    var(--grad);

  padding:22px 0;
}

.stats-inner{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:14px;
}

.stat{
  display:flex;
  gap:12px;
  align-items:center;

  color:#fff;
}

.stat-icon{
  width:46px;
  height:46px;

  border-radius:18px;

  background:
    rgba(255,255,255,.16);

  display:flex;
  align-items:center;
  justify-content:center;

  backdrop-filter:
    blur(12px);

  box-shadow:
    0 10px 22px rgba(0,0,0,.18);
}

.stat-val{
  font-weight:1000;

  font-size:24px;

  line-height:1;
}

.stat-lab{
  font-weight:900;

  font-size:11px;

  opacity:.92;

  letter-spacing:.6px;
}

/* =========================================
   HOW
========================================= */

.how-grid{
  display:grid;

  grid-template-columns:
    1.15fr .85fr;

  gap:18px;

  align-items:center;
}

.steps{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;

  margin-top:14px;
}

.step-card{
  padding:16px;

  display:flex;
  gap:12px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.03)
    );

  backdrop-filter:
    blur(16px);
}

.step-icon{
  width:44px;
  height:44px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      var(--tint1),
      var(--tint2)
    );

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;

  font-weight:1000;
}

.step-card h4{
  margin:0 0 6px;

  color:var(--text);
}

.how-image{
  overflow:hidden;
}

.how-image img{
  width:100%;
  height:390px;

  object-fit:cover;
}

/* =========================================
   FAQ
========================================= */

.faq{
  background:
    radial-gradient(
      900px 450px at 10% 0%,
      rgba(var(--brand1-rgb),.20),
      transparent 55%
    ),
    radial-gradient(
      900px 450px at 90% 0%,
      rgba(var(--brand2-rgb),.18),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      #0b1020,
      #050713
    );

  padding:72px 0;

  color:#fff;
}

.faq-grid{
  display:grid;

  grid-template-columns:
    .65fr 1.35fr;

  gap:18px;

  align-items:start;
}

.faq-icons{
  display:grid;

  grid-template-columns:
    repeat(2,120px);

  gap:14px;

  justify-content:center;
}

.qbox{
  width:120px;
  height:120px;

  border-radius:26px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:42px;

  font-weight:1000;

  color:#fff;

  backdrop-filter:
    blur(16px);

  box-shadow:
    0 18px 44px rgba(0,0,0,.26);
}

.qbox.yellow{
  background:
    linear-gradient(
      135deg,
      rgba(var(--brand1-rgb),.24),
      rgba(var(--brand2-rgb),.14)
    );
}

.qbox.orange{
  background:
    linear-gradient(
      135deg,
      rgba(var(--brand2-rgb),.24),
      rgba(var(--brand1-rgb),.14)
    );
}

.qbox.red{
  background:
    linear-gradient(
      135deg,
      rgba(var(--brand1-rgb),.20),
      rgba(var(--brand2-rgb),.12)
    );
}

.qbox.teal{
  background:
    linear-gradient(
      135deg,
      rgba(var(--brand2-rgb),.20),
      rgba(var(--brand1-rgb),.12)
    );
}

.faq-panel{
  padding:10px;
}

.faq-panel h3{
  margin:0 0 14px;

  font-size:
    clamp(18px,2.4vw,28px);
}

.faq-item{
  border-top:
    1px solid rgba(255,255,255,.12);

  padding:12px 0;
}

.faq-item summary{
  cursor:pointer;

  font-weight:1000;
}

.faq-item summary:hover{
  opacity:.92;
}

.faq-ans{
  margin-top:8px;

  color:
    rgba(255,255,255,.78);

  line-height:1.75;
}

/* =========================================
   BLOG
========================================= */

.section-blog-show{
  padding:80px 0;
}

.blog-container{
  max-width:820px;

  margin:auto;
}

.blog-breadcrumb{
  font-size:13px;

  margin-bottom:16px;

  color:var(--muted);
}

.blog-breadcrumb a{
  color:inherit;
}

.blog-header h1{
  font-size:
    clamp(28px,4vw,44px);

  margin:0 0 8px;
}

.blog-meta{
  color:var(--muted);

  font-size:14px;
}

.blog-featured{
  margin:32px 0;

  border-radius:18px;

  overflow:hidden;
}

.blog-featured img{
  width:100%;
  height:auto;
}

.blog-card{
  overflow:hidden;

  display:flex;
  flex-direction:column;

  height:100%;
}

.blog-img{
  position:relative;

  height:190px;

  overflow:hidden;

  background:
    radial-gradient(
      500px 240px at 15% 20%,
      rgba(var(--brand1-rgb),.30),
      transparent 60%
    ),
    radial-gradient(
      500px 240px at 85% 20%,
      rgba(var(--brand2-rgb),.24),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      rgba(var(--brand1-rgb),.18),
      rgba(var(--brand2-rgb),.16)
    );
}

.blog-img img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .45s ease;
}

.blog-card:hover .blog-img img{
  transform:scale(1.06);
}

.blog-body{
  padding:20px;

  display:flex;
  flex-direction:column;

  gap:10px;
}

.blog-date{
  font-size:13px;

  color:var(--muted);
}

.blog-body h4{
  font-size:18px;

  line-height:1.35;

  margin:0;

  color:var(--text);
}

.blog-body p{
  font-size:14px;

  color:var(--muted);

  flex-grow:1;

  margin:0;
}

.readmore{
  font-weight:900;

  color:var(--brand1);

  font-size:13px;
}

.readmore:hover{
  text-decoration:underline;
}

.blog-content{
  font-size:17px;

  line-height:1.85;

  color:var(--text);
}

.blog-content p{
  margin-bottom:20px;
}

.blog-back{
  margin-top:40px;
}

/* =========================================
   CTA
========================================= */

.cta-card{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  border-radius:
    var(--radius2);

  overflow:hidden;

  border:
    1px solid var(--glass-border);

  box-shadow:
    var(--shadow2);
}

.cta-img{
  min-height:260px;

  background:
    var(--img-bg);

  background-size:cover;
  background-position:center;
}

.cta-body{
  background:
    radial-gradient(
      700px 320px at 10% 0%,
      rgba(var(--brand1-rgb),.20),
      transparent 60%
    ),
    radial-gradient(
      700px 320px at 90% 0%,
      rgba(var(--brand2-rgb),.16),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #0b1020,
      #050713
    );

  color:#fff;

  padding:30px;

  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center;
}

.cta-body h3{
  margin:0;

  font-size:
    clamp(20px,2.4vw,28px);
}

.cta-body .muted{
  color:
    rgba(255,255,255,.76);
}

/* CONTACT */
/* =========================================
   CONTACT
========================================= */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}

.contact-cards{
  display:grid;
  gap:12px;
  margin-top:14px;
}

.info-card{
  padding:16px;

  display:flex;
  gap:12px;
  align-items:center;

  background:var(--glass);
  border:1px solid var(--glass-border);

  backdrop-filter:blur(16px);

  border-radius:var(--radius);

  box-shadow:var(--shadow3);
}

.info-card i{
  color:var(--brand1);
  font-size:18px;
}

.form-card{
  padding:22px;

  background:var(--glass);
  border:1px solid var(--glass-border);

  backdrop-filter:blur(18px);

  border-radius:var(--radius2);

  box-shadow:var(--shadow);
}

.field label{
  display:block;

  font-weight:1000;
  font-size:12px;

  margin-bottom:6px;

  color:var(--text);
}

.field input,
.field textarea{
  width:100%;

  border:1px solid rgba(255,255,255,.10);

  border-radius:16px;

  padding:12px;

  font-family:inherit;

  background:rgba(255,255,255,.04);

  color:var(--text);

  backdrop-filter:blur(10px);

  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder{
  color:var(--muted);
}

.field input:focus,
.field textarea:focus{
  border-color:rgba(var(--brand1-rgb),.35);

  background:rgba(255,255,255,.06);

  box-shadow:var(--focus);
}

.alert{
  padding:12px;

  border-radius:14px;

  margin-bottom:12px;

  font-weight:800;

  backdrop-filter:blur(12px);
}

.alert.success{
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.25);

  color:#86efac;
}

.alert.error{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.25);

  color:#fca5a5;
}

/* =========================================
   FOOTER
========================================= */

.site-footer{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.02)
    ) !important;

  color:var(--text) !important;

  margin-top:70px;

  padding-left:clamp(16px,4vw,40px);
  padding-right:clamp(16px,4vw,40px);

  border-top:1px solid var(--glass-border);

  backdrop-filter:blur(18px);
}

/* footer container alignment */

.site-footer .container{
  padding-left:0;
  padding-right:0;
}

/* =========================================
   FOOTER GRID
========================================= */

.footer-grid{
  display:grid;

  grid-template-columns:
    1.4fr 1fr 1fr 1fr;

  gap:22px;

  padding:64px 0;

  align-items:start;
}

/* =========================================
   TITLES
========================================= */

.site-footer h5,
.footer-title{
  color:var(--text) !important;

  margin:0 0 12px;

  font-weight:1000;
  font-size:14px;

  letter-spacing:.02em;
}

/* =========================================
   LINKS
========================================= */

.site-footer a{
  display:block;

  color:
    rgba(255,255,255,.72) !important;

  padding:7px 0;

  font-weight:850;

  transition:
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.site-footer a:hover{
  color:var(--brand1) !important;

  transform:translateX(2px);
}

/* =========================================
   ABOUT TEXT
========================================= */

.footer-about{
  color:
    rgba(255,255,255,.66) !important;
}

/* =========================================
   BRAND NAME
========================================= */

.footer-brandname{
  color:var(--text) !important;
}

/* =========================================
   SOCIAL BUTTONS
========================================= */

.footer-socials{
  display:flex;
  align-items:center;
  gap:10px;

  flex-wrap:nowrap;
}

.social-btn{
  width:42px;
  height:42px;

  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    rgba(255,255,255,.06);

  border:
    1px solid var(--glass-border);

  color:var(--brand1);

  backdrop-filter:
    blur(14px);

  box-shadow:
    0 10px 24px rgba(0,0,0,.20);

  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.social-btn:hover{
  transform:translateY(-2px);

  border-color:
    rgba(var(--brand1-rgb),.35);

  background:
    rgba(255,255,255,.10);

  box-shadow:
    0 16px 40px rgba(0,0,0,.28);
}

/* =========================================
   CONTACT ROWS
========================================= */

.contact-row{
  display:flex;
  align-items:center;

  gap:10px;

  padding:6px 0;

  color:
    rgba(255,255,255,.72) !important;
}

.contact-row a{
  display:inline-flex;
  align-items:center;

  gap:10px;

  color:
    rgba(255,255,255,.72) !important;

  font-weight:850;
}

.contact-row a:hover{
  color:var(--brand1) !important;
}

.contact-ico{
  width:34px;
  height:34px;

  flex-shrink:0;

  border-radius:12px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid var(--glass-border);

  background:
    rgba(255,255,255,.06);

  color:var(--brand1);

  backdrop-filter:
    blur(12px);
}


/* =========================================
   TRUST STRIP
========================================= */

.footer-trust{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.02)
    ) !important;

  border-top:
    1px solid var(--glass-border);

  border-bottom:
    1px solid var(--glass-border);

  backdrop-filter:
    blur(18px);
}

.footer-trust-inner{
  padding:18px 0;

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:16px;
}

.trust-item{
  display:flex;

  gap:12px;

  align-items:flex-start;

  padding:14px;

  border-radius:18px;

  background:
    rgba(255,255,255,.05);

  border:
    1px solid var(--glass-border);

  backdrop-filter:
    blur(16px);

  box-shadow:
    var(--shadow3);
}

.trust-ico{
  width:64px;
  height:44px;

  border-radius:14px;

  border:
    1px solid var(--glass-border);

  background:
    linear-gradient(
      135deg,
      rgba(var(--brand1-rgb),.12),
      rgba(var(--brand2-rgb),.08)
    );

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  backdrop-filter:
    blur(12px);
}

.trust-title{
  color:var(--text) !important;

  font-weight:1000;

  font-size:13px;

  margin-top:1px;
}

.trust-desc{
  margin-top:4px;

  font-size:12px;

  color:
    rgba(255,255,255,.68) !important;

  line-height:1.45;
}

/* =========================================
   FOOTER BOTTOM
========================================= */

.footer-bottom{
  border-top:
    1px solid var(--glass-border);

  padding:16px 0;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  flex-wrap:wrap;
}

.footer-bottom .container{
  padding:14px 0;

  color:
    rgba(255,255,255,.64) !important;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:980px){

  .footer-trust-inner{
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }
}

.footer-trust-inner.trust-count-1{
  grid-template-columns:1fr;
}

.footer-trust-inner.trust-count-2{
  grid-template-columns:
    repeat(2,minmax(0,1fr));
}

@media (max-width:980px){

  .footer-trust-inner{
    grid-template-columns:1fr !important;
  }
}

/* =========================================
   MOBILE MENU
========================================= */

.mobile-menu{
  position:fixed;

  inset:0;

  display:none;

  z-index:120;
}

.mobile-menu.open{
  display:block;
}

.mobile-backdrop{
  position:absolute;

  inset:0;

  background:
    rgba(0,0,0,.68);

  backdrop-filter:
    blur(8px);
}

.mobile-panel{
  position:absolute;

  right:0;
  top:0;

  height:100%;

  width:
    min(390px,92vw);

  background:
    radial-gradient(
      700px 260px at 20% 0%,
      rgba(var(--brand1-rgb),.18),
      transparent 60%
    ),
    radial-gradient(
      700px 260px at 80% 0%,
      rgba(var(--brand2-rgb),.14),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #0b1020,
      #050713
    );

  border-left:
    1px solid var(--glass-border);

  backdrop-filter:
    blur(24px);

  padding:16px;

  display:flex;
  flex-direction:column;

  gap:12px;

  animation:
    slideIn var(--dur) var(--ease) both;
}

@keyframes slideIn{
  from{
    transform:translateX(16px);
    opacity:0;
  }

  to{
    transform:translateX(0);
    opacity:1;
  }
}

.mobile-head{
  display:flex;

  justify-content:space-between;

  align-items:center;
}

.mobile-panel a{
  padding:14px;

  border-radius:16px;

  background:
    rgba(255,255,255,.06);

  border:
    1px solid var(--glass-border);

  color:#fff;

  font-weight:1000;

  backdrop-filter:
    blur(14px);

  transition:
    background var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.mobile-panel a:hover{
  background:
    rgba(255,255,255,.10);

  border-color:
    rgba(var(--brand1-rgb),.22);

  transform:
    translateY(-1px);
}

.mobile-panel .x{
  background:
    rgba(255,255,255,.08);

  border:
    1px solid var(--glass-border);

  color:#fff;

  padding:10px 12px;

  border-radius:12px;

  cursor:pointer;

  backdrop-filter:
    blur(12px);

  transition:
    background var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.mobile-panel .x:hover{
  background:
    rgba(255,255,255,.12);

  transform:
    translateY(-1px);
}
@media (max-width: 1024px){
  .blog-img{height:170px}
}

@media (max-width: 980px){
  .nav-links{display:none}
  .burger{display:inline-flex}
  .hero-inner{grid-template-columns:1fr}
  .hero-right{display:none}
  .hero-left{padding:42px 0}
  .hero-accent{height:210px}
  .stats-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .cta-card{grid-template-columns:1fr}
  .cta-img{min-height:220px}
  .hero-controls{bottom:64px}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 720px){
  .section-head{flex-direction:column;align-items:flex-start}
  .tx-head,.tx-row{grid-template-columns:1.2fr .8fr}
  .tx-head div:last-child, .tx-row div:last-child{display:none}
  .faq-icons{grid-template-columns:repeat(2,110px)}
  .qbox{width:110px;height:110px}
  .hero-controls{flex-direction:column;gap:12px;align-items:flex-start}
  .hero-arrows{align-self:flex-end}
  .footer-grid{grid-template-columns:1fr}
}

@media (max-width: 560px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .hero-strip{height:52px}
  .blog-img{height:190px}
  .footer-trust-inner{grid-template-columns:1fr !important}
}

/* Trust count utility (keep yours) */
.footer-trust-inner.trust-count-1{grid-template-columns:1fr}
.footer-trust-inner.trust-count-2{grid-template-columns:repeat(2, minmax(0, 1fr))}

/* =========================
   HEADER + NAV (POLISHED)
========================= */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(5,7,19,.62);
  backdrop-filter: blur(18px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav-wrap{
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{height:34px}
.brand-text{color:#fff;font-weight:1000;letter-spacing:.3px;white-space:nowrap}

.nav-links{display:flex;gap:8px}
.nav-links a{
  color:rgba(255,255,255,.86);
  font-weight:900;font-size:13px;
  padding:10px 12px;border-radius:14px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-links a.active,
.nav-links a:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  transform:translateY(-1px);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* Make buttons consistent in header */
.nav-actions .btn{
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;
  white-space:nowrap;
}

/* =========================
   OUTLINE BUTTON (LOGIN)
========================= */
.btn-outline{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:none;
}
.btn-outline:hover{
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
}

/* =========================
   BURGER
========================= */
.burger{
  display:none;
  width:46px;height:46px;
  border-radius:14px;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  cursor:pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.burger:hover{transform:translateY(-1px); background:rgba(255,255,255,.14)}

/* =========================
   LANGUAGE DROPDOWN (CLEAN)
========================= */
.lang-dd{position:relative}

.lang-trigger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:46px;
  padding:0 12px;
  border-radius:14px;

  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:900;
  font-size:13px;
  cursor:pointer;

  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lang-trigger:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-1px);
}
.lang-flag{font-size:15px;line-height:1}

/* dropdown menu panel */
/* MUST: menu hidden by default */
.lang-dd{ position:relative; }
.lang-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:240px;
  max-height:320px;
  overflow:auto;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(5,7,19,.86);

  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  display:none;
  z-index:9999;
}

/* MUST: show when open */
.lang-dd.open .lang-menu{ display:block; }


/* show when open: add .open via JS */
.lang-dd.open .lang-menu{display:block}

/* language items you inject with JS */
.lang-menu button,
.lang-menu a{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:12px 12px;
  border-radius:14px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);

  color:#fff;
  font-weight:900;
  font-size:13px;
  cursor:pointer;

  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lang-menu button:hover,
.lang-menu a:hover{
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
}

/* small divider option */
.lang-menu .divider{
  height:1px;
  background:rgba(255,255,255,.12);
  margin:8px 6px;
  border-radius:99px;
}

/* =========================
   RESPONSIVE NAV
========================= */
@media (max-width: 980px){
  .nav-links{display:none}
  .burger{display:inline-flex}
}
.lang-menu button{
  width:100%;
  text-align:left;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  padding:12px 12px;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
}
.blog-thumb{
  position:relative;
  height:190px;
  overflow:hidden;
  padding:0;
  background:none;
}
.blog-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  border:0;
  box-shadow:none;
}

/* FORCE translator visible inside mobile sidebar */
@media (max-width: 980px){

  /* hide translator in header/nav (if you have one there) */
  .site-header .lang-dd,
  .site-header .lang-trigger,
  .site-header .lang-menu{
    display:none !important;
  }

  /* show translator in mobile menu */
  #langDDMobile{ display:block !important; margin-top:10px; }

  #langDDMobile .lang-trigger{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:14px !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    color:#fff !important;
    font-weight:1000;
  }

  /* dropdown menu MUST be static inside sidebar */
  #langDDMobile .lang-menu{
    position:static !important;
    width:100% !important;
    margin-top:10px;
    display:none; /* closed by default */
  }
  #langDDMobile.open .lang-menu{ display:block; }

  #langDDMobile .lang-menu button{
    width:100%;
    text-align:left;
    padding:12px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    font-weight:900;
    cursor:pointer;
    margin-bottom:8px;
  }
}
@media (max-width: 560px){
  .hero-pager{
    margin-top:6px !important;
    transform: translateY(-8px);
  }
}
/* =========================
   HERO COUNTER POSITION FIX
   Phones + Small Tablets
========================= */
@media (max-width: 900px){

  .hero-pager{
    margin-top:8px !important;          /* reduce push-down */
    transform: translateY(-10px);       /* lift it up */
  }

  .hero-left{
    padding-top:32px !important;        /* tighten vertical spacing */
    padding-bottom:28px !important;
  }

}