/* ============================================================
   THAIVSCAN AI — style.css (v4.0 — Premium Light Mode)
   Aesthetic: Apple · Stripe · Linear · Cinematic SaaS
   Fonts: Space Mono (mono) + DM Sans (body)
   Design: Ultra-clean, soft-shadow, adaptive whitespace
   ============================================================ */

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

/* ── Design Tokens ──────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:           #FAFBFD;
  --bg-card:      #FFFFFF;
  --bg-raised:    #F4F6F9;
  --bg-input:     #FFFFFF;
  --bg-subtle:    #F8FAFC;

  /* Borders */
  --border:       rgba(0, 0, 0, 0.055);
  --border-md:    rgba(0, 0, 0, 0.09);
  --border-hi:    rgba(0, 0, 0, 0.15);

  /* Typography */
  --text-primary:   #0F172A;
  --text-secondary: #4B5E7A;
  --text-muted:     #8FA3BC;
  --text-faint:     #B8CCDF;

  /* Brand accent — refined Trust Blue */
  --accent:         #0062E6;
  --accent-soft:    #1A74EE;
  --accent-glow:    rgba(0, 98, 230, 0.09);
  --accent-bg:      rgba(0, 98, 230, 0.05);

  /* Status colors */
  --safe:           #0EA472;
  --safe-bg:        rgba(14, 164, 114, 0.05);
  --safe-border:    rgba(14, 164, 114, 0.16);

  --warn:           #E89A0A;
  --warn-bg:        rgba(232, 154, 10, 0.05);
  --warn-border:    rgba(232, 154, 10, 0.16);

  --danger:         #E03131;
  --danger-bg:      rgba(224, 49, 49, 0.05);
  --danger-border:  rgba(224, 49, 49, 0.16);

  /* Fonts */
  --mono: 'Space Mono', 'SF Mono', 'Fira Code', monospace;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radius scale */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;

  /* Shadows — Apple-style layered depth */
  --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-md:   0 2px 8px rgba(15, 23, 42, 0.05), 0 12px 24px rgba(15, 23, 42, 0.06);
  --shadow-lg:   0 4px 16px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.9);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  0.15s;
  --t-base:  0.22s;
  --t-slow:  0.38s;
  --transition: var(--t-base) var(--ease-inout);

  /* Spacing system (8pt grid) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  --bg-silver: #f5f5f7;
  --navy-deep: #020617;
  --text-secondary: #86868b;
  --blue-apple: #0071e3;
  --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: clamp(14px, 0.9rem + 0.1vw, 16px);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Ambient background ──────────────────────────────── */
.bg-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}

.bg-orb--1 {
  width: clamp(400px, 60vw, 900px);
  height: clamp(300px, 50vh, 600px);
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 98, 230, 0.055) 0%, transparent 70%);
}

.bg-orb--2 {
  width: clamp(300px, 40vw, 600px);
  height: clamp(200px, 30vh, 400px);
  bottom: 10%;
  right: -10%;
  background: radial-gradient(ellipse, rgba(14, 164, 114, 0.03) 0%, transparent 70%);
}

.bg-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}


/* ══════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(250, 251, 253, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-base) var(--ease-inout),
              box-shadow var(--t-base) var(--ease-inout);
}

.site-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,98,230,0.12) 30%, rgba(0,98,230,0.12) 70%, transparent 100%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-inout);
}

.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: clamp(15px, 1.05rem + 0.1vw, 18px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--t-fast) ease;
}
.logo:hover { opacity: 0.85; }

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: linear-gradient(145deg, #004FC8 0%, #0066FF 60%, #1A80FF 100%);
  box-shadow: 0 0 0 1px rgba(0,82,204,0.25), 0 2px 6px rgba(0,82,204,0.18), var(--shadow-inset-top);
  transition: box-shadow var(--t-base) var(--ease-inout), transform var(--t-base) var(--ease-inout);
  overflow: hidden;
}
.logo:hover .logo-icon {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0,82,204,0.3), 0 4px 12px rgba(0,82,204,0.22), var(--shadow-inset-top);
}

.logo-ai {
  color: var(--accent);
  font-size: 0.68rem;
  vertical-align: super;
  margin-left: 1px;
  letter-spacing: 0;
}

/* Nav */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.header-nav a:not(.nav-report) {
  font-family: var(--sans);
  font-size: clamp(12px, 0.8rem + 0.05vw, 13.5px);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  transition: all var(--transition);
  white-space: nowrap;
}

.header-nav a:not(.nav-report):hover {
  color: var(--text-primary);
  background: var(--bg-raised);
}

.header-nav a:not(.nav-report).active {
  color: var(--accent);
  background: var(--accent-bg);
  font-weight: 600;
}

.nav-report {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: clamp(12px, 0.8rem + 0.05vw, 13.5px);
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-md);
  background: rgba(255,255,255,0.7);
  transition: all var(--transition);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.nav-report:hover {
  color: var(--text-primary);
  border-color: var(--border-hi);
  background: rgba(255,255,255,0.95);
  box-shadow: var(--shadow-xs);
}

/* Language switcher */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  background: var(--bg-raised);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border-md);
  gap: 2px;
}

.lang-btn {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px 14px;
  min-height: 28px;
  border-radius: 7px;
  transition: all var(--t-base) var(--ease-inout);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lang-btn:hover:not(.active) { color: var(--accent); }
.lang-btn.active {
  color: #FFFFFF;
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 98, 230, 0.25);
}
.lang-divider { display: none; }

.mobile-only  { display: none !important; }
.desktop-only { display: inline-flex !important; }
@media (max-width: 600px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: inline-flex !important; }
}

/* Custom mobile dropdown */
.custom-dropdown {
  position: relative;
  width: 72px;
  font-family: var(--sans);
  user-select: none;
}
.dropdown-selected {
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border-md);
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all var(--t-base) ease;
  box-shadow: var(--shadow-xs);
  letter-spacing: 0.04em;
}
.dropdown-selected:active { transform: scale(0.96); }
.dropdown-arrow {
  transition: transform 0.28s var(--ease-out);
  color: var(--text-muted);
}
.custom-dropdown.open .dropdown-arrow { transform: rotate(180deg); }
.dropdown-options {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: none;
  z-index: 1000;
  animation: dropdown-appear 0.18s var(--ease-out);
}
@keyframes dropdown-appear {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.custom-dropdown.open .dropdown-options { display: block; }
.option {
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
  letter-spacing: 0.04em;
}
.option:hover { background: var(--bg-raised); color: var(--accent); }
.option:not(:last-child) { border-bottom: 1px solid var(--border); }


/* ══════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════ */
.main-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 28px) var(--sp-24);
}


