/* Page styles for index.html — extracted by design system refactor */
/* All tokens from /assets/css/styles.css apply. */

/* ─── HERO ─────────────────────────────────────────────── */
  .dc-hero--home,
.hero {
    margin-top: 0; background: var(--c-dark);
    position: relative; overflow: hidden;
    min-height: 640px; display: flex; align-items: center;
  }
  .hero-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 70% 40%, rgba(26,115,232,0.22) 0%, transparent 55%),
      radial-gradient(ellipse at 15% 80%, rgba(52,168,83,0.12) 0%, transparent 45%),
      radial-gradient(ellipse at 50% 100%, rgba(253,192,16,0.06) 0%, transparent 50%),
      var(--c-dark);
  }
  .hero-visual {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: var(--cp); opacity: 0.85; pointer-events: none;
  }
  .hero-content {
    position: relative; z-index: 2;
    width: 100%; max-width: var(--cw); margin: 0 auto;
    padding: calc(var(--nav-h) + 4.5rem) var(--cp) 4.5rem;
  }
  .hero-content-inner { max-width: 600px; }
  .hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem .85rem;
    background: rgba(253,192,16,.1); border: 1px solid rgba(253,192,16,.25);
    border-radius: var(--r-full); margin-bottom: 1.5rem;
    font-size: .72rem; font-weight: var(--fw-semibold); color: #fdc010;
    letter-spacing: var(--ls-normal); text-transform: uppercase;
  }
  .hero h1 {
    font-family: 'Google Sans Display', sans-serif;
    font-size: clamp(2.6rem, 5.5vw, 4.2rem);
    font-weight: var(--fw-bold); line-height: 1.08;
    color: #fff; margin-bottom: 1.25rem;
    letter-spacing: -.01em;
  }
  .hero h1 em { font-style: normal; color: #8ab4f8; font-weight: var(--fw-normal); }
  .hero-sub {
    font-size: 1.05rem; color: rgba(255,255,255,.6);
    max-width: 500px; line-height: var(--lh-relaxed); margin-bottom: 2.25rem;
  }
  .hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
  .hero-actions .secondary-link {
    font-size: .875rem; font-weight: var(--fw-medium); color: rgba(255,255,255,.55);
    text-decoration: none; display: inline-flex; align-items: center; gap: .3rem;
    transition: color var(--t-fast);
  }
  .hero-actions .secondary-link:hover { color: #fff; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-content-inner > * { animation: fadeUp .5s ease forwards; opacity: 0; }
  .hero-badge  { animation-delay: .05s; }
  .hero h1     { animation-delay: .12s; }
  .hero-sub    { animation-delay: .22s; }
  .hero-actions { animation-delay: .32s; }

  /* ─── TRUST BAR ─────────────────────────────────────────── */
  .trust-bar { background: #f8f9fa; border-bottom: 1px solid #e8eaed; padding: .875rem 0; }
  .trust-bar-inner {
    max-width: var(--cw); margin: 0 auto; padding: 0 var(--cp);
    display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap;
  }
  .trust-label { font-size: .7rem; color: #9aa0a6; font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); text-transform: uppercase; flex-shrink: 0; }
  .trust-items { display: flex; gap: 2rem; flex-wrap: wrap; }
  .trust-item  { font-size: .8rem; color: #5f6368; font-weight: var(--fw-medium); display: flex; align-items: center; gap: .35rem; }
  .trust-dot   { width: 5px; height: 5px; border-radius: 50%; background: var(--c-brand); flex-shrink: 0; }

  /* ─── STATS SECTION ─────────────────────────────────────── */
  .stats-section {
    padding: var(--sv) 0;
    background: var(--c-dark);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative; overflow: hidden;
  }
  .stats-section::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse at 25% 50%, rgba(253,192,16,.07) 0%, transparent 50%),
      radial-gradient(ellipse at 75% 50%, rgba(26,115,232,.06) 0%, transparent 50%);
  }
  .stats-inner {
    max-width: var(--cw); margin: 0 auto; padding: 0 var(--cp);
    display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem;
    position: relative; z-index: 1;
  }
  .stat-block {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--surface-1);
    border: 1px solid var(--surface-2);
    border-radius: var(--r-lg);
    transition: background var(--t-base), border-color .2s, transform .2s, box-shadow .2s;
  }
  .stat-block:hover {
    background: var(--surface-2);
    border-color: rgba(253,192,16,.25);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(253,192,16,.1);
  }
  .stat-block .stat-num {
    font-family: 'Google Sans Display', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem); font-weight: var(--fw-bold);
    color: var(--c-brand); line-height: 1; margin-bottom: .6rem;
    display: block;
  }
  .stat-block .stat-num span { color: var(--c-brand); }
  .stat-block .stat-desc { font-size: .8rem; color: var(--surface-muted); line-height: 1.55; }

  /* ─── PROBLEM SECTION ───────────────────────────────────── */
  .problem-section { padding: var(--sv) 0; background: #fff; }
  .problem-inner {
    max-width: var(--cw); margin: 0 auto; padding: 0 var(--cp);
    display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
  }
  .eyebrow { font-size: .7rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; margin-bottom: .75rem; }
  .eyebrow.blue  { color: #1a73e8; }
  .eyebrow.gold  { color: var(--c-brand); }
  .eyebrow.green { color: #059669; }
  .section-h2 {
    font-family: 'Google Sans Display', sans-serif;
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    font-weight: var(--fw-normal); line-height: 1.18; color: #202124; margin-bottom: 1rem;
  }
  .section-sub { font-size: 1rem; color: #5f6368; line-height: var(--lh-relaxed); max-width: 560px; }
  .problem-body { font-size: .95rem; color: #3c4043; line-height: var(--lh-relaxed); margin-bottom: 1rem; }
  .problem-cta { margin-top: 2rem; }

  /* Live feed visual */
  .live-feed {
    background: #0a0f1a; border-radius: var(--r-lg);
    border: 1px solid var(--surface-2);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
  }
  .feed-header {
    padding: 1rem 1.25rem; background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: space-between;
  }
  .feed-title { font-size: .72rem; font-weight: var(--fw-semibold); color: rgba(255,255,255,.4); letter-spacing: var(--ls-wide); text-transform: uppercase; }
  .feed-live  { display: flex; align-items: center; gap: .4rem; font-size: .68rem; color: #34d399; font-weight: var(--fw-semibold); }
  .feed-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; animation: pulse-green 2s infinite; }
  @keyframes pulse-green { 0%,100%{opacity:1;} 50%{opacity:.4;} }
  .feed-body { padding: 1rem; display: flex; flex-direction: column; gap: .65rem; }
  .feed-row {
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem 1rem;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--r-md); transition: background var(--t-base);
  }
  .feed-row:hover { background: rgba(255,255,255,.06); }
  .feed-icon { width: 30px; height: 30px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .feed-text { flex: 1; min-width: 0; }
  .feed-title-row { font-size: .8rem; font-weight: var(--fw-semibold); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .feed-sub { font-size: .68rem; color: rgba(255,255,255,.35); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .feed-badge { font-size: .65rem; font-weight: var(--fw-bold); padding: .2rem .55rem; border-radius: var(--r-full); white-space: nowrap; letter-spacing: .04em; }
  .b-red    { background: rgba(239,68,68,.18);  color: #f87171; }
  .b-green  { background: rgba(52,211,153,.15); color: #34d399; }
  .b-yellow { background: rgba(251,191,36,.15); color: #fbbf24; }
  .feed-footer { padding: .75rem 1.25rem; border-top: 1px solid rgba(255,255,255,.05); font-size: .7rem; color: #34d399; font-weight: var(--fw-medium); display: flex; align-items: center; gap: .4rem; }

  /* ─── PRODUCTS TABS SECTION ─────────────────────────────── */
  .products-section { padding: var(--sv) 0; background: #f8f9fa; }
  .products-inner { max-width: var(--cw); margin: 0 auto; padding: 0 var(--cp); }
  .products-header { margin-bottom: 3rem; }
  /* Tab nav */
  .product-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid #e8eaed;
    margin-bottom: 2.5rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .product-tab {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1.5rem;
    font-size: .875rem; font-weight: var(--fw-medium); color: #5f6368;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    cursor: pointer; white-space: nowrap;
    background: none; border-top: none; border-left: none; border-right: none;
    transition: color var(--t-base), border-color .2s;
  }
  .product-tab:hover { color: var(--c-body); }
  .product-tab.active { color: var(--c-body); border-bottom-color: var(--c-body); font-weight: var(--fw-semibold); }
.product-tab:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; border-radius: 4px; }
  .product-tab .tab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  /* Tab panels */
  .product-panel { display: none; }
  .product-panel.active { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: center; }
  .panel-eyebrow { font-size: .7rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; margin-bottom: .75rem; }
  .panel-h2 {
    font-family: 'Google Sans Display', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: var(--fw-normal); line-height: 1.18; color: #202124; margin-bottom: .85rem;
  }
  .panel-body { font-size: .95rem; color: #3c4043; line-height: var(--lh-relaxed); margin-bottom: 1.5rem; }
  .panel-features { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; }
  .panel-feat {
    display: flex; align-items: center; gap: .6rem;
    font-size: .85rem; color: #3c4043;
  }
  .panel-feat::before { content: ''; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23e8f5e9'/%3E%3Cpath d='M4.5 8l2.5 2.5L11 5' stroke='%23059669' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
  .panel-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: var(--fw-semibold); text-decoration: none; padding: .65rem 1.4rem; border-radius: var(--r-full); transition: opacity var(--t-fast); }
  .panel-link:hover { opacity: .85; }
.panel-link:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; border-radius: var(--r-full); }
  .panel-screen {
    border-radius: var(--r-lg); overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
    border: 1px solid #e8eaed;
  }

  /* DataHarmony screen — threat dashboard */
  .dh-screen { background: var(--c-dark); padding: 0; }
  .dh-screen-bar { background: #111827; padding: .75rem 1.25rem; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid rgba(255,255,255,.06); }
  .dh-screen-dot { width: 8px; height: 8px; border-radius: 50%; }
  .dh-screen-title { font-size: .7rem; color: rgba(255,255,255,.3); margin-left: .5rem; letter-spacing: var(--ls-tight); }
  .dh-screen-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
  .dh-metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; margin-bottom: .25rem; }
  .dh-metric { background: var(--surface-1); border-radius: var(--r-sm,10px); padding: .85rem; border: 1px solid rgba(255,255,255,.06); }
  .dh-metric-val { font-family: 'Google Sans Display', sans-serif; font-size: 1.3rem; font-weight: var(--fw-bold); color: #fff; }
  .dh-metric-val.red { color: #f87171; }
  .dh-metric-val.green { color: #34d399; }
  .dh-metric-val.yellow { color: #fbbf24; }
  .dh-metric-lab { font-size: .65rem; color: rgba(255,255,255,.35); margin-top: .15rem; }
  .dh-row { display: flex; align-items: center; gap: .75rem; background: rgba(255,255,255,.03); border-radius: var(--r-sm,10px); padding: .7rem .9rem; border: 1px solid rgba(255,255,255,.05); }
  .dh-row-icon { width: 26px; height: 26px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .dh-row-text { flex: 1; font-size: .75rem; color: var(--surface-text); }
  .dh-row-sub  { font-size: .65rem; color: rgba(255,255,255,.3); margin-top: .08rem; }
  .dh-row-badge { font-size: .62rem; font-weight: var(--fw-bold); padding: .18rem .5rem; border-radius: var(--r-full); }

  /* NetSight screen — network map */
  .ns-screen { background: #0a1628; padding: 0; }
  .ns-screen-bar { background: var(--surface-1); padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06); }
  .ns-screen-title { font-size: .7rem; color: rgba(255,255,255,.3); letter-spacing: var(--ls-tight); }
  .ns-uptime { font-size: .65rem; font-weight: var(--fw-semibold); color: #22d3ee; display: flex; align-items: center; gap: .3rem; }
  .ns-uptime::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #22d3ee; display: block; }
  .ns-screen-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
  .ns-node-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; }
  .ns-node { background: rgba(34,211,238,.06); border: 1px solid rgba(34,211,238,.15); border-radius: var(--r-sm,10px); padding: .8rem; text-align: center; }
  .ns-node-icon { font-size: 1.1rem; margin-bottom: .3rem; }
  .ns-node-name { font-size: .68rem; color: rgba(255,255,255,.6); font-weight: var(--fw-medium); }
  .ns-node-status { font-size: .6rem; margin-top: .2rem; }
  .ns-node-status.online { color: #34d399; }
  .ns-node-status.alert  { color: #fbbf24; }
  .ns-alert-row { display: flex; align-items: center; gap: .6rem; background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.15); border-radius: var(--r-sm,10px); padding: .65rem .9rem; }
  .ns-alert-text { font-size: .75rem; color: var(--surface-text); flex: 1; }
  .ns-alert-badge { font-size: .62rem; font-weight: var(--fw-semibold); color: #fbbf24; padding: .15rem .45rem; background: rgba(251,191,36,.15); border-radius: var(--r-full); }

  /* AI4FOI screen — request queue */
  .foi-screen { background: #071d14; padding: 0; }
  .foi-screen-bar { background: rgba(5,150,105,.08); padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(5,150,105,.15); }
  .foi-screen-title { font-size: .7rem; color: rgba(255,255,255,.35); letter-spacing: var(--ls-tight); }
  .foi-screen-count { font-size: .65rem; font-weight: var(--fw-semibold); color: #34d399; }
  .foi-screen-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
  .foi-row { display: flex; align-items: center; gap: .75rem; background: rgba(255,255,255,.03); border-radius: var(--r-sm,10px); padding: .7rem .9rem; border: 1px solid rgba(255,255,255,.05); }
  .foi-row-icon { width: 28px; height: 28px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .foi-row-text { flex: 1; font-size: .75rem; color: var(--surface-text); }
  .foi-row-sub  { font-size: .65rem; color: rgba(255,255,255,.3); margin-top: .08rem; }
  .foi-row-badge { font-size: .62rem; font-weight: var(--fw-bold); padding: .18rem .5rem; border-radius: var(--r-full); }
  .foi-progress-bar { height: 3px; background: var(--surface-border); border-radius: 2px; margin-top: .6rem; overflow: hidden; }
  .foi-progress-fill { height: 100%; border-radius: 2px; background: #059669; }

  /* ─── SERVICES TEASER ───────────────────────────────────── */
  .services-section { padding: var(--sv) 0; background: var(--c-dark); color: #fff; }
  .services-inner {
    max-width: var(--cw); margin: 0 auto; padding: 0 var(--cp);
    display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
  }
  .services-h2 {
    font-family: 'Google Sans Display', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: var(--fw-normal); color: #fff; line-height: 1.18; margin-bottom: 1.25rem;
  }
  .services-h2 strong { font-weight: var(--fw-bold); color: var(--c-brand); }
  .services-body { font-size: .95rem; color: rgba(255,255,255,.55); line-height: var(--lh-relaxed); margin-bottom: 2rem; }
  .services-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
  .services-pill { padding: .35rem .9rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-full); font-size: .78rem; color: rgba(255,255,255,.65); }
  .services-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
  .services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .svc-tile { padding: 1.4rem; border-radius: var(--r-md); border: 1px solid var(--surface-2); background: rgba(255,255,255,.03); transition: background var(--t-base), border-color .2s; }
  .svc-tile:hover { background: rgba(255,255,255,.06); border-color: rgba(253,192,16,.25); }
  .svc-tile-icon { font-size: 1.3rem; margin-bottom: .65rem; }
  .svc-tile-title { font-size: .875rem; font-weight: var(--fw-semibold); color: #fff; margin-bottom: .3rem; }
  .svc-tile-body  { font-size: .78rem; color: rgba(255,255,255,.4); line-height: var(--lh-normal); }

  /* ─── WHY SECTION ───────────────────────────────────────── */
  .why-section { padding: var(--sv) 0; background: #fff; }
  .why-inner { max-width: var(--cw); margin: 0 auto; padding: 0 var(--cp); }
  .why-grid-home { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; margin-top: 2.5rem; }
  .why-card-home {
    padding: 1.75rem; border: 1px solid #e8eaed; border-radius: var(--r-lg); background: #fff;
    transition: box-shadow var(--t-base), transform .2s;
  }
  .why-card-home:hover { box-shadow: 0 4px 24px rgba(0,0,0,.07); transform: translateY(-2px); }
  .why-card-home .wc-icon { width: 42px; height: 42px; border-radius: var(--r-md); background: #f8f9fa; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 1.2rem; }
  .why-card-home h3 { font-size: .9rem; font-weight: var(--fw-semibold); color: #202124; margin-bottom: .4rem; }
  .why-card-home p  { font-size: .8rem; color: #5f6368; line-height: var(--lh-normal); }

  /* ─── CTA ───────────────────────────────────────────────── */
  .home-cta { padding: var(--sv) 0; text-align: center; background: var(--c-dark); }
  .home-cta-inner { max-width: var(--cw); margin: 0 auto; padding: 0 var(--cp); }
  .home-cta h2 {
    font-family: 'Google Sans Display', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--fw-bold);
    color: #fff; margin-bottom: 1rem; letter-spacing: -.01em;
    line-height: 1.12;
  }
  .home-cta h2 em { font-style: normal; color: var(--c-brand); }
  .home-cta p { font-size: 1rem; color: rgba(255,255,255,.5); max-width: 480px; margin: 0 auto 2.25rem; line-height: var(--lh-relaxed); }
  .home-cta-btns { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
  .home-cta-note { font-size: .78rem; color: rgba(255,255,255,.25); display: flex; gap: .35rem; justify-content: center; align-items: center; flex-wrap: wrap; }
  .home-cta-note .sep { color: rgba(255,255,255,.12); }

  /* ─── RESPONSIVE ────────────────────────────────────────── */
  /* ── 992px ──────────────────────────────── */
  @media (max-width: 992px) {
    .stats-inner        { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .problem-inner      { grid-template-columns: 1fr; gap: 3rem; }
    .product-panel.active { grid-template-columns: 1fr; gap: 2rem; }
    .services-inner     { grid-template-columns: 1fr; gap: 3rem; }
    .why-grid-home      { grid-template-columns: 1fr 1fr; }
    .services-grid      { grid-template-columns: 1fr 1fr; }
  }

  /* ── 768px tablet ────────────────────────── */
  @media (max-width: 768px) {
    .trust-bar-inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .trust-items     { gap: .4rem 1.25rem; }
    .trust-label     { font-size: .66rem; }
    .trust-item      { font-size: .76rem; }

    .why-grid-home  { grid-template-columns: 1fr 1fr; }

    /* Product tabs — scrollable */
    .product-tabs  { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
    .product-tab   { padding: .7rem .9rem; font-size: .79rem; }

    /* Hero adjustments */
    .hero h1   { font-size: clamp(2rem, 6.5vw, 3rem); }
    .hero-sub  { font-size: .9rem; }

    /* Stats */
    .stats-inner { grid-template-columns: 1fr 1fr; gap: .85rem; }
    .stat-block .stat-num { font-size: clamp(1.8rem, 5vw, 2.4rem); }
  }

  /* ── 600px mobile ────────────────────────── */
  @media (max-width: 600px) {
    /* Hero */
    .hero h1   { font-size: clamp(1.8rem, 7.5vw, 2.5rem); line-height: 1.12; }
    .hero-sub  { font-size: .88rem; margin-bottom: 1.75rem; max-width: 100%; }
    .hero-badge { font-size: .68rem; }
    .hero-actions { flex-direction: column; gap: .55rem; align-items: flex-start; }
    .hero-actions a,
    .hero-actions .secondary-link { justify-content: flex-start; }

    /* Stats — 2×2 */
    .stats-inner { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .stat-block { padding: 1.5rem 1rem; }
    .stat-block  { text-align: left; }
    .stat-block .stat-num { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .stat-block .stat-desc { font-size: .76rem; }

    /* Problem section */
    .section-h2   { font-size: clamp(1.5rem, 6vw, 2rem); }
    .problem-body { font-size: .88rem; }

    /* Products — 1 col */
    .products-grid { grid-template-columns: 1fr !important; gap: 1rem; }
    .product-card-visual { height: 140px; }

    /* Services teaser */
    .services-h2  { font-size: clamp(1.7rem, 6.5vw, 2.2rem); }
    .services-body { font-size: .88rem; }
    .services-grid { grid-template-columns: 1fr !important; gap: .75rem; }
    .svc-tile      { padding: 1.1rem; border-radius: var(--r-md); }
    .svc-tile-title { font-size: .84rem; }
    .svc-tile-body  { font-size: .76rem; }
    .services-actions { flex-wrap: wrap; gap: .5rem; }
    .services-actions a { flex: 1; min-width: 140px; justify-content: center; text-align: center; }
    .services-pills { gap: .35rem; }
    .services-pill  { font-size: .73rem; padding: .28rem .7rem; }

    /* Why grid */
    .why-grid-home { grid-template-columns: 1fr !important; gap: 1rem; }
    .why-card-home { padding: 1.25rem; border-radius: var(--r-md); }
    .why-card-home h3 { font-size: .88rem; }
    .why-card-home p  { font-size: .78rem; }

    /* Home CTA */
    .home-cta h2    { font-size: clamp(1.6rem, 6.5vw, 2rem); line-height: 1.18; }
    .home-cta p     { font-size: .88rem; }
    .home-cta-btns  { flex-wrap: wrap; justify-content: center; gap: .5rem; }
    .home-cta-btns a { flex: 1; min-width: 140px; text-align: center; justify-content: center; }
    .home-cta-note  { flex-direction: column; gap: .15rem; }
    .home-cta-note .sep { display: none; }

    /* Product tab panels */
    .panel-h2 { font-size: clamp(1.5rem, 6vw, 1.9rem); }
    .panel-body { font-size: .85rem; }
    .panel-features { gap: .4rem; }
    .panel-feat { font-size: .8rem; }
    .panel-link { padding: .6rem 1.25rem; font-size: .83rem; }

    /* Product screen mockups */
    .dh-metric-row { grid-template-columns: 1fr 1fr; }
    .ns-node-grid  { grid-template-columns: 1fr 1fr; }
    .foi-screen-body { padding: .85rem; gap: .5rem; }
    .foi-row { padding: .6rem .75rem; gap: .6rem; }
    .foi-row-text { font-size: .72rem; }
    .foi-row-sub  { font-size: .63rem; }
  }

  /* ── 390px iPhone ────────────────────────── */
  @media (max-width: 390px) {
    .hero h1 { font-size: 1.65rem; }
    .stats-inner { grid-template-columns: 1fr; gap: .85rem; }
    .stat-block .stat-num { font-size: 1.5rem; }
    .products-grid { gap: .75rem; }
    .why-grid-home { gap: .75rem; }
    .why-card-home { padding: 1rem; }
  }