/* ========= GLOBAL / THEME / TYPOGRAPHY ========= */
:root{
  --primary: #FF6A3D;
  --accent: #FFD166;
  --blue-1: #7CC6FF;
  --blue-2: #4A9CFF;
  --ink: #0F1724;
  --muted: #6B7280;
  --bg: #ffffff;
  --card-bg: rgba(255,255,255,0.95);
  --container: 1200px;
  --header-h: 72px;
  --radius: 14px;
  --transition: 0.4s ease;
}

[data-theme="dark"] {
  --bg: #0F1724;
  --ink: #F4F6FA;
  --muted: #CBD5E1;
  --card-bg: rgba(15,23,36,0.92);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{ height:100%; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; background:var(--bg); color:var(--ink); transition:background var(--transition), color var(--transition); }
.container{ max-width:var(--container); margin:0 auto; padding:0 20px; }
a{color:inherit;text-decoration:none}

/* ========= HEADER ========= */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header-h);
  display:flex;
  align-items:center;
  z-index:110;
  background:linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.56));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(11,22,55,0.06);
  animation:slideDown 0.8s ease forwards;
}
@keyframes slideDown { 0% { transform:translateY(-60px); opacity:0 } 100% { transform:translateY(0); opacity:1 } }

.header-inner{ width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }

.brand img{ height:52px; width:auto; border-radius:12px; box-shadow:0 0 18px rgba(255,106,61,0.25); transition:all 0.3s ease; animation:floatLogo 4s ease-in-out infinite alternate; }
.brand img:hover{ box-shadow:0 0 22px rgba(255,209,102,0.4); transform:rotate(-2deg) scale(1.04); }
@keyframes floatLogo { 0% { transform:translateY(0); } 100% { transform:translateY(4px); } }