/* ══════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════ */
.hero {
  text-align: center;
  padding: clamp(56px, 9vw, 96px) 0 clamp(40px, 6vw, 60px);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: clamp(9.5px, 0.62rem + 0.1vw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border-md);
  border-radius: 99px;
  padding: 6px 16px;
  margin-bottom: var(--sp-8);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-xs), var(--shadow-inset-top);
}

.badge-dot {
  width: 7px;
  height: 7px;
  background: var(--safe);
  border-radius: 50%;
  animation: pulse-dot 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(14,164,114,0.4); }
  55%       { opacity: 0.8; box-shadow: 0 0 0 5px rgba(14,164,114,0); }
}

.hero-title {
  font-family: var(--mono);
  font-size: clamp(30px, 5.5vw, 56px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: clamp(-1px, -0.03em, -2px);
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
}

.title-accent {
  background: linear-gradient(100deg, var(--accent) 0%, #3B8EFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: clamp(14px, 0.95rem + 0.1vw, 16.5px);
  color: var(--text-secondary);
  line-height: 1.72;
  max-width: 540px;
  margin: 0 auto;
  font-weight: 400;
}

.br-desk { display: none; }
@media (min-width: 640px) { .br-desk { display: inline; } }

/* ══════════════════════════════════════════════════════
   ANALYZER CARD
   ══════════════════════════════════════════════════════ */
.analyzer-card {
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-radius: var(--r-xl);
  padding: clamp(22px, 3.5vw, 36px);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-16);
  position: relative;
  overflow: hidden;
}

/* Subtle top accent line */
.analyzer-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,98,230,0.25) 30%, rgba(0,98,230,0.25) 70%, transparent 100%);
}

/* Inner glow */
.analyzer-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--accent-bg) 0%, transparent 100%);
  pointer-events: none;
}


/* ── Input group ── */
.input-wrapper { margin-bottom: var(--sp-1); position: relative; z-index: 1; }

.input-group {
  display: flex;
  align-items: stretch;
  background: var(--bg-input);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-xs);
}
.input-group:focus-within {
  border-color: rgba(0, 98, 230, 0.45);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-xs);
}

.input-icon {
  flex-shrink: 0;
  padding: 0 14px 0 18px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
.input-group:focus-within .input-icon { color: var(--accent-soft); }

.url-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--mono);
  font-size: clamp(12px, 0.82rem + 0.1vw, 13.5px);
  color: var(--text-primary);
  padding: 17px 10px 17px 0;
  min-width: 0;
  caret-color: var(--accent);
}
.url-input::placeholder { color: var(--text-muted); }

.btn-analyze {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: linear-gradient(135deg, #0052CC 0%, var(--accent) 60%, #2880FF 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: clamp(13px, 0.88rem + 0.1vw, 14.5px);
  font-weight: 600;
  padding: 0 clamp(18px, 2.5vw, 28px);
  height: 56px;
  min-height: 44px;
  transition: all var(--transition);
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-analyze:hover {
  background: linear-gradient(135deg, #0044B8 0%, #0058D4 60%, #1A74EE 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 12px rgba(0,82,204,0.2);
}
.btn-analyze:active { transform: scale(0.98); }
.btn-analyze:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-arrow { transition: transform var(--transition); flex-shrink: 0; }
.btn-analyze:hover .btn-arrow { transform: translateX(3px); }

/* Example buttons */
.input-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-1) 0;
}
.try-label {
  font-size: clamp(11px, 0.75rem + 0.1vw, 12px);
  color: var(--text-muted);
  font-family: var(--mono);
  white-space: nowrap;
}
.btn-example {
  font-size: clamp(11px, 0.7rem + 0.1vw, 12px);
  font-family: var(--mono);
  color: var(--text-secondary);
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--border-md);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  min-height: 30px;
  cursor: pointer;
  transition: all var(--transition);
  backdrop-filter: blur(4px);
}
.btn-example:hover {
  border-color: var(--border-hi);
  color: var(--text-primary);
  background: var(--bg-raised);
  box-shadow: var(--shadow-xs);
}


