:root{
  --brand:#183a84;
  --brand-700:#12275a;
  --brand-100:#e3ebff;
  --surface:#f8fafc;
  --page:#f1f5f9;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --line-2:#e5e7eb;
  --chip:#cbd5f5;
  --shadow:rgba(15,23,42,.18);
  --shadow-soft:rgba(15,23,42,.08);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:radial-gradient(circle at top,#f9fbff 0,#eef2ff 40%,#edf2f7 100%);
  min-height:100%;
}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* Logo – keep aspect ratio */
.logo{
  max-height:42px;
  width:auto;
  height:auto;
  display:block;
}


/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--chip);
  background:#ffffff;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(15,23,42,.08);
  transition:box-shadow .16s ease,transform .16s ease,background .16s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(15,23,42,.15);
}
.btn.small{padding:6px 12px;font-size:13px}
.btn.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-700));
  color:#fff;
  border-color:transparent;
}
.btn.primary:hover{
  box-shadow:0 10px 26px rgba(24,58,132,.35);
}
.btn.ghost{background:#ffffff;color:var(--brand);border-color:var(--line)}

.section-desc{
  max-width:640px;
  margin:6px auto 20px;
  text-align:center;
  font-size:14px;
  color:var(--muted);
}

/* ───────────── HEADER ───────────── */

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(226,232,240,.9);
}
/* Admin login button in header */
.admin-login{
  margin-left:6px;
  font-weight:600;
}

/* Mobile fix: keep nav clean */
@media (max-width:640px){
  .admin-login{
    width:100%;
    justify-content:center;
  }
}

.topbar-inner{
  max-width:1180px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand-box{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.brand-sub{
  font-size:11px;
  color:var(--muted);
}
.nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.nav a{
  font-size:14px;
  color:#475569;
  padding:4px 8px;
  border-radius:999px;
}
.nav a:hover{
  background:#e5edff;
  text-decoration:none;
}

/* ───────────── HERO ───────────── */

.hero{
  max-width:1180px;
  margin:40px auto 32px;
  padding:8px 20px 16px;
  display:grid;
  grid-template-columns:0.9fr 1.3fr; /* more space for image */
  gap:40px;
  align-items:center;
}

.eyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--brand-700);
  margin:0 0 10px;
}
.hero-text h1{
  margin:0 0 12px;
  font-size:38px;
  line-height:1.12;
  color:#020617;
}
.hero-bullets{
  margin:0 0 14px;
  padding-left:18px;
  font-size:14px;
  color:var(--muted);
}
.hero-bullets li{margin-bottom:4px}
.hero-note{
  margin-top:12px;
  font-size:13px;
  color:#6b7280;
}
.cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

