/* ========================================
   FIELDEE — New Age SaaS Design System
   Orange × Purple Brand Palette
   ======================================== */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Design Tokens ---------- */
:root {
  /* Brand Colors */
  --brand:        #EF785B;
  --brand-dark:   #D95A3B;
  --brand-light:  #F4947C;
  --brand-50:     #FFF4F1;
  --brand-100:    #FFE0D8;
  --brand-glow:   rgba(239, 120, 91, 0.25);

  --purple:       #F97316;
  --purple-dark:  #EA580C;
  --purple-light: #FDBA74;
  --purple-glow:  rgba(249, 115, 22, 0.15);

  /* Neutrals */
  --bg:           #FAFAFA;
  --bg-white:     #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #F3F4F6;
  --text:         #111827;
  --text-sec:     #4B5563;
  --text-muted:   #9CA3AF;
  --border:       #E5E7EB;
  --border-light: #F3F4F6;

  /* Status */
  --green:  #10B981;
  --amber:  #F59E0B;
  --rose:   #F43F5E;
  --sky:    #0EA5E9;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:     0 4px 16px rgba(0,0,0,.07);
  --shadow-md:  0 8px 30px rgba(0,0,0,.09);
  --shadow-lg:  0 16px 50px rgba(0,0,0,.12);
  --shadow-xl:  0 24px 80px rgba(0,0,0,.15);
  --shadow-brand: 0 8px 32px rgba(239, 120, 91, 0.35);
  --shadow-purple: 0 8px 32px rgba(26, 29, 58, 0.3);

  /* Layout */
  --radius:     12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full:999px;
  --transition: .3s cubic-bezier(.4,0,.2,1);

  /* Typography */
  --font-head:  'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Reset & Base ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Animations ---------- */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-14px); }
}
@keyframes pulse-ring {
  0%   { transform:scale(1); opacity:.5; }
  100% { transform:scale(1.6); opacity:0; }
}
@keyframes scroll-x {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
@keyframes gradient-shift {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}
@keyframes mesh-rotate {
  0%   { transform:rotate(0deg) scale(1); }
  50%  { transform:rotate(180deg) scale(1.1); }
  100% { transform:rotate(360deg) scale(1); }
}
@keyframes blink {
  0%,100% { opacity:1; }
  50%      { opacity:0; }
}

.fade-up {
  opacity:0;
  transform:translateY(30px);
  transition: opacity .7s var(--transition), transform .7s var(--transition);
}
.fade-up.visible { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.15s; }
.delay-2 { transition-delay:.3s; }
.delay-3 { transition-delay:.45s; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family: var(--font-head);
  font-weight:700;
  font-size:15px;
  padding:13px 28px;
  border-radius:var(--radius-full);
  border:2px solid transparent;
  cursor:pointer;
  transition:all var(--transition);
  white-space:nowrap;
  letter-spacing:-.1px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-light), var(--brand), var(--brand-dark));
  background-size:200% 200%;
  color:#fff;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(255,87,34,.5);
  animation: gradient-shift 2s ease infinite;
}
.btn-purple {
  background: linear-gradient(135deg, var(--purple-light), var(--purple), var(--purple-dark));
  color:#fff;
  box-shadow: var(--shadow-purple);
}
.btn-purple:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(124,58,237,.45);
}
.btn-outline {
  border-color: var(--border);
  color: var(--text);
  background: var(--bg-white);
}
.btn-outline:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform:translateY(-2px);
  box-shadow: var(--shadow);
}
.btn-ghost {
  background:transparent;
  color: var(--text-sec);
  border-color:transparent;
}
.btn-ghost:hover { color: var(--brand); background: var(--brand-50); }
.btn-lg   { padding:16px 40px; font-size:16px; }
.btn-sm   { padding:9px 22px;  font-size:14px; }
.btn-block { width:100%; }
.btn-white { background:#fff; color:var(--brand); border-color:#fff; font-weight:700; }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,255,255,.25); }
.btn-outline-white { border-color:rgba(255,255,255,.4); color:#fff; background:transparent; }
.btn-outline-white:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7); transform:translateY(-2px); }
.nav-login-link { color:var(--text-sec); font-weight:500; font-size:15px; transition:color var(--transition); }
.nav-login-link:hover { color:var(--brand); }
.btn-nav { background:var(--brand); color:#fff; padding:10px 22px; font-size:14px; }
.btn-nav:hover { background:var(--brand-dark); }

/* ---------- NAVBAR ---------- */
.navbar {
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:1000;
  padding:12px 0;
  transition:all var(--transition);
}
.navbar::before {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(248,249,255,.82);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(229,231,235,.5);
  transition:all var(--transition);
}
.navbar.scrolled::before {
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  background:rgba(255,255,255,.92);
}
.nav-container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:60px;
  position:relative;
  z-index:1;
}
.logo {
  display:flex;
  align-items:center;
  gap:10px;
  transition:transform var(--transition);
}
.logo:hover { transform:scale(1.03); }
.logo img { border-radius:10px; }
.logo-text {
  font-family:var(--font-head);
  font-size:23px;
  font-weight:900;
  color:var(--text);
  letter-spacing:-.5px;
}
.logo-text span { color:var(--brand); }

