/* =============================================
   MAKDOCTOR PORTAL — MAIN STYLESHEET
   Design Haptic Agency
   White mode default | Dark mode toggle
   ============================================= */

/* ---- GOOGLE FONTS ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---- CSS VARIABLES ---- */
:root {
  /* Brand Colors */
  --primary:       #7C3AED;
  --primary-light: #8B5CF6;
  --primary-dark:  #6D28D9;
  --primary-bg:    rgba(124,58,237,.08);
  --primary-glow:  rgba(124,58,237,.25);
  --accent:        #EC4899;
  --accent-bg:     rgba(236,72,153,.08);
  --emerald:       #10B981;
  --emerald-bg:    rgba(16,185,129,.08);
  --amber:         #F59E0B;
  --amber-bg:      rgba(245,158,11,.08);
  --rose:          #F43F5E;
  --rose-bg:       rgba(244,63,94,.08);
  --blue:          #3B82F6;
  --blue-bg:       rgba(59,130,246,.08);
  --cyan:          #06B6D4;

  /* Light Mode (default) */
  --bg:            #F8F9FF;
  --bg2:           #F1F4FF;
  --surface:       #FFFFFF;
  --card:          #FFFFFF;
  --card2:         #F8F9FF;
  --border:        rgba(0,0,0,.08);
  --border2:       rgba(0,0,0,.14);
  --text:          #0F172A;
  --text2:         #475569;
  --text3:         #94A3B8;
  --shadow:        0 4px 24px rgba(0,0,0,.07);
  --shadow-md:     0 8px 40px rgba(0,0,0,.10);
  --shadow-lg:     0 20px 60px rgba(0,0,0,.12);
  --shadow-color:  0 8px 32px rgba(124,58,237,.15);

  /* Layout */
  --nav-h:         68px;
  --max-w:         1280px;
  --radius:        16px;
  --radius-sm:     10px;
  --radius-xs:     7px;
  --transition:    .3s cubic-bezier(.4,0,.2,1);
  --transition-fast: .18s cubic-bezier(.4,0,.2,1);
}

/* ---- DARK MODE ---- */
[data-theme="dark"] {
  --bg:            #060912;
  --bg2:           #0B1120;
  --surface:       #0F1729;
  --card:          #131E35;
  --card2:         #172540;
  --border:        rgba(255,255,255,.07);
  --border2:       rgba(255,255,255,.13);
  --text:          #E2E8F0;
  --text2:         #94A3B8;
  --text3:         #475569;
  --shadow:        0 4px 24px rgba(0,0,0,.35);
  --shadow-md:     0 8px 40px rgba(0,0,0,.45);
  --shadow-lg:     0 20px 60px rgba(0,0,0,.55);
  --shadow-color:  0 8px 32px rgba(124,58,237,.3);
}

/* ---- RESET ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  transition:background var(--transition), color var(--transition);
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
button { font-family:'Inter',sans-serif; cursor:pointer; border:none; background:none; }
input, textarea, select { font-family:'Inter',sans-serif; }
ul, ol { list-style:none; }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary-light); }

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.25; color:var(--text); }
h1 { font-size:clamp(2rem,5vw,3.25rem); font-weight:800; letter-spacing:-.02em; }
h2 { font-size:clamp(1.5rem,3.5vw,2.25rem); font-weight:700; letter-spacing:-.015em; }
h3 { font-size:clamp(1.1rem,2.5vw,1.5rem); font-weight:700; }
h4 { font-size:1.125rem; font-weight:600; }
p  { color:var(--text2); line-height:1.7; }
.mono { font-family:'JetBrains Mono',monospace; }

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.container { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.section    { padding:80px 0; }
.section-sm { padding:48px 0; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.flex     { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }
.gap-16 { gap:16px; }
.gap-24 { gap:24px; }
.text-center { text-align:center; }
.ml-auto { margin-left:auto; }

/* ============================================
   CARD COMPONENT
   ============================================ */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:all var(--transition);
}
.card:hover { border-color:var(--border2); box-shadow:var(--shadow); }
.card-hover:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card-body { padding:24px; }
.card-sm .card-body { padding:18px; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:600;
  transition:all var(--transition); border:2px solid transparent;
  white-space:nowrap; cursor:pointer; outline:none;
}
.btn-primary {
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;
  box-shadow:0 6px 20px var(--primary-glow);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 28px var(--primary-glow); }
