/* ============================================
   DESIGN SYSTEM — Hub de Agentes IA CS Saúde
   ============================================ */
:root {
  --bg:           #060D1A;
  --bg2:          #0A1628;
  --bg-card:      rgba(14, 30, 60, 0.55);
  --cyan:         #00E5FF;
  --cyan-dim:     rgba(0, 229, 255, 0.12);
  --cyan-border:  rgba(0, 229, 255, 0.25);
  --cyan-glow:    0 0 40px rgba(0, 229, 255, 0.18);
  --orange:       #FF6B35;
  --orange-dim:   rgba(255, 107, 53, 0.12);
  --orange-border:rgba(255, 107, 53, 0.3);
  --orange-glow:  0 0 40px rgba(255, 107, 53, 0.2);
  --green:        #4ADE80;
  --text:         #F0F4FF;
  --text2:        #AABBD4;
  --text3:        #7A8EAD;
  --border:       rgba(255,255,255,0.07);
  --font-h:       'Passion One', cursive;
  --font-b:       'Inter', sans-serif;
  --nav-h:        70px;
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --sp:           120px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--cyan-border); border-radius: 3px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.text-cyan   { color: var(--cyan); }
.text-orange { color: var(--orange); }

/* ============ ANIMATIONS ============ */
@keyframes fadeUp   { from { opacity:0; transform:translateY(36px); } to { opacity:1; transform:translateY(0); } }
@keyframes blink    { 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes pulse    { 0%,100%{ box-shadow:0 0 10px rgba(0,229,255,.3); } 50%{ box-shadow:0 0 28px rgba(0,229,255,.7); } }
@keyframes float    { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes spin     { to { transform:rotate(360deg); } }
@keyframes lineIn   { from { height:0; } to { height:100%; } }
@keyframes shimmer  { 0%{ background-position:-200% center; } 100%{ background-position:200% center; } }
@keyframes glow     { 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

@keyframes hubPulse {
  0%,100%{
    box-shadow: 0 0 14px rgba(0,229,255,.35), 0 0 0 0 rgba(0,229,255,.15);
    transform: scale(1);
  }
  50%{
    box-shadow: 0 0 42px rgba(0,229,255,.75), 0 0 60px rgba(0,229,255,.2);
    transform: scale(1.07);
  }
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--r, 125px)) translateY(-50%); }
  to   { transform: rotate(360deg) translateX(var(--r, 125px)) translateY(-50%); }
}
@keyframes orbit-label {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============ NAV ============ */
#nav {
  position: fixed; top:0; left:0; right:0;
  height: var(--nav-h); z-index: 999;
  transition: background .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(6,13,26,.93);
  backdrop-filter: blur(22px);
  border-bottom-color: var(--border);
}
.nav-container {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-h); font-size: 16px; font-weight: 700;
  letter-spacing: .5px;
}
.logo-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px rgba(255,107,53,.9);
  animation: pulse 2.5s ease-in-out infinite;
}
.logo-accent { color: var(--cyan); }
.nav-links { display: flex; list-style: none; gap: 36px; }
.nav-links a {
  color: var(--text2); text-decoration: none;
  font-size: 13.5px; font-weight: 500; letter-spacing: .3px;
  position: relative; transition: color .2s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:2px; background:var(--cyan);
  transition: width .3s var(--ease);
}
.nav-links a:hover,
.nav-links a.active { color: var(--cyan); }
.nav-links a:hover::after,
.nav-links a.active::after { width:100%; }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all .3s; }