/* Nav Links */
.nav-links {
  display:flex;
  align-items:center;
  gap:4px;
}
.nav-links > li { position:relative; }
.nav-links > li > a,
.nav-links > li > button.nav-btn {
  display:flex;
  align-items:center;
  gap:4px;
  padding:8px 14px;
  font-size:14px;
  font-weight:500;
  color:var(--text-sec);
  border-radius:var(--radius);
  border:none;
  background:transparent;
  cursor:pointer;
  transition:all var(--transition);
  font-family:var(--font-body);
}
.nav-links > li > a:hover,
.nav-links > li > button.nav-btn:hover {
  color:var(--text);
  background:var(--border-light);
}
.nav-links > li > a.active { color:var(--brand); }
.nav-chevron {
  width:14px; height:14px;
  transition:transform var(--transition);
  flex-shrink:0;
}
.nav-dropdown-trigger.open .nav-chevron { transform:rotate(180deg); }

/* Dropdown */
.nav-dropdown {
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:240px;
  background:var(--bg-white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:all .25s var(--transition);
  z-index:100;
}
.nav-dropdown-trigger:hover .nav-dropdown,
.nav-dropdown-trigger.open .nav-dropdown {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-dropdown a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:var(--radius);
  font-size:14px;
  color:var(--text-sec);
  transition:all var(--transition);
}
.nav-dropdown a:hover { background:var(--bg); color:var(--brand); }
.nav-dropdown-icon {
  width:32px; height:32px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:16px;
}
.nav-dropdown-text strong { display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:1px; }
.nav-dropdown-text span  { font-size:11px; color:var(--text-muted); }
.nav-dropdown hr { border:none; border-top:1px solid var(--border-light); margin:6px 0; }

/* Nav CTA group */
.nav-cta-group { display:flex; align-items:center; gap:10px; }

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  border-radius:var(--radius);
}
.hamburger span {
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  border-radius:4px;
  transition:all var(--transition);
}
.hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
  display:none;
  position:fixed;
  top:84px; left:0; right:0;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:20px 28px;
  z-index:999;
  max-height:calc(100vh - 84px);
  overflow-y:auto;
  transform:translateY(-10px);
  opacity:0;
  transition:all .3s var(--transition);
}
.mobile-nav.active {
  display:block;
  transform:translateY(0);
  opacity:1;
}
.mobile-nav a, .mobile-nav-section-title {
  display:block;
  padding:12px 0;
  font-size:16px;
  font-weight:500;
  color:var(--text);
  border-bottom:1px solid var(--border-light);
}
.mobile-nav-section-title {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-muted);
  border-bottom:none;
  margin-top:16px;
  padding-bottom:4px;
}
.mobile-nav a:last-child { border-bottom:none; }
.mobile-nav .mobile-cta { display:flex; gap:12px; margin-top:20px; padding:0; border:none; }
.mobile-nav .mobile-cta .btn { flex:1; justify-content:center; }

