/* ═══════════════════════════════════════════════
   SaaS Landing Page Kit — Design System
   Premium UI Template by Acrutus
   ═══════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700;800&display=swap');

/* ── Design Tokens ── */
:root {
  --bg-0: #06060e;
  --bg-1: #0a0a14;
  --bg-2: #10101f;
  --bg-3: #181830;
  --bg-4: #22224a;
  --bg-5: #2e2e5c;

  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.16);

  --text-primary: #f0f0f8;
  --text-secondary: #a0a0c0;
  --text-tertiary: #6b6b90;
  --text-inverse: #06060e;

  --accent-indigo: #6366f1;
  --accent-indigo-soft: rgba(99,102,241,0.12);
  --accent-purple: #8b5cf6;
  --accent-pink: #ec4899;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --accent-emerald-soft: rgba(16,185,129,0.12);
  --accent-amber: #f59e0b;
  --accent-red: #ef4444;

  --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-accent: linear-gradient(135deg, #6366f1, #ec4899);
  --gradient-hero: linear-gradient(135deg, #6366f1 0%, #8b5cf6 40%, #ec4899 100%);
  --gradient-cta: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 30px rgba(99,102,241,0.25);
  --shadow-glow-lg: 0 0 60px rgba(99,102,241,0.3);

  --nav-height: 72px;
  --container-max: 1200px;
  --transition: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* ── Light Mode ── */
[data-theme="light"] {
  --bg-0: #f8f8fc;
  --bg-1: #ffffff;
  --bg-2: #f0f0f6;
  --bg-3: #ffffff;
  --bg-4: #e8e8f0;
  --bg-5: #d8d8e4;
  --border-subtle: rgba(0,0,0,0.05);
  --border-default: rgba(0,0,0,0.1);
  --border-strong: rgba(0,0,0,0.15);
  --text-primary: #12122a;
  --text-secondary: #4a4a6a;
  --text-tertiary: #8888a8;
  --text-inverse: #f0f0f8;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg-0);color:var(--text-primary);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background:transparent;border:none;outline:none}

/* ═══════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════ */

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-6)}
.section{padding:var(--space-24) 0}
.section--sm{padding:var(--space-16) 0}

/* ═══════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════ */

.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-height);display:flex;align-items:center;transition:all var(--transition);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent}
.nav--scrolled{background:rgba(10,10,20,0.85);border-bottom-color:var(--border-subtle)}
[data-theme="light"] .nav--scrolled{background:rgba(255,255,255,0.9)}
.nav .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav__brand{display:flex;align-items:center;gap:var(--space-3)}
.nav__logo{width:36px;height:36px;border-radius:var(--radius-md);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-weight:800;color:white;font-size:var(--text-lg)}
.nav__brand-name{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);letter-spacing:-0.02em}
.nav__links{display:flex;align-items:center;gap:var(--space-8)}
.nav__link{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);transition:color var(--transition);position:relative}
.nav__link:hover,.nav__link--active{color:var(--text-primary)}
.nav__link--active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--accent-indigo);border-radius:1px}
.nav__actions{display:flex;align-items:center;gap:var(--space-4)}
.nav__theme-btn{width:38px;height:38px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all var(--transition)}
.nav__theme-btn:hover{background:var(--bg-3);color:var(--accent-amber)}
.nav__hamburger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer}
.nav__hamburger span{display:block;width:22px;height:2px;background:var(--text-primary);border-radius:2px;transition:var(--transition)}

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-weight:600;border-radius:var(--radius-md);transition:all var(--transition);white-space:nowrap;position:relative;overflow:hidden}
.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);height:36px}
.btn--md{padding:var(--space-3) var(--space-6);font-size:var(--text-sm);height:42px}
.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base);height:50px;border-radius:var(--radius-lg)}
.btn--xl{padding:var(--space-5) var(--space-10);font-size:var(--text-lg);height:58px;border-radius:var(--radius-lg)}
.btn--primary{background:var(--gradient-primary);color:white;box-shadow:var(--shadow-sm)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}
.btn--secondary{background:var(--bg-3);border:1px solid var(--border-default);color:var(--text-primary)}
.btn--secondary:hover{background:var(--bg-4);border-color:var(--border-strong);transform:translateY(-1px)}
.btn--ghost{color:var(--text-secondary)}
.btn--ghost:hover{color:var(--text-primary);background:var(--bg-3)}
.btn--outline{border:1px solid var(--accent-indigo);color:var(--accent-indigo)}
.btn--outline:hover{background:var(--accent-indigo-soft);transform:translateY(-1px)}
.btn--white{background:white;color:#12122a;font-weight:700}
.btn--white:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn__arrow{transition:transform var(--transition)}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */

.hero{min-height:100vh;display:flex;align-items:center;position:relative;padding-top:var(--nav-height);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(var(--border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px);background-size:60px 60px;opacity:0.5;mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%)}
.hero__orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.35;animation:float 8s ease-in-out infinite}
.hero__orb--1{width:500px;height:500px;background:var(--accent-indigo);top:-10%;right:-5%;animation-delay:0s}
.hero__orb--2{width:400px;height:400px;background:var(--accent-purple);bottom:10%;left:-10%;animation-delay:2s}
.hero__orb--3{width:300px;height:300px;background:var(--accent-pink);top:40%;right:20%;animation-delay:4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}