.hero-media{
  position:relative;
}
.hero-badge{
  position:absolute;
  top:-16px;
  right:4px;
  background:linear-gradient(135deg,#183a84,#1e293b);
  color:#e5e7eb;
  padding:10px 14px;
  border-radius:16px;
  font-size:12px;
  box-shadow:0 18px 40px rgba(15,23,42,.28);
  max-width:240px;
  z-index:2;
}
.hero-badge span{
  display:block;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.13em;
  opacity:.85;
}
.hero-badge strong{
  display:block;
  margin-top:4px;
  font-size:13px;
  line-height:1.3;
}

/* Carousel wrapper */
.carousel{
  margin-top:32px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--line-2);
  background:radial-gradient(circle at top left,#e0ebff,#ffffff);
  box-shadow:0 22px 60px rgba(15,23,42,.16);
}
.slide{display:none}
.slide.active{
  display:block;
  animation:fade .45s ease-out;
}
.slide img{width:100%;display:block}
.slide.placeholder{
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  
}
.hero-media{
  position:relative;
}

.hero .carousel{
  margin-top:10px;
  border-radius:28px;
  box-shadow:0 26px 70px rgba(15,23,42,.18);
}

.slide.placeholder .ph-inner{
  padding:20px;
  text-align:center;
  font-size:14px;
  color:var(--muted);
}
@keyframes fade{
  from{opacity:.2;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

/* ───────────── SECTION BG UTILITIES ───────────── */

/* Use these classes on any section: e.g. <section class="features bg-photo-1"> */
.bg-photo-1{
  position:relative;
  color:#f9fafb;
}
.bg-photo-1::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(135deg,rgba(15,23,42,.88),rgba(15,23,42,.92)),
    url("../img/section-bg-1.jpg") center/cover no-repeat;
}
.bg-photo-1 .fcard,
.bg-photo-1 .who-card,
.bg-photo-1 .step,
.bg-photo-1 .plan{
  background:rgba(255,255,255,.96);
}
/* Section “depth” images */
.section-image{
  max-width:1180px;
  margin:0 auto 22px;
  padding:0 20px;
}

.section-image img{
  width:100%;
  height:280px;            /* controls how tall it feels */
  max-height:320px;
  object-fit:cover;        /* crop tall photos nicely */
  border-radius:24px;
  box-shadow:0 26px 70px rgba(15,23,42,.18);
}


/* Light photo background (for very subtle use) */
.bg-photo-soft{
  position:relative;
}
.bg-photo-soft::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.18;
  background:url("../img/section-bg-soft.jpg") center/cover no-repeat;
}

/* ───────────── STORY / ABOUT ───────────── */

.story{
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  padding:54px 20px 56px;
  background:#ffffff;
  box-shadow:0 24px 70px rgba(15,23,42,.06);
  border-radius:24px;
}
.story-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
}
.story h2{
  margin:0 0 10px;
  font-size:28px;
  color:#0f172a;
}
.story p{
  font-size:14px;
  color:var(--muted);
}
.story-quote{
  background:radial-gradient(circle at top,#1f2937,#020617);
  color:#e5e7eb;
  border-radius:20px;
  padding:20px 18px 18px;
  box-shadow:0 24px 60px rgba(15,23,42,.35);
  font-size:14px;
}
.story-author{
  display:block;
  margin-top:10px;
  font-size:13px;
  opacity:.92;
}
.story-tag{
  display:inline-block;
  margin-top:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(148,163,184,.25);
  border:1px solid rgba(148,163,184,.4);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* ───────────── FEATURES ───────────── */

.features{
  background:#f8fafc;
  border-bottom:1px solid rgba(148,163,184,.35);
  padding:60px 20px 56px;
}
.features h2{
  font-size:28px;
  text-align:center;
  margin:0;
  color:#0f172a;
}
.feature-switch{
  margin:18px auto 18px;
  display:flex;
  justify-content:center;
  gap:6px;
}
.fs-tab{
  border-radius:999px;
  padding:6px 14px;
  font-size:12px;
  border:1px solid var(--line);
  background:#ffffff;
  cursor:pointer;
  color:#475569;
}
.fs-tab-active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  box-shadow:0 8px 24px rgba(24,58,132,.25);
}
.grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.fcard{
  background:#ffffff;
  border-radius:22px;
  padding:18px 18px 16px;
  border:1px solid var(--line);
  box-shadow:0 12px 42px var(--shadow-soft);
  font-size:14px;
}
.fcard .ic{
  width:72px;
  height:72px;
  border-radius:26px;
  background:var(--brand);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  box-shadow:0 12px 26px rgba(24,58,132,.35);
}
/* Clean single-color line icons */
.fcard .ic svg{
  width:38px;
  height:38px;
}
.fcard .ic svg,
.fcard .ic svg *{
  fill:none!important;
  stroke:#ffffff!important;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.fcard h3{
  margin:0 0 6px;
  font-size:16px;
  color:var(--ink);
}
.fcard p{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.fs-panel{display:none}
.fs-panel-active{display:grid}

/* ───────────── WHO IT'S FOR ───────────── */

.who{
  background:#ffffff;
  padding:60px 20px 56px;
}
.who h2{
  font-size:28px;
  text-align:center;
  margin:0;
  color:#0f172a;
}
.who-grid{
  max-width:900px;
  margin:18px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.who-card{
  background:#f1f5f9;
  border-radius:18px;
  padding:14px;
  text-align:center;
  font-size:14px;
  border:1px solid var(--line);
  box-shadow:0 8px 26px rgba(148,163,184,.25);
}
.who-card span{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

/* ───────────── STEPS ───────────── */

.steps{
  background:#f8fafc;
  padding:60px 20px 56px;
}
.steps h2{
  font-size:28px;
  text-align:center;
  margin:0 0 16px;
  color:#0f172a;
}
.timeline{
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.step{
  position:relative;
  background:#ffffff;
  border-radius:22px;
  padding:18px;
  border:1px solid var(--line);
  box-shadow:0 10px 30px var(--shadow-soft);
  font-size:14px;
}
.step b{
  position:absolute;
  top:-12px;
  left:-12px;
  height:32px;
  width:32px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 28px rgba(24,58,132,.4);
  font-size:14px;
}
.step h4{
  margin:4px 0 6px;
  font-size:15px;
}
.step p{
  margin:0;
  color:var(--muted);
}

/* ───────────── PRICING ───────────── */

/* =========================
   PRICING – COLORFUL PREMIUM LOOK (LIKE YOUR IMAGE)
   Paste at VERY BOTTOM of base.css
   ========================= */

.pricing{
  position:relative;
  padding:74px 16px 84px;
  display:flex;
  flex-direction:column;
  align-items:center;

  /* bright premium backdrop */
  background:
    radial-gradient(circle at 25% 0%, rgba(59,130,246,.28) 0%, rgba(59,130,246,0) 45%),
    radial-gradient(circle at 80% 20%, rgba(99,102,241,.22) 0%, rgba(99,102,241,0) 46%),
    radial-gradient(circle at 50% 105%, rgba(14,165,233,.12) 0%, rgba(14,165,233,0) 55%),
    linear-gradient(180deg, #f8fbff 0%, #f1f6ff 55%, #f6f9ff 100%);
}

/* stronger spotlight behind heading */
.pricing::after{
  content:"";
  position:absolute;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  width:min(1100px, 94vw);
  height:260px;
  background:
    radial-gradient(circle at center, rgba(37,99,235,.22), rgba(37,99,235,0) 62%);
  pointer-events:none;
}

/* Heading = premium big */
.pricing h2{
  position:relative;
  z-index:1;
  text-align:center;
  font-size:44px;
  font-weight:1000;
  letter-spacing:-.035em;
  line-height:1.06;
  margin:0;
  color:#0b1220;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

.pricing .section-desc{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:820px;
  margin:14px auto 26px;
  font-size:18px;
  line-height:1.6;
  color:#334155;
}
.pricing .section-desc b,
.pricing .section-desc strong{
  color:#0b1220;
}

/* Toggle row */
.pricing-toggle-row{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  margin:16px auto 30px;
}

/* Glossy pill toggle like your image */
.billing-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:7px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(148,163,184,.45);
  box-shadow:
    0 22px 70px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  overflow:hidden;
  min-width:min(620px, 92vw);
}

/* “shine” on the toggle container */
.billing-toggle::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}

.billing-toggle button{
  flex:1;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:16px 26px;
  font-weight:1000;
  font-size:22px;
  border-radius:999px;
  color:#0f172a;
  transition:all .18s ease;
  position:relative;
  z-index:1;
}

/* Active = deep blue glossy */
.billing-toggle button.active{
  color:#ffffff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(135deg, #0b1a44 0%, #183a84 45%, #2563eb 100%);
  box-shadow:
    0 18px 60px rgba(37,99,235,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* Card container centered + slightly smaller */
.single-plan-box{
  width:100%;
  max-width:760px !important;
  margin:0 auto !important;
}

/* Card = colorful premium gradient + glow */
.plan.plan-featured{
  position:relative;
  width:100%;
  margin:0 auto !important;
  border-radius:36px;
  padding:30px 30px 24px;
  color:#ffffff;

  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 90% 10%, rgba(99,102,241,.22) 0%, rgba(99,102,241,0) 45%),
    linear-gradient(135deg, #0b1a44 0%, #143a9a 35%, #2563eb 70%, #0ea5e9 120%);

  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 44px 120px rgba(2,6,23,.38),
    inset 0 1px 0 rgba(255,255,255,.20);
}

/* Big glow behind card (like your ref) */
.plan.plan-featured::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:44px;
  background:
    radial-gradient(circle at 20% 30%, rgba(59,130,246,.55), rgba(59,130,246,0) 60%),
    radial-gradient(circle at 80% 20%, rgba(99,102,241,.45), rgba(99,102,241,0) 58%);
  filter:blur(26px);
  opacity:.65;
  z-index:-1;
}

/* MOST POPULAR pill – darker + glossy */
.popular-pill{
  display:inline-flex;
  align-items:center;
  padding:12px 22px;
  border-radius:999px;
  font-weight:1000;
  letter-spacing:.18em;
  font-size:14px;
  background:rgba(11,26,68,.55);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 22px 70px rgba(0,0,0,.25);
  margin-bottom:18px;
}

/* Price bigger + cleaner */
.plan.plan-featured .price-value{font-size:64px; font-weight:1000;}
.plan.plan-featured .price-unit{font-size:22px; opacity:.95; margin-bottom:8px;}
.plan.plan-featured .small{font-size:17px; opacity:.9;}

/* list spacing */
.plan.plan-featured li{
  font-size:18px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.plan.plan-featured li:last-child{border-bottom:none;}

/* CTA = bold white pill */
.plan.plan-featured .plan-cta{
  display:flex;
  width:100%;
  justify-content:center;
  padding:18px 22px;
  border-radius:18px;
  font-size:22px;
  font-weight:1000;
  text-decoration:none;
  background:#ffffff;
  color:#0b1a44;
  box-shadow:0 30px 90px rgba(0,0,0,.28);
  transition:transform .16s ease, box-shadow .16s ease;
}
.plan.plan-featured .plan-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 40px 120px rgba(0,0,0,.30);
}

/* Mobile */
@media (max-width:640px){
  .pricing h2{font-size:34px;}
  .pricing .section-desc{font-size:16px;}
  .billing-toggle{min-width:92vw;}
  .billing-toggle button{font-size:18px;padding:12px 16px;}
  .plan.plan-featured{padding:24px 18px 20px;border-radius:28px;}
  .plan.plan-featured::before{display:none;}
  .plan.plan-featured .price-value{font-size:54px;}
  .plan.plan-featured li{font-size:16px;}
  .plan.plan-featured .plan-cta{font-size:18px;padding:16px 18px;}
}












/* ───────────── REGISTER SECTION (IMAGE BG) ───────────── */

.register{
  color:#e5e7eb;
  padding:70px 20px 64px;
  background:
    linear-gradient(135deg,rgba(24,58,132,.95),rgba(30,41,59,.96)),
    url("../img/fenuva-bg.jpg") center/cover no-repeat;
  box-shadow:0 24px 80px rgba(15,23,42,.45);
  border-radius:24px;
}
.reg-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
}
.reg-copy h2{
  margin:0 0 10px;
  font-size:26px;
}
.reg-copy p{
  font-size:14px;
  color:#e0ecff;
}
.reg-copy ul{
  margin:10px 0 0;
  padding-left:18px;
  font-size:13px;
}
.reg-copy li{margin-bottom:4px}

.reg-form{
  background:rgba(2,6,23,.96);
  border-radius:20px;
  padding:18px;
  border:1px solid #1e293b;
  box-shadow:0 20px 50px rgba(15,23,42,.75);
}
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.reg-form input,
.reg-form textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #1f2937;
  background:#020617;
  color:#e5e7eb;
  font-size:13px;
}
.reg-form input::placeholder,
.reg-form textarea::placeholder{
  color:#6b7280;
}
.reg-form input:focus,
.reg-form textarea:focus{
  outline:none;
  border-color:var(--brand-100);
  box-shadow:0 0 0 1px var(--brand-100);
}
.reg-form textarea{
  min-height:100px;
  resize:vertical;
}
.reg-privacy{
  font-size:11px;
  color:#94a3b8;
  margin-top:8px;
}
.reg-form .form-msg{
  margin-top:6px;
  font-size:13px;
}

/* ───────────── FAQ ───────────── */

.faq{
  max-width:900px;
  margin:0 auto 40px;
  padding:60px 20px 24px;
}
.faq h2{
  font-size:26px;
  text-align:center;
  margin:0 0 14px;
  color:#0f172a;
}
details{
  background:#ffffff;
  border-radius:16px;
  border:1px solid var(--line);
  padding:10px 12px;
  margin:9px 0;
  font-size:14px;
  box-shadow:0 8px 26px var(--shadow-soft);
}
details summary{
  cursor:pointer;
  font-weight:500;
  color:var(--ink);
}
details p{
  margin:6px 0 2px;
  color:var(--muted);
}

/* ───────────── FOOTER ───────────── */

.footer{
  max-width:1180px;
  margin:0 auto;
  padding:16px 20px 24px;
  border-top:1px solid rgba(148,163,184,.35);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:#6b7280;
}

/* ───────────── CHAT LAUNCHER & PANEL ───────────── */

.chat-launcher{
  position:fixed;
  right:18px;
  bottom:18px;
  height:56px;
  width:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-700));
  cursor:pointer;
  box-shadow:0 14px 32px rgba(15,23,42,.4);
  z-index:60;
  animation:pulse 2.8s ease-in-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 10px 26px rgba(15,23,42,.16)}
  50%{box-shadow:0 16px 40px rgba(15,23,42,.32)}
  100%{box-shadow:0 10px 26px rgba(15,23,42,.16)}
}
.chat-launcher::before{
  content:"";
  display:block;
  width:26px;
  height:19px;
  border-radius:8px;
  border:2px solid #ffffff;
  box-sizing:border-box;
  position:relative;
  box-shadow:
    -7px 0 0 0 #ffffff,
     0   0 0 0 #ffffff,
     7px 0 0 0 #ffffff;
}
.chat-launcher::after{
  content:"";
  position:absolute;
  bottom:16px;
  right:14px;
  width:8px;
  height:8px;
  border-radius:3px;
  border:2px solid #ffffff;
  border-top-color:transparent;
  border-left-color:transparent;
  transform:rotate(28deg);
  box-sizing:border-box;
}

/* Chat panel */
.chat-panel{
  position:fixed;
  right:18px;
  bottom:86px;
  width:340px;
  max-height:72vh;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:18px;
  display:flex;
  flex-direction:column;
  box-shadow:0 24px 64px rgba(15,23,42,.5);
  overflow:hidden;
  z-index:60;
  transform-origin:bottom right;
}
.fadeInUp{animation:fadeInUp .18s ease-out both}
.fadeOutDown{animation:fadeOutDown .18s ease-in both}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fadeOutDown{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(12px) scale(.98)}
}