nav{ display:flex; align-items:center; gap:16px; }
.nav-list{ display:flex; gap:22px; align-items:center; list-style:none; }
.nav-list a{ font-weight:600; font-size:15px; padding:8px 10px; border-radius:10px; transition:all .14s ease; }
.nav-list a:hover{ background:rgba(74,156,255,0.08); color:var(--blue-2); }
.nav-cta{ display:inline-flex; align-items:center; gap:10px; background:linear-gradient(90deg,var(--primary),var(--accent)); color:#fff; padding:10px 16px; border-radius:12px; font-weight:700; box-shadow:0 8px 26px rgba(79,26,0,0.08); text-decoration:none }
.nav-toggle{ display:none; background:transparent; border:0; font-size:22px; padding:8px; cursor:pointer; color:var(--ink) }

/* theme toggle */
.toggle-theme{ background:none; border:1px solid rgba(0,0,0,0.08); padding:6px 10px; border-radius:8px; cursor:pointer; font-weight:600; font-size:14px; color:var(--ink); transition:all .3s ease; }
[data-theme="dark"] .toggle-theme{ border-color:rgba(255,255,255,0.15); color:#fff; }
.toggle-theme:hover{ opacity:0.8 }

/* responsive header nav */
@media (max-width:880px){
  .nav-list{ position:fixed; right:20px; top:84px; display:none; flex-direction:column; gap:10px; background:var(--card-bg); padding:12px; border-radius:12px; box-shadow:0 18px 50px rgba(14,24,48,0.08); min-width:180px }
  .nav-list.show{ display:flex }
  .nav-toggle{ display:inline-flex }
  .nav-cta{ display:none }
}

/* ========= HERO ========= */
.hero{ position:relative; width:100%; height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(180deg,#E6F7FF 0%, #DFF1FF 35%, #FFFFFF 100%); overflow:hidden; padding-top:var(--header-h); transition:background var(--transition); }
[data-theme="dark"] .hero{ background:linear-gradient(180deg,#17263D 0%, #101A2C 35%, #0F1724 100%); }

.hero-content{ position:relative; width:100%; height:100%; background:var(--card-bg); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; box-shadow:inset 0 0 60px rgba(28,40,80,0.05); text-align:center; transition:background var(--transition); }

@keyframes fadeUp{ 0%{opacity:0;transform:translateY(20px);} 100%{opacity:1;transform:translateY(0);} }
.hero-content > *{ opacity:0; animation:fadeUp 0.8s ease forwards; }
.hero-content h1{ animation-delay:0.2s; }
.hero-content .lead{ animation-delay:0.4s; }
.hero-content .btn-primary{ animation-delay:0.6s; }
.hero-content .small-note{ animation-delay:0.8s; }

.eyebrow{ display:inline-block; font-weight:700; color:var(--blue-2); font-size:13px; background:rgba(74,156,255,0.08); padding:6px 10px; border-radius:999px; margin-bottom:18px; }

.hero h1{ font-family:Poppins,Inter; font-size:60px; line-height:1.1; margin:0 0 14px; background:linear-gradient(90deg,var(--primary),var(--accent),var(--blue-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
@media (max-width:768px){ .hero h1{ font-size:42px; } }
@media (max-width:560px){ .hero h1{ font-size:32px; } }

.lead{ font-size:18px; color:var(--muted); max-width:720px; margin:0 auto 30px; }

.btn-primary{ background:linear-gradient(90deg,var(--primary),var(--accent)); color:white; padding:14px 30px; border-radius:12px; font-weight:700; box-shadow:0 12px 36px rgba(255,106,61,0.12); transition:transform .16s ease; }
.btn-primary:hover{ transform:translateY(-4px); }
.small-note{ margin-top:16px; color:var(--muted); font-size:15px; }

/* floating shapes */
.float-shape{ position:absolute; border-radius:999px; opacity:0.12; filter:blur(8px) }
.float-1{ width:220px; height:220px; right:-40px; top:6%; background:linear-gradient(90deg,#7fd3ff,#4a9cff) }
.float-2{ width:140px; height:140px; left:-40px; bottom:8%; background:linear-gradient(90deg,#ffd8a8,#ff8a5a) }
.float-3{ width:80px; height:80px; right:6%; bottom:36%; background:linear-gradient(90deg,#c0f7d1,#7be28a) }

/* ========= PROCESS / STEPS ========= */
.process-section{
  background: linear-gradient(180deg,#FBFDFF 0%, #F2F8FF 55%);
  padding: 84px 20px;
  display: flex;
  justify-content: center;
  text-align: center;
  overflow: visible;
}
.process-inner{ width:100%; max-width: var(--container); margin:0 auto; }
.process-title{ font-family: 'Poppins', sans-serif; font-weight:700; color: var(--secondary); font-size: 30px; margin-bottom: 34px; }

.steps-wrap{ position: relative; padding: 36px 10px 24px; display:flex; align-items:center; justify-content:center; gap: 28px; min-height: 140px; }
.rail{ position:absolute; left: 60px; right: 60px; height: 6px; top: 50%; transform: translateY(-50%); background: linear-gradient(90deg, rgba(30,45,88,0.08), rgba(30,45,88,0.06)); border-radius: 999px; z-index: 1; box-shadow: 0 6px 18px rgba(30,45,88,0.03) inset; }
.rail-progress{ position:absolute; left: 60px; height: 6px; top: 50%; transform: translateY(-50%); border-radius:999px; z-index:2; background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary)); width: 0%; pointer-events:none; transition:width .6s linear; opacity:0.18; }

.step{ position: relative; z-index: 5; width: 160px; min-width: 120px; display:flex; flex-direction:column; align-items:center; gap:10px; font-weight:600; color:var(--secondary); font-size:15px; }
.step .marker{ width:52px; height:52px; border-radius:999px; background:var(--card-bg); display:grid; place-items:center; box-shadow: 0 12px 30px rgba(30,45,88,0.06); border: 4px solid rgba(255,255,255,0.6); position:relative; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; z-index: 8; }
.step .marker strong{ font-family:'Poppins', sans-serif; color:var(--secondary); font-size:16px; line-height:1; font-weight:700; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.step .label{ font-size:14px; color:var(--muted); max-width: 160px; }
.step:hover .marker{ transform: translateY(-6px); box-shadow: 0 18px 48px rgba(30,45,88,0.10); }
.step .marker.done{ box-shadow: 0 10px 36px rgba(20,30,80,0.12), 0 0 26px rgba(255,200,110,0.12); border-color: rgba(255,255,255,0.9); transform: translateY(-4px) scale(1.03); }
.step.done-1 .marker{ background: linear-gradient(90deg, var(--primary), #ff8a5a); }
.step.done-2 .marker{ background: linear-gradient(90deg, var(--accent), #ffe59a); }
.step.done-3 .marker{ background: linear-gradient(90deg, var(--secondary), #4a6aa8); }
.step.done-4 .marker{ background: linear-gradient(90deg, var(--primary), #ff8a5a); }
.step.done-5 .marker{ background: linear-gradient(90deg, var(--accent), #ffe59a); }
.step .marker.done strong{ color: #FFFFFF; text-shadow: 0 2px 8px rgba(0,0,0,0.24); }

.dot{ position:absolute; top:50%; transform: translate(-50%,-50%); left:60px; width:18px; height:18px; border-radius:50%; background:var(--primary); box-shadow: 0 8px 30px rgba(255,106,61,0.16); z-index:4; transition: left .48s cubic-bezier(.2,.9,.2,1), transform .18s cubic-bezier(.2,.9,.2,1), background .18s ease; will-change: left, transform; }

.stats{ margin-top: 56px; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.stat-card{ background: var(--card-bg); border-radius:12px; padding:18px 26px; min-width:190px; box-shadow: 0 12px 36px rgba(30,45,88,0.06); transition: transform .22s ease, box-shadow .22s ease; }
.stat-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 50px rgba(241,90,41,0.12); }
.stat-number{ font-family:'Poppins', sans-serif; font-size:26px; color:var(--secondary); font-weight:800; }
.stat-label{ font-size:13px; color:var(--muted); margin-top:6px; font-weight:600; }

@media (max-width:900px){
  .steps-wrap{ flex-direction:column; gap:40px; padding: 10px 20px 30px; min-height: auto; }
  .rail, .rail-progress, .dot { display:none; }
  .step{ align-items:flex-start; width:100%; min-width:auto; gap:6px; }
  .step .marker{ margin-right:12px; z-index:5; }
  .step-row{ display:flex; align-items:center; gap:12px; }
  .stats{ margin-top:28px; gap:14px; }
  .process-title{ font-size:22px; }
}

/* ========= MEDIA PARTNERS ========= */
.media-section { background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 60%); padding: 48px 20px; text-align: center; overflow: hidden; }
.media-inner { max-width: var(--container); margin: 0 auto; }
.media-title { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--secondary); font-size: 26px; margin-bottom: 6px; }
.media-sub { color: var(--muted); margin-bottom: 18px; font-size: 15px; }

.marquee-row { width:100%; overflow:hidden; position:relative; padding:10px 6px; border-radius:10px; margin:14px 0; background: linear-gradient(180deg, rgba(30,45,88,0.02), transparent 60%); box-shadow: 0 8px 30px rgba(30,45,88,0.03); }
.marquee-track { display:flex; align-items:center; gap:24px; will-change: transform; }

.marquee-item { display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; background: var(--bg-card); border-radius:10px; min-width:100px; box-shadow: 0 8px 20px rgba(30,45,88,0.04); transition: transform .18s ease, box-shadow .18s ease; }
.marquee-item:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(30,45,88,0.09); }
.marquee-item img { display:block; height:44px; width:auto; object-fit:contain; filter: grayscale(.02) contrast(.98); opacity:0.98; }

.marquee-row .overlay-left, .marquee-row .overlay-right { position:absolute; top:0; bottom:0; width:6%; pointer-events:none; z-index:6; }
.marquee-row .overlay-left{ left:0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%); }
.marquee-row .overlay-right{ right:0; background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%); }

@media (max-width:900px){ .media-section{ padding:32px 14px; } .marquee-item img{ height:36px; } }
@media (max-width:560px){ .media-title{ font-size:20px; } .marquee-item img{ height:28px; } .marquee-row{ margin:10px 0; padding:8px; border-radius:8px; } .marquee-row .overlay-left, .marquee-row .overlay-right{ display:none; } }

/* ========= BEFORE / AFTER / AI ========= */
.ba-section{ background: linear-gradient(180deg,#ffffff 0%, #f6fbff 60%); padding: 72px 18px; }
.ba-inner{ max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }

.ba-card{ background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: 0 18px 48px rgba(14,45,80,0.06); border: 1px solid rgba(30,45,88,0.03); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }

.ba-visual{ position:relative; min-height: 360px; display:flex; align-items:center; justify-content:center; border-radius: 12px; overflow:hidden; background: linear-gradient(180deg, rgba(75,163,255,0.03), rgba(241,90,41,0.02)); }

.ba-slide { position:absolute; inset:0; display:block; background-size: cover; background-position:center; background-repeat:no-repeat; opacity:0; transform: scale(1.02); transition: opacity .5s cubic-bezier(.2,.9,.2,1), transform .5s ease; }
.ba-slide.active{ opacity:1; transform: scale(1); }

.ba-top-label{ position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index: 12; background: rgba(255,255,255,0.94); color: var(--secondary); font-weight:700; padding:6px 10px; border-radius:999px; font-family: 'Poppins', sans-serif; font-size:12px; letter-spacing:0.02em; box-shadow: 0 8px 24px rgba(14,45,80,0.06); pointer-events: none; text-transform: none; }
.ba-top-label.before{ background: rgba(30,45,88,0.9); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.ba-top-label.after{ background: linear-gradient(90deg,var(--primary),var(--accent)); color:#fff; text-shadow: 0 1px 1px rgba(0,0,0,0.12); }
.ba-top-label.ai{ background: linear-gradient(90deg,#8A4BFF,#FF7AC2); color:#fff; text-shadow: 0 1px 1px rgba(0,0,0,0.12); }

.ba-top-label-right{ display:block; margin: 0 auto 6px; width:max-content; background: rgba(255,255,255,0.94); color: var(--secondary); font-weight:700; padding:6px 10px; border-radius:999px; font-family: 'Poppins', sans-serif; font-size:12px; box-shadow: 0 8px 24px rgba(14,45,80,0.04); text-align:center; }
.ba-top-label-right.before{ background: rgba(30,45,88,0.9); color:#fff; }
.ba-top-label-right.after{ background: linear-gradient(90deg,var(--primary),var(--accent)); color:#fff; }
.ba-top-label-right.ai{ background: linear-gradient(90deg,#8A4BFF,#FF7AC2); color:#fff; }

.ba-caption{ position:absolute; left:16px; bottom:16px; z-index:10; background: rgba(255,255,255,0.9); padding:10px 14px; border-radius:10px; font-size:14px; color:#334155; box-shadow:0 8px 24px rgba(14,45,80,0.06); max-width: calc(100% - 44px); }

.ba-dots{ position:absolute; right:12px; top:12px; display:flex; gap:8px; z-index:10; }
.ba-dot{ width:12px; height:12px; border-radius:50%; background: rgba(30,45,88,0.12); transition: all .25s ease; border: none; cursor: pointer; }
.ba-dot.active{ background: linear-gradient(90deg,var(--primary),var(--accent)); box-shadow:0 6px 18px rgba(241,90,41,0.12); transform:scale(1.05); }

.ba-details{ padding:8px 4px; display:flex; flex-direction:column; gap:12px; justify-content:flex-start; }
.ba-title{ font-family:'Poppins',sans-serif; font-size:22px; color:var(--secondary); font-weight:800; margin:8px 0 6px; }
.ba-text{ color:#334155; line-height:1.7; font-size:15px; margin:0 0 8px; min-height: 88px; transition: color .45s ease, transform .45s cubic-bezier(.2,.9,.2,1); }

.ba-benefits{ display:block; margin:0; padding:0; list-style:none; color:#334155; font-size:15px; }
.ba-benefits li{ margin:8px 0; display:flex; gap:12px; align-items:flex-start; }
.ba-benefits li::before{ content: '✓'; display:inline-block; color:var(--primary); font-weight:800; margin-top:2px; font-size:14px; }

.ba-cta{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; background: linear-gradient(90deg,var(--primary),var(--accent)); color:#fff; font-weight:800; text-decoration:none; box-shadow: 0 12px 36px rgba(241,90,41,0.12); transition: transform .18s ease; width:fit-content; }
.ba-cta:hover{ transform: translateY(-4px); }

.ba-accent { height:8px; width:100%; border-radius:8px; margin-top:12px; background: linear-gradient(90deg,var(--primary),var(--accent)); transition: background .45s ease; }

@media (max-width:980px){ .ba-inner{ grid-template-columns: 1fr; } .ba-visual{ min-height:260px; } }
@media (max-width:560px){ .ba-title{ font-size:20px; } .ba-caption{ font-size:13px; padding:8px 10px; } .ba-top-label{ font-size:11px; top:10px; padding:5px 8px; } }

/* ========= ABOUT ========= */
.about-section{ background: linear-gradient(180deg,var(--bg-soft) 0%, #ffffff 48%); padding: 72px 18px; position: relative; overflow-x: hidden; box-sizing: border-box; }
.about-section::before, .about-section::after{ content:''; position:absolute; border-radius:50%; filter: blur(36px); opacity: .10; z-index: 0; pointer-events: none; }
.about-section::before{ width:240px; height:240px; left:-20px; top:-40px; background: linear-gradient(90deg, rgba(75,163,255,0.14), rgba(129,198,255,0.08)); }
.about-section::after{ width:180px; height:180px; right:-8px; bottom:-40px; background: linear-gradient(90deg, rgba(241,90,41,0.10), rgba(249,215,76,0.06)); }

.about-inner{ max-width: var(--container); margin: 0 auto; position: relative; z-index: 2; display: grid; gap: 32px; align-items: start; padding: 0 16px; grid-template-columns: minmax(0, 1fr) minmax(0, min(480px, 42%)); }
.about-card{ background: var(--card-bg); border-radius: var(--radius); padding: 32px; box-shadow: 0 20px 56px rgba(30,45,88,0.06); border: 1px solid rgba(30,45,88,0.03); }
.about-heading{ font-family: 'Poppins', sans-serif; font-size: 30px; color: var(--secondary); font-weight: 800; margin: 0 0 14px; line-height: 1.04; }
.about-text{ color: #334155; font-size: 16px; line-height: 1.78; margin-bottom: 18px; max-width: 780px; }
.about-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.btn-ghost{ display:inline-flex; align-items:center; padding:10px 12px; color:var(--secondary); background: transparent; border-radius:10px; font-weight:700; text-decoration:underline; transition: color .14s ease, transform .14s ease; }
.btn-ghost:hover{ color:#0f2140; transform: translateY(-2px); text-decoration: none; }

.partner-row{ display:flex; gap:14px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.partner-media{ background: linear-gradient(180deg,#fff,#fbfdff); border-radius:12px; padding:10px; box-shadow: 0 12px 34px rgba(14,45,80,0.05); display:inline-flex; align-items:center; justify-content:center; min-width:180px; transition: transform .18s ease, box-shadow .18s ease, filter .12s ease; box-sizing: border-box; }
.partner-media img{ height:60px; width:auto; object-fit:contain; transition: transform .24s ease, filter .16s ease; }
.partner-media:hover{ transform: translateY(-6px); box-shadow: 0 34px 80px rgba(14,45,80,0.08); }
.partner-media:hover img{ transform: translateY(-4px) scale(1.02); filter:brightness(1.03); }

.about-logos{ display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-top:20px; }
.about-logo{ background: linear-gradient(180deg,#fff,#fbfdff); padding:10px; border-radius:12px; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 28px rgba(14,45,80,0.04); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.about-logo img{ max-height:40px; width:auto; object-fit:contain; filter:grayscale(.08); transition: transform .16s ease, filter .16s ease; }
.about-logo:hover{ transform: translateY(-6px); box-shadow: 0 20px 48px rgba(14,45,80,0.08); filter:grayscale(0); }

.about-image{ border-radius: 18px; overflow: hidden; box-shadow: 0 28px 90px rgba(30,45,88,0.08); background: linear-gradient(180deg, rgba(75,163,255,0.06), rgba(160,208,255,0.03)); min-height: 320px; max-width: 100%; width: 100%; position: relative; display:flex; align-items:center; justify-content:center; transition: transform .3s cubic-bezier(.2,.9,.2,1), box-shadow .3s ease; }
.about-image:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 44px 130px rgba(30,45,88,0.12); }
.about-image img{ display:block; width:100%; height:100%; object-fit: cover; object-position: center; transition: transform .6s ease, filter .24s ease; will-change: transform; }
.about-image.animate img{ animation: floaty 6s ease-in-out infinite; transform-origin:center; }

@keyframes floaty { 0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)} }

.about-badge{ position:absolute; left:18px; top:18px; background: linear-gradient(90deg,#fff, rgba(255,255,255,0.92)); padding:10px 14px; border-radius:999px; font-weight:800; color:var(--secondary); box-shadow: 0 10px 30px rgba(30,45,88,0.06); text-transform: lowercase; z-index: 2; }

.fade-up{ opacity:0; transform:translateY(12px); transition: all .56s cubic-bezier(.2,.9,.2,1); }
.fade-up.in{ opacity:1; transform: translateY(0); }

@media (max-width:1100px){ .about-inner{ grid-template-columns: 1fr min(420px, 46%); } .about-image{ min-height:300px; } }
@media (max-width:880px){ .about-inner{ grid-template-columns: 1fr; } .about-image{ order:-1; width:100%; min-height:300px; border-radius:12px; } .about-card{ padding:24px; border-radius:12px; } .partner-media{ min-width:140px; } .about-logos{ grid-template-columns: repeat(3,1fr); gap:10px; } }
@media (max-width:560px){ .about-section{ padding:28px 14px; } .about-heading{ font-size:22px; margin-bottom:10px; } .about-text{ font-size:15px; line-height:1.6; } .btn-primary{ padding:12px 16px; font-size:15px; border-radius:10px; } .partner-media img{ height:50px; } .about-logos{ grid-template-columns: repeat(2,1fr); gap:10px; } .about-image{ min-height:220px; } }

/* ========= SERVICES ========= */
.services-section { background: linear-gradient(180deg, #ffffff 0%, #f7fbff 60%); padding: 90px 20px; position: relative; overflow: hidden; }
.services-section::before, .services-section::after { content: ""; position: absolute; border-radius: 50%; filter: blur(45px); opacity: 0.1; pointer-events: none; }
.services-section::before { width: 280px; height: 280px; top: -60px; left: -60px; background: linear-gradient(135deg, rgba(75,163,255,0.2), rgba(129,198,255,0.08)); }
.services-section::after { width: 200px; height: 200px; right: -60px; bottom: -60px; background: linear-gradient(135deg, rgba(241,90,41,0.18), rgba(249,215,76,0.08)); }

.services-inner{ max-width: var(--container); margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.services-title{ font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 800; color: var(--secondary); margin-bottom: 12px; }
.services-sub{ color: var(--muted); font-size: 16px; margin-bottom: 50px; }

.services-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-card{ background: var(--card-bg); border-radius: 18px; padding: 36px 26px; text-align: left; position: relative; box-shadow: 0 20px 50px rgba(30,45,88,0.06); transition: all 0.35s cubic-bezier(.2, .9, .2, 1); overflow: hidden; opacity: 0; transform: translateY(20px); }
.service-card.visible{ opacity:1; transform: translateY(0); }
.service-card::before{ content: ""; position: absolute; top: -80px; right: -80px; width: 180px; height: 180px; background: radial-gradient(circle at center, rgba(241,90,41,0.08), transparent 70%); transition: all 0.4s ease; }
.service-card:hover::before{ transform: scale(1.3); opacity: 0.9; }
.service-card:hover{ transform: translateY(-10px); box-shadow: 0 32px 80px rgba(30,45,88,0.12); }
.service-icon{ width: 70px; height: 70px; border-radius: 18px; background: linear-gradient(180deg, rgba(241,90,41,0.15), rgba(241,90,41,0.05)); color: var(--primary); font-size: 30px; display: grid; place-items: center; margin-bottom: 18px; box-shadow: inset 0 -8px 20px rgba(241,90,41,0.06); transition: all 0.3s ease; }
.service-card:hover .service-icon{ background: linear-gradient(180deg, #F15A29, #F9D74C); color: #fff; transform: rotate(10deg) scale(1.08); }
.service-title{ font-family: 'Poppins', sans-serif; font-size: 19px; color: var(--secondary); font-weight: 700; margin: 0 0 8px; }
.service-desc{ font-size: 15px; color: #4b5563; line-height: 1.65; }

@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0px); } }
@media (max-width: 1000px){ .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .services-grid { grid-template-columns: 1fr; } .service-card { padding: 28px 20px; } .service-icon { width: 58px; height: 58px; font-size: 24px; } }

/* ========= TESTIMONIALS ========= */
.testimonials-section{ background: linear-gradient(180deg,var(--bg-soft) 0%, #ffffff 60%); padding: 84px 18px; position: relative; overflow: hidden; -webkit-font-smoothing:antialiased; }
.testimonials-inner{ max-width:var(--container); margin:0 auto; position:relative; z-index:2; padding:0 16px; text-align:center; }
.testimonials-title{ font-family:'Poppins',sans-serif; font-size:32px; font-weight:800; color:var(--secondary); margin:0 0 8px; }
.testimonials-sub{ color:var(--muted); font-size:15px; margin-bottom:28px; }

.testimonial-marquee{ width:100%; overflow:hidden; position:relative; margin-top:8px; }
.testimonial-track{ display:flex; gap:20px; align-items:stretch; transform: translateX(0); will-change: transform; }
.testimonial-card{ flex: 0 0 320px; min-width: 280px; max-width: 340px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,253,255,0.98)); border-radius:16px; padding:18px; box-shadow: 0 14px 36px rgba(14,45,80,0.06); text-align:left; transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease; display:flex; flex-direction:column; gap:12px; box-sizing:border-box; }
.testimonial-card:hover{ transform: translateY(-8px); box-shadow: 0 34px 90px rgba(30,45,88,0.12); }
.testimonial-text{ color:#334155; font-size:15px; line-height:1.6; margin:0; flex-grow:1; }
.testimonial-meta{ display:flex; gap:12px; align-items:center; margin-top:6px; }
.testimonial-avatar{ width:48px; height:48px; border-radius:999px; display:inline-grid; place-items:center; font-weight:700; color:#fff; background: linear-gradient(90deg,var(--primary),var(--accent)); box-shadow: 0 8px 24px rgba(241,90,41,0.12); flex-shrink:0; font-size:15px; }
.testimonial-info{ font-size:14px; }
.testimonial-name{ color:var(--secondary); font-weight:700; font-size:15px; margin:0; }
.testimonial-role{ color:var(--muted); font-size:13px; margin:0; }
.stars{ color:#F9D74C; font-size:14px; letter-spacing:1px; margin-top:4px; }
.testimonial-marquee::before, .testimonial-marquee::after{ content:""; position:absolute; top:0; bottom:0; width:6%; pointer-events:none; z-index:4; }
.testimonial-marquee::before{ left:0; background: linear-gradient(90deg,#fff 0%, rgba(255,255,255,0) 100%); }
.testimonial-marquee::after{ right:0; background: linear-gradient(270deg,#fff 0%, rgba(255,255,255,0) 100%); }

@media (max-width: 980px){ .testimonial-card{ flex: 0 0 300px; min-width:260px; } }
@media (max-width: 720px){ .testimonials-section{ padding: 48px 14px; } .testimonial-card{ flex: 0 0 260px; min-width:220px; } .testimonial-avatar{ width:44px; height:44px; font-size:13px; } .testimonial-text{ font-size:14px; } }

/* ========= CONTACT ========= */
.contact-section{ background: linear-gradient(180deg,#ffffff 0%, var(--bg-soft) 60%); padding: 80px 18px; overflow:hidden; }
.contact-inner{ max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }

.founder-card, .form-card{ display:flex; flex-direction:column; justify-content:space-between; background: var(--card-bg); border-radius: var(--radius); padding: 30px; box-shadow: 0 20px 56px rgba(30,45,88,0.06); border:1px solid rgba(30,45,88,0.03); }

.founder-card{ background: linear-gradient(180deg,#fbfdff,#ffffff); text-align:center; }
.founder-photo{ width:100%; max-width:240px; height:240px; object-fit:cover; border-radius:16px; margin:0 auto 16px; box-shadow: 0 20px 40px rgba(30,45,88,0.12), 0 6px 18px rgba(241,90,41,0.15); transition:transform .45s ease, box-shadow .45s ease; }
.founder-card:hover .founder-photo{ transform:translateY(-8px) scale(1.03); box-shadow: 0 26px 56px rgba(30,45,88,0.18), 0 10px 24px rgba(241,90,41,0.18); }
.founder-name{ font-family:'Poppins',sans-serif; font-size:22px; font-weight:800; color:var(--secondary); margin-bottom:8px; }
.founder-bio{ color:#475569; font-size:15px; line-height:1.6; margin-bottom:12px; }

.socials{ display:flex; justify-content:center; gap:16px; margin-top:auto; flex-wrap:wrap; }
.socials a{ width:44px; height:44px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(30,45,88,0.06); transition: all .25s ease; }
.socials a img{ width:22px; height:22px; object-fit:contain; filter:grayscale(0.1) contrast(1); transition:transform .25s ease; }
.socials a:hover{ transform:translateY(-4px); box-shadow:0 0 22px 5px rgba(241,90,41,0.35); background:#fff; }
.socials a:hover img{ transform:scale(1.12); filter:grayscale(0); }

.form-card h3{ font-family:'Poppins',sans-serif; font-size:22px; color:var(--secondary); margin:0 0 8px; }
.form-card p{ color:var(--muted); margin:0 0 16px; }

.form-row{ display:flex; gap:12px; margin-bottom:12px; }
.form-row .col{ flex:1; }
label{ display:block; font-size:13px; color:#374151; margin-bottom:6px; font-weight:600; }
input, textarea{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid #e6eef8; font-size:14px; color:#0f2138; background:#fbfdff; }
textarea{ min-height:140px; resize:vertical; }
.form-actions{ margin-top:8px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.btn-submit{ background: linear-gradient(90deg,var(--primary),var(--accent)); color:#fff; padding:12px 18px; border-radius:12px; font-weight:800; border:0; cursor:pointer; box-shadow: 0 12px 36px rgba(241,90,41,0.12); transition: all .2s ease; }
.btn-submit:hover{ transform: translateY(-4px); box-shadow: 0 28px 80px rgba(241,90,41,0.14); }
.form-msg{ font-size:14px; color:var(--secondary); min-width:140px; }
.small-note{ margin-top:12px; font-size:13px; color:#6b7280; }

@keyframes floaty { 0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);} }
.founder-photo.animate{ animation: floaty 6s ease-in-out infinite; }

@media (max-width:980px){ .contact-inner{ grid-template-columns: 1fr; } .founder-photo{ max-width:180px; height:180px; } }
@media (max-width:560px){ .form-row{ flex-direction:column; } textarea{ min-height:120px; } }

/* ========= FOOTER ========= */
.site-footer{ background: linear-gradient(180deg,#0b1022 0%, #14162a 100%); color: #c9dbf3; padding: 64px 20px 36px; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.footer-inner{ max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 30% 20% 20% 30%; gap: 28px; column-gap: 28px; align-items: start; }
.footer-col h4{ margin: 0 0 16px 0; color: #fff; font-size: 15px; font-weight: 800; font-family: 'Poppins', sans-serif; letter-spacing: .02em; }
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-logo{ width:110px; height:auto; display:block; object-fit:contain; }
.footer-bio{ margin-top:14px; color:#aebfdc; font-size:14px; line-height:1.7; max-width:420px; }

.footer-socials{ margin-top:16px; display:flex; gap:10px; align-items:center; }
.footer-social-img { width:42px; height:42px; border-radius:10px; object-fit:cover; border: 1px solid rgba(255,255,255,0.03); background: rgba(255,255,255,0.02); transition: transform .18s ease, box-shadow .18s ease; display:inline-block; }
.footer-social-link:focus .footer-social-img, .footer-social-link:hover .footer-social-img { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(0,0,0,0.45); border-color: rgba(255,255,255,0.08); }

.footer-list{ list-style:none;padding:0;margin:0; }
.footer-list li { margin-bottom:12px; }
.footer-list a { color: #c9dbf3; text-decoration:none; font-size:15px; }
.footer-list a:hover { color:#fff; text-decoration:underline; }

.footer-contact { color: #aebfdc; font-size:14px; line-height:1.7; margin-top:6px; }

.newsletter{ margin-top:16px; display:flex; gap:10px; align-items:center; }
.newsletter input{ flex:1; min-width:0; padding:12px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: #c9dbf3; font-size:14px; }
.newsletter button{ padding:10px 16px; border-radius:999px; border:0; background: linear-gradient(90deg,#F15A29,#F9D74C); color:#081026; font-weight:700; cursor:pointer; white-space:nowrap; }

.footer-sep { max-width: var(--container); margin: 22px auto 0; border-top: 1px solid rgba(255,255,255,0.04); }
.footer-legal { max-width: var(--container); margin: 12px auto 0; color: #aebfdc; font-size:13px; display:flex; justify-content:center; align-items:center; gap:12px; padding-top:12px; flex-wrap:wrap; }
.footer-legal a{ color:#aebfdc; text-decoration:none; font-weight:600; }
.footer-legal a:hover{ color:#fff; text-decoration:underline; }

/* whatsapp FAB */
.whatsapp-fab{ position:fixed; right:18px; bottom:18px; width:62px; height:62px; border-radius:50%; z-index:9999; box-shadow: 0 18px 48px rgba(14,45,80,0.4); display:inline-grid; place-items:center; background: #fff; cursor:pointer; }
.whatsapp-fab img{ width:42px; height:42px; object-fit:contain; border-radius:8px; display:block; }

@media (max-width:1000px){ .footer-inner{ grid-template-columns: 1fr 1fr; row-gap:18px; } .footer-logo{ width:96px; } }
@media (max-width:560px){ .footer-inner{ grid-template-columns: 1fr; } .newsletter{ flex-direction:column; align-items:stretch; } .newsletter button{ width:100%; } .whatsapp-fab{ right:12px; bottom:12px; width:56px; height:56px; } }

/* focus outlines */
.footer-inner a:focus, .newsletter input:focus, .newsletter button:focus{ outline: 3px solid rgba(241,90,41,0.14); outline-offset: 3px; border-radius:8px; }

/* ====== DARK THEME VISIBILITY & PARTNER IMAGE FIXES ====== */

/* Make sure card backgrounds and text are readable in dark theme */
[data-theme="dark"] {
  /* small tweaks to ensure contrast */
  --card-bg: rgba(15,23,36,0.92);
  --muted: #BFCFE6;      /* lighter muted text */
  --secondary: #AFC8FF;  /* softer accent for headings */
}

/* Force components that used hard-coded colors to switch to variables in dark mode */
[data-theme="dark"] .lead,
[data-theme="dark"] .about-text,
[data-theme="dark"] .ba-text,
[data-theme="dark"] .testimonial-text,
[data-theme="dark"] .founder-bio,
[data-theme="dark"] .service-desc,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .small-note,
[data-theme="dark"] .testimonial-role,
[data-theme="dark"] .footer-bio,
[data-theme="dark"] .footer-contact {
  color: var(--muted) !important;
}

/* Ensure card-like sections use the dark card background and readable text */
[data-theme="dark"] .hero-content,
[data-theme="dark"] .about-card,
[data-theme="dark"] .ba-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .founder-card,
[data-theme="dark"] .form-card {
  background: var(--card-bg) !important;
  color: var(--ink) !important;
  border-color: rgba(255,255,255,0.04) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.28);
}

/* Caption, small banners readable in dark */
[data-theme="dark"] .ba-caption {
  background: rgba(255,255,255,0.04) !important;
  color: var(--muted) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}

/* Top labels (Before/After/AI) keep high contrast */
[data-theme="dark"] .ba-top-label,
[data-theme="dark"] .ba-top-label-right {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}

/* Footer tweaks in dark mode to keep text readable */
[data-theme="dark"] .site-footer {
  background: linear-gradient(180deg,#05060b 0%, #0a0d14 100%);
}
[data-theme="dark"] .footer-list a,
[data-theme="dark"] .footer-legal a {
  color: #cfe6ff;
}

/* Marquee / partner items: ensure they use card-bg (you had var(--bg-card) earlier) */
.marquee-item {
  background: var(--card-bg) !important;
}

/* PARTNER MEDIA: contain the logo image inside the box */
.partner-media {
  overflow: hidden;                 /* prevents image overflow */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
}

.partner-media img {
  max-width: 100%;
  max-height: 60px;        /* keeps logo inside the card height */
  width: auto;
  height: auto;
  object-fit: contain;     /* preserves aspect ratio, keeps inside box */
  display: block;
}

/* small responsive adjustments if needed */
@media (max-width:900px){
  .partner-media img { max-height: 48px; }
}
@media (max-width:560px){
  .partner-media img { max-height: 36px; }
}

/* Accessibility: ensure contrast on focus outlines in dark */
[data-theme="dark"] a:focus,
[data-theme="dark"] .newsletter input:focus,
[data-theme="dark"] .newsletter button:focus{
  outline: 3px solid rgba(175,200,255,0.18);
  outline-offset: 3px;
}