/* ── Scan Terminal ─────────────────────────────────────── */
.scan-container {
  display: none;
  margin-top: var(--sp-6);
  animation: fade-up 0.28s var(--ease-out) forwards;
}
.scan-container.active { display: block; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scan-terminal {
  background: #FAFBFD;
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 16px;
  background: #F1F5F9;
  border-bottom: 1px solid var(--border);
}
.t-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.t-dot.t-red    { background: #FF5F57; }
.t-dot.t-yellow { background: #FEBC2E; }
.t-dot.t-green  { background: #27C93F; }
.t-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-left: var(--sp-2);
}

.terminal-body {
  padding: var(--sp-4) var(--sp-4);
  min-height: 100px;
  font-family: var(--mono);
  font-size: clamp(10.5px, 0.7rem + 0.05vw, 11.5px);
  color: var(--text-secondary);
  line-height: 1.95;
}
.terminal-body .t-line {
  display: block;
  animation: t-appear 0.12s ease forwards;
  opacity: 0;
}
@keyframes t-appear {
  from { opacity: 0; transform: translateX(-3px); }
  to   { opacity: 1; transform: translateX(0); }
}
.terminal-body .t-ok   { color: var(--safe); }
.terminal-body .t-warn { color: var(--warn); }
.terminal-body .t-err  { color: var(--danger); }
.terminal-body .t-dim  { color: var(--text-muted); }
.terminal-body .t-info { color: var(--text-secondary); }
.terminal-body .cursor {
  display: inline-block;
  width: 7px; height: 12px;
  background: var(--accent);
  vertical-align: middle;
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

.scan-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.scan-track {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.scan-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, #3B8EFF 100%);
  border-radius: 99px;
  transition: width 0.3s ease;
}
.scan-pct {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}


/* ── Result Panel ──────────────────────────────────────── */
.result-panel {
  display: none;
  margin-top: var(--sp-6);
  animation: fade-up 0.35s var(--ease-out) forwards;
}
.result-panel.active { display: block; }

/* Verdict */
.result-verdict {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(18px, 2.5vw, 24px) clamp(18px, 2.5vw, 26px);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-4);
  background: var(--bg-raised);
  transition: all 0.28s var(--ease-out);
  flex-wrap: wrap;
}
.result-verdict.v-safe {
  border-color: var(--safe-border);
  background: var(--safe-bg);
  box-shadow: 0 0 0 1px var(--safe-border), var(--shadow-sm);
}
.result-verdict.v-suspicious {
  border-color: var(--warn-border);
  background: var(--warn-bg);
  box-shadow: 0 0 0 1px var(--warn-border), var(--shadow-sm);
}
.result-verdict.v-dangerous {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  box-shadow: 0 0 0 1px var(--danger-border), var(--shadow-sm);
}

.verdict-icon-wrap {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: rgba(0,0,0,0.025);
}
.v-safe      .verdict-icon-wrap { background: rgba(14,164,114,0.1); }
.v-suspicious .verdict-icon-wrap { background: rgba(232,154,10,0.1); }
.v-dangerous  .verdict-icon-wrap { background: rgba(224,49,49,0.1); }

.verdict-meta { flex: 1; min-width: 0; }
.verdict-label {
  font-family: var(--mono);
  font-size: clamp(17px, 1.15rem + 0.2vw, 20px);
  font-weight: 700;
  letter-spacing: -0.4px;
}
.v-safe      .verdict-label { color: var(--safe); }
.v-suspicious .verdict-label { color: var(--warn); }
.v-dangerous  .verdict-label { color: var(--danger); }

.verdict-url {
  font-family: var(--mono);
  font-size: clamp(10px, 0.68rem, 12px);
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

.trust-badge {
  font-family: var(--mono);
  font-size: clamp(9.5px, 0.62rem, 10.5px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 99px;
  border: 1.5px solid;
  white-space: nowrap;
}
.v-safe      .trust-badge { color: var(--safe);   border-color: var(--safe-border);   background: var(--safe-bg); }
.v-suspicious .trust-badge { color: var(--warn);   border-color: var(--warn-border);   background: var(--warn-bg); }
.v-dangerous  .trust-badge { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }

/* Result body */
.result-body { display: flex; flex-direction: column; gap: var(--sp-4); }

.result-section {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 22px);
  box-shadow: var(--shadow-xs);
}

.section-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid #DDE4EE;
  border-left: 3px solid var(--accent);
  border-radius: var(--r-xs);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-xs);
}
.section-tag svg { flex-shrink: 0; }

.summary-text {
  font-size: clamp(13.5px, 0.88rem + 0.1vw, 15px);
  color: var(--text-primary);
  line-height: 1.68;
  font-weight: 400;
  max-width: none;
  margin: 0;
}

.result-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 580px) { .result-columns { grid-template-columns: 1fr; } }

/* Flags */
.flags-list {
  list-style: none;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--sp-3);
  text-align: left;
  margin: 0;
  padding: 0;
}
.flags-list li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--sp-3);
  text-align: left;
  width: 100%;
  font-size: clamp(12.5px, 0.8rem, 13px);
  color: var(--text-secondary);
  line-height: 1.45;
  max-width: none;
  margin: 0;
}
.flags-list li .flag-dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 5px;
}
.flag-dot.dot-danger  { background: var(--danger); box-shadow: 0 0 0 2px rgba(224,49,49,0.18); }
.flag-dot.dot-warn    { background: var(--warn);   box-shadow: 0 0 0 2px rgba(232,154,10,0.18); }
.flag-dot.dot-ok      { background: var(--safe);   box-shadow: 0 0 0 2px rgba(14,164,114,0.18); }
.flag-dot.dot-neutral { background: var(--text-muted); }
.flags-list li.no-flags {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 12px;
  align-items: center;
  justify-content: flex-start;
}

/* Checks grid */
.checks-grid { display: flex; flex-direction: column; gap: 9px; }
.check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.check-name {
  font-size: clamp(11px, 0.72rem, 12px);
  color: var(--text-secondary);
  font-family: var(--mono);
  max-width: none;
  margin: 0;
}
.check-status {
  font-size: clamp(9.5px, 0.62rem, 10.5px);
  font-family: var(--mono);
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.check-status.cs-pass    { color: var(--safe);   background: var(--safe-bg);   border: 1px solid var(--safe-border); }
.check-status.cs-warn    { color: var(--warn);   background: var(--warn-bg);   border: 1px solid var(--warn-border); }
.check-status.cs-fail    { color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-border); }
.check-status.cs-neutral { color: var(--text-muted); background: var(--bg-raised); border: 1px solid var(--border); }

/* Advice */
.advice-box {
  font-size: clamp(13px, 0.84rem + 0.1vw, 14px);
  color: var(--text-secondary);
  line-height: 1.72;
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  max-width: none;
  margin: 0;
}
.advice-box .advice-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

/* Disclaimer */
.disclaimer-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: clamp(11.5px, 0.72rem, 12.5px);
  color: var(--text-muted);
  font-family: var(--mono);
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--border);
  max-width: none;
  margin: 0;
}
.disclaimer-bar svg { flex-shrink: 0; opacity: 0.55; }

/* Footer actions */
.result-footer-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.btn-rescan {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border-md);
  color: var(--text-secondary);
  font-size: clamp(12px, 0.78rem, 13px);
  font-family: var(--sans);
  font-weight: 500;
  padding: 10px 18px;
  min-height: 44px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-xs);
}
.btn-rescan:hover {
  border-color: var(--border-hi);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.btn-report {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(224,49,49,0.06);
  border: 1px solid rgba(224,49,49,0.18);
  color: var(--danger);
  font-size: clamp(12px, 0.78rem, 13px);
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: none;
  padding: 10px 18px;
  min-height: 44px;
  border-radius: var(--r-sm);
  transition: all var(--transition);
}
.btn-report:hover {
  background: rgba(224,49,49,0.10);
  border-color: rgba(224,49,49,0.32);
  box-shadow: 0 2px 8px rgba(224,49,49,0.08);
}


/* ══════════════════════════════════════════════════════
   STATS SECTION
   ══════════════════════════════════════════════════════ */
.stats-container {
  padding: clamp(40px, 7vw, 72px) clamp(16px, 3vw, 24px) clamp(56px, 8vw, 88px);
}

.stats-grid {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: var(--sp-5);
  text-align: center;
  flex-wrap: wrap;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
}

.stat-number {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1;
}

.stat-label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(0.72rem, 1.25vw, 0.82rem);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    line-height: 1.6;
    margin-top: 0.9rem;
}

@media (max-width: 640px) {
  .stats-grid {
    flex-direction: column;
    gap: clamp(28px, 5vw, 40px);
    align-items: center;
  }
  .stat-item { width: auto; min-width: unset; }
}


/* ══════════════════════════════════════════════════════
   DETECTION COVERAGE
   ══════════════════════════════════════════════════════ */
.dc-section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: clamp(80px, 12vw, 140px) clamp(20px, 4vw, 40px) clamp(88px, 13vw, 152px);
  background: #FAFBFD;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}

/* Noise texture */
.dc-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* Ambient radial glow */
.dc-section::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(0,98,230,0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Mouse-follow spotlight */
.dc-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    500px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 98, 230, 0.04) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}
.dc-section:hover .dc-spotlight { opacity: 1; }