.chat-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  background:linear-gradient(180deg,var(--brand),var(--brand-700));
  color:#ffffff;
}
.chat-head .btn.small{
  background:#fff;
  color:var(--brand-700);
  border-color:#fff;
}
.chat-log{
  flex:1;
  overflow:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:#f9fafb;
}
.msg{
  padding:10px 12px;
  border-radius:16px;
  max-width:86%;
  line-height:1.4;
  font-size:13px;
  animation:pop .14s ease-out;
}
@keyframes pop{
  from{transform:scale(.98);opacity:.85}
  to{transform:scale(1);opacity:1}
}
.msg.user{
  align-self:flex-end;
  background:var(--brand-100);
  border:1px solid var(--chip);
}
.msg.bot{
  align-self:flex-start;
  background:#ffffff;
  border:1px solid var(--line);
  box-shadow:0 2px 10px var(--shadow-soft);
}

.chat-form{
  display:flex;
  gap:8px;
  padding:10px;
  background:#ffffff;
  border-top:1px solid var(--line-2);
}
.chat-form input{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #d9e7fb;
  font-size:13px;
}
.chat-form input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand-100);
}

.chat-foot{
  padding:8px 10px;
  background:#f8fafc;
  border-top:1px dashed var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.chips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.chip{
  background:#ffffff;
  border-radius:999px;
  border:1px solid var(--chip);
  padding:5px 9px;
  font-size:11px;
  color:var(--brand-700);
  cursor:pointer;
}
.msg.typing{
  display:flex;
  gap:4px;
  align-items:center;
  background:#ffffff;
  border-radius:16px;
  border:1px solid var(--line);
}
.msg.typing .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#9ca3af;
  animation:blink 1s infinite;
}
.msg.typing .dot:nth-child(2){animation-delay:.2s}
.msg.typing .dot:nth-child(3){animation-delay:.4s}
@keyframes blink{
  0%,80%,100%{opacity:.2}
  40%{opacity:1}
}

