/* ════════════════════════════════════════
   SUMUKHAIL — HubSpot Inspired
   Font: Lexend + Inter
   Accent: #FF7A59 (Coral)
   Borders: #000000 (Black)
   BG: #FFFFFF White
   ════════════════════════════════════════ */

:root {
  --orange:        #FF7A59;
  --orange-hover:  #e8623f;
  --orange-dim:    rgba(255,122,89,0.08);
  --orange-border: rgba(255,122,89,0.3);

  --navy:          #1a2e3b;
  --navy-mid:      #33475B;

  --bg:            #FFFFFF;
  --bg-alt:        #F7F8FA;
  --card:          #FFFFFF;
  --border:        #000000;
  --border-light:  #e5e7eb;

  --text:          #1a2e3b;
  --muted:         #2d3f4e;
  --muted2:         #516f90;

  --font-head:     'Lexend', sans-serif;
  --font-body:     'Inter', sans-serif;

  --radius:        8px;
  --radius-lg:     12px;
  --shadow:        0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: #FFFFFF;
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:var(--font-body); }

/* ── NAV ── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:68px;
  background:#FFFFFF;
  border-bottom:1.5px solid #000000;
  transition:box-shadow 0.3s;
}
#nav.scrolled { box-shadow:0 2px 12px rgba(0,0,0,0.08); }
.nav-logo {
  font-family:var(--font-head);
  font-size:20px; font-weight:700;
  color:var(--navy); cursor:pointer;
}
.nav-logo span { color:var(--orange); }
.nav-links { list-style:none; display:flex; align-items:center; gap:2px; }
.nav-links li a {
  font-size:14px; font-weight:500; color:var(--navy);
  padding:6px 12px; border-radius:6px;
  transition:color 0.15s, background 0.15s;
}
.nav-links li a:hover { color:var(--orange); background:var(--orange-dim); }
.nav-live { display:inline-flex; align-items:center; gap:6px; }
.live-dot {
  width:6px; height:6px; border-radius:50%; background:#22c55e;
  animation:pulse-green 1.5s ease infinite;
}
@keyframes pulse-green { 0%,100%{opacity:0.4;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.1)} }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--orange); color:#FFFFFF !important;
  font-family:var(--font-body); font-size:14px; font-weight:600;
  padding:11px 22px; border-radius:6px; border:none; cursor:pointer;
  transition:background 0.2s, transform 0.15s;
  white-space:nowrap; text-decoration:none;
}
.btn-primary:hover { background:var(--orange-hover); transform:translateY(-1px); color:#FFFFFF !important; }
.btn-outline {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; color:var(--navy);
  font-family:var(--font-body); font-size:14px; font-weight:600;
  padding:10px 22px; border-radius:6px;
  border:1.5px solid #000000; cursor:pointer;
  transition:all 0.2s; white-space:nowrap; text-decoration:none;
}
.btn-outline:hover { border-color:var(--orange); color:var(--orange); background:var(--orange-dim); }

/* ── HERO ── */
.hero {
  min-height:90vh; display:flex; align-items:center;
  padding:100px 48px 80px;
  background:#FFFFFF;
  border-bottom:1.5px solid #000000;
}
.hero-content { max-width:740px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--orange-dim); border:1px solid var(--orange-border);
  color:var(--orange); font-size:12px; font-weight:600;
  padding:5px 14px; border-radius:4px; margin-bottom:24px; letter-spacing:0.3px;
}
.hero-title {
  font-family:var(--font-head);
  font-size:clamp(38px,5.5vw,68px); font-weight:700;
  line-height:1.08; letter-spacing:-1.5px; color:var(--navy); margin-bottom:20px;
}
.hero-title .orange { color:var(--orange); }
.hero-title .line { display:block; }
.hero-title .word { display:inline-block; }
.hero-sub {
  font-size:18px; color:var(--muted); line-height:1.7;
  max-width:700px; margin-bottom:32px; font-weight:400;
}
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; }
.audience-pill {
  font-size:12px; font-weight:500; color:var(--muted);
  background:var(--bg-alt); border:1.5px solid #000000;
  padding:5px 12px; border-radius:4px;
}