.hero .container{position:relative;z-index:1;text-align:center;max-width:900px}
.hero__badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);background:var(--accent-indigo-soft);border:1px solid rgba(99,102,241,0.2);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;color:var(--accent-indigo);margin-bottom:var(--space-8);animation:fadeUp .6s ease both}
.hero__badge__dot{width:6px;height:6px;border-radius:50%;background:var(--accent-indigo);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero__title{font-family:var(--font-display);font-size:var(--text-6xl);font-weight:800;line-height:1.08;letter-spacing:-0.03em;margin-bottom:var(--space-6);animation:fadeUp .6s ease .1s both}
.hero__title .gradient-text{background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero__subtitle{font-size:var(--text-xl);color:var(--text-secondary);max-width:620px;margin:0 auto var(--space-10);line-height:1.7;animation:fadeUp .6s ease .2s both}
.hero__ctas{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-bottom:var(--space-12);animation:fadeUp .6s ease .3s both}
.hero__proof{display:flex;align-items:center;justify-content:center;gap:var(--space-4);animation:fadeUp .6s ease .4s both}
.hero__avatars{display:flex}
.hero__avatar{width:36px;height:36px;border-radius:50%;border:2px solid var(--bg-0);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:700;color:white;margin-left:-8px}
.hero__avatar:first-child{margin-left:0}
.hero__proof-text{font-size:var(--text-sm);color:var(--text-secondary)}
.hero__proof-text strong{color:var(--text-primary)}
.hero__stars{color:var(--accent-amber);letter-spacing:2px}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* Hero Screenshot */
.hero__screenshot{margin-top:var(--space-12);position:relative;animation:fadeUp .8s ease .5s both}
.hero__screenshot-inner{background:var(--bg-2);border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.hero__screenshot-bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--bg-3);border-bottom:1px solid var(--border-subtle)}
.hero__screenshot-dot{width:10px;height:10px;border-radius:50%}
.hero__screenshot-dot--r{background:#ef4444}
.hero__screenshot-dot--y{background:#f59e0b}
.hero__screenshot-dot--g{background:#10b981}
.hero__screenshot-body{padding:var(--space-8);min-height:300px;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:var(--text-lg)}
.hero__screenshot-glow{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);width:80%;height:100px;background:var(--accent-indigo);filter:blur(100px);opacity:0.2;pointer-events:none}

/* ═══════════════════════════════════════════════
   LOGO BAR
   ═══════════════════════════════════════════════ */

.logos{padding:var(--space-16) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.logos__label{text-align:center;font-size:var(--text-sm);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.1em;font-weight:600;margin-bottom:var(--space-10)}
.logos__grid{display:flex;align-items:center;justify-content:center;gap:var(--space-12);flex-wrap:wrap}
.logos__item{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--text-tertiary);opacity:0.5;transition:opacity var(--transition)}
.logos__item:hover{opacity:0.8}

/* ═══════════════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════════════ */

.section__header{text-align:center;max-width:700px;margin:0 auto var(--space-16)}
.section__label{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;color:var(--accent-indigo);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:var(--space-4)}
.section__title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:800;letter-spacing:-0.03em;line-height:1.15;margin-bottom:var(--space-4)}
.section__subtitle{font-size:var(--text-lg);color:var(--text-secondary);line-height:1.7}

.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.feature-card{background:var(--bg-2);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8);transition:all var(--transition)}
.feature-card:hover{border-color:var(--border-default);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.feature-card__icon{width:52px;height:52px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:var(--space-5)}
.feature-card__icon--indigo{background:var(--accent-indigo-soft);color:var(--accent-indigo)}
.feature-card__icon--emerald{background:var(--accent-emerald-soft);color:var(--accent-emerald)}
.feature-card__icon--purple{background:rgba(139,92,246,0.12);color:var(--accent-purple)}
.feature-card__icon--pink{background:rgba(236,72,153,0.12);color:var(--accent-pink)}
.feature-card__icon--cyan{background:rgba(6,182,212,0.12);color:var(--accent-cyan)}
.feature-card__icon--amber{background:rgba(245,158,11,0.12);color:var(--accent-amber)}
.feature-card__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-3);letter-spacing:-0.01em}
.feature-card__desc{font-size:var(--text-base);color:var(--text-secondary);line-height:1.7}