/* ============ HERO ============ */
#hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding-top: var(--nav-h);
}
#particleCanvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.hero-bg-gradient {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(0,60,100,.45), transparent);
}
.hero-content {
  position: relative; z-index: 1;
  text-align: center; max-width: 920px; padding: 0 24px 100px;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--cyan); font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; margin-bottom: 24px;
}
.tag-line { display:block; width:36px; height:1px; background:var(--cyan); }
.hero-title {
  font-family: var(--font-h);
  font-size: clamp(24px, 4vw, 52px);
  font-weight: 700; line-height: 1.12;
  letter-spacing: .5px; margin-bottom: 24px;
  height: 3.5em; /* 3 linhas × 1.12 + buffer — impede que o reflow afete os cards abaixo */
  overflow: visible;
}
.hero-orange { color: var(--orange); }
.typed-line {
  display: block;
  min-height: 1.15em;
  white-space: nowrap;
}
.typed-text { color: var(--cyan); }
.typed-cursor { color: var(--cyan); animation: blink 1s infinite; font-weight: 300; }
.hero-sub {
  font-size: 17px; color: var(--text2);
  max-width: 600px; margin: 0 auto 52px; line-height: 1.75;
}
.hero-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 14px; max-width: 820px; margin: 0 auto;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--cyan-border);
  border-radius: 18px; padding: 22px 12px;
  backdrop-filter: blur(18px);
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,transparent,var(--cyan),transparent);
}
.stat-card:hover { transform:translateY(-5px); box-shadow: var(--cyan-glow); }
.stat-row { display:flex; align-items:flex-end; justify-content:center; gap:2px; line-height:1; margin-bottom:10px; }
.stat-number {
  font-family: var(--font-h); font-size: 38px; font-weight: 700; color: var(--cyan); line-height:1;
}
.stat-fixed { font-size: 30px; }
.stat-unit  { font-family: var(--font-h); font-size: 22px; font-weight: 700; color: var(--cyan); opacity:.7; padding-bottom:3px; }
.stat-sym   { font-family: var(--font-h); font-size: 24px; font-weight: 700; color: var(--cyan); opacity:.7; padding-bottom:3px; }
.stat-label { font-size: 11px; color: var(--text3); text-transform:uppercase; letter-spacing:.5px; line-height:1.4; }
.hero-scroll {
  position:absolute; bottom:36px; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--text3); font-size:10px; letter-spacing:3px; text-transform:uppercase;
  animation: float 3.5s ease-in-out infinite;
}
.scroll-bar { width:1px; height:44px; background:linear-gradient(to bottom,var(--cyan),transparent); }

/* ============ BACK TO TOP ============ */
#backToTop {
  position: fixed; bottom: 28px; right: 22px; z-index: 998;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid var(--cyan-border);
  color: var(--cyan); font-size: 24px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transform: translateY(16px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, box-shadow .3s;
}
#backToTop.visible {
  opacity: 1; visibility: visible; transform: translateY(0);
}
#backToTop:hover {
  background: rgba(0, 229, 255, 0.22);
  box-shadow: var(--cyan-glow);
}

/* ============ SECTIONS ============ */
.section { padding: var(--sp) 0; }
.section-alt {
  background: var(--bg2);
  position: relative;
}
.section-alt::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,transparent,var(--cyan-border),transparent);
}
.section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 18px;
}
.section-title {
  font-family: var(--font-h);
  font-size: clamp(28px, 4.2vw, 54px);
  font-weight: 700; line-height: 1.12;
  letter-spacing: .5px; margin-bottom: 22px;
}
.section-sub {
  font-size: 16px; color: var(--text2); max-width: 680px;
  line-height: 1.8; margin-bottom: 60px;
}

/* ============ PROBLEM GRID ============ */
.problem-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.problem-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 20px; padding: 36px; backdrop-filter:blur(14px);
  position:relative; overflow:hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.problem-card::after {
  content:''; position:absolute; inset:0; border-radius:20px;
  background: radial-gradient(circle at 0% 0%,var(--cyan-dim),transparent 55%);
  opacity:0; transition:opacity .35s;
}
.problem-card:hover { border-color:var(--cyan-border); box-shadow:var(--cyan-glow); transform:translateY(-4px); }
.problem-card:hover::after { opacity:1; }
.card-icon { font-size:36px; margin-bottom:18px; display:block; }
.problem-card h3 { font-family:var(--font-h); font-size:20px; font-weight:700; margin-bottom:12px; letter-spacing:.3px; }
.problem-card p  { font-size:14.5px; color:var(--text2); line-height:1.7; }
.problem-card strong { color:var(--cyan); font-weight:600; }

/* ============ SOLUTION LAYOUT ============ */
.solution-layout {
  display: flex;
  align-items: center;
  gap: 52px;
  margin-bottom: 28px;
}
.solution-layout .agents-grid {
  flex: 1;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0;
}