/* Admin wrapper */
.admin-wrap{
  max-width:1180px;
  margin:16px auto 24px;
  padding:0 16px 24px;
}

/* ───────────── RESPONSIVE ───────────── */

@media (max-width:900px){
  .hero,
  .story-inner,
  .reg-inner{
    grid-template-columns:1fr;
  }
  .hero{
    margin-top:18px;
    padding:16px 16px 12px;
  }
  .plans{grid-template-columns:1fr;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .timeline{grid-template-columns:1fr;}
  .who-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:640px){
  .topbar-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .grid,
  .who-grid{
    grid-template-columns:1fr;
  }
  .grid2{
    grid-template-columns:1fr;
  }
  .hero{
    padding-top:20px;
    padding-bottom:20px;
  }
  .story,
  .features,
  .who,
  .steps,
  .pricing,
  .register,
  .faq{
    border-radius:0;
    box-shadow:none;
  }
}


/* =========================
   PRICING – TOGGLE + COLORFUL PREMIUM (CARD ONLY)
   Paste at VERY BOTTOM of base.css
   ========================= */

/* Toggle inside the pricing card */
.plan.plan-featured .plan-switch{
  margin:10px 0 18px;
  width:100%;
  max-width:560px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:7px;
  display:flex;
  gap:7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

.plan.plan-featured .plan-switch .ps-btn{
  flex:1;
  border:0;
  cursor:pointer;
  border-radius:999px;
  padding:16px 18px;
  font-size:20px;
  font-weight:1000;
  background:transparent;
  color:rgba(255,255,255,.92);
  transition:all .18s ease;
}

.plan.plan-featured .plan-switch .ps-btn.active{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, #0b1a44 0%, #183a84 45%, #2563eb 100%);
  color:#fff;
  box-shadow:0 18px 60px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Monthly card background */
.plan.plan-featured.is-monthly{
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(135deg, #0b1a44 0%, #143a9a 35%, #2563eb 75%, #0ea5e9 120%);
}

/* Yearly card background */
.plan.plan-featured.is-yearly{
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(135deg, #0b1a44 0%, #2a2aa6 35%, #6366f1 70%, #0ea5e9 120%);
}

/* Mobile: make toggle fit */
@media (max-width:640px){
  .plan.plan-featured .plan-switch .ps-btn{
    font-size:17px;
    padding:12px 14px;
  }
}


/* =========================
   PRICING – SOLID COLOR PREMIUM CARD
   (No gradients, style only)
   ========================= */

/* Force ONE solid color for pricing card */
.plan.plan-featured{
  background:#0b2a6f !important; /* deep premium blue */
  border-radius:36px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 120px rgba(2,6,23,.45);
}

/* Remove any glow / gradient layers */
.plan.plan-featured::before,
.plan.plan-featured::after{
  display:none !important;
}

/* Monthly / Yearly should NOT change card color anymore */
.plan.plan-featured.is-monthly,
.plan.plan-featured.is-yearly{
  background:#0b2a6f !important;
}


/* =========================
   PRICING – ROOM INPUT (BIGGER + PREMIUM, SOLID STYLE)
   ========================= */

/* Make the whole room row look like a premium control */
.plan.plan-featured .room-select{
  margin:18px 0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

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

  background:rgba(255,255,255,.10);           /* solid style (no gradients) */
  border:1px solid rgba(255,255,255,.18);
}

/* Label bigger + clearer */
.plan.plan-featured .room-select label{
  font-size:18px;
  font-weight:900;
  color:rgba(255,255,255,.95);
  letter-spacing:-.01em;
}

/* Bigger input, centered, premium */
.plan.plan-featured .room-select input{
  width:120px;
  height:48px;
  padding:10px 12px;

  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);

  background:rgba(0,0,0,.25);                 /* solid (no gradients) */
  color:#ffffff;

  font-size:18px;
  font-weight:1000;
  text-align:center;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

/* Better focus ring */
.plan.plan-featured .room-select input:focus{
  outline:none;
  border-color:rgba(255,255,255,.45);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* Optional: make the note slightly stronger */
.plan.plan-featured .calc-note{
  font-size:17px;
  font-weight:800;
  color:rgba(255,255,255,.92);
}

/* Mobile: stack nicely */
@media (max-width:640px){
  .plan.plan-featured .room-select{
    flex-direction:column;
    align-items:flex-start;
  }
  .plan.plan-featured .room-select input{
    width:100%;
    max-width:220px;
  }
}


/* Toggle still works but uses solid style */
.plan.plan-featured .plan-switch{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.22);
}

/* Active toggle button – solid darker blue */
.plan.plan-featured .plan-switch .ps-btn.active{
  background:#081f52;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

/* MOST POPULAR pill – solid */
.popular-pill{
  background:#081f52;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:none;
}

/* Price emphasis */
.plan.plan-featured .price-value{
  color:#ffffff;
  text-shadow:none;
}

/* CTA button stays clean white */
.plan.plan-featured .plan-cta{
  background:#ffffff;
  color:#0b2a6f;
  box-shadow:0 28px 80px rgba(0,0,0,.35);
}

/* =========================
   GLOBAL SECTION SPACING
   (Adds breathing room between sections)
   ========================= */

/* Default spacing for all main sections */
.hero,
.story,
.features,
.steps,
.pricing,
.register,
.faq {
  margin-bottom:72px;
}

/* Slightly tighter spacing on large screens */
@media (min-width:1200px){
  .hero,
  .story,
  .features,
  .steps,
  .pricing,
  .register,
  .faq {
    margin-bottom:84px;
  }
}

/* Mobile: reduce spacing so it doesn’t feel too tall */
@media (max-width:640px){
  .hero,
  .story,
  .features,
  .steps,
  .pricing,
  .register,
  .faq {
    margin-bottom:48px;
  }
}
/* Extra separation before pricing */
.pricing{
  margin-top:96px;
}

@media (max-width:640px){
  .pricing{
    margin-top:56px;
  }
}


/* =========================
   FEATURES – BIGGER & MORE PROMINENT
   ========================= */

/* Make the whole features section taller */
.features{
  padding:96px 20px 96px;   /* was smaller before */
}

/* Increase space between feature cards */
.features .grid{
  gap:28px;                 /* more breathing room */
}

/* Make feature cards bigger */
.fcard{
  padding:26px 26px 24px;   /* taller cards */
  border-radius:26px;
}

/* Bigger icon container */
.fcard .ic{
  width:86px;
  height:86px;
  border-radius:28px;
  margin-bottom:14px;
}

/* Slightly bigger icons */
.fcard .ic svg{
  width:44px;
  height:44px;
}

/* Bigger titles */
.fcard h3{
  font-size:18px;
  margin-bottom:8px;
}

/* Bigger description text */
.fcard p{
  font-size:14.5px;
  line-height:1.6;
}

/* Desktop: make cards feel wider */
@media (min-width:1200px){
  .features .grid{
    gap:32px;
  }
}

/* Mobile: keep it clean, not huge */
@media (max-width:640px){
  .features{
    padding:64px 16px 64px;
  }

  .fcard{
    padding:20px 20px 18px;
  }
}


/* =========================
   RESET FEATURES SIZE (back to normal)
   ========================= */
.features{
  padding:60px 20px 56px !important;
}
.features .grid{
  gap:18px !important;
}
.fcard{
  padding:18px 18px 16px !important;
  border-radius:22px !important;
}
.fcard .ic{
  width:72px !important;
  height:72px !important;
  border-radius:26px !important;
  margin-bottom:10px !important;
}
.fcard .ic svg{
  width:38px !important;
  height:38px !important;
}
.fcard h3{font-size:16px !important;}
.fcard p{font-size:13px !important;}


/* =========================
   STEPS – BIGGER + WIDER (match old upper section feel)
   ========================= */

/* Make the whole section taller */
.steps{
  padding:96px 20px 96px !important;
}

/* Make content area wider */
.steps .timeline{
  max-width:1180px !important;  /* wider than before */
  gap:26px !important;
}

/* Make each step card bigger */
.step{
  padding:26px 26px 24px !important;
  border-radius:26px !important;
  font-size:15px !important;
  box-shadow:0 18px 60px rgba(15,23,42,.10) !important;
}

/* Bigger step number badge */
.step b{
  height:38px !important;
  width:38px !important;
  font-size:15px !important;
  top:-16px !important;
  left:-16px !important;
}

/* Slightly bigger heading inside cards */
.step h4{
  font-size:16px !important;
  margin:6px 0 8px !important;
}

/* Better paragraph spacing */
.step p{
  font-size:14px !important;
  line-height:1.6 !important;
}

/* Mobile still clean */
@media (max-width:900px){
  .steps{padding:70px 16px 70px !important;}
  .steps .timeline{gap:18px !important;}
  .step{padding:20px 18px !important;}
}


/* =========================
   STEPS – WIDER + FEATURE-LIKE TEXT
   ========================= */

/* Make steps section feel wider */
.steps .timeline{
  max-width:1240px !important;   /* wider than before */
}

/* Make cards stretch more evenly */
@media (min-width:900px){
  .steps .timeline{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* Match text weight & clarity to Features section */
.step h4{
  font-size:17px !important;
  font-weight:600 !important;
  color:#0f172a !important;
}

.step p{
  font-size:14.5px !important;
  line-height:1.6 !important;
  color:#475569 !important;
}

/* Slightly soften card edges like feature cards */
.step{
  border-radius:24px !important;
  box-shadow:0 14px 42px rgba(15,23,42,.08) !important;
}

/* Make number badge feel more balanced */
.step b{
  height:36px !important;
  width:36px !important;
  font-size:14px !important;
}
/* =========================
   LAYOUT – WIDER / FIT TO SCREEN
   (reduce side gaps on desktop)
   ========================= */

/* Make all main containers wider */
.topbar-inner,
.hero,
.story-inner,
.grid,
.timeline,
.section-image,
.reg-inner,
.footer{
  max-width:1400px !important;   /* was 1180/900 etc */
}

/* Reduce side padding a bit (still keeps clean edges) */
.topbar-inner,
.hero,
.section-image,
.story,
.features,
.who,
.steps,
.pricing,
.register,
.faq,
.footer{
  padding-left:12px !important;
  padding-right:12px !important;
}

/* On very large screens, go even wider */
@media (min-width:1600px){
  .topbar-inner,
  .hero,
  .story-inner,
  .grid,
  .timeline,
  .section-image,
  .reg-inner,
  .footer{
    max-width:1560px !important;
  }
}

/* ───────── HERO CASE STUDY ───────── */
.hero-case{
  position:relative;
  overflow:hidden;
  padding:84px 0 34px;
  border-bottom:1px solid rgba(226,232,240,.8);
}

.hero-case-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  filter:saturate(1.05) contrast(1.02);
}

.hero-case-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(2,6,23,.15) 0%, rgba(2,6,23,.55) 55%, rgba(2,6,23,.78) 100%),
    radial-gradient(1200px 600px at 18% 22%, rgba(24,58,132,.35), transparent 60%),
    radial-gradient(900px 520px at 78% 64%, rgba(30,41,59,.28), transparent 58%);
}

.hero-case-inner{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:28px;
  align-items:center;
}

.hero-pill{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.08em;
  font-size:12px;
  color:#0b1220;
  background:rgba(255,255,255,.80);
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
}

.hero-case-left h1{
  margin:14px 0 10px;
  font-size:44px;
  line-height:1.06;
  color:#fff;
  text-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.hero-case-left h1 span{
  color:#e3ebff;
}

.hero-sub{
  margin:0 0 16px;
  max-width:560px;
  font-size:16px;
  line-height:1.55;
  color:rgba(255,255,255,.85);
}

.hero-cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 10px;
}
.hero-cta-row .btn.ghost{
  background:rgba(255,255,255,.15);
  color:#fff;
  border-color:rgba(255,255,255,.25);
}
.hero-cta-row .btn.ghost:hover{
  background:rgba(255,255,255,.22);
}

.hero-mini-note{
  margin-top:8px;
  font-size:13px;
  color:rgba(255,255,255,.72);
}

/* Card like the example */
.hero-card{
  background:rgba(15,23,42,.48);
  border:1px solid rgba(255,255,255,.15);
  border-radius:26px;
  padding:18px;
  box-shadow: 0 28px 80px rgba(0,0,0,.40);
  backdrop-filter: blur(14px);
}

.hero-card-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:stretch;
}

.hero-ui-stack{
  position:relative;
  min-height:340px;
}

.hero-ui{
  position:absolute;
  left:0;
  right:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(2,6,23,.50);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.hero-ui img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-ui-1{
  top:0;
  height:210px;
}
.hero-ui-2{
  bottom:0;
  height:170px;
  width:88%;
  margin-left:12%;
  transform:translateY(4px);
  opacity:.98;
}

.hero-results{
  color:#fff;
  padding:6px 6px 6px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-results-title{
  font-size:14px;
  font-weight:800;
  letter-spacing:.12em;
  color:rgba(255,255,255,.78);
  margin-bottom:10px;
}

.hero-results-list{
  list-style:none;
  padding:0;
  margin:0 0 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:15px;
  color:rgba(255,255,255,.92);
}

.hero-results-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.tick{
  width:22px;
  height:22px;
  border-radius:50%;
  background:linear-gradient(135deg, #183a84, #0b1220);
  box-shadow:0 10px 24px rgba(24,58,132,.35);
  position:relative;
  flex:0 0 22px;
  margin-top:1px;
}
.tick:after{
  content:"";
  position:absolute;
  left:6px;
  top:5px;
  width:9px;
  height:5px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

.hero-results-foot{
  margin:8px 0 0;
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.5;
}

/* Bottom brand strip */
.hero-brand-strip{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:18px auto 0;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.hero-brand-logo{
  height:54px;
  width:auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
}
.hero-brand-tagline{
  color:rgba(255,255,255,.78);
  font-size:14px;
  letter-spacing:.02em;
}

/* Responsive */
@media (max-width: 980px){
  .hero-case-inner{ grid-template-columns:1fr; }
  .hero-case-left h1{ font-size:38px; }
  .hero-card-grid{ grid-template-columns:1fr; }
  .hero-ui-stack{ min-height:320px; }
}
@media (max-width: 560px){
  .hero-case{ padding-top:72px; }
  .hero-case-left h1{ font-size:32px; }
  .hero-ui-2{ width:92%; margin-left:8%; }
}

/* ── Scroll reveal (subtle premium) ───────────────── */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity,transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-delay-1{transition-delay:.06s}
.reveal-delay-2{transition-delay:.12s}
.reveal-delay-3{transition-delay:.18s}
.reveal-delay-4{transition-delay:.24s}
.reveal-delay-5{transition-delay:.30s}

/* ── Price locked badge ───────────────── */
.plan{position:relative;}
.lock-badge{
  position:absolute;
  top:16px;
  right:16px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffffff;
  background:linear-gradient(135deg, var(--brand), var(--brand-700));
  box-shadow:0 14px 30px rgba(24,58,132,.35);
}

/* ── Case divider section ───────────────── */
.case-divider{
  position:relative;
  margin:10px 0 10px;
  padding:64px 20px;
  overflow:hidden;
  border-top:1px solid rgba(226,232,240,.7);
  border-bottom:1px solid rgba(226,232,240,.7);
}
.case-divider-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.03);
}
.case-divider-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(2,6,23,.65), rgba(2,6,23,.75)),
    radial-gradient(900px 520px at 20% 30%, rgba(24,58,132,.35), transparent 60%);
}
.case-divider-inner{
  position:relative;
  z-index:2;
  max-width:980px;
  margin:0 auto;
  text-align:center;
  color:#fff;
}
.case-divider-pill{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  font-weight:800;
  letter-spacing:.10em;
  font-size:12px;
}
.case-divider-inner h3{
  margin:14px 0 8px;
  font-size:30px;
  line-height:1.15;
}
.case-divider-inner p{
  margin:0 auto;
  max-width:720px;
  color:rgba(255,255,255,.84);
  font-size:15px;
  line-height:1.6;
}

/* ===== Homepage Latest Updates Section – Full Release Notes Style ===== */
section.home-updates{
  position:relative;
  padding:56px 20px 64px;
  background:
    radial-gradient(circle at 12% 18%, rgba(128,180,255,.18) 0%, transparent 34%),
    radial-gradient(circle at 85% 82%, rgba(120,165,255,.18) 0%, transparent 36%),
    linear-gradient(135deg, #edf2ff 0%, #f8f8fc 46%, #eef4ff 100%);
  overflow:hidden;
}

.home-updates-inner{
  max-width:1500px;
  margin:0 auto;
}

.home-updates-head{
  text-align:center;
  margin-bottom:26px;
}

.home-updates-head h2{
  margin:0;
  font-size:clamp(34px, 4vw, 48px);
  font-weight:1000;
  color:#163f8f;
}

.home-updates-head .section-desc{
  margin-top:10px;
  font-size:16px;
  color:#6b7faa;
}

.home-updates-head .btn{
  display:none;
}

.home-updates-card{
  max-width:1450px;
  margin:0 auto;
  padding:24px 28px;
  border-radius:28px;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 20px 60px rgba(74,118,212,.10),
    0 8px 24px rgba(15,23,42,.05);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.home-updates-shell{
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 12px 30px rgba(84,123,214,.08);
}

.home-updates-empty{
  padding:24px 20px;
  color:#5f739c;
  font-size:15px;
}

.home-updates-list{
  display:block;
}

.home-update-row{
  display:grid;
  grid-template-columns:90px 80px minmax(0,1fr) 140px;
  gap:18px;
  align-items:start;
  padding:18px 18px;
  border-top:1px solid rgba(220,230,245,.8);
}

.home-update-row:first-child{
  border-top:none;
}

.home-update-version{
  display:flex;
  align-items:flex-start;
}

.home-version-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  background:linear-gradient(180deg,#4c8cff 0%,#2f6fe8 52%,#1f59cc 100%);
  color:#fff;
  font-size:16px;
  font-weight:1000;
  letter-spacing:-.02em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 8px 18px rgba(37,99,235,.18);
}

.home-update-category{
  display:flex;
  align-items:flex-start;
}

.home-update-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  height:26px;
  min-width:64px;
  padding:0 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 10px rgba(15,23,42,.04);
}

.home-update-badge.major_update{
  background:#e75a68;
  color:#fff;
}

.home-update-badge.minor_update{
  background:#4db57c;
  color:#fff;
}

.home-update-badge.bug_fix{
  background:#efba48;
  color:#17233f;
}

.home-update-content{
  min-width:0;
}

.home-update-title{
  margin:0;
  font-size:17px;
  line-height:1.4;
  font-weight:900;
  color:#183f86;
  word-break:break-word;
}

.home-update-details-list{
  list-style:none;
  margin:8px 0 0;
  padding:0;
}

.home-update-details-list li{
  position:relative;
  margin:6px 0 0;
  padding-left:12px;
  font-size:13px;
  line-height:1.55;
  color:#425a8b;
  word-break:break-word;
}

.home-update-details-list li::before{
  content:"–";
  position:absolute;
  left:0;
  top:0;
  color:#6a7fa8;
  font-weight:700;
}

.home-update-single{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:#425a8b;
  word-break:break-word;
}

.home-update-date{
  text-align:right;
  font-size:13px;
  font-weight:800;
  color:#6b7faa;
  white-space:nowrap;
  padding-top:2px;
}

.home-update-date::after{
  content:" →";
}

.home-details-title,
.home-date-link,
.home-updates-footer,
.home-update-dot,
.home-updates-table,
.home-update-summary,
.home-details-list,
.home-details-single{
  display:none;
}

.home-updates-cta{
  text-align:center;
  margin-top:18px;
}

.home-updates-cta a{
  font-size:15px;
  font-weight:800;
  color:#163f8f;
  text-decoration:none;
}

.home-updates-cta a::after{
  content:" →";
}

.home-updates-cta a:hover{
  opacity:.88;
}

@media (max-width:980px){
  section.home-updates{
    padding:52px 16px 58px;
  }

  .home-updates-card{
    padding:18px 18px;
  }

  .home-update-row{
    grid-template-columns:80px 72px minmax(0,1fr) 120px;
    gap:14px;
    padding:16px 16px;
  }

  .home-update-title{
    font-size:16px;
  }

  .home-update-details-list li,
  .home-update-single{
    font-size:13px;
  }

  .home-update-date{
    font-size:12px;
  }
}

@media (max-width:760px){
  .home-updates-head h2{
    font-size:34px;
  }

  .home-updates-head .section-desc{
    font-size:15px;
  }

  .home-updates-card{
    padding:14px;
    border-radius:22px;
  }

  .home-updates-shell{
    border-radius:18px;
  }

  .home-update-row{
    grid-template-columns:1fr;
    gap:10px;
    padding:14px;
  }

  .home-update-title{
    font-size:16px;
  }

  .home-update-details-list li,
  .home-update-single{
    font-size:13px;
    line-height:1.55;
  }

  .home-update-date{
    text-align:left;
    font-size:12px;
    padding-top:0;
  }
}

/* ───────────── OUR CLIENTS ───────────── */

.our-clients{
  padding:56px 20px 52px;
  background:linear-gradient(180deg,#f8fbff 0%, #ffffff 100%);
  border-top:1px solid rgba(226,232,240,.7);
  border-bottom:1px solid rgba(226,232,240,.7);
}

.our-clients-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  gap:22px;
}

.our-clients-head{
  text-align:center;
  max-width:760px;
  margin:0 auto;
}

.our-clients-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:#eaf1ff;
  color:#183a84;
  border:1px solid #cddcff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.our-clients-head h2{
  margin:16px 0 12px;
  font-size:38px;
  line-height:1.05;
  color:#0f172a;
  font-weight:900;
  letter-spacing:-0.5px;
}

.our-clients-head p{
  margin:0;
  color:#64748b;
  font-size:14px;
  line-height:1.7;
}

.our-clients-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}

.our-client-card{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  border-radius:22px;
  background:#ffffff;
  border:1px solid #e2e8f0;
  box-shadow:0 14px 40px rgba(15,23,42,.06);
  padding:22px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.our-client-card:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 50px rgba(15,23,42,.1);
  border-color:#cddcff;
  text-decoration:none;
}

.our-client-logo-wrap{
  width:100%;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.our-client-logo{
  max-width:100%;
  max-height:64px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(12%);
  opacity:.96;
}

.our-clients-loading,
.our-clients-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:24px;
  border-radius:20px;
  background:#ffffff;
  border:1px dashed #cbd5e1;
  color:#64748b;
  font-size:14px;
}

@media(max-width:980px){
  .our-clients-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:720px){
  .our-clients{
    padding:48px 16px 44px;
  }

  .our-clients-head h2{
    font-size:28px;
  }

  .our-clients-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }

  .our-client-card{
    min-height:100px;
    padding:18px;
  }

  .our-client-logo-wrap{
    height:54px;
  }

  .our-client-logo{
    max-height:54px;
  }
}

@media(max-width:460px){
  .our-clients-grid{
    grid-template-columns:1fr;
  }
}

/* ───────────── TESTIMONY SECTION ───────────── */

.testimony-section{
  padding:56px 20px 56px;
  background:
    radial-gradient(circle at top left, rgba(24,58,132,.08), transparent 26%),
    linear-gradient(180deg,#f8fbff 0%, #ffffff 100%);
  border-top:1px solid rgba(226,232,240,.7);
  border-bottom:1px solid rgba(226,232,240,.7);
}

.testimony-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  gap:24px;
}

.testimony-head{
  text-align:center;
  max-width:760px;
  margin:0 auto;
}

.testimony-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:#eaf1ff;
  color:#183a84;
  border:1px solid #cddcff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.testimony-head h2{
  margin:16px 0 12px;
  font-size:38px;
  line-height:1.05;
  color:#163f8f;
  font-weight:900;
  letter-spacing:-0.5px;
}

.testimony-head .section-desc{
  margin:0;
  color:#64748b;
  font-size:14px;
  line-height:1.7;
}

.testimony-slider-shell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:520px;
}

.testimony-grid{
  width:100%;
}

.testimony-slide{
  position:relative;
  width:100%;
  min-height:520px;
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(135deg,#09152f,#10234f 48%, #081120 100%);
  border:1px solid rgba(191,219,254,.24);
  box-shadow:0 24px 70px rgba(15,23,42,.15);
}

.testimony-video-wrap{
  position:relative;
  width:100%;
  min-height:520px;
  background:#020617;
}

.testimony-video{
  width:100%;
  height:520px;
  display:block;
  border:0;
  background:#020617;
}

.testimony-video-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(2,6,23,.52) 0%, rgba(2,6,23,.1) 36%, rgba(2,6,23,.42) 100%),
    linear-gradient(180deg, rgba(2,6,23,.12) 0%, rgba(2,6,23,.08) 36%, rgba(2,6,23,.76) 100%);
  pointer-events:none;
}

