:root {
    color-scheme:dark;
    --bg:#07111f;
    --deep:#050c16;
    --surface:#0d1d30;
    --line:rgba(151,181,213,.14);
    --line2:rgba(151,181,213,.24);
    --text:#f2f7fc;
    --muted:#9aadc2;
    --blue:#2788ff;
    --cyan:#49d7ef;
    --max:1160px;
    --body:"DM Sans",sans-serif;
    --display:"Space Grotesk",sans-serif
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:90px
}
body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:400 15px/1.65 var(--body);
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit;
    text-decoration:none
}
h1,h2,h3 {
    font-family:var(--display);
    letter-spacing:-.045em;
    line-height:1.12
}
p {
    margin-top:0
}
.container {
    width:min(var(--max),calc(100% - 48px));
    margin:auto
}
.section {
    padding:108px 0
}
/* =========================================================
   RACKWORKS NAVIGATION — elevated product-bar treatment
   ========================================================= */
.site-header {
    position:sticky;
    top:0;
    z-index:50;
    isolation:isolate;
    background:rgba(4,11,21,.94);
    border-bottom:1px solid rgba(111,159,207,.16);
    backdrop-filter:blur(24px) saturate(150%);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    box-shadow:0 12px 38px rgba(0,0,0,.28)
}
.site-header:before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0 0 auto;
    height:2px;
    background:linear-gradient(90deg,transparent 2%,#176fe0 22%,#42c8ed 50%,#176fe0 78%,transparent 98%);
    opacity:.9
}
.site-header:after {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    pointer-events:none;
    background:radial-gradient(ellipse at 52% 0%,rgba(30,111,199,.13),transparent 58%)
}
.nav-wrap {
    position:relative;
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.brand {
    display:inline-flex;
    align-items:center;
    gap:13px;
    flex:0 0 auto;
    min-width:0
}
.brand-logo {
    display:block;
    width:158px;
    height:44px;
    max-height:none;
    object-fit:contain;
    filter:brightness(0) invert(1);
    transition:opacity .2s ease,transform .2s ease
}
.brand:hover .brand-logo { opacity:.86; transform:translateY(-1px) }
.brand-divider {
    width:1px;
    height:32px;
    background:linear-gradient(180deg,transparent,rgba(123,173,222,.62),transparent)
}
.brand-service {
    display:inline-flex;
    align-items:center;
    min-height:29px;
    padding:0 11px;
    border:1px solid rgba(101,163,222,.2);
    border-radius:6px;
    color:#c5d9ed;
    background:rgba(40,103,164,.12);
    font-family:var(--display);
    font-size:11px;
    font-weight:600;
    letter-spacing:.045em;
    white-space:nowrap
}
.primary-nav {
    display:flex;
    align-items:center;
    gap:3px;
    padding:6px;
    border:1px solid rgba(127,166,207,.15);
    border-radius:13px;
    background:linear-gradient(180deg,rgba(19,36,57,.78),rgba(9,22,37,.78));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 24px rgba(0,0,0,.12)
}
.primary-nav>a {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:43px;
    padding:0 16px;
    border:1px solid transparent;
    border-radius:8px;
    color:#aebfd1;
    font-family:var(--body);
    font-size:12px;
    font-weight:600;
    letter-spacing:.015em;
    white-space:nowrap;
    transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease
}
.primary-nav>a:not(.nav-login):before {
    content:"";
    width:5px;
    height:5px;
    margin-right:9px;
    border-radius:2px;
    background:#52718f;
    transform:rotate(45deg);
    transition:background .2s ease,box-shadow .2s ease
}
.primary-nav>a:not(.nav-login):hover {
    color:#fff;
    border-color:rgba(102,164,224,.13);
    background:linear-gradient(180deg,rgba(76,135,194,.16),rgba(44,93,145,.08));
    transform:translateY(-1px)
}
.primary-nav>a:not(.nav-login):hover:before {
    background:#54d5ef;
    box-shadow:0 0 10px rgba(73,215,239,.65)
}
.primary-nav .nav-login {
    min-height:45px;
    margin-left:7px;
    padding:0 18px;
    border:1px solid rgba(112,193,255,.48);
    border-radius:8px;
    color:#fff;
    background:linear-gradient(115deg,#176bd2 0%,#168fce 58%,#16a8c4 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 5px 18px rgba(12,105,202,.25);
    font-weight:700;
    transition:filter .2s ease,box-shadow .2s ease,transform .2s ease
}
.primary-nav .nav-login:hover {
    color:#fff;
    filter:brightness(1.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 7px 24px rgba(12,132,219,.38);
    transform:translateY(-1px)
}
.nav-login span {
    margin-left:9px;
    color:#d9f8ff;
    font-size:15px;
    transition:transform .2s ease
}
.nav-login:hover span { transform:translate(2px,-2px) }
.menu-toggle { display:none }

.hero {
    position:relative;
    overflow:hidden;
    padding-top:104px;
    padding-bottom:108px
}
.hero:before {
    content:"";
    position:absolute;
    width:680px;
    height:680px;
    top:-360px;
    left:-240px;
    border-radius:50%;
    background:rgba(22,102,214,.13);
    filter:blur(80px)
}
.hero-grid {
    position:relative;
    display:grid;
    grid-template-columns:1.04fr .96fr;
    align-items:center;
    gap:60px
}
.eyebrow {
    display:flex;
    align-items:center;
    gap:10px;
    color:#65c9f4;
    font-size:11px;
    font-weight:700;
    letter-spacing:.17em
}
.eyebrow-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 15px rgba(73,215,239,.8)
}
.hero h1 {
    margin:22px 0;
    font-size:clamp(42px,5.2vw,65px);
    font-weight:600
}
.hero h1 span,.email-copy h2 span {
    color:#61b8ff
}
.hero-lead {
    max-width:590px;
    color:var(--muted);
    font-size:16px;
    line-height:1.85
}
.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:31px
}
.button {
    display:inline-flex;
    min-height:48px;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:0 19px;
    border-radius:9px;
    font-size:13px;
    font-weight:700;
    transition:transform .2s,border-color .2s
}
.button:hover {
    transform:translateY(-2px)
}
.button-primary {
    background:linear-gradient(110deg,#1675eb,#219fe9);
    box-shadow:0 8px 28px rgba(22,117,235,.2)
}
.button-secondary {
    border:1px solid var(--line2);
    background:rgba(255,255,255,.025)
}
.hero-note {
    margin-top:26px;
    color:#a9bbce;
    font-size:12px
}
.hero-note span {
    margin-right:8px;
    color:var(--cyan)
}
.hero-visual {
    position:relative;
    min-height:430px;
    display:grid;
    place-items:center
}
.visual-glow {
    position:absolute;
    inset:10% 4%;
    border-radius:50%;
    background:rgba(19,117,237,.19);
    filter:blur(70px)
}
.dashboard {
    position:relative;
    z-index:1;
    width:min(100%,470px);
    padding:21px;
    border:1px solid rgba(134,180,224,.23);
    border-radius:18px;
    background:linear-gradient(145deg,#122a43,#081727);
    box-shadow:0 28px 90px rgba(0,0,0,.35);
    transform:perspective(1100px) rotateY(-5deg) rotateX(2deg)
}
.dashboard-top,.dashboard-heading,.dashboard-bottom {
    display:flex;
    align-items:center
}
.dashboard-top {
    justify-content:space-between;
    padding-bottom:19px;
    border-bottom:1px solid var(--line);
    color:#8ea6bf;
    font-size:9px;
    font-weight:700;
    letter-spacing:.13em
}
.window-dots {
    display:inline-flex;
    gap:4px
}
.window-dots i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#49637e
}
.status {
    letter-spacing:0;
    font-weight:500
}
.status b {
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:5px;
    border-radius:50%;
    background:#50d59a
}
.dashboard-heading {
    justify-content:space-between;
    padding:25px 0 19px
}
.dashboard-heading small {
    color:#6f8eaa;
    font-size:9px;
    letter-spacing:.13em
}
.dashboard-heading h2 {
    margin:5px 0 0;
    font-size:21px
}
.account-mark,.dashboard-bottom>b,.mail-brand>b,.platform-window-top>b {
    display:grid;
    place-items:center;
    color:#a7dcff;
    border:1px solid rgba(74,174,255,.28);
    background:rgba(37,132,227,.13);
    font-family:var(--display);
    font-weight:700
}
.account-mark {
    width:39px;
    height:39px;
    border-radius:11px
}
.dashboard-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}
.dash-tile {
    min-height:106px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:11px;
    background:rgba(255,255,255,.025)
}
.dash-tile>span {
    display:block;
    margin-bottom:8px;
    color:#5bc4f4;
    font-size:19px
}
.dash-tile strong,.dash-tile small {
    display:block
}
.dash-tile strong {
    font-size:12px
}
.dash-tile small {
    margin-top:3px;
    color:#8198b0;
    font-size:9px
}
.dashboard-bottom {
    gap:11px;
    margin-top:13px;
    padding:13px;
    border-radius:10px;
    background:rgba(31,125,218,.11)
}
.dashboard-bottom>b {
    width:29px;
    height:29px;
    border-radius:8px;
    font-size:10px
}
.dashboard-bottom strong,.dashboard-bottom small {
    display:block
}
.dashboard-bottom strong {
    font-size:10px
}
.dashboard-bottom small {
    color:#8ca5bd;
    font-size:9px
}
.dashboard-bottom>span {
    margin-left:auto;
    color:#6dc8f4
}
.float-card {
    position:absolute;
    z-index:2;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 15px;
    border:1px solid rgba(139,183,225,.2);
    border-radius:11px;
    background:#10243a;
    box-shadow:0 12px 35px rgba(0,0,0,.3)
}
.float-one {
    top:65px;
    left:-14px
}
.float-two {
    right:-15px;
    bottom:51px
}
.float-card>span {
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    border-radius:8px;
    color:#68cafa;
    background:rgba(38,139,232,.15)
}
.float-card strong,.float-card small {
    display:block
}
.float-card strong {
    font-size:10px
}
.float-card small {
    color:#8ea5bc;
    font-size:9px
}
.trust-strip {
    border-block:1px solid var(--line);
    background:rgba(255,255,255,.018)
}
.trust-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr)
}
.trust-grid>div {
    display:grid;
    grid-template-columns:36px 1fr;
    align-content:center;
    min-height:95px;
    padding:18px 22px;
    border-right:1px solid var(--line)
}
.trust-grid>div:first-child {
    border-left:1px solid var(--line)
}
.trust-grid b {
    grid-row:span 2;
    color:#55b8ed;
    font:700 13px var(--display)
}
.trust-grid strong {
    font-size:11px
}
.trust-grid small {
    color:#8195aa;
    font-size:10px
}
.section-heading {
    max-width:650px;
    margin-bottom:48px
}
.section-heading h2,.email-copy h2,.closing-inner h2 {
    margin:15px 0 17px;
    font-size:clamp(35px,4vw,48px);
    font-weight:600
}
.section-heading>p,.email-copy>p {
    color:var(--muted);
    font-size:15px;
    line-height:1.8
}
.feature-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px
}
.feature-card {
    min-height:300px;
    padding:25px;
    border:1px solid var(--line);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(17,38,60,.75),rgba(9,23,38,.75));
    transition:border-color .2s,transform .2s
}
.feature-card:hover {
    transform:translateY(-3px);
    border-color:rgba(63,164,244,.42)
}
.feature-icon {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    margin-bottom:19px;
    border:1px solid rgba(73,177,241,.2);
    border-radius:11px;
    color:#69c8f4;
    background:rgba(32,126,211,.12);
    font-size:19px
}
.feature-card h3 {
    margin-bottom:8px;
    font-size:18px
}
.feature-card p {
    min-height:52px;
    margin-bottom:14px;
    color:#9aadc1;
    font-size:12px;
    line-height:1.7
}
.feature-card ul {
    margin:0;
    padding:0;
    list-style:none
}
.feature-card li {
    position:relative;
    margin-top:7px;
    padding-left:14px;
    color:#b9c8d7;
    font-size:11px
}
.feature-card li:before {
    content:"";
    position:absolute;
    top:.65em;
    left:0;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#4fbde9
}
.email-section,.getting-section {
    background:linear-gradient(180deg,#091727,#07111f);
    border-block:1px solid var(--line)
}
.email-grid {
    display:grid;
    grid-template-columns:1fr .9fr;
    align-items:center;
    gap:85px
}
.email-copy h2 {
    margin-top:17px
}
.check-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 18px;
    margin:27px 0;
    padding:0;
    list-style:none
}
.check-list li {
    color:#c1cfdd;
    font-size:12px
}
.check-list li:before {
    content:"✓";
    margin-right:9px;
    color:var(--cyan)
}
.text-link {
    color:#68c5f2;
    font-size:13px;
    font-weight:700
}
.text-link span {
    margin-left:8px
}
.mail-panel {
    padding:24px;
    border:1px solid var(--line2);
    border-radius:17px;
    background:linear-gradient(145deg,#10263e,#0a192b);
    box-shadow:0 25px 70px rgba(0,0,0,.22)
}
.mail-panel-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:21px;
    border-bottom:1px solid var(--line);
    color:#7892aa
}
.mail-brand {
    display:flex;
    align-items:center;
    gap:11px
}
.mail-brand>b {
    width:37px;
    height:37px;
    border-radius:9px;
    font-size:11px
}
.mail-brand strong,.mail-brand small {
    display:block
}
.mail-brand strong {
    font-size:12px
}
.mail-brand small {
    color:#839bb3;
    font-size:10px
}
.mail-feature {
    display:flex;
    align-items:center;
    gap:12px;
    padding:17px 0;
    border-bottom:1px solid var(--line)
}
.mail-feature i {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:9px;
    color:#6ac9f5;
    background:rgba(40,137,219,.13);
    font-style:normal
}
.mail-feature div {
    min-width:0
}
.mail-feature strong,.mail-feature small {
    display:block
}
.mail-feature strong {
    font-size:11px
}
.mail-feature small {
    color:#8da4ba;
    font-size:9px
}
.mail-feature em {
    margin-left:auto;
    color:#71c4e9;
    font-size:9px;
    font-style:normal;
    white-space:nowrap
}
.mail-panel-foot {
    padding-top:18px;
    color:#91a9bf;
    font-size:10px
}
.mail-panel-foot b {
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:5px;
    border-radius:50%;
    background:#50d59a
}
.centered {
    text-align:center;
    margin-inline:auto
}
.centered .eyebrow {
    justify-content:center
}
.platform-layout {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:65px
}
.platform-window {
    min-height:350px;
    overflow:hidden;
    border:1px solid var(--line2);
    border-radius:15px;
    background:#0d1d30;
    box-shadow:0 22px 60px rgba(0,0,0,.25)
}
.platform-window-top {
    display:flex;
    align-items:center;
    gap:9px;
    height:55px;
    padding:0 17px;
    border-bottom:1px solid var(--line);
    color:#a9bdd1;
    font-size:9px;
    letter-spacing:.1em
}
.platform-window-top>b {
    width:27px;
    height:27px;
    border-radius:7px;
    font-size:9px
}
.platform-window-top>span {
    margin-left:auto;
    color:#7892aa
}
.platform-tabs {
    display:flex;
    gap:8px;
    padding:14px 17px;
    border-bottom:1px solid var(--line)
}
.platform-tabs span {
    padding:7px 9px;
    border-radius:6px;
    color:#8198ae;
    font-size:9px
}
.platform-tabs .active {
    color:#82d0fa;
    background:rgba(38,136,224,.13)
}
.platform-content {
    padding:25px 20px
}
.platform-content>small {
    color:#7290aa;
    font-size:9px;
    letter-spacing:.14em
}
.platform-content h3 {
    margin:5px 0 20px;
    font-size:20px
}
.platform-stat-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}
.platform-stat-grid>div {
    display:grid;
    grid-template-columns:31px 1fr;
    padding:13px;
    border:1px solid var(--line);
    border-radius:9px
}
.platform-stat-grid i {
    grid-row:span 2;
    color:#65c6f2;
    font-size:17px;
    font-style:normal
}
.platform-stat-grid strong {
    font-size:10px
}
.platform-stat-grid small {
    color:#8299af;
    font-size:9px
}
.platform-points {
    display:grid;
    gap:19px
}
.platform-points article {
    display:flex;
    gap:15px
}
.platform-points article>i {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    flex:0 0 36px;
    border:1px solid rgba(73,177,241,.2);
    border-radius:10px;
    color:#69c8f4;
    background:rgba(32,126,211,.12);
    font-style:normal
}
.platform-points h3 {
    margin:0 0 4px;
    font-size:15px
}
.platform-points p {
    margin:0;
    color:#91a6bb;
    font-size:11px;
    line-height:1.65
}
.steps-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px
}
.steps-grid article {
    padding-top:22px;
    border-top:1px solid var(--line2)
}
.steps-grid article>b {
    color:#5bbef0;
    font:700 13px var(--display)
}
.steps-grid h3 {
    margin:17px 0 8px;
    font-size:19px
}
.steps-grid p {
    max-width:300px;
    margin:0;
    color:#91a6bb;
    font-size:12px;
    line-height:1.8
}
.faq-layout {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:90px
}
.faq-list details {
    border-bottom:1px solid var(--line)
}
.faq-list details:first-child {
    border-top:1px solid var(--line)
}
.faq-list summary {
    position:relative;
    padding:20px 35px 20px 0;
    cursor:pointer;
    list-style:none;
    font:600 14px var(--display)
}
.faq-list summary::-webkit-details-marker {
    display:none
}
.faq-list summary:after {
    content:"+";
    position:absolute;
    right:5px;
    color:#64c6f2;
    font-size:20px;
    font-weight:400
}
.faq-list details[open] summary:after {
    content:"−"
}
.faq-list details p {
    max-width:650px;
    margin:-4px 30px 20px 0;
    color:#95a9bd;
    font-size:12px;
    line-height:1.8
}
.closing-cta {
    padding:75px 0;
    border-top:1px solid var(--line);
    background:radial-gradient(ellipse at 80% 50%,rgba(20,104,190,.18),transparent 55%),#091727
}
.closing-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px
}
.closing-inner h2 {
    margin-bottom:10px;
    font-size:clamp(31px,3.5vw,42px)
}
.closing-inner p {
    margin:0;
    color:#9aadc2;
    font-size:13px
}
.closing-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px
}
.site-footer {
    background:var(--deep);
    border-top:1px solid var(--line)
}
.footer-main {
    display:grid;
    grid-template-columns:1.5fr .6fr .6fr;
    gap:80px;
    padding-top:55px;
    padding-bottom:45px
}
.footer-brand p {
    max-width:350px;
    margin:20px 0 0;
    color:#8196ab;
    font-size:11px;
    line-height:1.8
}
.footer-links {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px
}
.footer-links strong {
    margin-bottom:5px;
    color:#dce7f2;
    font-size:11px
}
.footer-links a {
    color:#879cb1;
    font-size:11px;
    transition:color .2s
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-top:18px;
    padding-bottom:22px;
    border-top:1px solid var(--line);
    color:#71869b;
    font-size:10px
}