/* ── MARQUEE ── */
.marquee-section {
  background:var(--navy); padding:18px 0; overflow:hidden;
  border-bottom:1.5px solid #000000;
}
.marquee-label {
  text-align:center; font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,0.4); margin-bottom:12px;
}
.marquee-track { overflow:hidden; }
.marquee-inner {
  display:flex; gap:40px;
  animation:marqueeScroll 30s linear infinite; width:max-content;
}
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-item {
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:500; color:rgba(255,255,255,0.7); white-space:nowrap;
}
.marquee-icon { font-size:15px; }

/* ── SECTIONS ── */
.section { padding:96px 48px; max-width:1200px; margin:0 auto; }
.section-alt { background:var(--bg-alt); border-top:1.5px solid #000000; border-bottom:1.5px solid #000000; }
.section-alt .section { max-width:100%; padding:96px 48px; }
.eyebrow {
  font-size:11px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--orange); margin-bottom:14px;
}
.section-title {
  font-family:var(--font-head);
  font-size:clamp(26px,3.5vw,46px); font-weight:700;
  letter-spacing:-1px; line-height:1.1; color:var(--navy); margin-bottom:16px;
}
.section-title .orange { color:var(--orange); }
.section-sub { font-size:17px; color:var(--muted); line-height:1.7; max-width:700px; margin:0 auto; }

/* ── CARDS ── */
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.portfolio-card {
  background:#FFFFFF; border:1.5px solid #000000; border-radius:var(--radius-lg);
  padding:28px; transition:box-shadow 0.2s, transform 0.2s;
  display:flex; flex-direction:column; gap:14px; position:relative;
}
.portfolio-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.portfolio-card-tag { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); }
.portfolio-card-arrow { position:absolute; top:24px; right:24px; font-size:16px; color:var(--border-light); transition:color 0.2s; }
.portfolio-card:hover .portfolio-card-arrow { color:var(--orange); }
.portfolio-card-icon { color:var(--orange); }
.portfolio-card-title { font-family:var(--font-head); font-size:16px; font-weight:600; color:var(--text); line-height:1.3; }
.portfolio-card-desc { font-size:13px; color:var(--muted); line-height:1.65; }
.portfolio-card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.ptag { font-size:11px; background:var(--bg-alt); border:1px solid #000000; border-radius:4px; padding:3px 9px; color:var(--muted); font-weight:500; }

/* ── WHY CARDS ── */
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:48px; }
.why-card {
  background:#FFFFFF; border:1.5px solid #000000; border-radius:var(--radius-lg);
  padding:32px; transition:box-shadow 0.2s;
}
.why-card:hover { box-shadow:var(--shadow-md); }
.why-card-icon { margin-bottom:16px; }
.why-card-title { font-family:var(--font-head); font-size:18px; font-weight:600; color:var(--text); margin-bottom:10px; line-height:1.3; }
.why-card-desc { font-size:14px; color:var(--muted); line-height:1.7; }

/* ── FILTER TABS ── */
.pf-tab {
  background:none; border:1.5px solid #000000; border-radius:4px;
  padding:7px 18px; font-size:13px; font-weight:500; color:var(--navy);
  cursor:pointer; transition:all 0.2s; font-family:var(--font-body);
}
.pf-tab.active, .pf-tab:hover { border-color:var(--orange); color:var(--orange); background:var(--orange-dim); }

/* ── WORK CARDS ── */
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.work-card {
  background:#FFFFFF; border-radius:var(--radius-lg); border:1.5px solid #000000;
  transition:box-shadow 0.2s, transform 0.2s; overflow:hidden;
}
.work-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.work-card-thumb { height:160px; display:flex; align-items:center; justify-content:center; background:var(--bg-alt); border-bottom:1.5px solid #000000; }
.work-card-body { padding:20px; }
.work-card-tag { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--orange); margin-bottom:8px; }
.work-card-title { font-family:var(--font-head); font-size:16px; font-weight:600; margin-bottom:6px; line-height:1.3; color:var(--text); }
.work-card-desc { font-size:13px; color:var(--muted); line-height:1.65; margin-bottom:14px; }
.work-card-result {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.3);
  color:#15803d; font-size:11px; font-weight:600; padding:4px 10px; border-radius:4px;
}