.btn-outline {
  background:transparent; color:var(--primary);
  border-color:var(--primary);
}
.btn-outline:hover { background:var(--primary-bg); }
.btn-ghost {
  background:var(--card2); color:var(--text2);
  border-color:var(--border);
}
.btn-ghost:hover { background:var(--bg2); border-color:var(--border2); color:var(--text); }
.btn-sm { padding:8px 16px; font-size:13px; }
.btn-lg { padding:15px 32px; font-size:16px; border-radius:12px; }
.btn-icon { width:40px; height:40px; padding:0; border-radius:var(--radius-sm); flex-shrink:0; }

/* ============================================
   BADGE / CHIP
   ============================================ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.badge-primary  { background:var(--primary-bg); color:var(--primary); }
.badge-emerald  { background:var(--emerald-bg); color:var(--emerald); }
.badge-rose     { background:var(--rose-bg);    color:var(--rose); }
.badge-amber    { background:var(--amber-bg);   color:var(--amber); }
.badge-blue     { background:var(--blue-bg);    color:var(--blue); }
.badge-live::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse-dot 1.5s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ============================================
   SECTION HEADER
   ============================================ */
.section-header { margin-bottom:48px; }
.section-header.center { text-align:center; }
.section-label {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--primary); margin-bottom:12px;
}
.section-label::before { content:''; width:24px; height:2px; background:var(--primary); border-radius:2px; }
.section-title { margin-bottom:12px; }
.section-desc { font-size:1rem; max-width:540px; }
.section-header.center .section-desc { margin:0 auto; }

/* ============================================
   NAVBAR
   ============================================ */
#navbar {
  position:sticky; top:0; z-index:1000;
  height:var(--nav-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:all var(--transition);
}
[data-theme="dark"] #navbar {
  background:rgba(9,13,28,.92);
  border-bottom-color:var(--border);
}
#navbar .nav-inner {
  height:var(--nav-h);
  display:flex; align-items:center; gap:0;
}
.nav-logo {
  display:flex; align-items:center; gap:10px;
  font-size:17px; font-weight:800; color:var(--text);
  text-decoration:none; margin-right:40px; flex-shrink:0;
}
.nav-logo-icon {
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:18px; box-shadow:0 4px 14px var(--primary-glow);
}
.nav-logo span { color:var(--primary); }
.nav-links { display:flex; align-items:center; gap:4px; flex:1; }
.nav-link {
  padding:8px 14px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:500; color:var(--text2);
  transition:all var(--transition-fast); white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.nav-link:hover { color:var(--text); background:var(--card2); }
.nav-link.active { color:var(--primary); background:var(--primary-bg); font-weight:600; }
.nav-link .nav-badge {
  width:6px; height:6px; border-radius:50%;
  background:var(--emerald); flex-shrink:0;
}
.nav-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }

/* Theme Toggle */
.theme-toggle {
  width:44px; height:44px; border-radius:var(--radius-sm);
  background:var(--card2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; transition:all var(--transition-fast);
  flex-shrink:0;
}
.theme-toggle:hover { border-color:var(--primary); color:var(--primary); }
.theme-toggle .icon-sun  { display:none; }
.theme-toggle .icon-moon { display:block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display:block; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }

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

/* Mobile nav overlay */
.mobile-nav {
  display:none; position:fixed; inset:0; z-index:999;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
}
.mobile-nav-panel {
  position:absolute; right:0; top:0; bottom:0; width:280px;
  background:var(--surface); padding:24px; overflow-y:auto;
  box-shadow:var(--shadow-lg); transform:translateX(100%);
  transition:transform var(--transition);
}
.mobile-nav.open { display:block; }
.mobile-nav.open .mobile-nav-panel { transform:none; }
.mobile-nav-links { display:flex; flex-direction:column; gap:4px; margin-top:24px; }
.mobile-nav-link {
  padding:12px 16px; border-radius:var(--radius-sm);
  font-size:15px; font-weight:500; color:var(--text2);
  display:flex; align-items:center; gap:10px;
  transition:all var(--transition-fast);
}
.mobile-nav-link:hover { background:var(--primary-bg); color:var(--primary); }
.mobile-nav-link.active { background:var(--primary-bg); color:var(--primary); font-weight:600; }

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  padding:80px 0 60px;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#F8F9FF 0%,#EEF0FF 40%,#F5F0FF 70%,#FFF0F5 100%);
}
[data-theme="dark"] .hero {
  background:linear-gradient(135deg,#060912 0%,#0D1035 40%,#120828 70%,#0A0914 100%);
}
.hero-bg-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(124,58,237,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.06) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);
}
.hero-blob {
  position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px); opacity:.35;
}
.hero-blob-1 { width:500px; height:500px; background:var(--primary-light); top:-100px; right:-100px; animation:float 8s ease-in-out infinite; }
.hero-blob-2 { width:400px; height:400px; background:var(--accent); bottom:-100px; left:-100px; animation:float 10s ease-in-out infinite reverse; }
@keyframes float { 0%,100%{transform:translate(0,0);} 50%{transform:translate(20px,-20px);} }

.hero-inner {
  display:grid; grid-template-columns:1fr 480px; gap:60px; align-items:center;
  position:relative; z-index:1;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--primary-bg); border:1px solid rgba(124,58,237,.2);
  padding:6px 14px; border-radius:20px;
  font-size:12px; font-weight:700; color:var(--primary);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:20px;
}
.hero-eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--emerald); animation:pulse-dot 1.5s infinite; }
.hero-title { margin-bottom:20px; }
.hero-title .highlight {
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-desc { font-size:1.05rem; max-width:480px; margin-bottom:32px; }
.hero-cta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:40px; }
.hero-stats-row {
  display:flex; gap:24px; flex-wrap:wrap;
  padding-top:32px; border-top:1px solid var(--border);
}
.hero-stat { }
.hero-stat-num {
  font-size:1.6rem; font-weight:800; color:var(--text);
  font-family:'JetBrains Mono',monospace;
}
.hero-stat-num .unit { font-size:1rem; color:var(--primary); font-weight:700; }
.hero-stat-label { font-size:12px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }

/* Hero Card (right side) */
.hero-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow-md);
  animation:hero-card-float 6s ease-in-out infinite;
  position:relative; z-index:1;
}
@keyframes hero-card-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.hero-card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.hero-card-title { font-size:14px; font-weight:700; }
.hero-card-sub { font-size:11px; color:var(--text3); margin-top:2px; }

/* Mini GMB cards inside hero card */
.hero-gmb-row { display:flex; flex-direction:column; gap:10px; }
.hero-gmb-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--card2); border:1px solid var(--border);
  transition:all var(--transition-fast);
}
.hero-gmb-item:hover { border-color:var(--border2); }
.hgi-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.hgi-info { flex:1; }
.hgi-name { font-size:13px; font-weight:600; }
.hgi-loc { font-size:11px; color:var(--text3); }
.hgi-rank {
  padding:3px 10px; border-radius:6px;
  font-size:12px; font-weight:800; font-family:'JetBrains Mono',monospace;
}
.rank-top1 { background:var(--emerald-bg); color:var(--emerald); }
.rank-top5 { background:var(--blue-bg); color:var(--blue); }
.rank-poor { background:var(--rose-bg); color:var(--rose); }
.rank-mid  { background:var(--amber-bg); color:var(--amber); }