/* Responsive layout */
@media (max-width: 1050px) {
    .nav-wrap { gap:18px }
    .brand-logo { width:140px }
    .primary-nav>a { padding-inline:10px; font-size:11px }
    .primary-nav { gap:3px }
    .hero-grid { gap:35px }
    .email-grid,.platform-layout { gap:45px }
    .faq-layout { gap:55px }
    .footer-main { gap:45px }
}

@media (max-width: 820px) {
    .nav-wrap { min-height:72px }
    .brand-logo { width:145px; height:40px }
    .menu-toggle {
        display:flex;
        width:44px;
        height:44px;
        flex:0 0 44px;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        padding:0;
        border:1px solid var(--line2);
        border-radius:10px;
        background:rgba(255,255,255,.035);
        cursor:pointer
    }
    .menu-toggle span {
        display:block;
        width:18px;
        height:2px;
        border-radius:2px;
        background:#dceafa;
        transition:transform .2s ease,opacity .2s ease
    }
    .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(7px) rotate(45deg) }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0 }
    .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-7px) rotate(-45deg) }
    .primary-nav {
        position:absolute;
        top:calc(100% + 1px);
        left:0;
        right:0;
        display:none;
        align-items:stretch;
        gap:5px;
        padding:14px;
        border:1px solid rgba(103,157,211,.2);
        border-top:0;
        border-radius:0 0 14px 14px;
        background:rgba(5,14,26,.98);
        box-shadow:0 18px 35px rgba(0,0,0,.35)
    }
    .primary-nav.is-open,
    .primary-nav.open,
    .primary-nav.active,
    .menu-toggle[aria-expanded="true"] ~ .primary-nav { display:flex; flex-direction:column }
    .primary-nav>a {
        min-height:44px;
        justify-content:flex-start;
        padding:0 14px;
        font-size:13px
    }
    .primary-nav>a:not(.nav-login):after { display:none }
    .primary-nav .nav-login {
        justify-content:center;
        margin:7px 0 0;
        min-height:46px
    }
    .hero-grid,.email-grid,.platform-layout,.faq-layout { grid-template-columns:1fr }
    .hero-grid { gap:25px }
    .hero-copy { max-width:680px }
    .hero-visual { width:min(100%,580px); margin:0 auto }
    .trust-grid { grid-template-columns:repeat(2,1fr) }
    .trust-grid>div:nth-child(3) { border-left:1px solid var(--line) }
    .feature-grid { grid-template-columns:repeat(2,1fr) }
    .email-grid { gap:40px }
    .mail-panel { width:min(100%,600px) }
    .platform-layout { gap:38px }
    .platform-window { width:min(100%,650px) }
    .faq-layout { gap:15px }
    .closing-inner { align-items:flex-start; flex-direction:column }
    .footer-main { grid-template-columns:1.4fr 1fr 1fr; gap:30px }
}