.dc-inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
}

.dc-header {
  text-align: center;
  max-width: 580px;
  animation: fadeInDown 0.7s var(--ease-out) both;
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dc-title {
  font-family: var(--sans);
  font-size: clamp(24px, 3.8vw, 38px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
}
.dc-title-accent {
  background: linear-gradient(110deg, var(--accent) 0%, #3B8EFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.dc-sub {
  font-family: var(--sans);
  font-size: clamp(13.5px, 0.88rem + 0.1vw, 15px);
  color: var(--text-muted);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.65;
  max-width: none;
}
.dc-br { display: none; }
@media (min-width: 640px) { .dc-br { display: inline; } }

/* Pills */
.dc-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 10px;
  max-width: 860px;
}

.dc-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 99px;
  cursor: default;
  user-select: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 4px 12px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.95);
  animation: dc-float var(--fdur, 6s) ease-in-out var(--fd, 0s) infinite;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  will-change: transform;
}
.dc-pill:hover {
  transform: translateY(-5px) scale(1.02) !important;
  border-color: rgba(0, 98, 230, 0.2);
  box-shadow:
    0 2px 4px rgba(15,23,42,0.04),
    0 12px 28px rgba(15,23,42,0.08),
    0 0 0 3px rgba(0,98,230,0.06),
    inset 0 1px 0 #fff;
}
@keyframes dc-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}

.dc-pill--lg { padding: 11px 22px; }
.dc-pill--accent {
  background: rgba(0, 98, 230, 0.03);
  border-color: rgba(0, 98, 230, 0.12);
}
.dc-pill--accent .dc-pill-label { color: #003EA0; }
.dc-pill--accent .dc-pill-icon  { color: var(--accent); }

.dc-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.dc-pill:hover .dc-pill-icon { color: var(--accent); }
.dc-pill-icon--th {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.dc-pill-label {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
}

.dc-pill-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 8px;
  margin-left: 2px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .dc-section { padding: 72px 18px 80px; }
  .dc-inner { gap: 44px; }
  .dc-title { letter-spacing: -0.02em; }
  .dc-field { gap: 9px 7px; }
  .dc-pill { padding: 9px 15px; }
  .dc-pill--lg { padding: 9px 17px; }
  .dc-pill-label { font-size: 13px; }
}
@media (max-width: 400px) {
  .dc-section { padding: 56px 14px 64px; }
  .dc-pill-tag { display: none; }
}


/* ══════════════════════════════════════════════════════
   TRUST INTELLIGENCE SECTION
   ══════════════════════════════════════════════════════ */
.trust-intel-section {
  position: relative;
  max-width: 1100px;
  margin: clamp(60px, 9vw, 100px) auto clamp(72px, 10vw, 120px);
  padding: 0 clamp(20px, 3.5vw, 40px);
  text-align: center;
}

.intel-title {
  font-family: var(--sans);
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.6;
  text-align: center;
  color: var(--text-muted);
  margin: 0 auto clamp(36px, 5vw, 56px);
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
@media (min-width: 768px) {
  .intel-title::before,
  .intel-title::after {
    content: "";
    height: 1px;
    flex: 1;
    max-width: 56px;
    background: linear-gradient(to var(--direction, right), transparent, var(--border-md));
  }
  .intel-title::after { --direction: left; }
}

.providers-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
}

.logo-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 80px;
  border-radius: 20px;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-xs);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s ease;
}
.logo-wrapper:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-md);
}

.trust-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.82;
  transition: opacity 0.28s ease;
}
.logo-wrapper:hover .trust-logo { opacity: 1; }

.logo-wrapper.prominence { width: 190px; }
.logo-wrapper.prominence .trust-logo { max-height: 105%; }

@media (max-width: 768px) {
  .trust-intel-section { margin: 44px auto 60px; padding: 0 16px; }
  .intel-title { margin-bottom: 28px; gap: 10px; }
  .intel-title::before, .intel-title::after { display: none; }
  .providers-grid { flex-direction: column; gap: 20px; align-items: center; }
  .logo-wrapper { width: 140px; height: 68px; }
  .logo-wrapper.prominence { width: 162px; height: 78px; }
  .section-divider-subtle { max-width: 100px; margin-top: 28px; }
}
@media (max-width: 480px) {
  .trust-intel-section { margin: 32px auto 44px; padding: 0 12px; }
  .providers-grid { gap: 16px; }
  .logo-wrapper { width: 120px; height: 58px; border-radius: 16px; }
  .logo-wrapper.prominence { width: 138px; height: 66px; }
}


/* ══════════════════════════════════════════════════════
   HOW IT WORKS
   ══════════════════════════════════════════════════════ */
.how-section {
  padding: clamp(24px, 5vw, 64px) 0 clamp(40px, 6vw, 72px);
}

.how-section-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 28px);
  text-align: center;
}

.section-title {
  font-family: var(--mono);
  font-size: clamp(21px, 3.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}

.section-sub {
  font-size: clamp(13.5px, 0.88rem + 0.1vw, 15px);
  color: var(--text-secondary);
  margin-bottom: clamp(28px, 4vw, 44px);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: clamp(12px, 2vw, 20px);
  text-align: left;
}

.how-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.5vw, 28px) clamp(18px, 2.2vw, 24px);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.how-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,98,230,0.15), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.how-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.how-card:hover::before { opacity: 1; }