/* Progress bars in hero card */
.hero-progress-section { margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
.hero-progress-item { margin-bottom:12px; }
.hp-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.hp-label { font-size:12px; font-weight:600; color:var(--text2); }
.hp-value { font-size:12px; font-weight:700; color:var(--text); }
.progress-bar { height:6px; background:var(--card2); border-radius:3px; overflow:hidden; border:1px solid var(--border); }
.progress-fill { height:100%; border-radius:3px; transition:width 1.5s cubic-bezier(.4,0,.2,1); }
.pf-primary { background:linear-gradient(90deg,var(--primary),var(--primary-light)); }
.pf-emerald { background:linear-gradient(90deg,var(--emerald),#34D399); }
.pf-amber   { background:linear-gradient(90deg,var(--amber),#FCD34D); }

/* ============================================
   STATS SECTION
   ============================================ */
.stats-section {
  padding:60px 0;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); }
.stat-card {
  background:var(--surface);
  padding:32px 24px;
  position:relative; overflow:hidden;
  transition:all var(--transition);
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:0 0 3px 3px;
}
.stat-card.c-primary::before { background:linear-gradient(90deg,var(--primary),var(--primary-light)); }
.stat-card.c-emerald::before { background:linear-gradient(90deg,var(--emerald),#34D399); }
.stat-card.c-amber::before   { background:linear-gradient(90deg,var(--amber),#FCD34D); }
.stat-card.c-rose::before    { background:linear-gradient(90deg,var(--rose),var(--accent)); }
.stat-card:hover { background:var(--card2); }
.stat-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  margin-bottom:16px; transition:transform var(--transition-fast);
}
.stat-card:hover .stat-icon { transform:scale(1.1); }
.stat-icon.bg-primary { background:var(--primary-bg); }
.stat-icon.bg-emerald { background:var(--emerald-bg); }
.stat-icon.bg-amber   { background:var(--amber-bg); }
.stat-icon.bg-rose    { background:var(--rose-bg); }
.stat-number {
  font-size:2.25rem; font-weight:900; line-height:1;
  font-family:'JetBrains Mono',monospace; margin-bottom:6px;
}
.stat-number.c-primary { color:var(--primary); }
.stat-number.c-emerald { color:var(--emerald); }
.stat-number.c-amber   { color:var(--amber); }
.stat-number.c-rose    { color:var(--rose); }
.stat-label { font-size:13px; color:var(--text2); font-weight:500; margin-bottom:4px; }
.stat-trend { font-size:11px; font-weight:700; display:flex; align-items:center; gap:4px; }
.trend-up   { color:var(--emerald); }
.trend-down { color:var(--rose); }
.trend-neutral { color:var(--text3); }

/* ============================================
   GMB TRACKING SECTION
   ============================================ */
.gmb-section { padding:80px 0; }
.gmb-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.gmb-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:all var(--transition);
  position:relative;
}
.gmb-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.gmb-card-accent { height:4px; width:100%; }
.gmb-card-top { padding:20px; }
.gmb-badge-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.gmb-branch-badge {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
  padding:4px 10px; border-radius:20px;
}
.gmb-rank-pill {
  display:flex; flex-direction:column; align-items:center;
  padding:6px 12px; border-radius:10px;
  font-family:'JetBrains Mono',monospace;
}
.gmb-rank-pill .rnum { font-size:20px; font-weight:800; line-height:1; }
.gmb-rank-pill .rlbl { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.gmb-name { font-size:17px; font-weight:800; margin-bottom:3px; }
.gmb-address { font-size:12px; color:var(--text3); display:flex; align-items:center; gap:4px; }
.gmb-metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); margin-top:16px; border-top:1px solid var(--border); }
.gmb-metric-item { padding:14px 16px; background:var(--card); }
.gmb-metric-val { font-size:18px; font-weight:800; }
.gmb-metric-lbl { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
.gmb-card-footer { padding:16px 20px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* Score Ring */
.score-ring-wrap { position:relative; width:52px; height:52px; flex-shrink:0; }
.score-ring-wrap svg { transform:rotate(-90deg); }
.score-ring-val {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; font-family:'JetBrains Mono',monospace;
}
.vis-bar-section { flex:1; }
.vis-bar-label { font-size:11px; color:var(--text3); margin-bottom:4px; }
.vis-bar-track { height:6px; background:var(--card2); border-radius:3px; overflow:hidden; border:1px solid var(--border); }
.vis-bar-fill { height:100%; border-radius:3px; transition:width 1.5s cubic-bezier(.4,0,.2,1); }
.vis-pct { font-size:13px; font-weight:700; margin-top:4px; }
.gmb-status-pill {
  display:flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:20px;
  font-size:10px; font-weight:700; text-transform:uppercase; flex-shrink:0;
}

/* ============================================
   SPRINT CALENDAR PREVIEW
   ============================================ */
.sprint-section { padding:80px 0; background:var(--surface); }
.sprint-grid-preview { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:32px; }
.sprint-day-cell {
  aspect-ratio:1; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:2px solid var(--border);
  background:var(--card); cursor:pointer;
  transition:all var(--transition-fast); position:relative; overflow:hidden;
}
.sprint-day-cell:hover { transform:scale(1.08); z-index:2; box-shadow:var(--shadow); }
.sprint-day-cell.done { border-color:var(--emerald); background:var(--emerald-bg); }
.sprint-day-cell.partial { border-color:var(--amber); background:var(--amber-bg); }
.sprint-day-cell.pending { border-color:var(--border); }
.sprint-day-cell.today-cell { border-color:#3b82f6; background:#eff6ff; box-shadow:0 0 0 2px rgba(59,130,246,.3); }
.sprint-day-num { font-size:10px; font-weight:800; font-family:'JetBrains Mono',monospace; line-height:1; }
.sprint-day-cell.done .sprint-day-num { color:var(--emerald); }
.sprint-day-cell.partial .sprint-day-num { color:var(--amber); }
.sprint-day-cell.today-cell .sprint-day-num { color:#2563eb; }
.sprint-day-pct { font-size:9px; font-weight:700; color:var(--text3); }
.sprint-day-cell.done .sprint-day-pct { color:var(--emerald); }
.sprint-day-dots { display:flex; gap:2px; }
.s-dot { width:4px; height:4px; border-radius:50%; }

/* Sprint week labels */
.sprint-week-labels { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:8px; }
.sprint-week-day { text-align:center; font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; }

/* ============================================
   FEATURES / CAPABILITIES
   ============================================ */
.features-section { padding:80px 0; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.feature-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px;
  transition:all var(--transition); position:relative; overflow:hidden;
}
.feature-card::before {
  content:''; position:absolute; top:0; right:0;
  width:100px; height:100px; border-radius:50%;
  opacity:.05; transform:translate(30%,-30%);
  transition:all var(--transition);
}
.feature-card:hover { border-color:var(--border2); box-shadow:var(--shadow); transform:translateY(-4px); }
.feature-card:hover::before { opacity:.1; transform:translate(20%,-20%); }
.feature-icon {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  margin-bottom:18px;
}
.feature-title { font-size:16px; font-weight:700; margin-bottom:8px; }
.feature-desc { font-size:13px; color:var(--text2); line-height:1.65; margin-bottom:16px; }
.feature-link { font-size:13px; font-weight:600; color:var(--primary); display:flex; align-items:center; gap:4px; }
.feature-link:hover { gap:8px; }

/* ============================================
   RANKING PREVIEW SECTION
   ============================================ */
.ranking-preview { padding:80px 0; background:var(--surface); }
.ranking-tabs { display:flex; gap:6px; margin-bottom:28px; flex-wrap:wrap; }
.rtab {
  display:flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:20px;
  font-size:13px; font-weight:600; cursor:pointer;
  border:2px solid var(--border);
  background:transparent; color:var(--text2);
  transition:all var(--transition-fast);
}
.rtab:hover { border-color:var(--border2); color:var(--text); }
.rtab.active { color:#fff; border-color:transparent; }
.rtab-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ranking-content-area { display:none; }
.ranking-content-area.active { display:block; animation:fadeInUp .3s ease; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }

/* Grid visualization */
.grid-vis-container { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; }
.grid-11x11 { display:flex; flex-direction:column; gap:3px; }
.grid-row   { display:flex; gap:3px; }
.grid-cell {
  width:26px; height:26px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:#fff; cursor:pointer;
  transition:transform var(--transition-fast);
  flex-shrink:0;
}
.grid-cell:hover { transform:scale(1.25); z-index:5; position:relative; }
.gc-top3  { background:var(--emerald); }
.gc-top10 { background:var(--blue); }
.gc-top20 { background:var(--amber); }
.gc-poor  { background:var(--rose); }
.gc-none  { background:var(--border2); }
.grid-legend { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text2); font-weight:600; }
.legend-dot { width:10px; height:10px; border-radius:3px; }

/* Ranking stats panel */
.ranking-stats-panel { }
.rsp-metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.rsp-metric {
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:16px;
}
.rsp-metric-val { font-size:22px; font-weight:800; font-family:'JetBrains Mono',monospace; }
.rsp-metric-lbl { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; margin-top:3px; }
.keyword-table { width:100%; border-collapse:collapse; }
.keyword-table th {
  text-align:left; padding:8px 12px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text3); border-bottom:2px solid var(--border);
}
.keyword-table td {
  padding:10px 12px; border-bottom:1px solid var(--border);
  font-size:13px; vertical-align:middle;
}
.keyword-table tr:hover td { background:var(--card2); }
.kw-pos { font-weight:800; font-family:'JetBrains Mono',monospace; padding:3px 8px; border-radius:5px; font-size:12px; }
.kw-change { font-size:11px; font-weight:700; }

/* Website progress bars */
.web-progress-list { display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.web-progress-item { }
.wpi-header { display:flex; justify-content:space-between; margin-bottom:6px; }
.wpi-label { font-size:13px; font-weight:600; }
.wpi-value { font-size:13px; font-weight:700; }
.wpi-bar { height:8px; background:var(--card2); border-radius:4px; overflow:hidden; border:1px solid var(--border); }
.wpi-fill { height:100%; border-radius:4px; transition:width 1.5s cubic-bezier(.4,0,.2,1); }

/* Technical SEO checklist */
.tech-checklist { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tech-item {
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--card2); border:1px solid var(--border);
  font-size:12px; font-weight:600;
}
.tech-icon { font-size:14px; flex-shrink:0; }

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  padding:80px 0;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 50%,#4C1D95 100%);
  position:relative; overflow:hidden;
}
.cta-section::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
}
.cta-inner { position:relative; z-index:1; text-align:center; max-width:620px; margin:0 auto; }
.cta-inner h2 { color:#fff; margin-bottom:12px; }
.cta-inner p  { color:rgba(255,255,255,.75); margin-bottom:32px; font-size:1.05rem; }
.cta-buttons  { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.btn-cta-primary {
  background:#fff; color:var(--primary);
  padding:14px 32px; border-radius:12px;
  font-size:15px; font-weight:700;
  box-shadow:0 8px 28px rgba(0,0,0,.2);
  transition:all var(--transition);
}
.btn-cta-primary:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(0,0,0,.28); }
.btn-cta-outline {
  background:transparent; color:#fff;
  border:2px solid rgba(255,255,255,.35);
  padding:13px 28px; border-radius:12px;
  font-size:15px; font-weight:600;
  transition:all var(--transition);
}
.btn-cta-outline:hover { border-color:#fff; background:rgba(255,255,255,.1); }

/* ============================================
   FOOTER
   ============================================ */
#footer {
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:48px 0 24px;
}
.footer-inner { display:grid; grid-template-columns:280px 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-brand { }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-logo-icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--primary),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:16px; }
.footer-logo-text { font-size:16px; font-weight:800; }
.footer-desc { font-size:13px; color:var(--text2); line-height:1.7; margin-bottom:16px; }
.footer-contact-item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text3); margin-bottom:6px; }
.footer-heading { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text3); margin-bottom:16px; }
.footer-links { display:flex; flex-direction:column; gap:8px; }
.footer-link { font-size:13px; color:var(--text2); transition:color var(--transition-fast); }
.footer-link:hover { color:var(--primary); }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:20px; border-top:1px solid var(--border);
  font-size:12px; color:var(--text3); flex-wrap:wrap; gap:8px;
}
.footer-bottom a { color:var(--primary); }

/* ============================================
   ANNOUNCEMENT BAR
   ============================================ */
.announcement-bar {
  background:linear-gradient(90deg,var(--primary),var(--accent));
  color:#fff; text-align:center; padding:9px 16px;
  font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:10px;
  position:relative;
}
.ann-close { position:absolute; right:16px; background:rgba(255,255,255,.2); border:none; color:#fff; width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; }
.ann-close:hover { background:rgba(255,255,255,.3); }
.ann-dot { width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse-dot 1.5s infinite; }

/* ============================================
   TOOLTIP
   ============================================ */
.tooltip-wrap { position:relative; display:inline-flex; }
.tooltip {
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--text); color:var(--card); padding:5px 10px; border-radius:6px;
  font-size:11px; font-weight:600; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity var(--transition-fast);
  box-shadow:var(--shadow);
}
.tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:4px solid transparent; border-top-color:var(--text); }
.tooltip-wrap:hover .tooltip { opacity:1; }

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast {
  background:var(--surface); border:1px solid var(--border2);
  border-radius:12px; padding:12px 18px;
  box-shadow:var(--shadow-md); font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:8px;
  transform:translateX(110%); opacity:0;
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
  max-width:300px;
}
.toast.show { transform:none; opacity:1; }
.toast.success { border-color:rgba(16,185,129,.3); }
.toast.error   { border-color:rgba(244,63,94,.3); }

/* ============================================
   ANIMATIONS & UTILITIES
   ============================================ */
.fade-in { animation:fadeIn .5s ease; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.slide-up { animation:slideUp .5s ease; }
@keyframes slideUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:none;} }
.stagger-children > * { animation:slideUp .5s ease both; }
.stagger-children > *:nth-child(1) { animation-delay:.05s; }
.stagger-children > *:nth-child(2) { animation-delay:.1s; }
.stagger-children > *:nth-child(3) { animation-delay:.15s; }
.stagger-children > *:nth-child(4) { animation-delay:.2s; }
.counter { transition:all .3s; }
.hidden { display:none !important; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }

/* ============================================
   RESPONSIVE — TABLET (max 1024px)
   ============================================ */
@media(max-width:1024px){
  .hero-inner { grid-template-columns:1fr; gap:40px; }
  .hero-card { max-width:500px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .gmb-cards-grid { grid-template-columns:1fr 1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; gap:32px; }
  .grid-vis-container { grid-template-columns:1fr; }
  .grid-11x11 { width:fit-content; }
  .sprint-grid-preview { grid-template-columns:repeat(6,1fr); }
}

/* ============================================
   RESPONSIVE — MOBILE (max 768px)
   ============================================ */
@media(max-width:768px){
  :root { --nav-h:60px; }
  .container { padding:0 16px; }
  .section { padding:56px 0; }
  h1 { font-size:2rem; }
  h2 { font-size:1.5rem; }

  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .nav-logo { margin-right:0; }

  .hero { padding:56px 0 40px; }
  .hero-cta { flex-direction:column; align-items:flex-start; }
  .hero-stats-row { gap:16px; }

  .stats-grid { grid-template-columns:1fr 1fr; gap:1px; }
  .stat-card { padding:20px 16px; }

  .gmb-cards-grid { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }

  .grid-11x11 { overflow-x:auto; }
  .grid-cell { width:22px; height:22px; font-size:8px; }

  .rsp-metrics { grid-template-columns:1fr 1fr; }
  .tech-checklist { grid-template-columns:1fr; }

  .ranking-tabs { gap:6px; }
  .rtab { padding:8px 14px; font-size:12px; }

  .sprint-grid-preview { grid-template-columns:repeat(5,1fr); gap:6px; }
  .footer-inner { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .cta-buttons { flex-direction:column; }

  .grid-vis-container { grid-template-columns:1fr; }
}

/* ============================================
   RESPONSIVE — SMALL MOBILE (max 480px)
   ============================================ */
@media(max-width:480px){
  .stats-grid { grid-template-columns:1fr; }
  .sprint-grid-preview { grid-template-columns:repeat(4,1fr); gap:5px; }
  .sprint-day-cell { border-radius:8px; }
  .hero-stats-row { flex-wrap:wrap; }
  .rsp-metrics { grid-template-columns:1fr; }
}