:root {
  color-scheme: dark;
  --bg: #060a14;
  --panel: rgba(15, 26, 49, .82);
  --line: rgba(136, 163, 222, .16);
  --text: #f6f8ff;
  --muted: #9aaed1;
  --blue: #477dff;
  --blue-bright: #28a0ff;
  --green: #42d7a0;
  --container: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }

.ambient { position: fixed; z-index: -2; pointer-events: none; border-radius: 50%; filter: blur(10px); }
.ambient-one { width: 760px; height: 760px; top: -430px; right: -160px; background: radial-gradient(circle, rgba(48, 83, 210, .3), transparent 68%); }
.ambient-two { width: 620px; height: 620px; top: 690px; left: -430px; background: radial-gradient(circle, rgba(41, 141, 255, .12), transparent 70%); }

.site-header { position: relative; z-index: 20; border-bottom: 1px solid rgba(136, 163, 222, .13); background: rgba(6, 10, 20, .78); backdrop-filter: blur(18px); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(112, 146, 255, .24); border-radius: 14px; background: #091329; box-shadow: 0 10px 30px rgba(25, 69, 180, .22); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 15px; letter-spacing: -.01em; }
.brand-copy small { color: #86a8e5; font-size: 11px; letter-spacing: .02em; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.nav-link { color: #aebddd; font-size: 13px; font-weight: 650; transition: color .18s; }
.nav-link:hover { color: white; }

.login-button, .primary-button, .secondary-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; border-radius: 13px; font-size: 14px; font-weight: 800; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.login-button { min-height: 44px; padding-inline: 19px 14px; border: 1px solid rgba(96, 137, 255, .54); background: linear-gradient(135deg, rgba(68, 116, 255, .95), rgba(40, 149, 255, .95)); box-shadow: 0 12px 30px rgba(41, 101, 255, .24); }
.login-button b, .primary-button b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .14); font-size: 15px; }
.login-button:hover, .primary-button:hover { transform: translateY(-2px); box-shadow: 0 17px 38px rgba(41, 101, 255, .34); }