.how-num {
  font-family: var(--mono);
  font-size: clamp(12px, 0.78rem + 0.1vw, 14px);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: var(--sp-4);
  opacity: 0.85;
}
.how-card h3 {
  font-family: var(--mono);
  font-size: clamp(12.5px, 0.8rem + 0.1vw, 13.5px);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.2px;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.how-card p {
  font-size: clamp(12px, 0.76rem + 0.1vw, 13px);
  color: var(--text-muted);
  line-height: 1.62;
  max-width: none;
  margin: 0;
}


/* ══════════════════════════════════════════════════════
   FAQ — iOS-Style Crystal
   ══════════════════════════════════════════════════════ */
.ios-faq {
  padding: clamp(72px, 11vw, 128px) clamp(16px, 3.5vw, 28px) clamp(80px, 12vw, 140px);
  background: #F2F4F7;
  font-family: var(--sans);
}

.ios-faq-inner {
  max-width: 680px;
  margin: 0 auto;
}

.ios-faq-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.ios-faq-title {
  font-family: var(--mono);
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}

.ios-faq-sub {
  font-size: clamp(14px, 0.9rem + 0.1vw, 15px);
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto;
}

.ios-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.ios-faq-item {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 12px rgba(15,23,42,0.04);
  transition: all 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}
.ios-faq-item:hover {
  transform: scale(1.012);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 28px rgba(15,23,42,0.07);
}
.ios-faq-item.active {
  background: #FFFFFF;
  box-shadow: 0 16px 36px rgba(15,23,42,0.09);
  transform: scale(1.018);
}

.ios-faq-trigger {
  width: 100%;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  gap: var(--sp-4);
}

.ios-faq-question {
  font-size: clamp(14.5px, 0.95rem, 16px);
  font-weight: 600;
  color: #1C1C1E;
  letter-spacing: -0.015em;
  text-align: left;
  line-height: 1.4;
}

.ios-chevron-wrapper {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0, 98, 230, 0.07);
  color: #0062E6;
  flex-shrink: 0;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ios-chevron-icon {
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ios-faq-item.active .ios-chevron-wrapper {
  background: #0062E6;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 98, 230, 0.28);
}
.ios-faq-item.active .ios-chevron-icon { transform: rotate(180deg); }

.ios-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ios-faq-content-inner {
  padding: 0 clamp(20px, 3vw, 30px) clamp(22px, 3vw, 30px);
  color: #48484A;
  font-size: clamp(13.5px, 0.88rem, 15px);
  line-height: 1.65;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.42s var(--ease-out);
  max-width: none;
  margin: 0;
}
.ios-faq-item.active .ios-faq-content-inner {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 600px) {
  .ios-faq { padding: 64px 14px 72px; }
  .ios-faq-header { margin-bottom: 36px; }
  .ios-faq-item { border-radius: 18px; }
  .ios-faq-trigger { padding: 18px 18px; }
  .ios-faq-question { font-size: 15px; }
  .ios-chevron-wrapper { width: 30px; height: 30px; }
  .ios-faq-content-inner { padding: 0 18px 22px; font-size: 14px; }
}
@media (max-width: 400px) {
  .ios-faq-trigger { padding: 16px 14px; }
  .ios-faq-content-inner { padding: 0 14px 18px; }
}


/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  /* ปรับลด Padding ลงเล็กน้อยให้กระชับเข้ากับขนาดฟอนต์ใหม่ */
  padding: clamp(38px, 5vw, 56px) clamp(20px, 4vw, 40px);
  background: rgba(250, 251, 253, 0.9);
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
}

.footer-brand {
  flex: 1;
  min-width: 240px;
}

.footer-logo {
  font-family: var(--mono);
  /* ปรับลดขนาดโลโก้ลงมาเล็กน้อย (จากเดิม 16.5px - 18px) */
  font-size: clamp(15.5px, 1rem, 17px);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-2); /* ปรับกลับเป็น sp-2 เพื่อความกระชับ */
  letter-spacing: -0.25px;
}

.footer-logo span {
  color: var(--accent);
  font-size: 10.5px; /* ปรับลงมาให้รับกับตัวโลโก้หลัก */
  vertical-align: super;
  margin-left: 2px;
  font-weight: 600;
}

.footer-note {
  /* ปรับลงมาอยู่ที่ 13px - 14px เป็นขนาดที่ดูเนียน คลีน และแพงที่สุด */
  font-size: clamp(13px, 0.85rem, 14px);
  color: var(--text-muted);
  max-width: 380px; /* บีบหน้ากว้างลงจาก 420px เพื่อให้สัดส่วนการตัดคำสวยงามพอดีกับฟอนต์ */
  line-height: 1.6;
  margin: 0;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px; /* กระชับช่องไฟระหว่างลิงก์ลงเล็กน้อย */
  align-items: flex-end;
  flex-shrink: 0;
}

.footer-links a {
  /* ปรับขนาดลิงก์ให้เท่ากับข้อความอธิบาย (13px - 14px) เพื่อความสมดุลเชิงดีไซน์ */
  font-size: clamp(13px, 0.85rem, 14px);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 22px; 
}

.footer-links a:hover {
  color: var(--text-primary);
}

/* ── Responsive ปรับตำแหน่งบนมือถือ ── */
@media (max-width: 768px) {
  .footer-links {
    align-items: flex-start;
    width: 100%;
    margin-top: 6px;
  }
}

