:root {
    --orange: #f57800;
    --orange-deep: #c95600;
    --orange-soft: #fff0df;
    --orange-pale: #fff9f1;
    --ink: #191b20;
    --muted: #686b73;
    --line: #eae5de;
    --surface: #ffffff;
    --green: #18a968;
    --purple: #7958d7;
    --purple-soft: #eee9ff;
    --shadow: 0 28px 80px rgba(62, 38, 17, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body::selection { color: #fff; background: var(--orange); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; }
.wrap { width: min(1180px, calc(100% - 44px)); margin-inline: auto; }

.site-header {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    align-items: center;
    min-height: 108px;
}
.header-logo { display: block; width: 250px; text-decoration: none; }
.header-logo img { width: 100%; }
.site-nav { display: flex; justify-content: center; gap: 34px; }
.site-nav a {
    color: #4e5158;
    font-size: .88rem;
    font-weight: 750;
    text-decoration: none;
    transition: color .2s;
}
.site-nav a:hover { color: var(--orange-deep); }
.header-actions { display: flex; justify-content: flex-end; }
.login-link, .primary-link, .secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 13px;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.login-link { color: #fff; background: var(--ink); box-shadow: 0 9px 25px rgba(25, 27, 32, .15); }
.login-link:hover, .primary-link:hover, .secondary-link:hover { transform: translateY(-2px); }
.login-link svg, .primary-link svg { width: 17px; height: 17px; }

.hero { position: relative; padding: 8px 0 0; overflow: hidden; }
.hero-shell {
    position: relative;
    isolation: isolate;
    min-height: 690px;
    overflow: hidden;
    border: 1px solid #f2dfcb;
    border-radius: 34px;
    background:
        radial-gradient(circle at 90% 18%, rgba(121, 88, 215, .14), transparent 28%),
        radial-gradient(circle at 52% 105%, rgba(245, 120, 0, .18), transparent 34%),
        linear-gradient(135deg, #fff9f1 0%, #fffdfb 54%, #faf7ff 100%);
}
.hero-shell::before, .hero-shell::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
.hero-shell::before {
    width: 370px;
    height: 370px;
    top: -250px;
    left: 36%;
    border: 54px solid rgba(245, 120, 0, .09);
}
.hero-shell::after {
    width: 260px;
    height: 260px;
    right: -150px;
    bottom: -110px;
    border: 1px solid rgba(121, 88, 215, .18);
    box-shadow: 0 0 0 46px rgba(121, 88, 215, .035), 0 0 0 92px rgba(121, 88, 215, .025);
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, .9fr);
    gap: 54px;
    align-items: center;
    min-height: 690px;
    padding: 70px 66px 78px;
}
.launch-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #a34700;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
}
.launch-label i { width: 28px; height: 2px; background: var(--orange); }
h1 {
    max-width: 690px;
    margin: 0;
    font-size: clamp(3.25rem, 5.8vw, 5.65rem);
    line-height: .98;
    letter-spacing: -.065em;
}
h1 .watch-word {
    position: relative;
    z-index: 0;
    color: var(--orange-deep);
    white-space: nowrap;
}
h1 .watch-word::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -.03em;
    right: -.07em;
    bottom: .07em;
    height: .19em;
    border-radius: 999px;
    background: #ffd59f;
    transform: rotate(-1.5deg);
}
.hero-copy > p {
    max-width: 610px;
    margin: 27px 0 0;
    color: var(--muted);
    font-size: clamp(1.02rem, 1.8vw, 1.18rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.primary-link { color: #fff; background: var(--orange); box-shadow: 0 12px 30px rgba(245, 120, 0, .24); }
.primary-link:hover { background: var(--orange-deep); }
.secondary-link { border: 1px solid #ded6cc; color: #3f4248; background: rgba(255,255,255,.82); }
.secondary-link:hover { box-shadow: 0 10px 26px rgba(44,31,18,.09); }
.hero-note { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: #777a81; font-size: .78rem; font-weight: 650; }
.hero-note span { display: flex; margin-right: 2px; }
.hero-note i { width: 23px; height: 23px; margin-right: -6px; border: 3px solid #fffaf4; border-radius: 50%; background: var(--orange); }
.hero-note i:nth-child(2) { background: var(--purple); }
.hero-note i:nth-child(3) { background: var(--green); }

.product-scene { position: relative; min-height: 500px; }
.scene-blob {
    position: absolute;
    inset: 40px 4px 24px 30px;
    border-radius: 42% 58% 54% 46% / 51% 39% 61% 49%;
    background: linear-gradient(145deg, #ff9b37, #ed6c00);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.scene-dots {
    position: absolute;
    top: 28px;
    right: 9px;
    width: 95px;
    height: 95px;
    opacity: .38;
    background-image: radial-gradient(#7958d7 2px, transparent 2px);
    background-size: 14px 14px;
}
.dashboard-card {
    position: absolute;
    z-index: 2;
    top: 70px;
    right: 20px;
    width: min(460px, calc(100% - 38px));
    overflow: hidden;
    border: 1px solid rgba(219, 208, 196, .9);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow);
}
.dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #eee9e3;
}
.dashboard-top > div { display: flex; align-items: center; gap: 10px; }
.dashboard-top img { width: 37px; height: 37px; }
.dashboard-top strong, .dashboard-top small { display: block; }
.dashboard-top strong { font-size: .78rem; line-height: 1.2; }
.dashboard-top small { color: #989ba1; font-size: .57rem; }
.live-badge { padding: 5px 8px; border-radius: 999px; color: #07844d; background: #e4f7ed; font-size: .57rem; font-weight: 900; letter-spacing: .07em; }
.dashboard-body { padding: 18px; background: #fbfbfa; }
.health-banner { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #cdebdc; border-radius: 14px; background: #f1fbf6; }
.health-check { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; color: #fff; background: var(--green); font-size: 1rem; font-weight: 950; }
.health-banner strong, .health-banner small { display: block; }
.health-banner strong { font-size: .73rem; }
.health-banner small { color: #67917a; font-size: .56rem; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.dash-stat { padding: 12px; border: 1px solid #ebe7e1; border-radius: 12px; background: #fff; }
.dash-stat small { display: block; color: #9b9da3; font-size: .52rem; font-weight: 850; letter-spacing: .04em; }
.dash-stat strong { display: block; margin-top: 3px; font-size: 1rem; }
.service-list { margin-top: 10px; padding: 4px 13px; border: 1px solid #ebe7e1; border-radius: 13px; background: #fff; }
.service { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px 0; }
.service + .service { border-top: 1px solid #f0ede8; }
.service-name { display: flex; align-items: center; gap: 9px; }
.service-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(24,169,104,.1); }
.service-name strong, .service-name small { display: block; }
.service-name strong { font-size: .66rem; }
.service-name small { color: #9b9da3; font-size: .5rem; }
.micro-bars { display: flex; align-items: end; gap: 3px; height: 21px; }
.micro-bars i { width: 4px; border-radius: 4px; background: #72cba1; }
.micro-bars i:nth-child(3n) { height: 60%; }
.micro-bars i:nth-child(3n + 1) { height: 100%; }
.micro-bars i:nth-child(3n + 2) { height: 78%; }
.floating-watch, .floating-alert {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(222, 214, 205, .92);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(50, 32, 16, .16);
}
.floating-watch { top: 30px; left: 5px; width: 208px; padding: 12px; }
.floating-watch img { width: 46px; height: 46px; }
.floating-alert { right: 0; bottom: 28px; width: 215px; padding: 13px 15px; }
.floating-alert > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; background: var(--purple); font-style: normal; font-weight: 900; }
.floating-watch strong, .floating-watch small, .floating-alert strong, .floating-alert small { display: block; }
.floating-watch strong, .floating-alert strong { font-size: .69rem; }
.floating-watch small, .floating-alert small { color: #92959b; font-size: .55rem; }

.section { padding: 120px 0; }
.section-heading { max-width: 760px; margin: 0 auto 58px; text-align: center; }
.eyebrow { margin: 0 0 12px; color: var(--orange-deep); font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
h2 { margin: 0; font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.07; letter-spacing: -.052em; }
.section-heading > p:last-child { max-width: 650px; margin: 20px auto 0; color: var(--muted); font-size: 1.03rem; }

.feature-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 18px; }
.feature-card { position: relative; overflow: hidden; min-height: 310px; height: 100%; padding: 34px; border: 1px solid var(--line); border-radius: 25px; background: #fff; }
.feature-card.large { grid-row: span 2; min-height: 640px; background: linear-gradient(150deg, #fff8ef, #fff); }
.feature-card.purple { background: linear-gradient(145deg, #f4f0ff, #fff); }
.feature-card.dark { color: #fff; border-color: #24272d; background: #191b20; }
.feature-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--orange-deep); background: var(--orange-soft); }
.feature-card.purple .feature-icon { color: var(--purple); background: #e8e1ff; }
.feature-card.dark .feature-icon { color: #ffb46a; background: #34271f; }
.feature-icon svg { width: 23px; height: 23px; }
.feature-card h3 { max-width: 430px; margin: 22px 0 9px; font-size: 1.45rem; line-height: 1.2; letter-spacing: -.025em; }
.feature-card > p { max-width: 470px; margin: 0; color: var(--muted); font-size: .91rem; }
.feature-card.dark > p { color: #aaaeb5; }
.check-details { max-width: 520px; margin-top: 30px; }
.check-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.check-stat { padding: 14px 15px; border: 1px solid #eadfd3; border-radius: 13px; background: rgba(255,255,255,.72); }
.check-stat small, .check-stat strong { display: block; }
.check-stat small { color: #8c8177; font-size: .59rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.check-stat strong { margin-top: 5px; font-size: .78rem; }
.check-stat strong.online { color: var(--green); }
.check-signals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.check-signals span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 999px; color: #5c534b; background: #f5ede4; font-size: .65rem; font-weight: 750; }
.check-signals span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.mini-monitor {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 34px;
    overflow: hidden;
    border: 1px solid #e7ded3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 50px rgba(70,44,19,.11);
}
.mini-monitor-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid #eee8e1; }
.mini-monitor-head strong { font-size: .76rem; }
.mini-monitor-head span { color: var(--green); font-size: .62rem; font-weight: 850; }
.chart { display: flex; align-items: end; gap: 7px; height: 180px; padding: 25px 20px 18px; background: linear-gradient(180deg, #fff, #fbfaf8); }
.chart i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #ffad5c, var(--orange)); }
.chart i:nth-child(1) { height: 35%; }.chart i:nth-child(2) { height: 52%; }.chart i:nth-child(3) { height: 44%; }.chart i:nth-child(4) { height: 68%; }.chart i:nth-child(5) { height: 61%; }.chart i:nth-child(6) { height: 82%; }.chart i:nth-child(7) { height: 76%; }.chart i:nth-child(8) { height: 96%; }.chart i:nth-child(9) { height: 88%; }
.expiry-row { display: flex; gap: 12px; margin-top: 28px; }
.expiry-pill { flex: 1; padding: 15px; border: 1px solid #ddd4fb; border-radius: 14px; background: rgba(255,255,255,.78); }
.expiry-pill small, .expiry-pill strong { display: block; }
.expiry-pill small { color: #85818f; font-size: .61rem; }
.expiry-pill strong { margin-top: 3px; font-size: .82rem; }
.mail-preview { margin-top: 26px; padding: 17px; border: 1px solid #34373e; border-radius: 15px; background: #22252b; }
.mail-preview small { color: #8f949d; font-size: .59rem; }
.mail-preview strong { display: block; margin: 4px 0 13px; font-size: .8rem; }
.mail-status { display: flex; align-items: center; gap: 8px; color: #78d9aa; font-size: .68rem; font-weight: 750; }
.mail-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.patrol { color: #fff; background: #191b20; }
.patrol .section-heading .eyebrow { color: #ffad5c; }
.patrol .section-heading > p:last-child { color: #a9adb5; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { position: relative; min-height: 280px; padding: 30px; border: 1px solid #363940; border-radius: 21px; background: #202329; }
.step-number { display: flex; align-items: center; justify-content: space-between; color: #ffad5c; font-size: .72rem; font-weight: 900; letter-spacing: .1em; }
.step-number::after { content: ""; width: 56px; height: 1px; background: #494c53; }
.step h3 { margin: 56px 0 10px; font-size: 1.25rem; }
.step p { margin: 0; color: #a9adb5; font-size: .88rem; }
.step img { position: absolute; right: 22px; bottom: 18px; width: 69px; opacity: .14; }

.coming-section { position: relative; overflow: hidden; padding: 104px 0; background: linear-gradient(135deg, #ff8b19, #cf5900); color: #fff; }
.coming-section::before { content: ""; position: absolute; width: 430px; height: 430px; top: -320px; right: 8%; border: 65px solid rgba(255,255,255,.1); border-radius: 50%; }
.coming-inner { position: relative; display: grid; grid-template-columns: 150px 1fr auto; gap: 34px; align-items: center; }
.coming-tiger { display: grid; place-items: center; width: 150px; height: 150px; padding: 14px; border-radius: 28px; background: #fffaf4; box-shadow: 0 22px 48px rgba(91,34,0,.2); }
.coming-inner h2 { max-width: 630px; color: #fff; }
.coming-inner p { margin: 11px 0 0; color: rgba(255,255,255,.82); }
.coming-login { color: var(--ink); background: #fff; box-shadow: 0 14px 34px rgba(87,31,0,.18); white-space: nowrap; }

footer { color: #aaaeb5; background: #111318; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; min-height: 90px; gap: 20px; font-size: .78rem; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 800; }
.footer-brand img { width: 42px; height: 42px; }
footer a { color: #d5d7db; text-decoration: none; }

@media (max-width: 1040px) {
    .site-header { grid-template-columns: 240px 1fr 150px; }
    .site-nav { gap: 22px; }
    .hero-grid { grid-template-columns: 1fr; padding: 75px 55px 90px; }
    .product-scene { width: min(590px, 100%); margin: 0 auto; }
    .coming-inner { grid-template-columns: 125px 1fr; }
    .coming-tiger { width: 125px; height: 125px; }
    .coming-login { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
    .wrap { width: min(100% - 28px, 1180px); }
    .site-header { grid-template-columns: 1fr auto; min-height: 88px; }
    .header-logo { width: 220px; }
    .site-nav { display: none; }
    .hero-shell { border-radius: 25px; }
    .hero-grid { padding: 62px 25px 80px; }
    .product-scene { min-height: 470px; }
    .floating-watch { left: -4px; }
    .floating-alert { right: -2px; }
    .feature-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .feature-card { height: auto; }
    .feature-card.large { grid-row: auto; min-height: 0; }
    .mini-monitor { position: relative; left: auto; right: auto; bottom: auto; margin-top: 26px; }
    .steps { grid-template-columns: 1fr; }
    .step { min-height: 220px; }
    .coming-inner { grid-template-columns: 1fr; text-align: center; }
    .coming-tiger { margin: 0 auto; }
    .coming-login { grid-column: auto; justify-self: center; }
}
@media (max-width: 500px) {
    .header-logo { width: 185px; }
    .login-link { min-height: 43px; padding: 0 15px; }
    .login-link span { display: none; }
    h1 { font-size: clamp(2.85rem, 15vw, 4.2rem); }
    h1 .watch-word { white-space: normal; }
    .hero-actions { flex-direction: column; }
    .hero-actions a { width: 100%; }
    .product-scene { min-height: 420px; }
    .scene-blob { inset: 35px 0 28px 5px; }
    .dashboard-card { top: 68px; right: 5px; width: calc(100% - 10px); }
    .dashboard-top { padding: 12px; }
    .dashboard-body { padding: 12px; }
    .floating-watch { top: 13px; width: 175px; }
    .floating-watch img { width: 37px; height: 37px; }
    .floating-alert { display: none; }
    .dashboard-stats { gap: 5px; }
    .dash-stat { padding: 9px 7px; }
    .micro-bars i:nth-child(n+7) { display: none; }
    .section { padding: 86px 0; }
    .section-heading { margin-bottom: 38px; }
    .feature-card { padding: 25px; }
    .check-stats { grid-template-columns: 1fr; }
    .check-stat { padding: 10px 12px; }
    .check-stat small, .check-stat strong { display: inline; }
    .check-stat strong { margin: 0 0 0 7px; }
    .check-signals span { padding: 7px 9px; }
    .coming-section { padding: 82px 0; }
    .footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding: 22px 0; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}