/* ---------- HERO ---------- */
.hero {
  position:relative;
  padding:160px 0 120px;
  overflow:hidden;
  background: linear-gradient(180deg, #FFF3E8 0%, #F8F0FF 50%, var(--bg) 100%);
}
/* Animated mesh background */
.hero-mesh {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.mesh-blob {
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.25;
  animation:mesh-rotate 20s ease-in-out infinite;
}
.mesh-blob-1 { width:700px; height:700px; background:radial-gradient(circle, var(--brand) 0%, transparent 70%); top:-200px; right:-150px; animation-duration:25s; }
.mesh-blob-2 { width:600px; height:600px; background:radial-gradient(circle, var(--purple) 0%, transparent 70%); bottom:-200px; left:-150px; animation-duration:30s; animation-direction:reverse; }
.mesh-blob-3 { width:400px; height:400px; background:radial-gradient(circle, #FFB74D 0%, transparent 70%); top:40%; left:40%; animation-duration:20s; opacity:.15; }

.hero-container {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  position:relative;
  z-index:1;
}
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 18px;
  background:linear-gradient(135deg, var(--brand-50), #F3E8FF);
  border:1px solid rgba(255,87,34,.2);
  color:var(--brand);
  font-size:13px;
  font-weight:700;
  border-radius:var(--radius-full);
  margin-bottom:24px;
  font-family:var(--font-head);
  letter-spacing:.3px;
}
.hero-badge .badge-dot {
  width:7px; height:7px;
  background:var(--brand);
  border-radius:50%;
  animation:pulse-ring .8s ease infinite alternate;
}
.hero h1 {
  font-family:var(--font-head);
  font-size:58px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:-2px;
  margin-bottom:10px;
  color:var(--text);
}
.hero-typewriter-wrap {
  display:block;
  font-size:58px;
  font-weight:900;
  letter-spacing:-2px;
  margin-bottom:24px;
  min-height:72px;
}
.typewriter-text {
  background: linear-gradient(135deg, var(--brand), var(--purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.typewriter-cursor {
  display:inline-block;
  width:3px;
  height:.9em;
  background:var(--brand);
  margin-left:3px;
  vertical-align:middle;
  border-radius:2px;
  animation:blink .9s ease infinite;
  -webkit-text-fill-color: var(--brand);
}
.hero-subtitle {
  font-size:18px;
  color:var(--text-sec);
  line-height:1.7;
  margin-bottom:36px;
  max-width:520px;
}
.hero-ctas {
  display:flex;
  gap:14px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
.hero-trust {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:var(--text-muted);
}
.trust-avatars { display:flex; }
.avatar {
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-weight:700; font-size:12px;
  border:2px solid #fff;
  margin-left:-8px;
}
.avatar:first-child { margin-left:0; }

/* Hero Visual */
.hero-visual {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
.hero-app-mockup {
  position:relative;
  width:340px;
  border-radius:36px;
  overflow:hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.05);
  background:#1a1a2e;
  z-index:2;
}
.hero-app-mockup img { width:100%; height:auto; border-radius:36px; }
.hero-float-card {
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 20px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  font-size:13px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  z-index:3;
  font-family:var(--font-head);
  border:1px solid rgba(255,255,255,.8);
}
.card-1 { bottom:22%; left:-60px; animation:float 4s ease-in-out infinite; }
.card-2 { top:18%;  right:-50px; animation:float 4s ease-in-out infinite 2s; }
.card-3 { bottom:6%; right:10px;  animation:float 4s ease-in-out infinite 1s; }
.float-icon {
  width:32px; height:32px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  flex-shrink:0;
}

/* ---------- STATS STRIP ---------- */
.stats-strip {
  background:var(--bg-white);
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
  padding:28px 0;
}
.stats-strip .container {
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:32px;
  flex-wrap:wrap;
}
.stat-item { text-align:center; }
.stat-number {
  font-family:var(--font-head);
  font-size:32px;
  font-weight:900;
  background:linear-gradient(135deg,var(--brand),var(--purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-1px;
  line-height:1.1;
  margin-bottom:4px;
}
.stat-label {
  font-size:13px;
  color:var(--text-muted);
  font-weight:500;
}
.stat-divider {
  width:1px;
  height:48px;
  background:var(--border);
}

/* ---------- LOGO MARQUEE ---------- */
.logo-marquee {
  padding:48px 0 60px;
  background:var(--bg-white);
  overflow:hidden;
}
.logo-marquee-label {
  text-align:center;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--text-muted);
  margin-bottom:28px;
}
.marquee-track {
  display:flex;
  gap:48px;
  width:max-content;
  animation:scroll-x 25s linear infinite;
}
.marquee-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 28px;
  background:var(--surface-2);
  border-radius:var(--radius);
  font-size:15px;
  font-weight:700;
  color:var(--text-muted);
  white-space:nowrap;
  letter-spacing:.5px;
  border:1px solid var(--border-light);
  opacity:.6;
  filter:grayscale(1);
  transition:all var(--transition);
}
.marquee-logo:hover { opacity:1; filter:grayscale(0); color:var(--brand); }

/* ---------- SECTIONS SHARED ---------- */
section { padding:100px 0; }
.section-header { text-align:center; max-width:660px; margin:0 auto 64px; }
.section-label {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 18px;
  background:linear-gradient(135deg, var(--brand-50), #F3E8FF);
  border:1px solid rgba(255,87,34,.15);
  color:var(--brand);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.2px;
  border-radius:var(--radius-full);
  margin-bottom:16px;
  font-family:var(--font-head);
}
.section-header h2 {
  font-family:var(--font-head);
  font-size:42px;
  font-weight:900;
  letter-spacing:-1.2px;
  margin-bottom:16px;
  line-height:1.15;
  color:var(--text);
}
.section-header p {
  font-size:17px;
  color:var(--text-sec);
  line-height:1.7;
}
.gradient-text {
  background:linear-gradient(135deg, var(--brand), var(--purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ---------- FEATURES GRID ---------- */
.features { background:var(--bg); padding:100px 0; }
.features-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.feature-card {
  padding:36px 30px;
  background:var(--bg-white);
  border-radius:var(--radius-xl);
  border:1px solid var(--border-light);
  transition:all var(--transition);
  cursor:default;
  position:relative;
  overflow:hidden;
}
.feature-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--brand), var(--purple));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition);
  border-radius:3px 3px 0 0;
}
.feature-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(255,87,34,.15); }
.feature-card:hover::before { transform:scaleX(1); }
.feature-icon {
  width:56px; height:56px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  font-size:26px;
}
.icon-brand  { background:linear-gradient(135deg, var(--brand-50), var(--brand-100)); color:var(--brand); }
.icon-purple { background:linear-gradient(135deg, #F3E8FF, #DDD6FE); color:var(--purple); }
.icon-green  { background:#DCFCE7; color:var(--green); }
.icon-amber  { background:#FEF3C7; color:var(--amber); }
.icon-sky    { background:#E0F2FE; color:var(--sky); }
.icon-rose   { background:#FFE4E6; color:var(--rose); }
.feature-card h3 {
  font-family:var(--font-head);
  font-size:20px;
  font-weight:700;
  margin-bottom:10px;
  color:var(--text);
}
.feature-card p { font-size:15px; color:var(--text-sec); line-height:1.65; }
.feature-card-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:16px;
  font-size:14px;
  font-weight:600;
  color:var(--brand);
  transition:gap var(--transition);
}
.feature-card:hover .feature-card-link { gap:10px; }

/* ---------- FEATURE TABS ---------- */
.feature-tabs-section { background:var(--bg-white); padding:100px 0; }
.tabs-nav {
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:56px;
  padding:8px;
  background:var(--surface-2);
  border-radius:var(--radius-xl);
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
.tab-btn {
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  border:none;
  border-radius:var(--radius-lg);
  background:transparent;
  color:var(--text-sec);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition);
  font-family:var(--font-body);
  white-space:nowrap;
}
.tab-btn:hover { color:var(--text); background:rgba(255,255,255,.7); }
.tab-btn.active {
  background:var(--bg-white);
  color:var(--brand);
  box-shadow:var(--shadow-sm);
}
.tab-btn svg { width:18px; height:18px; flex-shrink:0; }
.tab-panel { display:none; animation:fadeUp .4s var(--transition); }
.tab-panel.active { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.tab-content h3 {
  font-family:var(--font-head);
  font-size:36px;
  font-weight:900;
  letter-spacing:-1px;
  margin-bottom:16px;
  line-height:1.2;
}
.tab-content p { font-size:16px; color:var(--text-sec); line-height:1.7; margin-bottom:28px; }
.tab-features-list { display:flex; flex-direction:column; gap:14px; margin-bottom:32px; }
.tab-feature-item { display:flex; align-items:flex-start; gap:12px; }
.tab-feature-check {
  width:22px; height:22px;
  border-radius:6px;
  background:linear-gradient(135deg, var(--brand), var(--purple));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  margin-top:1px;
}
.tab-feature-check svg { width:12px; height:12px; stroke:#fff; stroke-width:2.5; }
.tab-feature-item p { font-size:14px; color:var(--text-sec); line-height:1.5; margin:0; }
.tab-feature-item strong { display:block; font-size:14px; font-weight:600; color:var(--text); margin-bottom:2px; }
.tab-visual {
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-xl);
  aspect-ratio:4/3;
  background:linear-gradient(135deg, #1a1a2e, #16213e);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tab-visual-inner {
  width:100%;
  height:100%;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
/* Mock UI cards in tabs */
.mock-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.mock-title { color:rgba(255,255,255,.6); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.mock-badge { padding:4px 10px; border-radius:20px; font-size:10px; font-weight:700; }
.mock-badge.green { background:rgba(16,185,129,.15); color:#34D399; }
.mock-badge.brand { background:rgba(255,87,34,.15); color:#FF8A65; }
.mock-stat-row { display:flex; gap:12px; }
.mock-stat-card {
  flex:1;
  padding:16px;
  background:rgba(255,255,255,.07);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
}
.mock-stat-card .val {
  font-family:var(--font-head);
  font-size:22px;
  font-weight:800;
  color:#fff;
  display:block;
  margin-bottom:2px;
}
.mock-stat-card .lbl { font-size:10px; color:rgba(255,255,255,.45); }
.mock-progress-row { display:flex; flex-direction:column; gap:10px; }
.mock-progress-item { }
.mock-progress-label { display:flex; justify-content:space-between; margin-bottom:5px; font-size:11px; color:rgba(255,255,255,.5); }
.mock-progress-bar { height:6px; background:rgba(255,255,255,.1); border-radius:10px; overflow:hidden; }
.mock-progress-fill { height:100%; border-radius:10px; background:linear-gradient(90deg, var(--brand), var(--purple)); }
.mock-list { display:flex; flex-direction:column; gap:8px; }
.mock-list-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,.06);
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
}
.mock-list-avatar { width:28px; height:28px; border-radius:50%; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.mock-list-name { flex:1; font-size:12px; font-weight:600; color:rgba(255,255,255,.75); }
.mock-list-status { font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; }
.status-in  { background:rgba(16,185,129,.2); color:#34D399; }
.status-out { background:rgba(239,68,68,.2); color:#F87171; }
.status-pending { background:rgba(245,158,11,.2); color:#FCD34D; }
.mock-expense-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,.05);
  border-radius:10px;
}
.mock-expense-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.mock-expense-info { flex:1; }
.mock-expense-info .name { font-size:12px; font-weight:600; color:rgba(255,255,255,.75); }
.mock-expense-info .cat  { font-size:10px; color:rgba(255,255,255,.35); }
.mock-expense-amount { font-size:13px; font-weight:700; color:#fff; }
.mock-task-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,.05);
  border-radius:10px;
}
.mock-task-check { width:18px; height:18px; border-radius:5px; border:2px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mock-task-check.done { background:var(--green); border-color:var(--green); }
.mock-task-check.done svg { width:10px; height:10px; stroke:#fff; stroke-width:3; }
.mock-task-info { flex:1; font-size:12px; }
.mock-task-title { font-weight:600; color:rgba(255,255,255,.8); }
.mock-task-sub   { font-size:10px; color:rgba(255,255,255,.35); margin-top:1px; }
.mock-task-pri { font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px; }
.pri-high { background:rgba(239,68,68,.2); color:#F87171; }
.pri-med  { background:rgba(245,158,11,.2); color:#FCD34D; }
.pri-low  { background:rgba(16,185,129,.2);  color:#34D399; }

/* ---------- HOW IT WORKS ---------- */
.how-it-works { background:var(--bg); }
.steps-grid {
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:0;
}
.step-card {
  flex:1;
  max-width:320px;
  text-align:center;
  padding:44px 32px;
  background:var(--bg-white);
  border-radius:var(--radius-xl);
  border:1px solid var(--border-light);
  position:relative;
  transition:all var(--transition);
}
.step-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.step-number {
  position:absolute;
  top:-18px; left:50%;
  transform:translateX(-50%);
  width:40px; height:40px;
  background:linear-gradient(135deg, var(--brand), var(--purple));
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head);
  font-weight:800; font-size:15px;
  box-shadow:0 4px 16px rgba(255,87,34,.4);
  border:3px solid var(--bg);
}
.step-icon-wrap {
  width:72px; height:72px;
  border-radius:20px;
  background:linear-gradient(135deg, var(--brand-50), #F3E8FF);
  display:flex; align-items:center; justify-content:center;
  margin:24px auto 20px;
  font-size:30px;
}
.step-card h3 { font-family:var(--font-head); font-size:20px; font-weight:700; margin-bottom:10px; }
.step-card p  { font-size:15px; color:var(--text-sec); line-height:1.65; }
.step-connector {
  display:flex;
  align-items:center;
  padding-top:70px;
  flex-shrink:0;
  width:60px;
  justify-content:center;
}
.step-connector-line {
  width:40px; height:2px;
  background:linear-gradient(90deg, var(--brand), var(--purple));
  border-radius:2px;
  position:relative;
}
.step-connector-line::after {
  content:'';
  position:absolute;
  right:-5px; top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid var(--purple);
}

/* ---------- TESTIMONIALS ---------- */
.testimonials { background:var(--bg-white); }
.testimonials-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.testimonial-card {
  padding:36px 30px;
  background:var(--bg);
  border-radius:var(--radius-xl);
  border:1px solid var(--border-light);
  transition:all var(--transition);
  position:relative;
  overflow:hidden;
}
.testimonial-card::after {
  content:'"';
  position:absolute;
  top:-10px; right:20px;
  font-size:100px;
  line-height:1;
  color:rgba(255,87,34,.08);
  font-family:Georgia, serif;
  pointer-events:none;
}
.testimonial-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(255,87,34,.15); }
.stars { font-size:16px; color:var(--amber); margin-bottom:16px; letter-spacing:3px; }
.testimonial-card blockquote {
  font-size:15px;
  color:var(--text-sec);
  line-height:1.75;
  margin-bottom:24px;
  font-style:italic;
}
.testimonial-author { display:flex; align-items:center; gap:12px; }
.author-avatar {
  width:46px; height:46px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:14px;
  flex-shrink:0;
}
.testimonial-author strong { display:block; font-size:15px; font-weight:700; color:var(--text); }
.testimonial-author span  { font-size:12px; color:var(--text-muted); }

/* ---------- PRICING ---------- */
.pricing { background:var(--bg); }
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:start;
}
.pricing-card {
  padding:40px 32px;
  background:var(--bg-white);
  border-radius:var(--radius-xl);
  border:1px solid var(--border-light);
  transition:all var(--transition);
  position:relative;
}
.pricing-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.pricing-card.popular {
  border:2px solid var(--brand);
  box-shadow:var(--shadow-brand);
  transform:scale(1.04);
}
.pricing-card.popular:hover { transform:scale(1.04) translateY(-8px); box-shadow:0 24px 60px rgba(255,87,34,.35); }
.popular-badge {
  position:absolute;
  top:-14px; left:50%;
  transform:translateX(-50%);
  padding:6px 22px;
  background:linear-gradient(135deg, var(--brand), var(--purple));
  color:#fff;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.8px;
  border-radius:var(--radius-full);
  white-space:nowrap;
  font-family:var(--font-head);
}
.pricing-header h3 { font-family:var(--font-head); font-size:22px; font-weight:800; margin-bottom:4px; }
.pricing-desc { font-size:14px; color:var(--text-muted); margin-bottom:20px; }
.price { display:flex; align-items:baseline; gap:2px; margin-bottom:28px; }
.currency { font-size:24px; font-weight:700; color:var(--text); }
.amount { font-family:var(--font-head); font-size:54px; font-weight:900; letter-spacing:-2px; color:var(--text); line-height:1; }
.period { font-size:14px; color:var(--text-muted); margin-left:4px; }
.pricing-features { display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.pricing-features li {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:var(--text-sec);
}
.check-icon {
  width:20px; height:20px;
  border-radius:6px;
  background:linear-gradient(135deg, var(--brand-50), var(--brand-100));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.check-icon svg { width:11px; height:11px; stroke:var(--brand); stroke-width:2.5; }

/* ---------- CTA BANNER ---------- */
.cta-banner {
  padding:100px 0;
  background:linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f0e17 100%);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-banner .mesh-blob-1 { opacity:.35; }
.cta-banner .mesh-blob-2 { opacity:.25; }
.cta-banner-inner { position:relative; z-index:1; }
.cta-banner h2 {
  font-family:var(--font-head);
  font-size:48px;
  font-weight:900;
  color:#fff;
  margin-bottom:16px;
  letter-spacing:-1.5px;
}
.cta-banner p { font-size:18px; color:rgba(255,255,255,.65); margin-bottom:40px; }
.cta-buttons { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ---------- FOOTER ---------- */
.footer {
  padding:80px 0 32px;
  background:#0A0A0F;
  color:#CBD5E1;
}
.footer-grid {
  display:grid;
  grid-template-columns:2.5fr 1fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:56px;
}
.footer-brand .logo { margin-bottom:16px; }
.footer-brand .logo-text { color:#fff; }
.footer-brand p { font-size:14px; line-height:1.75; color:#94A3B8; max-width:260px; }
.footer-brand .social-icons { display:flex; gap:10px; margin-top:24px; }
.footer-brand .social-icons a {
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  color:#94A3B8;
  transition:all var(--transition);
  border:1px solid rgba(255,255,255,.06);
}
.footer-brand .social-icons a:hover { background:var(--brand); color:#fff; transform:translateY(-3px); }
.footer-col h4 {
  font-family:var(--font-head);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:#fff;
  margin-bottom:20px;
}
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size:14px; color:#94A3B8; transition:color var(--transition); }
.footer-col a:hover { color:#fff; }
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.06);
  flex-wrap:wrap;
  gap:12px;
}
.footer-bottom p { font-size:13px; color:#4B5563; }
.footer-bottom-links { display:flex; gap:20px; }
.footer-bottom-links a { font-size:13px; color:#4B5563; transition:color var(--transition); }
.footer-bottom-links a:hover { color:#fff; }

/* ---------- MODALS & FORMS ---------- */
.modal-overlay {
  position:fixed;
  inset:0;
  z-index:2000;
  background:rgba(10,10,15,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:all .3s ease;
}
.modal-overlay.active { opacity:1; visibility:visible; }
.modal-content {
  position:relative;
  background:var(--bg-white);
  width:100%;
  max-width:560px;
  border-radius:var(--radius-xl);
  padding:44px;
  box-shadow:0 32px 80px rgba(0,0,0,.35);
  transform:translateY(24px) scale(.97);
  transition:all .45s cubic-bezier(.16,1,.3,1);
  max-height:92vh;
  overflow-y:auto;
}
.modal-overlay.active .modal-content { transform:translateY(0) scale(1); }
.modal-close {
  position:absolute;
  top:20px; right:20px;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2);
  border:none;
  border-radius:10px;
  color:var(--text-sec);
  font-size:18px;
  transition:all var(--transition);
  cursor:pointer;
}
.modal-close:hover { background:var(--border); color:var(--text); }
.modal-header { margin-bottom:28px; }
.modal-header h3 { font-family:var(--font-head); font-size:26px; font-weight:800; margin-bottom:6px; color:var(--text); }
.modal-header p  { font-size:15px; color:var(--text-sec); }
.modal-form .form-group { margin-bottom:18px; }
.modal-form label {
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  margin-bottom:7px;
}
.required { color:var(--brand); }
.modal-form input,
.modal-form select,
.modal-form textarea {
  width:100%;
  padding:12px 16px;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  font-size:15px;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg-white);
  transition:border-color var(--transition), box-shadow var(--transition);
  outline:none;
}
.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus {
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(255,87,34,.12);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-error { display:none; font-size:12px; color:var(--rose); margin-top:4px; }
.field-error.show { display:block; }
.form-error { background:#FEF2F2; border:1px solid #FECACA; border-radius:var(--radius); padding:12px 16px; font-size:14px; color:#DC2626; margin-bottom:16px; display:none; }
.form-error.show { display:block; }

/* Wizard */
.wizard-modal { max-width:580px; }
.wizard-progress { display:flex; align-items:center; gap:0; margin-bottom:32px; }
.wizard-step-indicator { display:flex; flex-direction:column; align-items:center; gap:6px; }
.step-dot {
  width:36px; height:36px;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
  font-family:var(--font-head);
  border:2px solid var(--border);
  transition:all var(--transition);
}
.wizard-step-indicator.active .step-dot,
.wizard-step-indicator.completed .step-dot {
  background:linear-gradient(135deg, var(--brand), var(--purple));
  color:#fff;
  border-color:transparent;
  box-shadow:var(--shadow-brand);
}
.wizard-step-indicator span { font-size:11px; color:var(--text-muted); font-weight:600; }
.wizard-step-indicator.active span { color:var(--brand); }
.wizard-progress-line { flex:1; height:2px; background:linear-gradient(90deg, var(--border), var(--border)); margin:0 4px; position:relative; top:-10px; }
.wizard-panel { display:none; }
.wizard-panel.active { display:block; animation:fadeUp .35s ease; }
.wizard-btn-row { display:flex; gap:12px; justify-content:space-between; margin-top:8px; }
.plan-picker { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.plan-option { position:relative; cursor:pointer; }
.plan-option input { position:absolute; opacity:0; pointer-events:none; }
.plan-option-card {
  padding:18px 20px;
  border:2px solid var(--border);
  border-radius:var(--radius-lg);
  transition:all var(--transition);
}
.plan-option input:checked ~ .plan-option-card {
  border-color:var(--brand);
  background:var(--brand-50);
  box-shadow:0 0 0 3px rgba(255,87,34,.1);
}
.plan-option:hover .plan-option-card { border-color:var(--brand); }
.plan-option-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.plan-option-header strong { font-family:var(--font-head); font-size:16px; font-weight:700; }
.plan-price { font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--brand); }
.plan-price small { font-size:12px; font-weight:500; color:var(--text-muted); }
.plan-option-features { display:flex; flex-direction:column; gap:4px; }
.plan-option-features li { font-size:13px; color:var(--text-sec); }
.popular-plan-badge {
  position:absolute;
  top:-10px; right:12px;
  background:linear-gradient(135deg, var(--brand), var(--purple));
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:4px 12px;
  border-radius:var(--radius-full);
  text-transform:uppercase;
  letter-spacing:.5px;
}
.popular-plan { position:relative; }
.wizard-success-content { text-align:center; padding:20px 0; }
.wizard-success-icon {
  width:72px; height:72px;
  background:linear-gradient(135deg, var(--brand), var(--purple));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:32px;
  color:#fff;
  margin:0 auto 20px;
  animation:float 2s ease-in-out infinite;
}
.wizard-success-content h3 { font-family:var(--font-head); font-size:28px; font-weight:800; margin-bottom:10px; }
.wizard-success-content p  { font-size:16px; color:var(--text-sec); }
.wizard-success-email { font-size:14px; color:var(--text-muted); margin-top:8px; }

/* ---------- FEATURE PAGES ---------- */
.feature-page-hero {
  padding:160px 0 100px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, #FFF3E8 0%, #F8F0FF 60%, var(--bg) 100%);
}
.feature-page-hero .container { position:relative; z-index:1; }
.feature-page-hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.feature-page-hero h1 {
  font-family:var(--font-head);
  font-size:52px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:-1.5px;
  margin-bottom:20px;
}
.feature-page-hero p {
  font-size:18px;
  color:var(--text-sec);
  line-height:1.7;
  margin-bottom:36px;
}
.feature-visual-card {
  background:linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius:var(--radius-xl);
  padding:32px;
  box-shadow:var(--shadow-xl);
  border:1px solid rgba(255,255,255,.06);
}
.feature-detail-section {
  padding:100px 0;
  background:var(--bg-white);
}
.feature-detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.feature-detail-grid.reverse { direction:rtl; }
.feature-detail-grid.reverse > * { direction:ltr; }
.feature-detail-content h2 {
  font-family:var(--font-head);
  font-size:36px;
  font-weight:900;
  letter-spacing:-1px;
  margin-bottom:16px;
  line-height:1.2;
}
.feature-detail-content p { font-size:16px; color:var(--text-sec); line-height:1.7; margin-bottom:28px; }
.feature-bullets { display:flex; flex-direction:column; gap:16px; }
.feature-bullet { display:flex; align-items:flex-start; gap:14px; }
.bullet-icon {
  width:40px; height:40px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--brand-50), #F3E8FF);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  flex-shrink:0;
}
.bullet-text strong { display:block; font-size:15px; font-weight:700; color:var(--text); margin-bottom:3px; }
.bullet-text p { font-size:14px; color:var(--text-sec); line-height:1.5; margin:0; }

/* Features Hub Page */
.features-hub { padding:100px 0; background:var(--bg); }
.features-hub-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.hub-card {
  background:var(--bg-white);
  border-radius:var(--radius-xl);
  border:1px solid var(--border-light);
  padding:36px 30px;
  transition:all var(--transition);
  text-decoration:none;
  color:inherit;
  display:block;
  position:relative;
  overflow:hidden;
}
.hub-card::before {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--brand), var(--purple));
  transform:scaleX(0);
  transition:transform var(--transition);
}
.hub-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.hub-card:hover::before { transform:scaleX(1); }
.hub-card-icon { font-size:40px; margin-bottom:20px; }
.hub-card h3 { font-family:var(--font-head); font-size:22px; font-weight:700; margin-bottom:10px; }
.hub-card p  { font-size:15px; color:var(--text-sec); line-height:1.65; }
.hub-card-arrow {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:20px;
  font-size:14px;
  font-weight:600;
  color:var(--brand);
}

/* Comparison table */
.comparison-table {
  width:100%;
  border-collapse:collapse;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.comparison-table th {
  padding:16px 20px;
  text-align:left;
  font-family:var(--font-head);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  background:var(--bg);
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.comparison-table th.brand-col {
  background:linear-gradient(135deg, var(--brand-50), #F3E8FF);
  color:var(--brand);
}
.comparison-table td {
  padding:16px 20px;
  font-size:14px;
  color:var(--text-sec);
  border-bottom:1px solid var(--border-light);
  background:var(--bg-white);
}
.comparison-table td.brand-col { background:linear-gradient(135deg, rgba(255,243,224,.3), rgba(243,232,255,.2)); }
.comparison-table tr:last-child td { border-bottom:none; }
.check-yes { color:var(--green); font-size:18px; }
.check-no  { color:var(--text-muted); }

/* ---------- SUBPAGE LAYOUT (about, blog, etc) ---------- */
.sub-hero {
  padding:140px 0 80px;
  background:linear-gradient(180deg, #FFF3E8 0%, #F8F0FF 60%, var(--bg) 100%);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.sub-hero h1 {
  font-family:var(--font-head);
  font-size:52px;
  font-weight:900;
  letter-spacing:-1.5px;
  margin-bottom:16px;
}
.sub-hero p { font-size:18px; color:var(--text-sec); max-width:600px; margin:0 auto; line-height:1.7; }
.sub-page-content { padding:80px 0; background:var(--bg-white); }
.sub-page-content h2 { font-family:var(--font-head); font-size:28px; font-weight:800; margin-bottom:12px; margin-top:40px; }
.sub-page-content h2:first-child { margin-top:0; }
.sub-page-content p  { font-size:16px; color:var(--text-sec); line-height:1.75; margin-bottom:16px; }
.sub-page-content ul { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; padding-left:24px; list-style:disc; }
.sub-page-content ul li { font-size:16px; color:var(--text-sec); line-height:1.65; }

/* Blog cards */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.blog-card {
  background:var(--bg-white);
  border-radius:var(--radius-xl);
  border:1px solid var(--border-light);
  overflow:hidden;
  transition:all var(--transition);
}
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.blog-card-img { height:200px; background:linear-gradient(135deg, var(--brand-50), #F3E8FF); display:flex; align-items:center; justify-content:center; font-size:48px; }
.blog-card-body { padding:24px; }
.blog-tag { display:inline-block; padding:4px 12px; background:var(--brand-50); color:var(--brand); border-radius:var(--radius-full); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; margin-bottom:12px; }
.blog-card-body h3 { font-family:var(--font-head); font-size:18px; font-weight:700; margin-bottom:10px; line-height:1.35; }
.blog-card-body p  { font-size:14px; color:var(--text-sec); line-height:1.65; margin-bottom:16px; }
.blog-meta { font-size:12px; color:var(--text-muted); display:flex; gap:8px; }

/* Careers */
.job-card {
  background:var(--bg-white);
  border-radius:var(--radius-xl);
  border:1px solid var(--border-light);
  padding:28px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  transition:all var(--transition);
  flex-wrap:wrap;
}
.job-card:hover { transform:translateX(6px); box-shadow:var(--shadow); border-color:rgba(255,87,34,.2); }
.job-info h3 { font-family:var(--font-head); font-size:18px; font-weight:700; margin-bottom:6px; }
.job-tags { display:flex; gap:8px; flex-wrap:wrap; }
.job-tag {
  padding:4px 12px;
  border-radius:var(--radius-full);
  font-size:12px;
  font-weight:600;
}
.tag-dept  { background:var(--brand-50); color:var(--brand); }
.tag-type  { background:#EDE9FE; color:var(--purple); }
.tag-loc   { background:#F0FDF4; color:var(--green); }

/* Contact page */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.contact-info h2 { font-family:var(--font-head); font-size:36px; font-weight:800; margin-bottom:16px; }
.contact-info p  { font-size:16px; color:var(--text-sec); line-height:1.7; margin-bottom:32px; }
.contact-detail { display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; }
.contact-icon { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg, var(--brand-50), #F3E8FF); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.contact-detail-text strong { display:block; font-size:15px; font-weight:700; margin-bottom:2px; }
.contact-detail-text span  { font-size:14px; color:var(--text-sec); }
.contact-detail-text a { color:inherit; text-decoration:none; }
.contact-detail-text a:hover { color:var(--brand); }
.contact-form-card { background:var(--bg-white); border-radius:var(--radius-xl); padding:40px; box-shadow:var(--shadow); border:1px solid var(--border-light); }
.contact-form-card h3 { font-family:var(--font-head); font-size:22px; font-weight:800; margin-bottom:24px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px) {
  .hero h1, .hero-typewriter-wrap { font-size:46px; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1.5fr 1fr 1fr 1fr; }
  .features-hub-grid { grid-template-columns:repeat(2,1fr); }
  .tab-panel.active { grid-template-columns:1fr; gap:40px; }
  .tab-visual { max-width:520px; margin:0 auto; }
}
@media (max-width:768px) {
  .nav-links, .nav-cta-group { display:none; }
  .hamburger { display:flex; }
  .hero-container { grid-template-columns:1fr; text-align:center; gap:40px; }
  .hero h1, .hero-typewriter-wrap { font-size:36px; letter-spacing:-1px; }
  .hero-subtitle { font-size:16px; max-width:100%; }
  .hero-ctas { justify-content:center; }
  .hero-trust { justify-content:center; }
  .hero-visual { display:none; }
  .stats-strip .container { gap:16px; }
  .stat-divider { display:none; }
  .steps-grid { flex-direction:column; align-items:center; }
  .step-connector { display:none; }
  .testimonials-grid,
  .features-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .pricing-card.popular { transform:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .feature-page-hero-grid { grid-template-columns:1fr; gap:40px; text-align:center; }
  .feature-page-hero h1 { font-size:36px; }
  .feature-detail-grid { grid-template-columns:1fr; gap:40px; }
  .feature-detail-grid.reverse { direction:ltr; }
  .contact-grid { grid-template-columns:1fr; gap:40px; }
  .section-header h2 { font-size:32px; }
  .cta-banner h2 { font-size:32px; }
  .blog-grid { grid-template-columns:1fr; }
  .features-hub-grid { grid-template-columns:1fr; }
  .sub-hero h1 { font-size:36px; }
  .form-row { grid-template-columns:1fr; }
}