@media (max-width: 560px) {
    .container { width:calc(100% - 36px) }
    .section { padding:76px 0 }
    .nav-wrap { min-height:68px }
    .brand { gap:9px }
    .brand-logo { width:125px; height:36px }
    .brand-divider { height:23px }
    .brand-service { font-size:11px }
    .hero { padding-top:70px; padding-bottom:75px }
    .hero h1 { font-size:clamp(37px,10vw,49px) }
    .hero-lead { font-size:14px }
    .hero-visual { min-height:340px }
    .dashboard { padding:15px; transform:none }
    .dashboard-heading h2 { font-size:17px }
    .dash-tile { min-height:94px; padding:11px }
    .float-card { padding:9px 11px }
    .float-one { top:8px; left:-5px }
    .float-two { right:-5px; bottom:8px }
    .float-card small { display:none }
    .trust-grid>div { min-height:85px; padding:14px 12px; grid-template-columns:29px 1fr }
    .trust-grid strong { font-size:10px }
    .trust-grid small { font-size:9px }
    .section-heading { margin-bottom:34px }
    .section-heading h2,.email-copy h2 { font-size:36px }
    .feature-grid { grid-template-columns:1fr }
    .feature-card { min-height:0; padding:22px }
    .feature-card p { min-height:0 }
    .check-list { grid-template-columns:1fr; gap:10px }
    .mail-panel { padding:18px }
    .mail-feature { gap:9px }
    .mail-feature small { font-size:8px }
    .platform-window { min-height:0 }
    .platform-tabs { gap:2px; padding:11px 9px }
    .platform-tabs span { padding:7px 6px; font-size:8px }
    .platform-content { padding:20px 14px }
    .platform-stat-grid>div { padding:10px }
    .steps-grid { grid-template-columns:1fr; gap:24px }
    .faq-layout { gap:0 }
    .faq-list summary { font-size:13px }
    .closing-cta { padding:58px 0 }
    .closing-inner h2 { font-size:32px }
    .closing-actions { width:100% }
    .closing-actions .button { flex:1 1 auto }
    .footer-main { grid-template-columns:1fr 1fr; gap:30px 20px; padding-top:42px; padding-bottom:35px }
    .footer-brand { grid-column:1 / -1 }
    .footer-bottom { flex-direction:column; gap:5px }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after {
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important
    }
}