/* Feature Highlight (large left-right sections) */
.feature-highlight{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center;padding:var(--space-16) 0}
.feature-highlight--reverse{direction:rtl}
.feature-highlight--reverse > *{direction:ltr}
.feature-highlight__content{max-width:480px}
.feature-highlight__label{font-size:var(--text-sm);font-weight:600;color:var(--accent-indigo);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:var(--space-4)}
.feature-highlight__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;letter-spacing:-0.02em;line-height:1.2;margin-bottom:var(--space-4)}
.feature-highlight__desc{font-size:var(--text-lg);color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-6)}
.feature-highlight__list{display:flex;flex-direction:column;gap:var(--space-3)}
.feature-highlight__item{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-base);color:var(--text-secondary)}
.feature-highlight__check{width:20px;height:20px;border-radius:50%;background:var(--accent-emerald-soft);color:var(--accent-emerald);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);flex-shrink:0}
.feature-highlight__visual{background:var(--bg-2);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);min-height:360px;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary)}

/* ═══════════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════════ */

.pricing{background:var(--bg-1)}
.pricing__toggle{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-bottom:var(--space-12)}
.pricing__toggle-label{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary)}
.pricing__toggle-label--active{color:var(--text-primary)}
.pricing__switch{width:48px;height:24px;background:var(--bg-4);border-radius:var(--radius-full);position:relative;cursor:pointer;transition:background var(--transition)}
.pricing__switch::after{content:'';width:18px;height:18px;border-radius:50%;background:white;position:absolute;top:3px;left:3px;transition:transform var(--transition)}
.pricing__switch--active{background:var(--accent-indigo)}
.pricing__switch--active::after{transform:translateX(24px)}
.pricing__save{font-size:var(--text-xs);font-weight:700;color:var(--accent-emerald);background:var(--accent-emerald-soft);padding:2px 8px;border-radius:var(--radius-full)}

.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);align-items:start}
.pricing-card{background:var(--bg-2);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8);position:relative;transition:all var(--transition)}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.pricing-card--featured{border-color:var(--accent-indigo);background:var(--bg-3);box-shadow:var(--shadow-glow)}
.pricing-card__badge{position:absolute;top:calc(var(--space-5) * -1);left:50%;transform:translateX(-50%);background:var(--gradient-primary);color:white;font-size:var(--text-xs);font-weight:700;padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);white-space:nowrap}
.pricing-card__name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-2)}
.pricing-card__desc{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-6)}
.pricing-card__price{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-6)}
.pricing-card__amount{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:800;letter-spacing:-0.03em}
.pricing-card__period{font-size:var(--text-sm);color:var(--text-tertiary)}
.pricing-card__divider{height:1px;background:var(--border-subtle);margin-bottom:var(--space-6)}
.pricing-card__features{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-8)}
.pricing-card__feature{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--text-secondary)}
.pricing-card__feature svg{width:16px;height:16px;color:var(--accent-emerald);flex-shrink:0}
.pricing-card__feature--disabled{opacity:0.4}
.pricing-card__feature--disabled svg{color:var(--text-tertiary)}

