/* Contact 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-primary{ background:linear-gradient(135deg,#8f43ff 0%,#2ea8ff 100%); box-shadow:0 14px 38px rgba(50,130,255,.28); } .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-small{ width:16px; height:16px; } .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,.light-section .contact-form,.light-section .contact-card{ 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); } }

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
    align-items: start;
}

.contact-form,
.contact-card {
    padding: clamp(22px, 3vw, 32px);
}

.contact-form {
    display: grid;
    gap: 18px;
}

.form-row {
    display: grid;
    gap: 9px;
}

.split-field {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

label {
    color: var(--light-ink);
    font-size: 0.9rem;
    font-weight: 800;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid rgba(56, 86, 132, 0.18);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.88);
    color: #0d1726;
    outline: none;
    padding: 14px 15px;
}

select option {
    background: #ffffff;
    color: #0d1726;
}

textarea {
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(48, 132, 255, 0.55);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(48, 132, 255, 0.12);
}

.flash-stack {
    display: grid;
    gap: 10px;
}

.flash-message {
    border-radius: var(--radius);
    padding: 12px 14px;
    font-weight: 800;
}

.flash-message.success {
    border: 1px solid rgba(40, 160, 108, 0.24);
    background: rgba(101, 244, 189, 0.12);
    color: #0f7a50;
}

.flash-message.error {
    border: 1px solid rgba(210, 68, 88, 0.22);
    background: rgba(255, 154, 162, 0.12);
    color: #a3283c;
}

.contact-aside {
    display: grid;
    gap: 16px;
}

.contact-card {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 16px;
}

.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);
}

.contact-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(64, 96, 148, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: #405067;
    padding: 9px 12px;
    font-size: 0.84rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .contact-grid,
    .split-field {
        grid-template-columns: 1fr;
    }

    .contact-card {
        position: static;
    }
}