:root {
  --bg: #07111f;
  --panel: #0d1b2e;
  --panel-2: #11243c;
  --text: #edf6ff;
  --muted: #9bb2c9;
  --line: rgba(255,255,255,.12);
  --blue: #2474ff;
  --cyan: #35d3ff;
  --green: #18d07a;
  --amber: #ffbd2d;
  --white: #fff;
  --shadow: 0 24px 80px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: radial-gradient(circle at top left, rgba(53,211,255,.18), transparent 34rem), radial-gradient(circle at 80% 0, rgba(36,116,255,.24), transparent 32rem), var(--bg); }
a { color: inherit; text-decoration: none; }
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem clamp(1rem, 4vw, 4rem); background: rgba(7,17,31,.82); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 800; letter-spacing: -.02em; }
.brand img { width: 2.2rem; height: 2.2rem; object-fit: contain; border-radius: .7rem; background: rgba(255,255,255,.92); padding: .18rem; }
nav { display: flex; gap: 1rem; color: var(--muted); font-size: .92rem; }
nav a:hover, .login-link:hover { color: var(--white); }
.login-link { color: var(--muted); font-size: .92rem; }
main { overflow: hidden; }
.section, .section-grid { padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 4rem); max-width: 1240px; margin: 0 auto; }
.section-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.hero { min-height: calc(100vh - 76px); }
.eyebrow, .section-heading span { color: var(--cyan); font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.2rem, 7vw, 6.8rem); line-height: .88; letter-spacing: -.07em; margin-bottom: 1.3rem; }
h2 { font-size: clamp(2.1rem, 4vw, 4.1rem); line-height: .98; letter-spacing: -.055em; margin-bottom: 1rem; }
h3 { letter-spacing: -.03em; }
.lead { color: #c5d8eb; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.55; max-width: 42rem; }
.hero-actions, .footer-links { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn, button.btn { border: 0; border-radius: 999px; padding: .9rem 1.25rem; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.primary { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff; box-shadow: 0 16px 40px rgba(36,116,255,.28); }
.secondary { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line); }
.hero-points { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.hero-points span { border: 1px solid var(--line); border-radius: 999px; padding: .5rem .75rem; color: var(--muted); font-size: .86rem; background: rgba(255,255,255,.04); }
.hero-visual { perspective: 1100px; }
.mock-window { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); border: 1px solid var(--line); border-radius: 2rem; overflow: hidden; box-shadow: var(--shadow); transform: rotateY(-8deg) rotateX(3deg); }
.mock-top { display: flex; align-items: center; gap: .45rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.mock-top span { width: .7rem; height: .7rem; border-radius: 50%; background: #ff5f57; }
.mock-top span:nth-child(2) { background: #ffbd2d; }
.mock-top span:nth-child(3) { background: #28c840; margin-right: .8rem; }
.mock-body { padding: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mock-card, .mock-table { background: rgba(8,20,36,.86); border: 1px solid var(--line); border-radius: 1.2rem; padding: 1rem; }
.mock-card.wide { grid-column: span 2; }
.mock-card small { color: var(--muted); display: block; margin-bottom: .4rem; }
.mock-card b { font-size: 1.5rem; }
.status-blue { border-color: rgba(36,116,255,.5); }
.status-green { border-color: rgba(24,208,122,.5); }
.timeline { height: .65rem; background: rgba(255,255,255,.08); border-radius: 999px; margin-top: 1rem; overflow: hidden; }
.timeline i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--cyan)); }
.mock-table { grid-column: span 2; display: grid; gap: .7rem; }
.mock-table div { display: grid; grid-template-columns: 5rem 1fr auto; gap: .7rem; color: var(--muted); align-items: center; }
.mock-table strong { color: var(--text); }
.mock-table em { font-style: normal; color: var(--cyan); }
.metrics { max-width: 1160px; margin: -2rem auto 2rem; padding: 0 clamp(1rem, 4vw, 4rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.metrics div { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 1.2rem; padding: 1.1rem; }
.metrics strong { display: block; font-size: 1.7rem; }
.metrics span { color: var(--muted); font-size: .9rem; }
.section-heading { max-width: 760px; margin-bottom: 2rem; }
.section-heading.centered { text-align: center; margin-left: auto; margin-right: auto; }
.section-heading p { color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature-grid article, .plan-card, .steps div, .role-list div, .faq details { background: rgba(255,255,255,.055); border: 1px solid var(--line); border-radius: 1.4rem; padding: 1.25rem; }
.feature-grid img { width: 100%; height: 140px; object-fit: contain; margin-bottom: 1rem; background: rgba(255,255,255,.04); border-radius: 1rem; }
.feature-grid p, .steps p, .role-list span, .plan-card p, .faq p, footer p { color: var(--muted); line-height: 1.55; }
.workflow { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.0)); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.steps b { display: inline-flex; width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center; border-radius: .85rem; background: rgba(53,211,255,.12); color: var(--cyan); margin-bottom: 1rem; }
.roles { min-height: auto; }
.role-list { display: grid; gap: 1rem; }
.role-list strong { display: block; margin-bottom: .3rem; color: var(--cyan); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.plan-card.highlighted { background: linear-gradient(180deg, rgba(36,116,255,.22), rgba(255,255,255,.065)); border-color: rgba(53,211,255,.5); box-shadow: var(--shadow); }
.badge { position: absolute; top: 1rem; right: 1rem; background: var(--green); color: #052014; border-radius: 999px; font-size: .72rem; font-weight: 900; padding: .35rem .55rem; }
.price { font-size: 1.25rem; color: var(--text) !important; font-weight: 900; }
.plan-card ul { margin: 0 0 1rem; padding-left: 1.1rem; color: #cfe3f5; line-height: 1.8; }
.plan-card .btn { width: 100%; margin-top: auto; }
.checkout-message { max-width: 760px; margin: 0 auto 1rem; border: 1px solid rgba(255,189,45,.55); background: rgba(255,189,45,.12); color: #ffe0a0; border-radius: 1rem; padding: .9rem 1rem; text-align: center; }
.faq { max-width: 920px; }
.faq details { margin-bottom: .8rem; }
.faq summary { cursor: pointer; font-weight: 800; }
footer { border-top: 1px solid var(--line); padding: 2rem clamp(1rem, 4vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); }
.footer-brand { color: var(--text); }
.result-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.result-card { width: min(520px, 100%); background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 1.5rem; padding: 2rem; text-align: center; box-shadow: var(--shadow); }
.result-card img { width: 4rem; height: 4rem; object-fit: contain; background: #fff; border-radius: 1rem; padding: .35rem; }
@media (max-width: 900px) { .section-grid, .feature-grid, .pricing-grid, .steps, .metrics { grid-template-columns: 1fr; } nav { display: none; } h1 { font-size: clamp(3rem, 15vw, 4.5rem); } .mock-window { transform: none; } footer { flex-direction: column; align-items: flex-start; } }