.hero { min-height: 710px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(480px, .98fr); align-items: center; gap: clamp(48px, 6vw, 92px); padding-block: 82px 88px; }
.hero-copy { position: relative; z-index: 2; }
.product-label { width: max-content; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px; padding: 8px 12px; border: 1px solid rgba(105, 142, 255, .22); border-radius: 999px; background: rgba(31, 55, 108, .28); color: #a9bfff; font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.product-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 15px rgba(66, 215, 160, .85); }
.hero h1 { max-width: 740px; margin: 0; font-size: clamp(50px, 5.2vw, 78px); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.hero h1 em { color: transparent; background: linear-gradient(100deg, #73a0ff 5%, #39b1ff 52%, #967cff 96%); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.hero-lead { max-width: 680px; margin: 27px 0 0; color: #a8b9d8; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.62; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.primary-button { min-height: 54px; padding-inline: 22px 15px; border: 1px solid rgba(94, 136, 255, .5); background: linear-gradient(135deg, #4e76ff, #279dff); box-shadow: 0 16px 40px rgba(39, 102, 255, .25); }
.secondary-button { min-height: 54px; border: 1px solid var(--line); background: rgba(12, 22, 42, .56); color: #c0cce4; }
.secondary-button:hover { transform: translateY(-2px); border-color: rgba(105, 142, 255, .4); color: white; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 12px 23px; margin-top: 29px; color: #8498bb; font-size: 12px; font-weight: 650; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust i { color: var(--green); font-style: normal; font-weight: 900; }

.workspace-preview { position: relative; width: 100%; max-width: 560px; justify-self: end; }
.preview-glow { position: absolute; inset: 10% 3% 2%; z-index: -1; border-radius: 35%; background: rgba(49, 91, 255, .26); filter: blur(65px); }
.preview-window { overflow: hidden; border: 1px solid rgba(123, 153, 226, .24); border-radius: 26px; background: linear-gradient(155deg, rgba(16, 31, 61, .98), rgba(7, 15, 30, .98)); box-shadow: 0 35px 90px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .03); transform: perspective(1000px) rotateY(-2deg) rotateX(1deg); }
.preview-topbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); background: rgba(5, 13, 28, .55); }
.preview-brand { display: flex; align-items: center; gap: 10px; }
.preview-brand img { width: 36px; height: 36px; border-radius: 11px; }
.preview-brand span { display: grid; }
.preview-brand strong { font-size: 12px; }
.preview-brand small { color: #7992bd; font-size: 9px; }
.online { display: inline-flex; align-items: center; gap: 7px; color: #88a0ca; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.online i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(66, 215, 160, .72); }
.preview-body { padding: 23px; }
.preview-heading { display: grid; gap: 8px; }
.preview-heading span { color: #7595ec; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.preview-heading strong { font-size: 22px; letter-spacing: -.035em; }
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 19px; }
.preview-stats article { display: grid; gap: 3px; padding: 12px; border: 1px solid rgba(123, 153, 226, .13); border-radius: 12px; background: rgba(13, 30, 59, .65); }
.preview-stats b { font-size: 20px; }
.preview-stats span { color: #7f94b9; font-size: 8px; }
.preview-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 9px; }
.preview-tools article { min-height: 69px; display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid rgba(123, 153, 226, .12); border-radius: 13px; background: linear-gradient(145deg, rgba(18, 39, 76, .78), rgba(9, 21, 43, .86)); }
.preview-tools i { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(106, 143, 248, .24); border-radius: 10px; background: rgba(20, 50, 99, .9); color: #dbe5ff; font-size: 9px; font-style: normal; font-weight: 900; }
.preview-tools span { color: #dbe4f7; font-size: 11px; font-weight: 750; line-height: 1.35; }
.preview-tools small { color: #7489ad; font-size: 8px; font-weight: 600; }
.preview-tools .tool-accent { border-color: rgba(102, 116, 255, .28); background: linear-gradient(145deg, rgba(48, 51, 127, .75), rgba(19, 34, 77, .86)); }
.tool-accent i { background: linear-gradient(135deg, #7569ef, #486eff); }

.section-space { padding-block: 110px; }
.capabilities { border-top: 1px solid rgba(136, 163, 222, .1); background: linear-gradient(180deg, rgba(10, 17, 33, .75), rgba(6, 10, 20, .2)); }
.section-intro { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 70px; margin-bottom: 46px; }
.eyebrow { margin: 0 0 14px; color: #7e9eff; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.section-intro h2, .security-copy h2, .final-cta h2 { margin: 0; font-size: clamp(38px, 4vw, 58px); line-height: 1.05; letter-spacing: -.05em; text-wrap: balance; }
.section-intro > p { max-width: 500px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.capability-grid article { min-height: 245px; padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(16, 31, 60, .8), rgba(8, 18, 36, .78)); box-shadow: inset 0 1px rgba(255, 255, 255, .018); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.capability-grid article:hover { transform: translateY(-4px); border-color: rgba(102, 139, 255, .36); background: linear-gradient(145deg, rgba(20, 40, 79, .9), rgba(9, 21, 43, .86)); }
.capability-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(104, 142, 255, .22); border-radius: 12px; background: rgba(25, 53, 104, .65); color: #90a8ee; font-size: 10px; font-weight: 900; }
.capability-grid h3 { margin: 38px 0 12px; font-size: 20px; letter-spacing: -.025em; }
.capability-grid p { margin: 0; color: #8fa3c7; font-size: 14px; line-height: 1.65; }
.capability-grid .capability-featured { border-color: rgba(116, 103, 255, .26); background: radial-gradient(circle at 100% 0, rgba(92, 76, 235, .2), transparent 16rem), linear-gradient(145deg, rgba(25, 35, 81, .9), rgba(10, 20, 43, .88)); }
.capability-featured .capability-icon { background: linear-gradient(135deg, #7569ed, #4976ff); color: white; }

.security { border-top: 1px solid rgba(136, 163, 222, .1); }
.security-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(60px, 8vw, 120px); }
.access-visual { position: relative; min-height: 500px; display: grid; place-items: center; }
.access-visual::before { content: ""; position: absolute; width: 330px; height: 330px; border-radius: 50%; background: rgba(48, 86, 222, .22); filter: blur(60px); }
.access-card { position: relative; z-index: 2; width: min(100%, 430px); padding: 30px; border: 1px solid rgba(122, 151, 224, .25); border-radius: 25px; background: linear-gradient(150deg, rgba(18, 37, 72, .98), rgba(7, 16, 32, .98)); box-shadow: 0 32px 80px rgba(0, 0, 0, .38); }
.access-card-back { position: absolute; z-index: 1; height: 360px; transform: translate(28px, 25px) rotate(3deg); opacity: .45; }
.access-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(135deg, #4b7bff, #6f65ea); box-shadow: 0 15px 35px rgba(61, 97, 238, .3); }
.access-icon span { position: relative; width: 20px; height: 17px; border: 2px solid white; border-radius: 5px; }
.access-icon span::before { content: ""; position: absolute; width: 11px; height: 10px; left: 2px; top: -10px; border: 2px solid white; border-bottom: 0; border-radius: 8px 8px 0 0; }
.access-card > p { margin: 25px 0 7px; color: #7895d9; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.access-card > h3 { max-width: 330px; margin: 0 0 25px; font-size: 26px; line-height: 1.15; letter-spacing: -.035em; }
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 0; border-top: 1px solid rgba(136, 163, 222, .12); color: #b4c3df; font-size: 12px; font-weight: 700; }
.access-row span { display: flex; align-items: center; gap: 9px; }
.access-row span i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.access-row b { color: var(--green); }
.security-copy h2 { max-width: 650px; }
.security-lead { max-width: 660px; margin: 25px 0 34px; color: var(--muted); font-size: 16px; line-height: 1.72; }
.security-copy ul { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.security-copy li { display: flex; align-items: flex-start; gap: 14px; }
.security-copy li > i { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(66, 215, 160, .22); border-radius: 9px; background: rgba(66, 215, 160, .08); color: var(--green); font-size: 12px; font-style: normal; font-weight: 900; }
.security-copy li span { display: grid; gap: 5px; }
.security-copy li strong { font-size: 14px; }
.security-copy li small { color: #8599bc; font-size: 13px; line-height: 1.5; }

.final-cta { min-height: 300px; display: flex; align-items: center; justify-content: space-between; gap: 55px; margin-bottom: 100px; padding: 45px 50px; overflow: hidden; border: 1px solid rgba(99, 137, 255, .28); border-radius: 28px; background: radial-gradient(circle at 90% -20%, rgba(61, 119, 255, .35), transparent 25rem), linear-gradient(145deg, #13284e, #0a152b); box-shadow: 0 30px 80px rgba(0, 0, 0, .2); }
.final-cta > div { max-width: 820px; }
.final-cta p:not(.eyebrow) { margin: 18px 0 0; color: #9fb1d0; font-size: 15px; line-height: 1.65; }
.final-cta .primary-button { flex: 0 0 auto; }

footer { border-top: 1px solid rgba(136, 163, 222, .12); background: #050912; }
.footer-inner { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #768bac; font-size: 11px; }
.footer-brand .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
.footer-brand .brand-copy strong { font-size: 12px; color: #dce5f7; }
.footer-brand .brand-copy small { font-size: 9px; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 60px; padding-top: 70px; }
  .hero-copy { max-width: 820px; }
  .workspace-preview { max-width: 720px; justify-self: center; }
  .section-intro { grid-template-columns: 1fr; gap: 22px; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .security-layout { grid-template-columns: 1fr; }
  .access-visual { min-height: 430px; order: 2; }
}

@media (max-width: 720px) {
  .container { width: min(var(--container), calc(100% - 28px)); }
  .header-inner { min-height: 72px; }
  .brand-mark { width: 42px; height: 42px; border-radius: 12px; }
  .brand-copy small { display: none; }
  .site-nav { gap: 12px; }
  .nav-link { display: none; }
  .login-button { min-height: 42px; padding-inline: 16px 12px; }
  .hero { min-height: auto; padding-block: 58px 72px; }
  .hero h1 { font-size: clamp(43px, 13vw, 62px); }
  .hero-lead { font-size: 17px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .primary-button, .secondary-button { width: 100%; }
  .hero-trust { display: grid; gap: 9px; }
  .preview-window { border-radius: 20px; transform: none; }
  .preview-body { padding: 16px; }
  .preview-tools { grid-template-columns: 1fr 1fr; }
  .preview-tools article { min-height: 60px; padding: 8px; }
  .preview-tools i { width: 32px; height: 32px; }
  .section-space { padding-block: 82px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid article { min-height: 215px; }
  .access-visual { min-height: 390px; }
  .access-card { padding: 24px 20px; }
  .access-card-back { display: none; }
  .final-cta { align-items: flex-start; flex-direction: column; margin-bottom: 70px; padding: 34px 24px; }
  .final-cta .primary-button { width: 100%; }
  .footer-inner { align-items: flex-start; flex-direction: column; padding-block: 28px; }
  .footer-inner > p { margin: 0; }
}

@media (max-width: 430px) {
  .brand-copy strong { font-size: 13px; }
  .product-label { font-size: 9px; }
  .hero h1 { font-size: 42px; }
  .preview-stats article { padding: 9px 7px; }
  .preview-stats b { font-size: 17px; }
  .preview-tools span { font-size: 10px; }
  .preview-tools small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}