@media (max-width: 640px) {
  .site-footer { padding: 28px 16px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .footer-links { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
}


/* ══════════════════════════════════════════════════════
   FEEDBACK BUTTON (FLOATING)
   ══════════════════════════════════════════════════════ */
.feedback-minimal {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.92);
  color: var(--text-secondary);
  border: 1px solid var(--border-md);
  border-radius: 99px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.feedback-minimal:hover {
  transform: translateY(-2px);
  border-color: var(--border-hi);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}
.feedback-minimal:active { transform: translateY(0) scale(0.96); }

.fb-icon {
  opacity: 0.6;
  transition: opacity 0.18s ease;
  flex-shrink: 0;
}
.feedback-minimal:hover .fb-icon { opacity: 0.9; }
.fb-text { opacity: 0.8; transition: opacity 0.18s ease; }
.feedback-minimal:hover .fb-text { opacity: 1; }

@media (max-width: 600px) {
  .feedback-minimal {
    width: 44px; height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .fb-text { display: none; }
}


/* ══════════════════════════════════════════════════════
   REPORT PAGE
   ══════════════════════════════════════════════════════ */
.report-page { max-width: 640px; margin: 60px auto; padding: 0 clamp(16px, 3vw, 24px) 80px; }
.report-card {
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 44px) clamp(24px, 4.5vw, 40px);
  box-shadow: var(--shadow-card);
}
.report-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: rgba(224,49,49,0.08);
  border: 1px solid rgba(224,49,49,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: var(--sp-6);
}
.report-card h1 {
  font-family: var(--mono);
  font-size: clamp(20px, 1.8rem + 0.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.6px;
  margin-bottom: var(--sp-3);
  max-width: none;
  margin-left: 0; margin-right: 0;
}
.report-card .sub {
  font-size: clamp(13px, 0.84rem, 14px);
  color: var(--text-secondary);
  margin-bottom: clamp(24px, 4vw, 36px);
  line-height: 1.65;
  max-width: none;
  margin-left: 0; margin-right: 0;
}

.form-group { margin-bottom: var(--sp-5); }
.form-label {
  display: block;
  font-family: var(--mono);
  font-size: clamp(9.5px, 0.62rem, 11px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-md);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: clamp(12.5px, 0.82rem, 13px);
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: rgba(0,98,230,0.45);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-textarea { min-height: 100px; resize: vertical; font-family: var(--sans); font-size: 14px; }
.form-select { cursor: pointer; }
.form-select option { background: var(--bg-card); }

.btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #0052CC 0%, var(--accent) 100%);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-size: clamp(14px, 0.9rem, 15px);
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  transition: all var(--transition);
  margin-top: var(--sp-2);
  min-height: 48px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-submit:hover {
  background: linear-gradient(135deg, #0044B8 0%, #0055D4 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,98,230,0.22), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-submit:active { transform: scale(0.99); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(13px, 0.85rem, 15px);
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: clamp(18px, 3.5vw, 28px);
  padding: 5px 0;
  transition: color var(--t-base) ease, gap var(--t-base) ease;
  min-height: 40px;
}
.back-link:hover { color: var(--text-primary); gap: 11px; }

.success-msg {
  display: none;
  text-align: center;
  padding: 40px 20px;
}
.success-msg.active { display: block; }
.success-msg .s-icon { font-size: 48px; margin-bottom: var(--sp-4); }
.success-msg h2 {
  font-family: var(--mono);
  font-size: clamp(18px, 1.2rem + 0.2vw, 20px);
  margin-bottom: var(--sp-3);
  color: var(--safe);
  max-width: none;
}
.success-msg p { color: var(--text-secondary); font-size: 14px; max-width: none; margin: 0; }


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

/* ── Ultra-wide ≥ 1800px ── */
@media (min-width: 1800px) {
  .main-content { max-width: 860px; }
  .hero { padding: 110px 0 72px; }
  .hero-title { font-size: 64px; }
}

/* ── Large desktop 1440–1799px ── */
@media (min-width: 1440px) and (max-width: 1799px) {
  .main-content { max-width: 840px; }
  .hero-title { font-size: 58px; }
  .analyzer-card { padding: 40px; }
}

/* ── Desktop 1281–1439px ── */
@media (min-width: 1281px) and (max-width: 1439px) {
  .main-content { max-width: 820px; }
  .hero-title { font-size: 52px; }
  .how-grid { grid-template-columns: repeat(4, 1fr); }
  .analyzer-card { padding: 36px; }
}

/* ── Small laptop 1025–1280px ── */
@media (min-width: 1025px) and (max-width: 1280px) {
  .main-content { max-width: 760px; padding: 0 24px 80px; }
  .hero { padding: 64px 0 44px; }
  .hero-title { font-size: 44px; }
  .how-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .how-card { padding: 20px 18px; }
}

/* ── Tablet 768–1024px ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .main-content { max-width: 100%; padding: 0 32px 80px; }
  .header-inner { padding: 0 28px; }
  .hero { padding: 60px 0 40px; }
  .hero-title { font-size: 40px; letter-spacing: -1.2px; }
  .hero-sub { font-size: 15px; max-width: 500px; }
  .analyzer-card { padding: 28px 24px; }
  .how-section-inner { padding: 0 16px; }
  .how-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .how-card { padding: 20px 18px; }
  .result-columns { grid-template-columns: 1fr 1fr; }
  .footer-inner { padding: 0; }
  .flags-list { text-align: left !important; align-items: flex-start !important; }
  .flags-list li { text-align: left !important; justify-content: flex-start !important; }
}

/* ── Large phone 481–767px ── */
@media (min-width: 481px) and (max-width: 767px) {
  .main-content { max-width: 100%; padding: 0 16px 56px; }
  .header-inner { padding: 0 16px; }
  .logo { font-size: 16px; }
  .logo-icon { width: 30px; height: 30px; border-radius: 8px; }
  .hero { padding: 48px 0 32px; }
  .hero-title { font-size: 32px; letter-spacing: -1px; }
  .hero-sub { font-size: 14px; }
  .analyzer-card { padding: 22px 18px; border-radius: var(--r-lg); }
  .url-input { font-size: 13px; padding: 15px 10px 15px 0; }
  .btn-analyze { padding: 0 16px; font-size: 13px; height: 52px; }
  .btn-example { font-size: 11px; padding: 5px 10px; }
  .input-actions { gap: 6px; padding: 10px 2px 0; }
  .result-columns { grid-template-columns: 1fr; gap: 12px; }
  .result-verdict { padding: 16px 18px; gap: 12px; }
  .verdict-icon-wrap { width: 44px; height: 44px; font-size: 20px; }
  .verdict-label { font-size: 17px; }
  .verdict-url { max-width: 240px; font-size: 11px; }
  .trust-badge { font-size: 10px; padding: 5px 12px; }
  .result-section { padding: 16px; }
  .how-section-inner { padding: 0 4px; }
  .how-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .section-title { font-size: 22px; }
  .how-card { padding: 18px 16px; }
  .footer-links { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .footer-inner { flex-direction: column; }
}

/* ── Small phone ≤ 480px ── */
@media (max-width: 480px) {
  .header-inner { padding: 0 12px; height: 56px; }
  .logo { font-size: 15px; gap: 8px; }
  .logo-icon { width: 28px; height: 28px; border-radius: 7px; }
  .logo-ai { font-size: 11px; }
  .header-nav { gap: 6px; }
  .nav-report { padding: 6px 11px; font-size: 12px; }
  .main-content { padding: 0 14px 48px; }
  .hero { padding: 36px 0 28px; }
  .hero-badge { font-size: 10px; padding: 5px 14px; margin-bottom: 22px; }
  .hero-title { font-size: 28px; letter-spacing: -0.7px; margin-bottom: 16px; }
  .hero-sub { font-size: 13px; }
  .analyzer-card { padding: 16px 14px; border-radius: 16px; margin-bottom: 48px; }
  .input-group { flex-direction: column; border-radius: var(--r-sm); }
  .input-icon { display: none; }
  .url-input { padding: 15px 14px; font-size: 13.5px; border-bottom: 1px solid rgba(0,0,0,0.05); width: 100%; }
  .btn-analyze { width: 100%; height: 50px; justify-content: center; border-radius: 0 0 var(--r-sm) var(--r-sm); font-size: 14px; }
  .input-actions { gap: 6px; padding: 10px 0 0; flex-wrap: wrap; }
  .try-label { width: 100%; font-size: 10.5px; }
  .btn-example { font-size: 11px; padding: 5px 10px; min-height: 34px; }
  .terminal-body { font-size: 11px; padding: 12px; min-height: 80px; }
  .result-verdict { padding: 14px; gap: 10px; flex-wrap: wrap; }
  .verdict-icon-wrap { width: 42px; height: 42px; font-size: 18px; }
  .verdict-label { font-size: 16px; letter-spacing: -0.3px; }
  .verdict-url { max-width: 180px; font-size: 10px; }
  .trust-badge { font-size: 9.5px; padding: 4px 10px; }
  .result-body { gap: 12px; }
  .result-section { padding: 14px; }
  .section-tag { font-size: 10px; margin-bottom: var(--sp-3); }
  .summary-text { font-size: 13.5px; }
  .result-columns { grid-template-columns: 1fr; gap: 12px; }
  .flags-list { gap: 8px; }
  .flags-list li { font-size: 12px; }
  .checks-grid { gap: 8px; }
  .check-name { font-size: 11px; }
  .check-status { font-size: 10px; padding: 2px 8px; }
  .advice-box { gap: 10px; font-size: 13px; }
  .advice-box .advice-icon { width: 32px; height: 32px; font-size: 16px; }
  .disclaimer-bar { font-size: 11px; flex-wrap: wrap; gap: 6px; }
  .result-footer-actions { flex-direction: column; gap: 8px; }
  .btn-rescan,
  .btn-report { width: 100%; justify-content: center; min-height: 44px; font-size: 13.5px; padding: 10px 14px; }
  .how-section { padding: 16px 0 28px; }
  .how-section-inner { padding: 0; }
  .section-title { font-size: 21px; letter-spacing: -0.4px; }
  .section-sub { font-size: 13.5px; margin-bottom: 24px; }
  .how-grid { grid-template-columns: 1fr; gap: 10px; }
  .how-card { padding: 18px 16px; }
  .how-num { font-size: 12px; margin-bottom: var(--sp-3); }
  .how-card h3 { font-size: 13px; }
  .how-card p { font-size: 12.5px; }
  .site-footer { padding: 24px 14px; }
  .footer-inner { flex-direction: column; gap: 16px; }
  .footer-logo { font-size: 14px; }
  .footer-note { font-size: 11.5px; max-width: 100%; }
  .footer-links { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .footer-links a { font-size: 12px; }
  .report-card { padding: 22px 16px; border-radius: 14px; }
  .report-icon { width: 48px; height: 48px; font-size: 22px; margin-bottom: 20px; }
  .report-card h1 { font-size: 20px; }
  .report-card .sub { font-size: 13px; margin-bottom: 24px; }
  .btn-submit { font-size: 14px; padding: 13px; }
  .form-input, .form-select, .form-textarea { font-size: 14px; min-height: 44px; padding: 12px; }
  .form-label { font-size: 10px; }
  .back-link { font-size: 13px; margin-bottom: 20px; }
}

/* ── Very small 320px ── */
@media (max-width: 340px) {
  .header-inner { padding: 0 10px; }
  .logo { font-size: 13.5px; gap: 7px; }
  .logo-icon { width: 24px; height: 24px; border-radius: 6px; }
  .nav-report { padding: 5px 9px; font-size: 11px; }
  .main-content { padding: 0 10px 40px; }
  .hero { padding: 28px 0 20px; }
  .hero-title { font-size: 22px; letter-spacing: -0.5px; }
  .hero-sub { font-size: 12.5px; }
  .analyzer-card { padding: 14px 12px; }
  .url-input { font-size: 12.5px; padding: 13px 12px; }
  .btn-analyze { height: 46px; font-size: 13px; }
  .btn-example { font-size: 10.5px; padding: 4px 9px; min-height: 30px; }
  .verdict-label { font-size: 15px; }
  .verdict-url { max-width: 150px; font-size: 10px; }
  .trust-badge { font-size: 9px; padding: 3px 8px; }
  .summary-text { font-size: 13px; }
  .flags-list li { font-size: 11.5px; }
  .check-name { font-size: 10.5px; }
  .advice-box { font-size: 12.5px; }
  .result-section { padding: 12px; }
  .btn-rescan, .btn-report { padding: 9px 12px; font-size: 12.5px; }
  .section-title { font-size: 18px; }
  .how-card { padding: 14px 12px; }
  .how-card h3 { font-size: 12px; }
  .how-card p { font-size: 11.5px; }
  .site-footer { padding: 20px 10px; }
}


/* ══════════════════════════════════════════════════════
   STATS — EXTRA RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 900px) {
  .stats-grid {
    gap: var(--sp-8);
  }
  .stat-number { font-size: clamp(1.8rem, 4vw, 2.6rem); }
}


/* ══════════════════════════════════════════════════════
   ACCESSIBILITY & INTERACTIONS
   ══════════════════════════════════════════════════════ */
button,
.btn-analyze,
.btn-rescan,
.btn-report,
.btn-example,
.nav-report,
.lang-btn,
.btn-submit {
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.btn-analyze:focus-visible,
.btn-rescan:focus-visible,
.btn-report:focus-visible,
.btn-example:focus-visible,
.nav-report:focus-visible,
.lang-btn:focus-visible,
.btn-submit:focus-visible,
.logo:focus-visible,
.header-nav a:focus-visible,
.footer-links a:focus-visible,
.ios-faq-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.input-group:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow), var(--shadow-sm);
}

/* เพิ่มต่อท้าย หรือวางไว้ใต้คลาส .url-input เดิม */
.url-input:focus,
.url-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.footer-links a,
.bento-link-more,
.back-link {
  text-decoration: none;
  text-underline-offset: 3px;
}
.footer-links a:hover,
.footer-links a:focus-visible,
.bento-link-more:hover,
.back-link:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* No overflow */
body { overflow-x: hidden; }
img, svg, .logo-icon, .verdict-icon-wrap { max-width: 100%; height: auto; }

/* Prevent text cramping */
p, li {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

/* Gap normalization */
.how-grid,
.result-columns,
.flags-list,
.checks-grid,
.input-actions,
.result-footer-actions,
.header-nav,
.footer-inner {
  gap: var(--gap, 1rem);
}


/* ══════════════════════════════════════════════════════
   NAVBAR STATISTICS LINK
   ══════════════════════════════════════════════════════ */
.nav-stats-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  padding: 4px 0;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-base) ease;
  position: relative;
}
.nav-stats-btn:hover,
.nav-stats-btn.active { color: var(--accent); background: transparent; }


/* ══════════════════════════════════════════════════════
   Ecosystem / Bento Section
   ══════════════════════════════════════════════════════ */
.bento-master-section { 
  padding: 150px 0; 
}

.bento-grid-5 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 320px);
    gap: 30px;
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 40px; 
}

/* จัดการรูปภาพพื้นหลัง */
.bento-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* สำคัญ: ทำให้รูปไม่เบี้ยวและเต็มพื้นที่ */
    z-index: 0; /* อยู่ชั้นล่างสุด */
    transition: transform 0.8s var(--ease-apple); /* เอฟเฟกต์ตอน Hover */
}

/* ปรับปรุง Card เพื่อรองรับรูปภาพ */
.bento-card {
    position: relative;
    overflow: hidden; /* ตัดส่วนรูปที่เกินออก */
    z-index: 1;
}

/* ปรับจังหวะ Hover ให้รูปขยาย */
.bento-card:hover .bento-bg-image {
    transform: scale(1.08);
}

/* ทำให้เนื้อหาอยู่เหนือรูป */
.bento-overlay, .bento-inner {
    position: relative;
    z-index: 2; /* ดันเนื้อหาขึ้นมาอยู่บนรูป */
}

.bento-card {
    background: var(--bg-silver);
    border-radius: 40px;
    padding: 50px;
    position: relative;
    overflow: hidden;
    transition: 0.5s var(--ease-apple);
    display: flex;
    flex-direction: column;
}

.bento-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 40px 120px rgba(0,0,0,0.15);
}

/* รูปแบบพิเศษ Tall (สูง) และ Wide (กว้าง) */
.bento-card.tall { grid-row: span 2; border: none; }
.bento-card.wide { grid-column: span 2; background: var(--navy-deep); color: white; }

/* องค์ประกอบภายในกล่อง */
.bento-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 50px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    color: white;
}

