/* Solutions page */

:root { --bg:#020713; --ink:#f6f8ff; --muted:#9aa8bd; --line:rgba(93,132,200,.28); --cyan:#28b8ff; --purple:#9a4dff; --light-ink:#08111f; --light-muted:#516072; --radius:14px; --container:1456px; --font-body:"Inter",system-ui,sans-serif; --shadow-dark:0 26px 80px rgba(0,0,0,.34); --shadow-light:0 18px 50px rgba(24,54,98,.1); }
*{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ min-height:100vh; overflow-x:hidden; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.65; } a{ color:inherit; text-decoration:none; } img,svg{ display:block; max-width:100%; } button,input,select,textarea{ font:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid rgba(40,184,255,.72); outline-offset:4px; }
.skip-link{ position:fixed; top:14px; left:14px; z-index:200; transform:translateY(-150%); border-radius:999px; background:var(--cyan); color:#031018; padding:10px 16px; font-weight:800; } .skip-link:focus{ transform:translateY(0); }
.container{ width:min(calc(100% - 40px),var(--container)); margin:0 auto; } .narrow{ max-width:800px; } .section{ position:relative; padding:clamp(86px,10vw,150px) 0; } .page-hero{ padding-top:clamp(96px,10vw,150px); padding-bottom:clamp(46px,6vw,80px); } .page-hero p:not(.eyebrow){ max-width:700px; margin-top:20px; color:rgba(244,247,255,.82); font-size:1.08rem; }
.site-bg{ position:fixed; inset:0; z-index:-4; overflow:hidden; background:radial-gradient(ellipse at 67% 30%, rgba(40,133,255,.28), transparent 33%),radial-gradient(ellipse at 86% 35%, rgba(157,52,255,.28), transparent 32%),linear-gradient(180deg,#020712 0%,#030a17 44%,#020611 100%); } .site-bg::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(42,115,224,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(42,115,224,.045) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 86%); animation:gridDrift 28s linear infinite; } .site-bg span{ position:absolute; width:42vw; aspect-ratio:1; border-radius:50%; filter:blur(70px); opacity:.16; animation:glowMove 18s ease-in-out infinite alternate; } .site-bg span:nth-child(1){ top:14%; left:-10%; background:var(--cyan); } .site-bg span:nth-child(2){ right:-12%; top:36%; background:var(--purple); animation-delay:-6s; } .site-bg span:nth-child(3){ left:36%; bottom:-28%; background:#3b82ff; animation-delay:-11s; }
.cursor-glow{ position:fixed; top:0; left:0; z-index:-1; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(40,184,255,.12),transparent 68%); pointer-events:none; transform:translate3d(-50%,-50%,0); }
h1,h2,h3{ color:var(--ink); font-family:var(--font-body); font-weight:800; line-height:1.04; letter-spacing:-.045em; } h1{ font-size:clamp(3.35rem,4.3vw,4.6rem); } h2{ font-size:clamp(1.7rem,2vw,2.15rem); } h3{ font-size:1.08rem; } p{ color:var(--muted); } .eyebrow{ margin-bottom:8px; color:#a15dff; font-size:.72rem; font-weight:900; letter-spacing:.26em; text-transform:uppercase; }
.btn{ position:relative; display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:10px; overflow:hidden; border:1px solid transparent; border-radius:10px; padding:0 22px; color:var(--ink); font-size:.94rem; font-weight:800; line-height:1; } .btn-secondary{ border-color:rgba(180,197,235,.34); background:rgba(2,9,22,.52); }
.surface{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:radial-gradient(circle at 20% 0%, rgba(62,136,255,.12), transparent 36%),linear-gradient(180deg, rgba(7,24,52,.82), rgba(3,13,30,.74)); box-shadow:var(--shadow-dark); backdrop-filter:blur(20px); } .icon{ width:22px; height:22px; } .icon-large{ width:30px; height:30px; }
.light-section{ color:var(--light-ink); background:linear-gradient(180deg,#f8fbff 0%,#fff 46%,#f4f8ff 100%); } .light-transition{ border-top:1px solid rgba(115,147,196,.2); box-shadow:inset 0 38px 80px rgba(31,86,166,.08); } .light-section h1,.light-section h2,.light-section h3{ color:var(--light-ink); } .light-section p{ color:var(--light-muted); } .light-section .surface{ border-color:rgba(64,96,148,.16); background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(248,251,255,.78)); box-shadow:var(--shadow-light),inset 0 1px 0 rgba(255,255,255,.9); }
.reveal{ opacity:0; transform:translateY(22px) scale(.985); transition:opacity .65s ease,transform .65s ease; } .reveal.is-visible{ opacity:1; transform:translateY(0) scale(1); } @keyframes gridDrift{ to{ background-position:44px 44px; } } @keyframes glowMove{ from{ transform:translate3d(-3%,-2%,0) scale(1); } to{ transform:translate3d(4%,3%,0) scale(1.08); } } @media(max-width:760px){ .container{ width:min(calc(100% - 28px),var(--container)); } .section{ padding:78px 0; } h1{ font-size:clamp(2.75rem,13vw,4rem); } }

.solution-list {
    display: grid;
    gap: 18px;
}

.solution-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
    gap: 22px;
    align-items: start;
    padding: clamp(22px, 3vw, 32px);
}

.solution-icon {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 1px solid rgba(40, 184, 255, 0.22);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(40, 184, 255, 0.16), rgba(154, 77, 255, 0.11));
    color: var(--cyan);
}

.solution-detail {
    display: grid;
    gap: 8px;
}

.solution-detail strong {
    color: var(--light-ink);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip-row span {
    border: 1px solid rgba(62, 99, 159, 0.14);
    border-radius: 999px;
    background: rgba(243, 247, 255, 0.84);
    color: #405067;
    padding: 7px 10px;
    font-size: 0.78rem;
    font-weight: 700;
}

.solution-row .chip-row,
.solution-row .btn {
    grid-column: 2 / -1;
    width: max-content;
}

@media (max-width: 1100px) {
    .solution-row {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .solution-row .solution-detail,
    .solution-row .chip-row,
    .solution-row .btn {
        grid-column: 2;
    }
}

@media (max-width: 760px) {
    .solution-row {
        grid-template-columns: 1fr;
    }

    .solution-row .solution-detail,
    .solution-row .chip-row,
    .solution-row .btn {
        grid-column: auto;
    }
}