/* ============ HUB VISUAL ============ */
.hub-visual {
  position: relative; flex-shrink: 0;
  width: 280px; height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.hub-ring {
  position:absolute; border-radius:50%;
  border:1px dashed var(--cyan-border);
  animation: spin linear infinite;
}
.hub-ring-outer { width:100%; height:100%; animation-duration:24s; }
.hub-ring-inner { width:66%;  height:66%; animation-duration:14s; animation-direction:reverse; }
.hub-center {
  position:relative; z-index:2;
  width:96px; height:96px; border-radius:50%;
  background: radial-gradient(circle,rgba(0,100,160,.3),transparent);
  border:2px solid var(--cyan);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation: hubPulse 3s ease-in-out infinite;
}
.hub-icon  { font-size:28px; line-height:1; }
.hub-label { font-size:9px; color:var(--cyan); text-align:center; font-weight:700; letter-spacing:.5px; line-height:1.4; margin-top:4px; }

/* Orbit nodes — animated rotation */
.orbit-node {
  position:absolute; top:50%; left:50%; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  --r: 120px;
  animation: orbit 20s linear infinite;
}
.orbit-node:nth-child(4) { animation-delay:   0s; }
.orbit-node:nth-child(5) { animation-delay:  -5s; }
.orbit-node:nth-child(6) { animation-delay: -10s; }
.orbit-node:nth-child(7) { animation-delay: -15s; }

.orbit-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 10px var(--cyan);
}
.orbit-node span {
  font-size:10px; font-weight:700; color:var(--cyan); letter-spacing:1px;
  text-transform:uppercase; white-space:nowrap;
  animation: orbit-label 20s linear infinite;
}
.orbit-node:nth-child(4) span { animation-delay:   0s; }
.orbit-node:nth-child(5) span { animation-delay:  -5s; }
.orbit-node:nth-child(6) span { animation-delay: -10s; }
.orbit-node:nth-child(7) span { animation-delay: -15s; }

/* ============ AGENTS GRID ============ */
.agents-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; }
.agent-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:20px; padding:26px 18px; text-align:center;
  backdrop-filter:blur(14px); position:relative; overflow:hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.agent-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:0; transition:opacity .3s;
}
.agent-card:hover { border-color:var(--cyan-border); box-shadow:var(--cyan-glow); transform:translateY(-5px); }
.agent-card:hover::after { opacity:1; }
.agent-badge {
  display:inline-block; background:var(--cyan-dim); border:1px solid var(--cyan-border);
  color:var(--cyan); font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; padding:3px 12px; border-radius:100px; margin-bottom:12px;
}
.agent-icon { font-size:28px; margin-bottom:12px; display:block; }
.agent-card h3 { font-family:var(--font-h); font-size:18px; font-weight:700; margin-bottom:8px; letter-spacing:.3px; }
.agent-card p  { font-size:13.5px; color:var(--text2); line-height:1.6; }
.agents-note {
  text-align:center; color:var(--text3); font-size:14px; font-style:italic;
  padding:14px 24px; border:1px dashed var(--border); border-radius:12px;
}

/* ============ BENEFITS GRID ============ */
.benefits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.benefit-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:20px; padding:36px 30px; position:relative; overflow:hidden;
  backdrop-filter:blur(14px);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.benefit-card:hover { border-color:var(--cyan-border); box-shadow:var(--cyan-glow); transform:translateY(-4px); }
.benefit-num {
  position:absolute; top:20px; right:22px;
  font-family:var(--font-h); font-size:52px; font-weight:700;
  color:rgba(0,229,255,.055); line-height:1; user-select:none;
}
.benefit-icon { font-size:32px; margin-bottom:18px; display:block; }
.benefit-card h3 { font-family:var(--font-h); font-size:19px; font-weight:700; margin-bottom:12px; line-height:1.25; letter-spacing:.2px; }
.benefit-card p  { font-size:14px; color:var(--text2); line-height:1.7; }

/* ============ TECH GRID ============ */
.tech-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tech-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:16px; padding:26px 22px; backdrop-filter:blur(14px);
  position:relative; overflow:hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.tech-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.5),transparent);
  opacity:0; transition:opacity .3s;
}
.tech-card:hover { border-color:var(--cyan-border); box-shadow:var(--cyan-glow); transform:translateY(-3px); }
.tech-card:hover::before { opacity:1; }
.tech-icon { font-size:26px; margin-bottom:10px; display:block; }
.tech-name { font-family:var(--font-h); font-size:16px; font-weight:700; margin-bottom:8px; letter-spacing:.3px; }
.tech-desc { font-size:13px; color:var(--text3); line-height:1.6; }

