.integration-topbar { grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); }
.integration-nav { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.integration-nav a { padding: 7px 12px; border-radius: 8px; color: var(--muted); font-size: 11px; font-weight: 800; text-decoration: none; }
.integration-nav a.active { color: #061715; background: var(--accent); }
.integration-main { width: min(calc(100% - 36px), 1180px); margin: 0 auto; padding: clamp(38px, 7vw, 88px) 0 70px; }
.integration-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 60px; min-height: 330px; margin-bottom: 38px; }
.integration-hero h1 { max-width: 770px; margin: 0; font-size: clamp(42px, 7vw, 78px); letter-spacing: -.07em; line-height: .98; }
.integration-hero h1 span { color: var(--accent); }
.integration-hero p:not(.eyebrow) { max-width: 680px; margin: 24px 0 0; color: var(--muted-strong); font-size: 14px; }
.hero-agent-orbit { position: relative; display: grid; place-items: center; width: 250px; aspect-ratio: 1; margin: auto; border: 1px solid var(--border-strong); border-radius: 50%; animation: slowSpin 24s linear infinite; }
.hero-agent-orbit::before, .hero-agent-orbit::after { content: ""; position: absolute; inset: 32px; border: 1px dashed var(--border-strong); border-radius: 50%; }.hero-agent-orbit::after { inset: 69px; border-style: solid; }
.orbit-core { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; color: #061715; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 28%, transparent); font-size: 30px; font-weight: 900; animation: slowSpin 24s linear reverse infinite; }
.hero-agent-orbit i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 20px var(--accent); }.hero-agent-orbit i:nth-of-type(1){top:23px;left:47px}.hero-agent-orbit i:nth-of-type(2){right:-5px;top:113px}.hero-agent-orbit i:nth-of-type(3){bottom:22px;left:52px}
.setup-notice, .auth-card { margin-bottom: 18px; padding: clamp(22px, 4vw, 34px); }
.setup-notice { display: grid; grid-template-columns: 1fr minmax(280px, .55fr); gap: 30px; border-color: color-mix(in srgb, var(--warning) 45%, transparent); }.setup-notice h2, .auth-card h2 { margin: 0; font-size: 22px; }.setup-notice p:not(.eyebrow), .auth-card p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); font-size: 12px; }.setup-notice details { align-self: center; }.setup-notice summary { color: var(--muted-strong); font-size: 11px; font-weight: 850; }.setup-notice form { margin-top: 13px; }.setup-notice label, .auth-form label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; }.setup-notice form div, .auth-form div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.auth-card { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(300px, 1.2fr); align-items: center; gap: 34px; }
.signed-user { display: flex; align-items: center; justify-self: end; gap: 12px; }.signed-user div { display: flex; flex-direction: column; }.signed-user small { color: var(--muted); font-size: 9px; }.signed-user strong { font-size: 13px; }
.connect-section { padding-top: 40px; }
.platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.platform-card { display: flex; flex-direction: column; min-height: 340px; padding: 24px; transition: transform .2s ease, border-color .2s ease; }.platform-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }.platform-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.platform-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; font-size: 20px; font-weight: 900; }.discord-icon { color: #fff; background: #5865f2; }.more-icon { color: var(--muted); background: var(--surface-soft); }.platform-state { padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 850; }.platform-state.ready { color: var(--aqi-good); border-color: color-mix(in srgb, var(--aqi-good) 38%, transparent); }.platform-state.working { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 38%, transparent); }.platform-state.error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, transparent); }.platform-card h3 { margin: 25px 0 6px; font-size: 23px; }.platform-card > p { margin: 0; color: var(--muted-strong); font-size: 12px; }.platform-detail { min-height: 42px; margin: auto 0 18px; color: var(--muted); font-size: 10px; }.platform-action { width: 100%; min-height: 44px; }.coming-soon { opacity: .72; }
.security-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 28px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--border); }.security-strip div { display: flex; flex-direction: column; padding: 18px 20px; background: var(--bg-elevated); }.security-strip strong { font-size: 12px; }.security-strip span { margin-top: 3px; color: var(--muted); font-size: 10px; }
@media (max-width: 900px) { .integration-topbar { grid-template-columns: 1fr auto; }.integration-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }.integration-nav a { flex: 1; text-align: center; }.integration-hero { grid-template-columns: 1fr; }.hero-agent-orbit { display: none; }.auth-card, .setup-notice { grid-template-columns: 1fr; }.signed-user { justify-self: start; } }
@media (max-width: 620px) { .integration-main { width: min(calc(100% - 24px), 1180px); padding-top: 34px; }.integration-hero { min-height: auto; }.platform-grid { grid-template-columns: 1fr; }.auth-form div, .setup-notice form div { grid-template-columns: 1fr; }.security-strip { grid-template-columns: 1fr; }.integration-topbar .topbar-actions { grid-column: 2; grid-row: 1; } }