/* ═══════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════ */

.testimonials__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.testimonial-card{background:var(--bg-2);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8);transition:all var(--transition)}
.testimonial-card:hover{border-color:var(--border-default)}
.testimonial-card__stars{color:var(--accent-amber);font-size:var(--text-sm);letter-spacing:2px;margin-bottom:var(--space-4)}
.testimonial-card__quote{font-size:var(--text-base);color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-6);font-style:italic}
.testimonial-card__author{display:flex;align-items:center;gap:var(--space-3)}
.testimonial-card__avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm);color:white;flex-shrink:0}
.testimonial-card__name{font-size:var(--text-sm);font-weight:600}
.testimonial-card__role{font-size:var(--text-xs);color:var(--text-tertiary)}

/* ═══════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════ */

.faq__list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-3)}
.faq-item{background:var(--bg-2);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--transition)}
.faq-item:hover{border-color:var(--border-default)}
.faq-item__question{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);cursor:pointer;font-weight:600;font-size:var(--text-base);gap:var(--space-4)}
.faq-item__icon{width:24px;height:24px;color:var(--text-tertiary);transition:transform var(--transition);flex-shrink:0}
.faq-item--open .faq-item__icon{transform:rotate(45deg);color:var(--accent-indigo)}
.faq-item__answer{padding:0 var(--space-6) var(--space-5);font-size:var(--text-base);color:var(--text-secondary);line-height:1.7;display:none}
.faq-item--open .faq-item__answer{display:block}

/* ═══════════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════════ */

.cta{position:relative;overflow:hidden}
.cta__card{background:var(--bg-2);border:1px solid var(--border-subtle);border-radius:var(--radius-2xl);padding:var(--space-20) var(--space-8);text-align:center;position:relative;overflow:hidden}
.cta__bg-orb{position:absolute;border-radius:50%;filter:blur(100px)}
.cta__bg-orb--1{width:400px;height:400px;background:var(--accent-indigo);top:-20%;left:-10%;opacity:0.15}
.cta__bg-orb--2{width:300px;height:300px;background:var(--accent-pink);bottom:-20%;right:-10%;opacity:0.1}
.cta__content{position:relative;z-index:1}
.cta__title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:800;letter-spacing:-0.03em;margin-bottom:var(--space-4)}
.cta__desc{font-size:var(--text-lg);color:var(--text-secondary);max-width:500px;margin:0 auto var(--space-8);line-height:1.7}
.cta__actions{display:flex;align-items:center;justify-content:center;gap:var(--space-4)}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */

.footer{border-top:1px solid var(--border-subtle);padding:var(--space-16) 0 var(--space-8)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-12);margin-bottom:var(--space-12)}
.footer__brand-desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.7;margin-top:var(--space-4);max-width:280px}
.footer__social{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.footer__social-link{width:36px;height:36px;border-radius:var(--radius-md);background:var(--bg-3);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all var(--transition)}
.footer__social-link:hover{background:var(--accent-indigo-soft);color:var(--accent-indigo)}
.footer__col-title{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-tertiary);margin-bottom:var(--space-5)}
.footer__links{display:flex;flex-direction:column;gap:var(--space-3)}
.footer__link{font-size:var(--text-sm);color:var(--text-secondary);transition:color var(--transition)}
.footer__link:hover{color:var(--text-primary)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;padding-top:var(--space-8);border-top:1px solid var(--border-subtle);font-size:var(--text-sm);color:var(--text-tertiary)}

/* ═══════════════════════════════════════════════
   BLOG CARDS
   ═══════════════════════════════════════════════ */

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.blog-card{background:var(--bg-2);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-default)}
.blog-card__image{height:200px;background:var(--bg-3);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:var(--text-sm)}
.blog-card__body{padding:var(--space-6)}
.blog-card__tag{font-size:var(--text-xs);font-weight:600;color:var(--accent-indigo);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-3)}
.blog-card__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-3);letter-spacing:-0.01em;line-height:1.3}
.blog-card__excerpt{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-4)}
.blog-card__meta{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-xs);color:var(--text-tertiary)}
.blog-card__author{display:flex;align-items:center;gap:var(--space-2)}
.blog-card__author-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:white}