/* ============ INVESTMENT ============ */
.inv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:28px; }
.inv-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:20px; padding:32px 24px; backdrop-filter:blur(14px);
  text-align:center;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.inv-card:hover { transform:translateY(-4px); }
.inv-label { font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--text3); margin-bottom:14px; }
.inv-value { font-family:var(--font-h); font-size:28px; font-weight:700; margin-bottom:12px; line-height:1.2; letter-spacing:.5px; }
.inv-value.muted  { color:var(--text2); font-size:24px; }
.inv-value.green  { color:var(--green); font-size:36px; }
.inv-value span   { font-size:15px; font-weight:400; opacity:.7; }
.inv-desc { font-size:13px; color:var(--text3); line-height:1.6; margin-bottom:16px; }
.inv-tag  { display:inline-block; padding:3px 12px; border-radius:100px; font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.tag-muted  { background:rgba(148,163,184,.1); color:var(--text2); border:1px solid rgba(148,163,184,.2); }
.tag-orange { background:var(--orange-dim); color:var(--orange); border:1px solid var(--orange-border); }
.tag-green  { background:rgba(74,222,128,.1); color:var(--green); border:1px solid rgba(74,222,128,.2); }
.inv-note {
  background:rgba(255,107,53,.06); border:1px solid rgba(255,107,53,.2);
  border-radius:16px; padding:26px 30px;
  display:flex; gap:18px; align-items:flex-start;
}
.note-icon { font-size:26px; flex-shrink:0; margin-top:2px; }
.note-text { font-size:15px; color:var(--text2); line-height:1.7; }
.note-text strong { color:var(--orange); }

/* ============ TIMELINE ============ */
.timeline { max-width:740px; margin:0 auto; display:flex; flex-direction:column; }
.tl-item { display:flex; gap:36px; }
.tl-track { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:30px; }
.tl-dot {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--cyan); position:relative; z-index:1;
}
.dot-cyan   { background:var(--cyan); box-shadow:0 0 18px rgba(0,229,255,.6); }
.dot-mid    { background:var(--bg); box-shadow:0 0 10px rgba(0,229,255,.3); }
.dot-orange { background:var(--bg); border-color:var(--orange); box-shadow:0 0 12px rgba(255,107,53,.4); }
.tl-line {
  width:2px; flex:1; min-height:56px;
  background:linear-gradient(to bottom,var(--cyan),rgba(0,229,255,.08));
  margin:8px 0;
}
.tl-body { flex:1; padding-bottom:60px; }
.tl-badge {
  display:inline-block; background:var(--cyan-dim); border:1px solid var(--cyan-border);
  color:var(--cyan); font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; padding:3px 14px; border-radius:100px; margin-bottom:6px;
}
.tl-badge-orange { background:var(--orange-dim); border-color:var(--orange-border); color:var(--orange); }
.tl-period { font-size:13px; color:var(--text3); font-weight:600; margin-bottom:10px; letter-spacing:.5px; }
.tl-body h3 { font-family:var(--font-h); font-size:28px; font-weight:700; margin-bottom:18px; letter-spacing:.3px; }
.tl-body ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.tl-body li {
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; color:var(--text2); line-height:1.6;
}
.tl-body li::before {
  content:''; flex-shrink:0; width:6px; height:6px;
  border-radius:50%; background:var(--cyan); margin-top:8px; opacity:.7;
}

/* ============ CLOSING ============ */
.closing { position:relative; overflow:hidden; text-align:center; }
.closing-bg {
  position:absolute; inset:0;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(0,70,120,.5), transparent);
  pointer-events:none;
}
.closing-inner { position:relative; z-index:1; max-width:760px; margin:0 auto; }
.closing-label {
  font-family: var(--font-h);
  font-size:13px; font-weight:700; letter-spacing:5px; text-transform:uppercase;
  color:var(--text3); margin-bottom:24px;
}
.closing-title {
  font-family:var(--font-h);
  font-size:clamp(38px,6.5vw,84px);
  font-weight:700; line-height:1.08;
  letter-spacing:.5px; margin-bottom:32px;
}
.closing-sub {
  font-size:17px; color:var(--text2); line-height:1.8;
  max-width:620px; margin:0 auto 48px;
}
.closing-sub strong { color:var(--text); }
.closing-cta {
  font-family:var(--font-h); font-size:26px; font-weight:700;
  color:var(--cyan);
  text-shadow:0 0 30px rgba(0,229,255,.4);
  animation: glow 3s ease-in-out infinite;
  letter-spacing:.5px;
}