/* Navigation refinements and responsive menu */
@media (max-width: 1100px) and (min-width: 821px) {
    .nav-wrap { gap:18px }
    .brand-logo { width:138px }
    .brand { gap:10px }
    .brand-service { padding-inline:8px; font-size:10px }
    .primary-nav { gap:1px; padding:5px }
    .primary-nav>a { padding-inline:11px; font-size:11px }
    .primary-nav .nav-login { margin-left:4px; padding-inline:13px }
}
@media (max-width: 820px) {
    .nav-wrap { min-height:76px }
    .brand-logo { width:145px; height:40px }
    .menu-toggle {
        display:flex;
        width:48px;
        height:48px;
        flex:0 0 48px;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        padding:0;
        border:1px solid rgba(115,174,229,.27);
        border-radius:12px;
        background:linear-gradient(145deg,rgba(35,75,115,.34),rgba(11,27,46,.8));
        box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 16px rgba(0,0,0,.2);
        cursor:pointer
    }
    .menu-toggle span {
        display:block;
        width:19px;
        height:2px;
        border-radius:2px;
        background:#e3f2ff;
        transition:transform .22s ease,opacity .18s ease,width .18s ease
    }
    .menu-toggle span:nth-child(2) { width:13px; margin-left:6px }
    .menu-toggle:hover span:nth-child(2) { width:19px; margin-left:0 }
    .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(7px) rotate(45deg) }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0 }
    .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-7px) rotate(-45deg) }
    .primary-nav {
        position:absolute;
        top:calc(100% - 1px);
        left:0;
        right:0;
        display:none;
        align-items:stretch;
        flex-direction:column;
        gap:5px;
        padding:13px;
        border:1px solid rgba(113,169,222,.22);
        border-top:1px solid rgba(113,169,222,.13);
        border-radius:0 0 16px 16px;
        background:linear-gradient(155deg,rgba(13,31,51,.99),rgba(4,13,24,.99));
        box-shadow:0 22px 42px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.04)
    }
    .primary-nav.is-open { display:flex }
    .primary-nav>a {
        justify-content:flex-start;
        min-height:49px;
        padding:0 15px;
        border-radius:9px;
        font-size:13px
    }
    .primary-nav>a:not(.nav-login):before { width:6px; height:6px; margin-right:12px }
    .primary-nav .nav-login {
        justify-content:center;
        margin:7px 0 0;
        min-height:49px
    }
}
@media (max-width: 560px) {
    .nav-wrap { min-height:70px }
    .brand { gap:9px }
    .brand-logo { width:119px; height:35px }
    .brand-divider { height:25px }
    .brand-service { min-height:25px; padding:0 8px; font-size:9px }
    .menu-toggle { width:44px; height:44px; flex-basis:44px }
}

/* =========================================================
   RACKWORKS — FULL PAGE POLISH
   Refined contrast, depth, rhythm and responsive details.
   ========================================================= */
:root {
    --bg:#070f1b;
    --deep:#040a13;
    --surface:#0d1b2c;
    --line:rgba(150,185,222,.13);
    --line2:rgba(150,185,222,.23);
    --text:#f4f8fd;
    --muted:#a3b4c8;
    --blue:#368dff;
    --cyan:#5bdcf2;
}