.testimony-content{
  position:absolute;
  left:28px;
  right:28px;
  bottom:24px;
  z-index:2;
  display:grid;
  gap:14px;
}

.testimony-brand-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.testimony-logo{
  width:76px;
  height:76px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 76px;
  box-shadow:0 14px 40px rgba(15,23,42,.18);
}

.testimony-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

.testimony-client-meta{
  min-width:0;
  display:grid;
  gap:6px;
}

.testimony-client-name{
  margin:0;
  color:#fff;
  font-size:28px;
  line-height:1.1;
  font-weight:900;
  text-shadow:0 4px 16px rgba(0,0,0,.22);
}

.testimony-client-role{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  width:max-content;
  max-width:100%;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.96);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  backdrop-filter:blur(8px);
}

.testimony-quote{
  margin:0;
  max-width:760px;
  color:rgba(255,255,255,.94);
  font-size:15px;
  line-height:1.75;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:15px 18px;
  backdrop-filter:blur(10px);
  box-shadow:0 16px 40px rgba(15,23,42,.16);
}

.testimony-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#183a84;
  font-size:26px;
  font-weight:900;
  cursor:pointer;
  z-index:5;
  box-shadow:0 18px 40px rgba(15,23,42,.16);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.testimony-arrow:hover{
  transform:translateY(-50%) scale(1.04);
  box-shadow:0 22px 48px rgba(15,23,42,.22);
  background:#ffffff;
}