/* ═══════════════════════════════════════════════
   CONTACT / FORMS
   ═══════════════════════════════════════════════ */

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:start}
.contact-info__item{display:flex;gap:var(--space-4);margin-bottom:var(--space-6)}
.contact-info__icon{width:44px;height:44px;border-radius:var(--radius-lg);background:var(--accent-indigo-soft);color:var(--accent-indigo);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2rem}
.contact-info__label{font-size:var(--text-sm);color:var(--text-tertiary);margin-bottom:2px}
.contact-info__value{font-size:var(--text-base);font-weight:500}

.form-card{background:var(--bg-2);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8)}
.form__group{margin-bottom:var(--space-5)}
.form__label{display:block;font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-2);color:var(--text-secondary)}
.form__input,.form__textarea{width:100%;padding:var(--space-3) var(--space-4);background:var(--bg-3);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-size:var(--text-base);color:var(--text-primary);transition:all var(--transition)}
.form__input:focus,.form__textarea:focus{border-color:var(--accent-indigo);box-shadow:0 0 0 3px var(--accent-indigo-soft)}
.form__input::placeholder,.form__textarea::placeholder{color:var(--text-tertiary)}
.form__textarea{min-height:120px;resize:vertical}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}

/* ═══════════════════════════════════════════════
   ABOUT / TEAM
   ═══════════════════════════════════════════════ */

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.team-card{background:var(--bg-2);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-6);text-align:center;transition:all var(--transition)}
.team-card:hover{border-color:var(--border-default);transform:translateY(-4px)}
.team-card__avatar{width:80px;height:80px;border-radius:50%;margin:0 auto var(--space-4);display:flex;align-items:center;justify-content:center;font-size:var(--text-2xl);font-weight:800;color:white}
.team-card__name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-1)}
.team-card__role{font-size:var(--text-sm);color:var(--text-tertiary);margin-bottom:var(--space-4)}
.team-card__socials{display:flex;justify-content:center;gap:var(--space-2)}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);padding:var(--space-12) 0}
.stat-block{text-align:center}
.stat-block__value{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:800;letter-spacing:-0.02em;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-block__label{font-size:var(--text-sm);color:var(--text-secondary);margin-top:var(--space-2)}

/* ═══════════════════════════════════════════════
   BADGES & UTILITIES
   ═══════════════════════════════════════════════ */

.badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:4px 12px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600}
.badge--success{background:var(--accent-emerald-soft);color:var(--accent-emerald)}
.badge--warning{background:rgba(245,158,11,0.12);color:var(--accent-amber)}
.badge--danger{background:rgba(239,68,68,0.12);color:var(--accent-red)}
.badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}

.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-muted{color:var(--text-tertiary)}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

@media(max-width:1024px){
  .features-grid,.pricing__grid,.testimonials__grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .feature-highlight{grid-template-columns:1fr;gap:var(--space-8)}
  .feature-highlight--reverse{direction:ltr}
  .hero__title{font-size:var(--text-5xl)}
  .section__title{font-size:var(--text-3xl)}
  .stats-row{grid-template-columns:repeat(2,1fr);gap:var(--space-8)}
}

@media(max-width:768px){
  .nav__links{display:none}
  .nav__hamburger{display:flex}
  .hero__title{font-size:var(--text-4xl)}
  .hero__subtitle{font-size:var(--text-base)}
  .hero__ctas{flex-direction:column;width:100%}
  .hero__ctas .btn{width:100%}
  .features-grid,.pricing__grid,.testimonials__grid,.blog-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .pricing-card--featured{order:-1}
  .cta__title{font-size:var(--text-3xl)}
  .hero{min-height:auto;padding-top:calc(var(--nav-height) + var(--space-12));padding-bottom:var(--space-12)}
  .section{padding:var(--space-16) 0}
  .container{padding:0 var(--space-4)}
  .footer__bottom{flex-direction:column;gap:var(--space-3);text-align:center}
  .form__row{grid-template-columns:1fr}
}

@media(max-width:480px){
  .hero__title{font-size:var(--text-3xl)}
  .stats-row{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr}
}