.bento-inner i { font-size: 35px; color: var(--blue-apple); margin-bottom: 25px; }
.bento-inner h4 { font-size: 26px; font-family: 'Outfit', sans-serif; margin-bottom: 15px; }
.bento-inner p { color: var(--text-secondary); line-height: 1.6; }

.tag { display: inline-block; padding: 5px 12px; background: rgba(255,255,255,0.1); border-radius: 20px; font-size: 11px; margin-bottom: 15px; }

.bento-btn-new {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px 28px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.4s var(--ease-apple);
    width: fit-content;
}
.bento-btn-new:hover { 
    background: white; 
    color: black; 
}

.bento-link-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--blue-apple); /* หรือสีหลักของระบบคุณ */
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s var(--ease-apple);
}

.bento-link-more i {
    font-size: 12px;
    margin-bottom: 0; /* ล้างค่าเดิมของ .bento-inner i */
    transition: transform 0.3s var(--ease-apple);
}

.bento-link-more:hover {
    opacity: 0.8;
}

.bento-link-more:hover i {
    transform: translateX(5px); /* ลูกศรขยับหนีเมื่อ Hover ดู Interactive มาก */
}

/* ปรับแก้สไตล์ i ใน bento-inner ไม่ให้กระทบตัว link */
.bento-inner i:not(.bento-link-more i) {
    font-size: 35px;
    color: var(--blue-apple);
    margin-bottom: 25px;
}

