@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap);
/* TweetHunter Design System — colors & type, ported from prototype */

:host {
  /* Surfaces */
  --th-bg:            rgb(13, 13, 14);
  --th-bg-deep:       rgb(4, 4, 4);
  --th-bg-elev-1:     rgba(255, 255, 255, 0.02);
  --th-bg-elev-2:     rgba(255, 255, 255, 0.04);
  --th-bg-elev-3:     rgba(255, 255, 255, 0.06);
  --th-bg-sidebar:    rgb(21, 21, 19);
  --th-bg-input:      rgba(255, 255, 255, 0.03);
  --th-overlay-radial: radial-gradient(rgb(29,29,29) 0%, rgb(4,4,4) 100%);

  /* Borders */
  --th-border:        rgba(255, 255, 255, 0.1);
  --th-border-soft:   rgba(255, 255, 255, 0.06);
  --th-border-faint:  rgba(239, 239, 239, 0.1);

  /* Foregrounds */
  --th-fg:            rgb(255, 255, 255);
  --th-fg-1:          rgb(247, 248, 248);
  --th-fg-2:          rgba(247, 248, 248, 0.65);
  --th-fg-3:          rgb(149, 149, 157);
  --th-fg-4:          rgb(103, 103, 111);
  --th-fg-inverse:    rgb(13, 13, 14);

  /* Brand blues */
  --th-blue-50:       rgb(104, 197, 255);
  --th-blue-300:      rgb(49, 107, 255);
  --th-blue-500:      rgb(29, 155, 240);
  --th-blue-600:      rgb(34, 140, 216);
  --th-blue-700:      rgb(11, 111, 183);
  --th-blue-accent:   rgb(33, 56, 86);
  --th-blue-deep:     rgb(29, 73, 100);

  --th-blue-gradient: linear-gradient(rgb(11,111,183) 0%, rgb(34,140,216) 100%);
  --th-blue-border:   rgb(65, 111, 197);

  --th-btn-glass:     radial-gradient(rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%),
                      linear-gradient(rgba(52,52,52,0.65) 0%, rgba(30,30,30,0.65) 100%);

  /* Semantic */
  --th-success:       rgb(52, 199, 89);
  --th-warning:       rgb(255, 184, 0);
  --th-danger:        rgb(255, 71, 71);
  --th-pink:          rgb(232, 75, 110);

  /* Type */
  --th-font-sans:     'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --th-font-serif:    'Times New Roman', Georgia, serif;
  --th-font-mono:     ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --th-fs-display-xl: 72px;
  --th-fs-display:    56px;
  --th-fs-h1:         40px;
  --th-fs-h2:         32px;
  --th-fs-h3:         24px;
  --th-fs-h4:         20px;
  --th-fs-lg:         18px;
  --th-fs-md:         16px;
  --th-fs-sm:         14px;
  --th-fs-xs:         12px;
  --th-fs-2xs:        11px;

  --th-lh-tight:      1.06;
  --th-lh-snug:       1.2;
  --th-lh-normal:     1.4;
  --th-lh-relaxed:    1.6;

  --th-ls-display:   -0.025em;
  --th-ls-tight:     -0.02em;
  --th-ls-normal:    -0.01em;
  --th-ls-soft:      -0.005em;

  /* Radii */
  --th-r-xs: 6px;
  --th-r-sm: 8px;
  --th-r-md: 12px;
  --th-r-lg: 16px;
  --th-r-xl: 20px;
  --th-r-2xl: 24px;
  --th-r-pill: 9999px;

  /* Shadows */
  --th-shadow-sm:   0px 1px 2px rgba(0,0,0,0.16);
  --th-shadow-md:   0px 2.4px 4.8px rgba(0,0,0,0.08), 0px 0px 7.2px rgba(0,0,0,0.02);
  --th-shadow-lg:   0px 12px 32px rgba(0,0,0,0.35);
  --th-shadow-card: inset 0px 0px 0px 2px rgba(255,255,255,0.06);
  --th-shadow-inset-top:    inset 0px 0.5px 0px rgba(255,255,255,0.25);
  --th-shadow-inset-bottom: inset 0px -1px 0px rgba(0,0,0,0.5);
}