body {
    background:
        radial-gradient(ellipse at 50% -18%,rgba(29,91,157,.17),transparent 48%),
        linear-gradient(180deg,#081321 0%,#070f1b 42%,#081321 100%);
}
::selection { color:#fff; background:rgba(40,139,239,.55) }
:focus-visible {
    outline:2px solid #63d8f1;
    outline-offset:4px;
    border-radius:5px;
}
.container { width:min(1200px,calc(100% - 56px)) }
.section { position:relative; padding:116px 0 }

/* Hero: stronger opening statement and more intentional composition */
.hero {
    padding-top:116px;
    padding-bottom:120px;
    background:
        linear-gradient(rgba(113,163,213,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(113,163,213,.035) 1px,transparent 1px);
    background-size:52px 52px;
    background-position:center top;
}
.hero:after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,#081321 0%,rgba(8,19,33,.82) 43%,rgba(8,19,33,.16) 100%);
}
.hero:before {
    width:760px;
    height:760px;
    top:-390px;
    left:-230px;
    background:rgba(26,112,225,.17);
    filter:blur(100px);
}
.hero-grid { z-index:1; gap:72px }
.hero-copy { position:relative; z-index:2 }
.eyebrow {
    gap:12px;
    color:#7bd8f5;
    font-size:10px;
    letter-spacing:.2em;
}
.eyebrow-dot {
    width:6px;
    height:6px;
    box-shadow:0 0 0 5px rgba(73,215,239,.09),0 0 18px rgba(73,215,239,.9);
}
.hero h1 {
    max-width:690px;
    margin:25px 0 22px;
    font-size:clamp(48px,5.8vw,76px);
    line-height:1.045;
    letter-spacing:-.065em;
    text-wrap:balance;
}
.hero h1 span,.email-copy h2 span {
    color:transparent;
    background:linear-gradient(100deg,#f0f8ff 0%,#8fd5ff 42%,#55d9ec 100%);
    -webkit-background-clip:text;
    background-clip:text;
}
.hero-lead {
    max-width:550px;
    color:#aebed0;
    font-size:16px;
    line-height:1.9;
}
.hero-actions { gap:14px; margin-top:35px }
.button {
    min-height:52px;
    padding:0 22px;
    border-radius:10px;
    font-size:12px;
    letter-spacing:.015em;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.button-primary {
    border:1px solid rgba(125,198,255,.48);
    background:linear-gradient(115deg,#176bd4 0%,#168bdb 55%,#19a9c7 100%);
    box-shadow:0 10px 30px rgba(19,111,211,.25),inset 0 1px 0 rgba(255,255,255,.2);
}
.button-primary:hover {
    box-shadow:0 14px 36px rgba(19,130,225,.34),inset 0 1px 0 rgba(255,255,255,.25);
}
.button-secondary {
    border:1px solid rgba(143,177,211,.25);
    background:rgba(12,29,48,.72);
    color:#dce9f7;
}
.button-secondary:hover { border-color:rgba(103,194,239,.55); background:rgba(24,54,83,.75) }
.hero-note { color:#aebfd0; font-size:11px; letter-spacing:.01em }
.hero-note span { color:#70e0bd }
.hero-visual { min-height:465px }
.visual-glow {
    inset:8% 0;
    background:radial-gradient(ellipse,rgba(22,129,238,.24),rgba(25,88,164,.08) 43%,transparent 72%);
    filter:blur(55px);
}
.dashboard {
    width:min(100%,490px);
    padding:23px;
    border:1px solid rgba(133,187,235,.3);
    border-radius:20px;
    background:linear-gradient(145deg,rgba(22,48,75,.97),rgba(7,21,37,.98) 72%);
    box-shadow:0 36px 100px rgba(0,0,0,.46),0 0 55px rgba(25,114,209,.1),inset 0 1px 0 rgba(255,255,255,.075);
    transform:perspective(1200px) rotateY(-4deg) rotateX(1.5deg);
}
.dash-tile {
    border-color:rgba(142,180,218,.14);
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.014));
}
.dash-tile>span { color:#71d5f4 }
.dashboard-bottom { border:1px solid rgba(63,156,228,.13); background:linear-gradient(100deg,rgba(31,125,218,.15),rgba(24,87,140,.08)) }
.float-card {
    border-color:rgba(133,187,235,.27);
    background:linear-gradient(145deg,rgba(20,47,74,.98),rgba(9,25,43,.98));
    box-shadow:0 16px 42px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06);
}
.float-one { left:-28px }
.float-two { right:-26px }

/* Proof strip: turn the stats into a deliberate band */
.trust-strip {
    position:relative;
    border-block:1px solid rgba(127,169,210,.16);
    background:linear-gradient(90deg,rgba(13,33,54,.88),rgba(9,24,40,.94),rgba(13,33,54,.88));
    box-shadow:0 16px 40px rgba(0,0,0,.12);
}
.trust-grid>div {
    min-height:108px;
    padding:20px 25px;
    border-right-color:rgba(127,169,210,.12);
}
.trust-grid b { color:#66c9f1; font-size:14px }
.trust-grid strong { color:#e7f0f9; font-size:11px; letter-spacing:.015em }
.trust-grid small { color:#91a8bf; font-size:10px }

/* Section headings and content rhythm */
.section-heading { max-width:700px; margin-bottom:54px }
.section-heading h2,.email-copy h2,.closing-inner h2 {
    margin:18px 0 19px;
    font-size:clamp(37px,4.2vw,52px);
    line-height:1.08;
    letter-spacing:-.055em;
    text-wrap:balance;
}
.section-heading>p,.email-copy>p {
    max-width:620px;
    color:#a4b6ca;
    font-size:14px;
    line-height:1.9;
}
.section-heading .eyebrow { margin-bottom:5px }

/* Feature cards: stronger visual hierarchy and hover response */
.feature-grid { gap:16px }
.feature-card {
    position:relative;
    overflow:hidden;
    min-height:315px;
    padding:28px;
    border:1px solid rgba(133,173,213,.16);
    border-radius:16px;
    background:linear-gradient(145deg,rgba(19,43,68,.88),rgba(8,22,37,.94));
    box-shadow:0 12px 35px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.035);
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.feature-card:before {
    content:"";
    position:absolute;
    inset:0 18% auto;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(91,197,245,.55),transparent);
    opacity:.6;
}
.feature-card:after {
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    top:-115px;
    right:-100px;
    border-radius:50%;
    background:rgba(39,137,225,.13);
    filter:blur(35px);
    pointer-events:none;
}
.feature-card:hover {
    transform:translateY(-5px);
    border-color:rgba(83,179,241,.42);
    box-shadow:0 22px 48px rgba(0,0,0,.24),0 0 30px rgba(31,123,211,.07);
}
.feature-icon {
    width:46px;
    height:46px;
    margin-bottom:23px;
    border:1px solid rgba(85,187,239,.28);
    border-radius:13px;
    color:#83d8fa;
    background:linear-gradient(145deg,rgba(39,139,222,.2),rgba(30,91,150,.1));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 7px 18px rgba(0,0,0,.12);
}
.feature-card h3 { margin:0 0 11px; font-size:19px; letter-spacing:-.035em }
.feature-card p { color:#a2b4c8; font-size:12px; line-height:1.8 }
.feature-card li { color:#c1cfdd; font-size:11px; line-height:1.65 }
.feature-card li:before { width:5px; height:5px; background:#5bd5ee; box-shadow:0 0 9px rgba(91,213,238,.3) }

/* Email section */
.email-section,.getting-section {
    position:relative;
    background:radial-gradient(ellipse at 15% 45%,rgba(22,91,158,.13),transparent 45%),linear-gradient(180deg,#0a1929,#081321);
    border-block:1px solid rgba(135,174,213,.14);
}
.email-grid { gap:90px }
.email-copy h2 { margin-top:18px }
.check-list { gap:14px 22px; margin:30px 0 }
.check-list li { color:#c6d4e2; font-size:12px }
.check-list li:before { color:#68dfc0; font-weight:700 }
.text-link { color:#78d4f5; transition:color .2s ease }
.text-link:hover { color:#c0f2ff }
.mail-panel {
    position:relative;
    overflow:hidden;
    padding:27px;
    border:1px solid rgba(137,185,229,.23);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(19,46,73,.98),rgba(7,21,37,.98));
    box-shadow:0 28px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.055);
}
.mail-panel:before {
    content:"";
    position:absolute;
    top:0;
    left:12%;
    right:12%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(104,208,246,.65),transparent);
}
.mail-feature { padding:19px 0; border-bottom-color:rgba(145,179,213,.12) }
.mail-feature i { border:1px solid rgba(97,186,237,.14); background:rgba(40,137,219,.16) }
.mail-feature strong { color:#e4eef8; font-size:11px }
.mail-feature small { color:#9bb0c5; font-size:10px }
.mail-feature em { color:#8bd7f4 }
.mail-panel-foot { color:#a4b9cd }

/* Platform preview and supporting points */
.platform-layout { gap:76px }
.platform-window {
    position:relative;
    border:1px solid rgba(137,185,229,.24);
    border-radius:17px;
    background:linear-gradient(145deg,#10263d,#081726);
    box-shadow:0 28px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
}
.platform-window-top { height:59px; background:rgba(255,255,255,.018) }
.platform-tabs { background:rgba(3,12,22,.2) }
.platform-tabs span { transition:color .2s ease,background .2s ease }
.platform-content { padding:28px 22px }
.platform-stat-grid>div {
    border-color:rgba(141,180,218,.14);
    background:rgba(255,255,255,.025);
}
.platform-points { gap:23px }
.platform-points article>i {
    width:40px;
    height:40px;
    flex-basis:40px;
    border-color:rgba(89,183,237,.25);
    background:linear-gradient(145deg,rgba(36,132,216,.19),rgba(22,74,126,.12));
}
.platform-points h3 { color:#edf5fc; font-size:15px }
.platform-points p { color:#9fb2c6; font-size:12px; line-height:1.75 }

/* Getting started: make the sequence read as a connected process */
.steps-grid { gap:24px }
.steps-grid article {
    position:relative;
    padding:25px 23px 22px;
    border:1px solid rgba(138,177,215,.15);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(18,42,66,.68),rgba(8,22,37,.58));
}
.steps-grid article>b {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border:1px solid rgba(87,185,237,.27);
    border-radius:10px;
    color:#8bdcff;
    background:rgba(38,132,207,.13);
}
.steps-grid h3 { margin:18px 0 9px; font-size:18px }
.steps-grid p { color:#9eb1c5; font-size:12px; line-height:1.8 }

/* FAQ: crisp disclosure rows */
.faq-layout { gap:100px }
.faq-list details { border-bottom-color:rgba(139,176,212,.16) }
.faq-list details:first-child { border-top-color:rgba(139,176,212,.16) }
.faq-list summary {
    padding:23px 42px 23px 0;
    color:#e8f1fa;
    font-size:14px;
    transition:color .2s ease;
}
.faq-list summary:hover { color:#83d9f6 }
.faq-list summary:after {
    right:2px;
    top:17px;
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    border:1px solid rgba(100,174,222,.2);
    border-radius:8px;
    color:#79d2f2;
    background:rgba(38,112,174,.1);
    font-size:17px;
}
.faq-list details[open] summary:after { color:#fff; background:rgba(38,132,207,.22) }
.faq-list details p { color:#a2b5c9; font-size:12px; line-height:1.85 }

/* Closing call to action */
.closing-cta {
    position:relative;
    overflow:hidden;
    padding:88px 0;
    border-top:1px solid rgba(136,179,222,.16);
    background:radial-gradient(ellipse at 76% 50%,rgba(22,119,207,.22),transparent 48%),linear-gradient(110deg,#0b1d30,#091626 58%,#0b1c2d);
}
.closing-cta:after {
    content:"";
    position:absolute;
    top:0;
    right:8%;
    width:1px;
    height:100%;
    background:linear-gradient(180deg,transparent,rgba(91,190,237,.24),transparent);
    transform:skewX(-25deg);
}
.closing-inner { position:relative; z-index:1; gap:45px }
.closing-inner h2 { max-width:700px; margin-top:0; font-size:clamp(34px,4vw,48px) }
.closing-inner p { color:#a9bbce; font-size:13px; line-height:1.8 }
.closing-actions .button { min-width:150px }

/* Footer: more breathing room and a clearer brand anchor */
.site-footer {
    background:linear-gradient(180deg,#050d17,#040911);
    border-top:1px solid rgba(136,179,222,.14);
}
.footer-main { gap:90px; padding-top:64px; padding-bottom:52px }
.footer-brand .brand-logo { width:155px; height:43px }
.footer-brand p { max-width:370px; color:#91a5ba; font-size:11px; line-height:1.9 }
.footer-links { gap:12px }
.footer-links strong {
    margin-bottom:9px;
    color:#e6f0fa;
    font-family:var(--display);
    font-size:11px;
    letter-spacing:.04em;
}
.footer-links a { color:#91a5ba; font-size:11px; transition:color .2s ease,transform .2s ease }
.footer-links a:hover { color:#79d5f4; transform:translateX(2px) }
.footer-bottom { padding-top:21px; padding-bottom:25px; border-top-color:rgba(136,179,222,.12); color:#74899f }

/* Consistent motion, without making the page feel animated */
@media (prefers-reduced-motion:no-preference) {
    .hero-copy { animation:rw-rise-in .65s ease both }
    .hero-visual { animation:rw-rise-in .8s .08s ease both }
    @keyframes rw-rise-in {
        from { opacity:0; transform:translateY(12px) }
        to { opacity:1; transform:translateY(0) }
    }
}

@media (max-width:1100px) {
    .container { width:min(100% - 48px,1200px) }
    .hero-grid { gap:42px }
    .hero h1 { font-size:clamp(46px,5.6vw,66px) }
    .float-one { left:-12px }
    .float-two { right:-12px }
    .footer-main { gap:55px }
}
@media (max-width:820px) {
    .container { width:calc(100% - 44px) }
    .section { padding:88px 0 }
    .hero { padding-top:82px; padding-bottom:85px }
    .hero:after { background:linear-gradient(180deg,rgba(8,19,33,.18),#081321 88%) }
    .hero-grid { gap:30px }
    .hero h1 { max-width:650px; font-size:clamp(46px,8vw,66px) }
    .hero-visual { min-height:420px }
    .dashboard { transform:none }
    .trust-grid>div { min-height:96px }
    .email-grid,.platform-layout { gap:48px }
    .faq-layout { gap:24px }
    .footer-main { gap:36px }
}
@media (max-width:560px) {
    .container { width:calc(100% - 36px) }
    .section { padding:74px 0 }
    .hero { padding-top:68px; padding-bottom:70px; background-size:38px 38px }
    .hero h1 { margin:20px 0 17px; font-size:clamp(40px,10.5vw,52px); letter-spacing:-.06em }
    .hero-lead { font-size:14px; line-height:1.8 }
    .hero-actions { gap:10px; margin-top:26px }
    .hero-actions .button { min-height:48px; padding-inline:16px }
    .hero-visual { min-height:350px; width:100% }
    .dashboard { padding:16px; border-radius:15px }
    .float-one { top:3px; left:-4px }
    .float-two { right:-4px; bottom:3px }
    .trust-grid>div { min-height:84px; padding:13px 10px }
    .section-heading { margin-bottom:35px }
    .section-heading h2,.email-copy h2 { font-size:36px }
    .feature-card { padding:23px; border-radius:14px }
    .mail-panel { padding:19px }
    .platform-layout { gap:34px }
    .steps-grid article { padding:21px }
    .faq-list summary { padding:19px 38px 19px 0; font-size:13px }
    .faq-list summary:after { top:14px }
    .closing-cta { padding:62px 0 }
    .closing-inner { gap:25px }
    .closing-inner h2 { font-size:34px }
    .footer-main { gap:30px 20px; padding-top:46px; padding-bottom:38px }
}

/* ================================================================
   RACKWORKS — FULL PAGE VISUAL REDESIGN
   Stronger contrast, bolder typography, richer blue lighting and
   distinct section compositions. Existing HTML and JS are preserved.
   ================================================================ */
:root {
  --bg:#060e1b;
  --deep:#030914;
  --surface:#0b1a2d;
  --line:rgba(129,174,224,.17);
  --line2:rgba(129,174,224,.31);
  --text:#f5f9ff;
  --muted:#a8bbd2;
  --blue:#287dff;
  --cyan:#54e1f4;
}

body {
  background:
    radial-gradient(ellipse at 78% 8%,rgba(19,91,191,.13),transparent 34%),
    linear-gradient(180deg,#071326 0%,#060e1b 42%,#071321 100%);
  color:#f5f9ff;
}
::selection { color:#fff; background:rgba(35,128,255,.55) }
.container { width:min(1240px,calc(100% - 64px)) }
.section { padding:132px 0 }

/* Hero: make the first screen feel like a product launch, not a template. */
.hero {
  isolation:isolate;
  padding-top:118px;
  padding-bottom:118px;
  background:
    radial-gradient(ellipse at 76% 42%,rgba(19,111,245,.20),transparent 36%),
    radial-gradient(ellipse at 8% 4%,rgba(39,213,239,.09),transparent 34%),
    linear-gradient(115deg,#08172b 0%,#071426 53%,#091b32 100%);
}
.hero:before {
  z-index:-1;
  width:900px;
  height:900px;
  top:-490px;
  left:-340px;
  background:radial-gradient(circle,rgba(24,112,255,.22),rgba(24,112,255,0) 68%);
  filter:blur(28px);
}
.hero:after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.23;
  background-image:linear-gradient(rgba(121,174,233,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(121,174,233,.10) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(90deg,black,transparent 85%);
}
.hero-grid { gap:56px; grid-template-columns:1.02fr .98fr }
.hero-copy { max-width:650px }
.eyebrow {
  color:#77dcff;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.eyebrow-dot { width:8px;height:8px;background:#5af0cf;box-shadow:0 0 0 5px rgba(90,240,207,.10),0 0 22px rgba(90,240,207,.9) }
.hero h1 {
  max-width:700px;
  margin:25px 0 23px;
  font-size:clamp(54px,6.2vw,82px);
  line-height:.99;
  letter-spacing:-.075em;
  font-weight:700;
}
.hero h1 span,.email-copy h2 span {
  color:transparent;
  background:linear-gradient(100deg,#65dfff 5%,#4c9dff 52%,#8c8aff 100%);
  background-clip:text;
  -webkit-background-clip:text;
}
.hero-lead { max-width:550px;color:#b6c8dc;font-size:17px;line-height:1.8 }
.hero-actions { gap:14px;margin-top:37px }
.button {
  min-height:54px;
  padding:0 23px;
  border-radius:11px;
  font-size:13px;
  letter-spacing:.01em;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.button-primary {
  color:#fff;
  background:linear-gradient(110deg,#1769f5 0%,#168df2 52%,#16b8d7 100%);
  box-shadow:0 10px 34px rgba(24,117,255,.30),inset 0 1px 0 rgba(255,255,255,.24);
}
.button-primary:hover { transform:translateY(-3px);box-shadow:0 16px 42px rgba(24,117,255,.42),inset 0 1px 0 rgba(255,255,255,.28) }
.button-secondary { border:1px solid rgba(143,190,239,.34);background:rgba(12,32,57,.68);color:#e8f4ff }
.button-secondary:hover { border-color:#65cfff;background:rgba(26,69,111,.55) }
.hero-note { color:#bdcde0;font-size:12px;letter-spacing:.02em }
.hero-note span { color:#64edc7 }

/* Product mockup: brighter screen, sharper edges, more dimensionality. */
.hero-visual { min-height:500px }
.visual-glow {
  inset:5% -4%;
  background:radial-gradient(ellipse,rgba(29,126,255,.36),rgba(29,126,255,.08) 42%,transparent 72%);
  filter:blur(42px);
}
.dashboard {
  width:min(100%,510px);
  padding:24px;
  border:1px solid rgba(116,190,255,.38);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(20,48,79,.98),rgba(5,17,33,.98) 72%);
  box-shadow:0 42px 110px rgba(0,0,0,.52),0 0 55px rgba(25,119,255,.13),inset 0 1px 0 rgba(255,255,255,.10);
  transform:perspective(1200px) rotateY(-6deg) rotateX(2deg);
}
.dashboard-top { color:#a8c4e2;border-bottom-color:rgba(137,190,242,.19) }
.dashboard-heading { padding:27px 0 22px }
.dashboard-heading small { color:#83b6e6;font-size:10px }
.dashboard-heading h2 { font-size:24px;letter-spacing:-.045em }
.account-mark { color:#d8f5ff;border-color:rgba(91,196,255,.42);background:linear-gradient(145deg,rgba(40,148,255,.32),rgba(28,87,167,.16));box-shadow:0 0 22px rgba(39,139,255,.15) }
.dashboard-grid { gap:12px }
.dash-tile {
  min-height:116px;
  padding:16px;
  border-color:rgba(131,183,235,.20);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(30,69,109,.48),rgba(8,26,47,.64));
}
.dash-tile>span { color:#66dfff;font-size:22px }
.dash-tile strong { color:#f2f8ff;font-size:13px }
.dash-tile small { color:#9bb4ce;font-size:10px }
.dashboard-bottom {
  margin-top:15px;padding:15px;border:1px solid rgba(57,194,225,.20);
  background:linear-gradient(100deg,rgba(18,127,207,.22),rgba(25,79,145,.16));
}
.dashboard-bottom strong { font-size:11px }
.dashboard-bottom small { color:#a8c2da;font-size:10px }
.dashboard-bottom>span { color:#70e5ff }
.float-card {
  padding:14px 17px;
  border-color:rgba(122,194,255,.32);
  border-radius:13px;
  background:linear-gradient(145deg,#17395e,#0b2039);
  box-shadow:0 18px 45px rgba(0,0,0,.42),0 0 28px rgba(29,126,255,.12);
}
.float-card>span { color:#8aeaff;background:rgba(39,140,255,.22) }
.float-card strong { color:#f5faff;font-size:11px }
.float-card small { color:#a8bfd7;font-size:10px }
.float-one { left:-36px;top:54px }
.float-two { right:-34px;bottom:42px }

/* Trust strip: high-contrast proof points with a confident band. */
.trust-strip {
  position:relative;
  border-block:1px solid rgba(113,174,237,.22);
  background:linear-gradient(90deg,#0c2038,#102b49 50%,#0b1d34);
  box-shadow:0 15px 45px rgba(0,0,0,.15);
}
.trust-grid>div { min-height:108px;padding:20px 24px;border-color:rgba(145,191,237,.17) }
.trust-grid b { color:#6edfff;font-size:16px }
.trust-grid strong { color:#f0f7ff;font-size:12px }
.trust-grid small { color:#a9bfd6;font-size:11px }

/* Section titles: larger, brighter and more editorial. */
.section-heading { max-width:760px;margin-bottom:62px }
.section-heading h2,.email-copy h2,.closing-inner h2 {
  margin:18px 0 20px;
  font-size:clamp(42px,4.6vw,60px);
  line-height:1.04;
  letter-spacing:-.065em;
  font-weight:700;
}
.section-heading>p,.email-copy>p { color:#afc1d5;font-size:16px;line-height:1.85;max-width:650px }
.section-heading .eyebrow { margin-bottom:10px }

/* Features: stop looking like six identical low-contrast boxes. */
.feature-grid { gap:18px }
.feature-card {
  position:relative;
  isolation:isolate;
  min-height:320px;
  padding:30px;
  overflow:hidden;
  border:1px solid rgba(127,177,230,.22);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(17,43,72,.94),rgba(7,20,37,.98));
  box-shadow:0 16px 38px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.feature-card:before {
  content:"";position:absolute;z-index:-1;inset:0;opacity:.8;pointer-events:none;
  background:radial-gradient(circle at 100% 0%,rgba(36,133,255,.18),transparent 47%);
}
.feature-card:after {
  content:"";position:absolute;top:0;left:30px;right:30px;height:2px;
  background:linear-gradient(90deg,transparent,#4aaaff,transparent);opacity:.65;
}
.feature-card:nth-child(3n+2):before { background:radial-gradient(circle at 100% 0%,rgba(40,210,224,.16),transparent 48%) }
.feature-card:nth-child(3n):before { background:radial-gradient(circle at 100% 0%,rgba(125,112,255,.16),transparent 48%) }
.feature-card:hover {
  transform:translateY(-8px);
  border-color:rgba(84,190,255,.55);
  box-shadow:0 25px 55px rgba(0,0,0,.30),0 0 35px rgba(28,126,255,.10);
}
.feature-icon {
  width:52px;height:52px;margin-bottom:25px;border-radius:15px;
  border:1px solid rgba(97,190,255,.35);
  color:#8ce9ff;
  background:linear-gradient(145deg,rgba(35,133,255,.28),rgba(32,87,156,.16));
  box-shadow:0 8px 25px rgba(17,117,255,.13),inset 0 1px 0 rgba(255,255,255,.10);
  font-size:22px;
}
.feature-card h3 { margin:0 0 13px;color:#f4f9ff;font-size:21px;letter-spacing:-.045em }
.feature-card p { min-height:60px;color:#afc2d8;font-size:13px;line-height:1.8 }
.feature-card li { margin-top:9px;color:#d0deec;font-size:12px }
.feature-card li:before { width:6px;height:6px;background:#58e1d1;box-shadow:0 0 10px rgba(88,225,209,.5) }

/* Email: make the product panel a feature, not a quiet sidebar. */
.email-section {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 84% 50%,rgba(25,111,218,.16),transparent 38%),linear-gradient(130deg,#0b1d33,#091628 62%,#0c2039);
  border-block:1px solid rgba(112,174,235,.20);
}
.email-section:before {
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background:linear-gradient(120deg,transparent 0 65%,rgba(63,153,255,.12) 65.1%,transparent 65.4%);
}
.email-grid { position:relative;z-index:1;gap:78px }
.email-copy h2 { margin-top:20px }
.check-list { gap:15px 22px;margin:32px 0 }
.check-list li { color:#d2dfec;font-size:13px }
.check-list li:before { color:#5fe5c3;font-size:15px }
.text-link { color:#77dfff;font-size:14px }
.mail-panel {
  position:relative;
  padding:30px;
  border:1px solid rgba(118,194,255,.34);
  border-radius:22px;
  background:linear-gradient(150deg,rgba(20,52,86,.98),rgba(7,22,41,.99));
  box-shadow:0 30px 75px rgba(0,0,0,.32),0 0 45px rgba(23,119,255,.11),inset 0 1px 0 rgba(255,255,255,.08);
}
.mail-panel:before {
  content:"";position:absolute;top:0;left:28px;right:28px;height:2px;
  background:linear-gradient(90deg,transparent,#55dfff,#5d8dff,transparent);
}
.mail-panel-head { padding-bottom:22px;border-bottom-color:rgba(141,190,237,.18) }
.mail-brand>b { color:#d9f6ff;border-color:rgba(91,196,255,.40);background:rgba(40,139,240,.22) }
.mail-brand strong { color:#f4f9ff;font-size:14px }
.mail-brand small { color:#a8c0d8;font-size:10px }
.mail-feature { padding:22px 0;border-bottom-color:rgba(145,179,213,.16) }
.mail-feature i { border:1px solid rgba(97,186,237,.24);background:linear-gradient(145deg,rgba(40,137,219,.24),rgba(31,89,157,.14));color:#8ceaff }
.mail-feature strong { color:#f0f7ff;font-size:12px }
.mail-feature small { color:#a9bfd4;font-size:11px }
.mail-feature em { color:#8ee5ff }
.mail-panel-foot { color:#b4c9de;font-size:11px }

/* Platform preview: brighter frame and stronger product UI contrast. */
.platform-section { background:linear-gradient(180deg,#071321,#08182a 52%,#071321) }
.platform-layout { gap:80px }
.platform-window {
  border:1px solid rgba(121,187,246,.34);
  border-radius:20px;
  background:linear-gradient(145deg,#122d4b,#081a30);
  box-shadow:0 32px 80px rgba(0,0,0,.38),0 0 40px rgba(22,112,232,.10);
}
.platform-window-top { height:64px;background:linear-gradient(90deg,rgba(48,106,164,.25),rgba(14,37,64,.55));border-bottom-color:rgba(132,185,236,.18) }
.platform-window-top>b { color:#e0f7ff;border-color:rgba(91,196,255,.38);background:rgba(37,132,227,.22) }
.platform-window-top>span { color:#b1c9df }
.platform-tabs { background:rgba(3,12,22,.34);border-bottom-color:rgba(132,185,236,.16) }
.platform-tabs span { color:#a7bfd7 }
.platform-tabs .active { color:#fff;background:rgba(38,133,229,.22);box-shadow:inset 0 -2px #55d9ff }
.platform-content { padding:32px 26px }
.platform-content>small { color:#72d9ff;letter-spacing:.16em }
.platform-content h3 { color:#f4f9ff;font-size:23px }
.platform-stat-grid { gap:12px }
.platform-stat-grid>div { border:1px solid rgba(131,183,235,.18);border-radius:12px;background:rgba(27,67,108,.32);padding:15px }
.platform-stat-grid i { color:#6de1ff }
.platform-stat-grid strong { color:#f5faff }
.platform-stat-grid small { color:#a9bfd4 }
.platform-points { gap:25px }
.platform-points article>i { color:#82e8ff;background:rgba(35,132,225,.18);border:1px solid rgba(104,190,255,.22) }
.platform-points h3 { color:#f0f7ff;font-size:17px }
.platform-points p { color:#aabed3;font-size:13px;line-height:1.8 }

/* Getting started: a clear sequence with a visible progression line. */
.getting-section {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%,rgba(26,112,212,.13),transparent 48%),#081525;
  border-block:1px solid rgba(117,177,235,.18);
}
.steps-grid { gap:18px;position:relative }
.steps-grid:before {
  content:"";position:absolute;top:42px;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(78,174,255,.48),rgba(78,174,255,.48),transparent);
}
.steps-grid article {
  position:relative;z-index:1;min-height:230px;padding:28px;
  border:1px solid rgba(123,177,231,.22);border-radius:17px;
  background:linear-gradient(145deg,#102844,#091a30);
  box-shadow:0 15px 38px rgba(0,0,0,.18);
}
.steps-grid article>b {
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  color:#fff;font:700 17px var(--display);
  border:1px solid rgba(106,199,255,.44);
  background:linear-gradient(145deg,#197be9,#1552a8);
  box-shadow:0 8px 24px rgba(21,112,230,.28),0 0 0 6px #0c2038;
}
.steps-grid h3 { margin:22px 0 10px;color:#f2f8ff;font-size:20px }
.steps-grid p { color:#aec1d6;font-size:13px;line-height:1.8 }

/* FAQ: more deliberate rows and a clear open state. */
.faq-section { background:#071321 }
.faq-layout { gap:110px;align-items:start }
.faq-list details { border-bottom:1px solid rgba(139,176,212,.20) }
.faq-list details:first-child { border-top:1px solid rgba(139,176,212,.20) }
.faq-list summary {
  padding:25px 54px 25px 0;
  color:#e9f3ff;font-size:15px;font-weight:600;line-height:1.5;
  transition:color .2s ease;
}
.faq-list summary:hover { color:#78e3ff }
.faq-list summary:after {
  top:17px;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid rgba(114,185,247,.28);border-radius:10px;
  color:#82e7ff;background:rgba(35,112,191,.15);
}
.faq-list details[open] summary { color:#8de6ff }
.faq-list details[open] summary:after { color:#fff;border-color:rgba(85,202,255,.48);background:rgba(38,132,207,.30) }
.faq-list details p { padding:0 38px 22px 0;color:#b0c3d8;font-size:13px;line-height:1.9 }

/* Closing CTA: give the page a memorable final statement. */
.closing-cta {
  position:relative;isolation:isolate;overflow:hidden;padding:112px 0;
  border-top:1px solid rgba(125,190,250,.25);
  background:radial-gradient(ellipse at 78% 50%,rgba(27,133,255,.34),transparent 42%),radial-gradient(ellipse at 12% 100%,rgba(32,207,222,.12),transparent 42%),linear-gradient(110deg,#0c2340,#0a1a31 58%,#0b2341);
}
.closing-cta:before {
  content:"";position:absolute;z-index:-1;inset:0;opacity:.18;
  background-image:linear-gradient(rgba(135,190,245,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(135,190,245,.16) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(90deg,transparent,black 70%);
}
.closing-cta:after { right:13%;background:linear-gradient(180deg,transparent,rgba(91,190,237,.48),transparent) }
.closing-inner { position:relative;z-index:1;gap:48px }
.closing-inner h2 { max-width:760px;margin:0 0 20px;font-size:clamp(42px,5vw,64px);line-height:1.02 }
.closing-inner p { max-width:600px;color:#bfd0e3;font-size:15px;line-height:1.85 }
.closing-actions { gap:12px }
.closing-actions .button { min-width:164px }

/* Footer: richer finish and more legible secondary navigation. */
.site-footer {
  background:linear-gradient(180deg,#050f1d,#030914);
  border-top:1px solid rgba(128,182,239,.20);
}
.footer-main { gap:100px;padding-top:76px;padding-bottom:62px }
.footer-brand .brand-logo { width:165px;height:46px }
.footer-brand p { max-width:390px;color:#a1b5cb;font-size:12px;line-height:1.95 }
.footer-links { gap:14px }
.footer-links strong { margin-bottom:12px;color:#eff7ff;font-size:12px;letter-spacing:.08em;text-transform:uppercase }
.footer-links a { color:#a2b6cc;font-size:12px }
.footer-links a:hover { color:#7ce5ff;transform:translateX(3px) }
.footer-bottom { padding-top:24px;padding-bottom:28px;border-top-color:rgba(136,179,222,.16);color:#8da2ba;font-size:11px }

/* Global finishing details. */
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid #62dfff;outline-offset:4px;border-radius:5px }
.site-header { background:rgba(4,12,24,.88);border-bottom-color:rgba(125,181,241,.20);box-shadow:0 8px 30px rgba(0,0,0,.12) }
.primary-nav>a { color:#c1d0e1 }
.primary-nav>a:hover { color:#78e5ff }
.nav-login { box-shadow:0 6px 20px rgba(0,0,0,.16) }

@media (max-width:1100px) {
  .container { width:calc(100% - 52px) }
  .hero h1 { font-size:clamp(52px,6.2vw,72px) }
  .hero-grid { gap:34px }
  .float-one { left:-12px }
  .float-two { right:-12px }
  .footer-main { gap:58px }
}
@media (max-width:820px) {
  .container { width:calc(100% - 44px) }
  .section { padding:94px 0 }
  .hero { padding-top:86px;padding-bottom:86px }
  .hero-grid { grid-template-columns:1fr;gap:28px }
  .hero-copy { max-width:720px }
  .hero h1 { max-width:680px;font-size:clamp(52px,9vw,76px) }
  .hero-lead { max-width:640px }
  .hero-visual { min-height:440px }
  .dashboard { width:min(100%,540px);transform:none }
  .trust-grid>div { min-height:100px }
  .email-grid,.platform-layout { gap:52px }
  .faq-layout { gap:32px }
  .steps-grid:before { display:none }
  .footer-main { gap:42px }
}
@media (max-width:760px) {
  .nav-wrap { min-height:72px }
  .primary-nav {
    border:1px solid rgba(116,183,244,.24);
    background:linear-gradient(145deg,rgba(13,35,60,.99),rgba(5,17,32,.99));
    box-shadow:0 24px 55px rgba(0,0,0,.42),0 0 28px rgba(25,117,236,.12);
  }
  .primary-nav>a { color:#d8e7f6 }
  .primary-nav .nav-login { color:#fff;background:linear-gradient(110deg,#1769f5,#168fdf);border:0 }
}
@media (max-width:560px) {
  .container { width:calc(100% - 36px) }
  .section { padding:78px 0 }
  .hero { padding-top:70px;padding-bottom:66px }
  .hero h1 { margin:21px 0 18px;font-size:clamp(46px,12vw,60px);letter-spacing:-.075em }
  .hero-lead { font-size:15px;line-height:1.8 }
  .hero-actions { gap:10px;margin-top:27px }
  .hero-actions .button { min-height:50px;padding-inline:17px }
  .hero-visual { min-height:365px }
  .dashboard { padding:17px;border-radius:17px }
  .dashboard-heading { padding:20px 0 16px }
  .dash-tile { min-height:98px;padding:12px }
  .float-card { padding:10px 12px }
  .float-one { top:0;left:-5px }
  .float-two { right:-5px;bottom:0 }
  .trust-grid>div { min-height:86px;padding:12px 9px;grid-template-columns:29px 1fr }
  .trust-grid b { font-size:13px }
  .trust-grid strong { font-size:10px }
  .trust-grid small { font-size:9px }
  .section-heading { margin-bottom:38px }
  .section-heading h2,.email-copy h2 { font-size:clamp(38px,10vw,48px) }
  .section-heading>p,.email-copy>p { font-size:14px }
  .feature-grid { gap:13px }
  .feature-card { min-height:0;padding:24px;border-radius:16px }
  .feature-card p { min-height:0 }
  .mail-panel { padding:21px;border-radius:17px }
  .check-list { grid-template-columns:1fr;gap:11px }
  .platform-window { border-radius:15px }
  .platform-content { padding:21px 16px }
  .platform-stat-grid { grid-template-columns:1fr 1fr }
  .steps-grid { gap:13px }
  .steps-grid article { min-height:0;padding:23px }
  .faq-layout { gap:20px }
  .faq-list summary { padding:21px 46px 21px 0;font-size:14px }
  .faq-list summary:after { top:14px;width:31px;height:31px }
  .closing-cta { padding:76px 0 }
  .closing-inner { gap:25px }
  .closing-inner h2 { font-size:clamp(39px,10vw,49px) }
  .closing-inner p { font-size:14px }
  .closing-actions { flex-wrap:wrap }
  .closing-actions .button { min-width:0 }
  .footer-main { gap:32px 22px;padding-top:48px;padding-bottom:42px }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important }
}