/* ============ FOOTER ============ */
footer {
  border-top:1px solid var(--border);
  padding:28px 0;
  background:rgba(6,13,26,.6);
}
.footer-inner {
  display:flex; align-items:center; justify-content:space-between;
  font-size:13.5px; color:var(--text3);
}
.footer-left { display:flex; align-items:center; gap:10px; }
.footer-right { font-size:13px; }

/* ============ RESPONSIVE — TABLET ============ */
@media(max-width:1024px) {
  .tech-grid    { grid-template-columns:repeat(2,1fr); }
  .inv-grid     { grid-template-columns:repeat(3,1fr); }
  .agents-grid  { grid-template-columns:repeat(2,1fr); }
  .solution-layout { gap:36px; }
  .hub-visual   { width:240px; height:240px; }
}

@media(max-width:860px) {
  .solution-layout {
    flex-direction: column;
    align-items: center;
  }
  .solution-layout .agents-grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
  .hub-visual { width:260px; height:260px; margin-bottom: 8px; }
}

/* ============ RESPONSIVE — MOBILE ============ */
@media(max-width:768px) {
  :root { --sp:72px; }
  .nav-links {
    display:none; position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; background:rgba(6,13,26,.97);
    padding:24px 32px; gap:20px; border-bottom:1px solid var(--border);
  }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; }
  .hero-stats   { grid-template-columns:repeat(2,1fr); gap:12px; }
  .problem-grid { grid-template-columns:1fr; }
  .benefits-grid{ grid-template-columns:repeat(2,1fr); }
  .tech-grid    { grid-template-columns:repeat(2,1fr); }
  .inv-grid     { grid-template-columns:1fr; }
  .orbit-node   { --r: 90px; }
  .hub-visual   { width:220px; height:220px; }
  .hub-ring-outer { width:100%; height:100%; }
  .footer-inner { flex-direction:column; gap:10px; text-align:center; }
  .tl-item      { gap:20px; }
  .inv-note     { flex-direction:column; gap:12px; }
}

/* ============ RESPONSIVE — SMARTPHONE ============ */
@media(max-width:480px) {
  :root { --sp:56px; }
  .container { padding:0 18px; }

  .hero-title { font-size: clamp(20px, 7vw, 32px); letter-spacing: .3px; height: 3.5em; }
  .hero-sub   { font-size: 15px; margin-bottom: 36px; }
  .hero-stats { grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat-card  { padding: 18px 10px; }
  .stat-number{ font-size: 30px; }
  .stat-fixed { font-size: 24px; }

  .section-title { font-size: clamp(24px, 8vw, 38px); letter-spacing: .3px; }
  .section-sub   { font-size: 15px; margin-bottom: 40px; }

  .problem-grid  { grid-template-columns:1fr; gap:14px; }
  .problem-card  { padding: 26px 22px; }
  .problem-card h3 { font-size: 18px; }

  .solution-layout { gap: 28px; }
  .hub-visual  { width: 200px; height: 200px; }
  .orbit-node  { --r: 78px; }
  .orbit-node span { font-size: 9px; }
  .hub-center  { width: 80px; height: 80px; }
  .hub-icon    { font-size: 22px; }
  .agents-grid { grid-template-columns: 1fr; gap:14px; }
  .agent-card  { padding: 22px 16px; }

  .benefits-grid { grid-template-columns:1fr; gap:14px; }
  .benefit-card  { padding: 28px 22px; }

  .tech-grid  { grid-template-columns:1fr; gap:12px; }
  .tech-card  { padding: 20px 18px; }

  .inv-grid   { grid-template-columns:1fr; gap:14px; }
  .inv-card   { padding: 26px 20px; }
  .inv-note   { padding: 20px; }
  .note-text  { font-size: 14px; }

  .tl-item  { gap:16px; }
  .tl-body  { padding-bottom: 40px; }
  .tl-body h3 { font-size: 22px; }
  .tl-body li { font-size: 13.5px; }

  .closing-title { font-size: clamp(32px, 10vw, 56px); }
  .closing-sub   { font-size: 15px; }
  .closing-cta   { font-size: 20px; }

  #backToTop { width: 42px; height: 42px; font-size: 20px; bottom: 20px; right: 16px; }

  .footer-inner { font-size: 12px; gap: 8px; }
}