/* Semantic element styles */
.th-body {
  background: var(--th-bg);
  color: var(--th-fg-1);
  font-family: var(--th-font-sans);
  font-size: var(--th-fs-md);
  line-height: var(--th-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Responsive overrides from prototype */
@media (max-width: 1100px) {
  .resp-section { padding-left: 32px !important; padding-right: 32px !important; }
  .resp-hero-grid { grid-template-columns: 1fr !important; gap: 60px !important; }
  .resp-hero-visual { height: 360px !important; }
  .resp-hero-h1 { font-size: 56px !important; line-height: 60px !important; }
  .resp-feature-row { grid-template-columns: 1fr !important; gap: 28px !important; padding: 24px 0 !important; }
  .resp-feature-copy { order: 1 !important; }
  .resp-feature-mock { order: 2 !important; }
  .resp-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .resp-nav-links { display: none !important; }
  .resp-section-title-56 { font-size: 44px !important; line-height: 1.08 !important; }
  .resp-section-title-44 { font-size: 34px !important; }
  .resp-final-cta-h2 { font-size: 44px !important; }
  .resp-flow-row { flex-wrap: wrap !important; }
  .resp-flow-row > div { min-width: 130px !important; }
  .resp-footer { grid-template-columns: 1fr 1fr !important; }
  .resp-panel-two-col { grid-template-columns: 1fr !important; }
  .resp-more-head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .resp-testimonial-head { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
}

@media (max-width: 720px) {
  .resp-section { padding-left: 20px !important; padding-right: 20px !important; }
  .resp-hero-h1 { font-size: 40px !important; line-height: 44px !important; letter-spacing: -0.02em !important; }
  .resp-hero-sub { font-size: 16px !important; }
  .resp-hero-visual { height: 300px !important; transform: scale(0.75); transform-origin: top left; margin-bottom: -80px; }
  .resp-stats-row { flex-wrap: wrap !important; gap: 18px !important; }
  .resp-stats-row > div { flex: 1 1 40% !important; }
  .resp-grid-3 { grid-template-columns: 1fr !important; }
  .resp-section-title-56 { font-size: 34px !important; letter-spacing: -0.02em !important; }
  .resp-section-title-44 { font-size: 28px !important; letter-spacing: -0.015em !important; }
  .resp-final-cta { padding: 48px 24px !important; }
  .resp-final-cta-h2 { font-size: 32px !important; line-height: 1.1 !important; }
  .resp-hero-pad { padding: 48px 20px 24px !important; }
  .resp-stop { padding: 80px 20px !important; }
  .resp-stop-italic { font-size: 48px !important; margin: 40px 0 !important; }
  .resp-stop-copy { font-size: 17px !important; }
  .resp-btn-row { flex-direction: column !important; align-items: stretch !important; }
  .resp-btn-row > button { width: 100% !important; }
  .resp-footer { grid-template-columns: 1fr !important; gap: 28px !important; padding: 48px 20px 32px !important; }
  .resp-logo-strip { gap: 20px !important; justify-content: center !important; }
  .resp-logo-strip > div { font-size: 16px !important; }
  .resp-nav { padding: 6px 6px 6px 14px !important; gap: 12px !important; }
  .resp-nav-brand-text { font-size: 15px !important; }
  .resp-panel-two-col { grid-template-columns: 1fr !important; }
  .resp-stat-row { grid-template-columns: repeat(2, 1fr) !important; }
  .resp-feature-index { font-size: 32px !important; }
  .resp-stat-row-inner { grid-template-columns: repeat(2, 1fr) !important; }
  .resp-feature-mock { overflow: hidden; max-width: 100%; }
  .resp-feature-mock * { max-width: 100%; box-sizing: border-box; }
}