.testimony-arrow-left{
  left:-18px;
}

.testimony-arrow-right{
  right:-18px;
}

.testimony-empty{
  text-align:center;
  padding:24px;
  border-radius:20px;
  background:#ffffff;
  border:1px dashed #cbd5e1;
  color:#64748b;
  font-size:14px;
}

@media(max-width:980px){
  .testimony-slider-shell{
    min-height:440px;
  }

  .testimony-slide,
  .testimony-video-wrap{
    min-height:440px;
  }

  .testimony-video{
    height:440px;
  }

  .testimony-arrow-left{
    left:8px;
  }

  .testimony-arrow-right{
    right:8px;
  }
}

@media(max-width:720px){
  .testimony-section{
    padding:48px 16px 48px;
  }

  .testimony-head h2{
    font-size:28px;
  }

  .testimony-slider-shell{
    min-height:360px;
  }

  .testimony-slide,
  .testimony-video-wrap{
    min-height:360px;
    border-radius:24px;
  }

  .testimony-video{
    height:360px;
  }

  .testimony-content{
    left:14px;
    right:14px;
    bottom:14px;
  }

  .testimony-client-name{
    font-size:20px;
  }

  .testimony-logo{
    width:58px;
    height:58px;
    border-radius:16px;
    flex-basis:58px;
  }

  .testimony-quote{
    font-size:13px;
    line-height:1.6;
    padding:12px 14px;
  }

  .testimony-arrow{
    width:42px;
    height:42px;
    font-size:20px;
  }
}

@media(max-width:460px){
  .testimony-video{
    height:320px;
  }

  .testimony-slide,
  .testimony-video-wrap,
  .testimony-slider-shell{
    min-height:320px;
  }
}