/* ── MISSION ── */
.mission-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
  max-width:1200px; margin:0 auto; padding:96px 48px;
}
.mission-badge {
  display:inline-flex; background:rgba(255,200,0,0.1); border:1px solid rgba(255,200,0,0.3);
  color:#92680a; font-size:12px; font-weight:600; padding:5px 14px; border-radius:4px; margin-bottom:20px;
}
.mission-title {
  font-family:var(--font-head); font-size:clamp(22px,3vw,36px); font-weight:700;
  letter-spacing:-1px; line-height:1.15; margin-bottom:20px; color:var(--navy);
}
.mission-text { font-size:15px; color:var(--muted); line-height:1.8; margin-bottom:14px; }
.discount-card {
  background:var(--navy); border:1.5px solid #000000;
  border-radius:var(--radius-lg); padding:40px; text-align:center; margin-bottom:16px;
}
.discount-big { font-family:var(--font-head); font-size:72px; font-weight:700; color:var(--orange); line-height:1; }
.discount-label { font-size:18px; font-weight:600; color:#FFFFFF; margin:8px 0; }
.discount-sub { font-size:13px; color:rgba(255,255,255,0.55); line-height:1.6; }
.founder-quote { background:#FFFFFF; border:1.5px solid #000000; border-radius:var(--radius); padding:24px; }
.fq-text { font-size:14px; color:var(--muted); line-height:1.8; font-style:italic; margin-bottom:12px; }
.fq-author { font-size:13px; font-weight:600; color:var(--orange); }

/* ── FAQ ── */
.faq-list { max-width:760px; margin:48px auto 0; }
.faq-item { border-bottom:1.5px solid #000000; }
.faq-q {
  width:100%; background:none; border:none; text-align:left; padding:20px 0;
  font-family:var(--font-head); font-size:16px; font-weight:600; color:var(--navy);
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; transition:color 0.2s;
}
.faq-q:hover { color:var(--orange); }
.faq-icon { font-size:20px; color:var(--orange); flex-shrink:0; transition:transform 0.2s; }
.faq-a { font-size:14px; color:var(--muted); line-height:1.75; padding-bottom:20px; display:none; }
.faq-item.open .faq-a { display:block; }
.faq-item.open .faq-icon { transform:rotate(45deg); }

/* ── SERVICES PAGE ── */
.services-page-hero { text-align:center; padding:96px 48px 40px; background:var(--bg-alt); border-bottom:1.5px solid #000000; }
.pricing-tabs {
  display:flex; gap:0; flex-wrap:wrap; margin-bottom:40px;
  border-bottom:1.5px solid #000000;
}
.ptab {
  background:none; border:none; border-bottom:2px solid transparent;
  padding:12px 18px; font-size:13px; font-weight:600; color:var(--muted);
  cursor:pointer; font-family:var(--font-body); transition:color 0.2s, border-color 0.2s;
  margin-bottom:-2px; white-space:nowrap;
}
.ptab:hover { color:var(--orange); }
.ptab.active { color:var(--orange); border-bottom-color:var(--orange); }
.ptab-content { display:none; }
.ptab-content.active { display:block; }

/* ── PRICING CARDS ── */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; }
.price-card {
  background:#FFFFFF; border:1.5px solid #000000; border-radius:var(--radius-lg);
  padding:32px 28px; display:flex; flex-direction:column; transition:box-shadow 0.2s;
}
.price-card:hover { box-shadow:var(--shadow-md); }
.price-card.featured { border-color:var(--orange); border-width:2px; }
.price-card-tier { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); margin-bottom:16px; }
.india-price { font-size:13px; color:var(--muted); font-weight:500; margin-bottom:4px; }
.price-amount { font-family:var(--font-head); font-size:34px; font-weight:700; color:var(--navy); letter-spacing:-1px; margin-bottom:2px; }
.price-sub-text { font-size:12px; color:var(--muted2); margin-bottom:8px; }
.price-desc-text { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:20px; }
.price-divider { border:none; border-top:1.5px solid #000000; margin:16px 0; }
.price-feature { font-size:13px; color:var(--muted); line-height:1.6; padding:5px 0 5px 18px; position:relative; }
.price-feature::before { content:''; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:var(--orange); }
.price-cta {
  margin-top:auto; display:block; text-align:center; background:var(--orange);
  color:#FFFFFF !important; padding:12px; border-radius:6px; font-size:14px; font-weight:600;
  border:none; cursor:pointer; font-family:var(--font-body); text-decoration:none; margin-top:24px;
  transition:background 0.2s;
}
.price-cta:hover { background:var(--orange-hover); color:#FFFFFF !important; }

/* ── ABOUT PAGE ── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.about-photo { aspect-ratio:4/5; background:var(--bg-alt); border-radius:var(--radius-lg); border:1.5px solid #000000; overflow:hidden; }
.about-name { font-family:var(--font-head); font-size:48px; font-weight:700; letter-spacing:-2px; margin-bottom:6px; color:var(--navy); }
.about-role { font-size:16px; color:var(--orange); font-weight:600; margin-bottom:20px; }
.about-bio { font-size:15px; color:var(--muted); line-height:1.8; margin-bottom:16px; }
.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:32px 0; }
.about-stat { background:#FFFFFF; border:1.5px solid #000000; border-radius:var(--radius); padding:20px; text-align:center; }
.about-stat-num { font-family:var(--font-head); font-size:28px; font-weight:700; color:var(--orange); }
.about-stat-label { font-size:12px; color:var(--muted); margin-top:4px; }

/* ── ASSESSMENT ── */
.assessment-container { max-width:760px; margin:0 auto; padding:100px 32px 80px; }
.assessment-hero { text-align:center; margin-bottom:48px; }
.q-card { background:#FFFFFF; border:1.5px solid #000000; border-radius:var(--radius-lg); padding:40px; margin-bottom:20px; }
.q-num { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--orange); margin-bottom:10px; }
.q-text { font-family:var(--font-head); font-size:20px; font-weight:600; margin-bottom:24px; color:var(--navy); line-height:1.3; }
.q-options { display:flex; flex-direction:column; gap:10px; }
.q-option {
  background:var(--bg-alt); border:1.5px solid #000000; border-radius:8px;
  padding:14px 18px; cursor:pointer; font-size:14px; color:var(--muted);
  transition:all 0.15s; font-family:var(--font-body); text-align:left;
}
.q-option:hover { border-color:var(--orange); color:var(--text); background:var(--orange-dim); }
.q-option.selected { border-color:var(--orange); background:var(--orange-dim); color:var(--orange); font-weight:600; }
.progress-bar-outer { height:4px; background:var(--border-light); border-radius:2px; margin-bottom:32px; }
.progress-bar-inner { height:100%; background:var(--orange); border-radius:2px; transition:width 0.3s; }

/* ── FORMS ── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.form-field { margin-bottom:20px; }
.form-field label { display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea {
  width:100%; background:#FFFFFF; border:1.5px solid #000000; border-radius:6px;
  padding:12px 14px; font-size:14px; color:var(--text); font-family:var(--font-body); outline:none; transition:border-color 0.2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:var(--orange); }
.form-field textarea { resize:vertical; min-height:120px; }
.checkbox-wrap { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--muted); }
.checkbox-wrap input[type=checkbox] { accent-color:var(--orange); width:16px; height:16px; cursor:pointer; }
.women-check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin:8px 0; }
.women-check input { accent-color:var(--orange); width:16px; height:16px; margin-top:3px; flex-shrink:0; }
.women-check-label { font-size:13px; color:var(--muted); line-height:1.5; cursor:pointer; }
.women-check-label strong { color:var(--orange); }

/* ── CLOUD POPUP ── */
#cloudPop {
  position:fixed; bottom:28px; right:28px; z-index:800;
  background:var(--navy); color:#FFFFFF; border-radius:12px;
  padding:20px 22px; max-width:280px; border:1.5px solid #000000;
  box-shadow:var(--shadow-md); transform:translateY(120px); opacity:0;
  pointer-events:none; transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
}
#cloudPop.visible { transform:translateY(0); opacity:1; pointer-events:auto; }
.cp-close { position:absolute; top:10px; right:12px; background:none; border:none; color:rgba(255,255,255,0.5); font-size:16px; cursor:pointer; }
.cp-title { font-family:var(--font-head); font-size:15px; font-weight:600; margin-bottom:6px; color:#FFFFFF; }
.cp-sub { font-size:12px; color:rgba(255,255,255,0.65); line-height:1.5; margin-bottom:14px; }

/* ── MOBILE SIDEBAR ── */
#sidebar {
  background:#FFFFFF !important;
  border-left:1.5px solid #000000;
}
#sidebar a { color:var(--navy) !important; }
#sidebar a:hover { color:var(--orange) !important; }

/* ── FOOTER ── */
footer { background:var(--navy); color:#FFFFFF; border-top:1.5px solid #000000; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding:56px 48px 48px; }
.footer-logo { font-family:var(--font-head); font-size:22px; font-weight:700; margin-bottom:12px; }
.footer-logo span { color:var(--orange); }
.footer-desc { font-size:14px; color:rgba(255,255,255,0.55); line-height:1.7; margin-bottom:10px; }
.footer-india { font-size:13px; color:rgba(255,255,255,0.35); }
.footer-col-title { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:16px; }
.footer-link { display:block; font-size:14px; color:rgba(255,255,255,0.65); margin-bottom:8px; text-decoration:none; transition:color 0.2s; }
.footer-link:hover { color:#FFFFFF; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding:18px 48px; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:rgba(255,255,255,0.35); flex-wrap:wrap; gap:8px; }
.footer-bottom a { color:rgba(255,255,255,0.5); }

/* ── FREE TOOLS PAGE ── */
.ft-coming { padding:40px 48px 80px; max-width:1000px; margin:0 auto; }
.ft-cs-visual { text-align:center; margin-bottom:48px; }
.ft-cs-icon { width:60px; height:60px; border-radius:12px; background:var(--orange-dim); border:1.5px solid #000000; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.ft-cs-icon svg { width:26px; height:26px; stroke:var(--orange); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ft-cs-title { font-family:var(--font-head); font-size:30px; font-weight:700; color:var(--navy); margin-bottom:12px; letter-spacing:-0.5px; }
.ft-cs-sub { font-size:15px; color:var(--muted); line-height:1.7; max-width:420px; margin:0 auto; }
.ft-previews { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:40px; }
.ft-preview { background:#FFFFFF; border:1.5px solid #000000; border-radius:var(--radius); padding:20px; transition:box-shadow 0.2s; }
.ft-preview:hover { box-shadow:var(--shadow-md); }
.ft-preview-icon { width:36px; height:36px; border-radius:6px; background:var(--bg-alt); border:1px solid #000000; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.ft-preview-icon svg { width:16px; height:16px; stroke:var(--orange); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ft-preview-title { font-family:var(--font-head); font-size:14px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.ft-preview-desc { font-size:12px; color:var(--muted); line-height:1.6; }
.ft-notify { background:var(--bg-alt); border-radius:var(--radius-lg); padding:32px; text-align:center; border:1.5px solid #000000; }
.ft-notify-title { font-family:var(--font-head); font-size:20px; font-weight:600; margin-bottom:8px; color:var(--navy); }
.ft-notify-sub { font-size:14px; color:var(--muted); margin-bottom:20px; line-height:1.6; }
.ft-notify-form { display:flex; gap:10px; max-width:420px; margin:0 auto; }
.ft-notify-input { flex:1; background:#FFFFFF; border:1.5px solid #000000; border-radius:6px; padding:11px 14px; font-size:14px; color:var(--text); font-family:var(--font-body); outline:none; transition:border-color 0.2s; }
.ft-notify-input:focus { border-color:var(--orange); }

/* ── AI UPDATES ── */
.ai-updates-hero { text-align:center; padding:104px 48px 48px; border-bottom:1.5px solid #000000; }
.ai-updates-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:1000px; margin:0 auto; padding:48px 48px 80px; }
.ai-update-card { background:#FFFFFF; border:1.5px solid #000000; border-radius:var(--radius-lg); padding:28px; transition:box-shadow 0.2s; }
.ai-update-card:hover { box-shadow:var(--shadow-md); }

/* ── BLOG PAGE ── */
.blog-coming { text-align:center; padding:120px 48px; max-width:600px; margin:0 auto; }

/* ── VALUES ── */
.values-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.testimonials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.prompt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.timeline { display:flex; flex-direction:column; gap:24px; }
.timeline-item { display:flex; gap:20px; align-items:flex-start; }
.timeline-dot { width:10px; height:10px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:5px; }

/* ── BOOK CONSULTATION ── */
.step-indicator { display:flex; gap:8px; margin-bottom:40px; }
.step-dot { width:10px; height:10px; border-radius:50%; background:var(--border-light); border:1px solid #000000; transition:background 0.3s; }
.step-dot.active { background:var(--orange); border-color:var(--orange); }
.step-dot.done { background:var(--navy); border-color:var(--navy); }

/* ── NAV DROPDOWN ── */
.nav-dropdown-wrap { position:relative; }
.nav-dropdown-trigger { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.nav-dropdown-trigger svg { transition:transform 0.2s; flex-shrink:0; }
.nav-dropdown-wrap:hover .nav-dropdown-trigger svg { transform:rotate(180deg); }
.nav-dropdown {
  position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%);
  background:#FFFFFF; border:1.5px solid #000000; border-radius:var(--radius-lg);
  padding:8px; min-width:290px; z-index:1000;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.18s, visibility 0.18s; box-shadow:var(--shadow-md);
}
.nav-dropdown::after { content:''; position:absolute; top:-16px; left:0; right:0; height:16px; }
.nav-dropdown-wrap:hover .nav-dropdown { opacity:1; visibility:visible; pointer-events:auto; }
.nav-dropdown::before {
  content:''; position:absolute; top:-6px; left:50%;
  width:10px; height:10px; background:#FFFFFF;
  border-left:1.5px solid #000000; border-top:1.5px solid #000000;
  transform:translateX(-50%) rotate(45deg); z-index:1;
}
.nav-drop-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:6px; text-decoration:none; color:var(--text); transition:background 0.15s; }
.nav-drop-item:hover { background:var(--orange-dim); }
.nav-drop-highlight { border-top:1.5px solid #000000; margin-top:4px; padding-top:12px; }
.nav-drop-icon { width:34px; height:34px; border-radius:6px; flex-shrink:0; background:var(--orange-dim); border:1px solid #000000; display:flex; align-items:center; justify-content:center; }
.nav-drop-icon svg { width:16px; height:16px; stroke:var(--orange); }
.nav-drop-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.nav-drop-sub { font-size:11px; color:var(--muted); line-height:1.4; }
.nav-cta { font-size:13px; padding:9px 18px; }

/* ── UTILITIES ── */
.orange { color:var(--orange); }

/* ══════════════
   RESPONSIVE
══════════════ */
@media(max-width:1024px) {
  .portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
  .work-grid { grid-template-columns:repeat(2,1fr); }
}

@media(max-width:900px) {
  .nav-links { display:none !important; }
  .nav-cta { display:none !important; }
  #hamburger { display:flex !important; }
  #nav { padding:0 20px !important; height:60px; }
  .mission-inner { grid-template-columns:1fr; gap:40px; padding:64px 24px; }
  .contact-grid { grid-template-columns:1fr; }
  .about-grid { grid-template-columns:1fr; }
}

@media(max-width:768px) {
  .section { padding:64px 24px; }
  .hero { padding:88px 24px 64px; min-height:auto; }
  .hero-title { letter-spacing:-0.5px; }
  .portfolio-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .about-stats { grid-template-columns:1fr 1fr; }
  .footer-top { grid-template-columns:1fr; padding:40px 24px; gap:28px; }
  .footer-bottom { padding:16px 24px; font-size:11px; }
  .ai-updates-grid { grid-template-columns:1fr; padding:32px 24px 60px; }
  .ai-updates-hero { padding:88px 24px 32px; }
  .ft-previews { grid-template-columns:1fr; }
  .ft-coming { padding:32px 24px 60px; }
  .services-page-hero { padding:88px 24px 24px; }
  .about-page-hero { padding:88px 20px 32px !important; }
  .blog-hero { padding:88px 20px 32px !important; }
  .contact-hero { padding:88px 20px 32px !important; }

  .work-grid { grid-template-columns:1fr; }
  .mission-inner { padding:64px 24px; }
  .section-alt .section { padding:64px 24px; }
}

@media(max-width:480px) {
  .hero-btns { flex-direction:column; align-items:stretch; }
  .hero-btns a { width:100%; justify-content:center; }
  .marquee-section { display:none; }
  .about-stats { grid-template-columns:1fr; }
  .step-indicator { display:none; }
  .ft-notify-form { flex-direction:column; }
  .pricing-grid { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .prompt-grid { grid-template-columns:1fr; }
  .book-grid { grid-template-columns:1fr; }
}

/* ── AUDIT ADDITIONS ── */
label, .form-field label { font-size:14px !important; }
p { max-width:700px; }
.section-sub { max-width:700px; }