/* Reveal Effect */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: 1.2s var(--ease-apple);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 1024px) {
    .bento-grid-5 { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
    .bento-card.tall { grid-row: span 2; }
    .bento-card.wide { grid-column: span 2; }
}

@media (max-width: 768px) {
    .bento-grid-5 { grid-template-columns: 1fr; }
    .bento-card.tall { grid-row: span 1; min-height: 350px; }
    .bento-card.wide { grid-column: span 1; }
    .bento-card { padding: 35px; }
}

/* ══════════════════════════════════════════════════════
   Coming Soon / Future Features Section
   ══════════════════════════════════════════════════════ */
.coming-soon-section {
    background-color: #000;
    padding: 140px 0;
    overflow: hidden;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.badge-pill {
    background: rgba(255, 255, 255, 0.08);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12px; /* เล็กลง */
    color: #86868b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.glitch-text {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -1px;
}

.sub-headline {
    color: #86868b;
    font-size: 1rem; /* ลดจาก 1.2rem */
    max-width: 500px;
    margin: 12px auto 0;
    line-height: 1.5;
}

/* Feature Grid */
.feature-focus-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}

/* Spotlight Card Design (More Compact) */
.future-card {
    background: rgba(28, 28, 30, 0.4); /* จางลงนิดหน่อย */
    border-radius: 24px; /* มนน้อยลงให้ดูคม */
    padding: 40px; /* ลดจาก 60px */
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    cursor: default;
    backdrop-filter: blur(15px);
    transition: transform 0.1s ease-out, border-color 0.3s;
}

.card-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), 
                rgba(255, 255, 255, 0.15) 0%, 
                transparent 40%);
    pointer-events: none;
    z-index: 1;
}

.card-content {
    position: relative;
    z-index: 2;
}

.icon-box {
    width: 48px;
    height: 48px;
    background: #0071e3;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(0, 113, 227, 0.4);
}

.future-card h3 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 10px;
}

.future-card p {
    font-size: 14px; /* ลดจาก 16px */
    color: #86868b;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Status Tag */
.status-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}

.dot {
    width: 8px; height: 8px;
    background: #555;
    border-radius: 50%;
}

.dot.pulse {
    background: #30d158;
    box-shadow: 0 0 10px #30d158;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Visual Icons at bottom */
.card-visual {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 900px) {
    .coming-soon-section { padding: 60px 0; }
    .feature-focus-grid { grid-template-columns: 1fr; max-width: 100%; padding: 0 20px; }
    .future-card { padding: 30px; }
}


/* ============================================================
   FOOTER BOTTOM – Premium copyright & social bar
   ============================================================ */

/* adjust main footer padding to perfectly integrate the new bar */
.site-footer {
  padding-bottom: 0;
}

/* subtle separation line + comfortable spacing */
.footer-bottom {
  border-top: 1px solid var(--border);
  margin-top: clamp(20px, 4vw, 36px);
  background: inherit;
}

.footer-bottom-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding: clamp(16px, 2.5vw, 24px) clamp(20px, 4vw, 40px) 12px;
}

/* copyright text – clean, secondary weight */
.footer-copyright p {
  margin: 0;
  font-size: clamp(13px, 0.85rem, 14px);
  color: var(--text-muted);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* social links container */
.footer-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 32px);
}

/* each social link – minimal & interactive */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(13px, 0.85rem, 14px);
  font-weight: 450;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: -0.15px;
  padding: 4px 0;
  transition: color 0.22s cubic-bezier(0.2, 0.8, 0.4, 1), transform 0.22s cubic-bezier(0.2, 0.8, 0.4, 1);
}

.social-link i {
  font-size: clamp(14px, 0.95rem, 15px);
  opacity: 0.72;
  transition: opacity 0.22s ease;
}

.social-link span {
  font-family: var(--sans);
}

.social-link:hover {
  color: var(--text-primary);
  transform: translateY(-1px);
}

.social-link:hover i {
  opacity: 1;
}

/* responsive – stack gracefully on mobile */
@media (max-width: 640px) {
  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
    padding: 20px clamp(20px, 4vw, 28px) 20px;
  }

  .footer-social {
    width: 100%;
    flex-wrap: wrap;
    gap: 24px;
  }

  .social-link {
    padding: 6px 0;
  }
}

/* extra small devices: keep touch-friendly */
@media (max-width: 480px) {
  .footer-social {
    gap: 20px;
  }
  .social-link span {
    font-size: 13px;
  }
}