@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root{
    --navy:#020b1c;
    --navy-2:#06142b;
    --blue:#168dff;
    --cyan:#11b8ff;
    --text:#f7fbff;
    --muted:#a9b9ce;
    --line:rgba(102,166,255,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-width:320px;
    color:var(--text);
    background:
        radial-gradient(900px 500px at 72% 34%,rgba(0,124,255,.18),transparent 62%),
        radial-gradient(700px 420px at 22% 86%,rgba(0,183,255,.10),transparent 65%),
        linear-gradient(145deg,#020816 0%,#041126 50%,#020817 100%);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.home-page{position:relative;min-height:100vh}
.home-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(10px);opacity:.6}
.orb-a{width:520px;height:520px;right:-170px;top:90px;background:radial-gradient(circle,rgba(0,145,255,.25),transparent 68%)}
.orb-b{width:650px;height:360px;left:28%;top:120px;background:radial-gradient(ellipse,rgba(0,110,255,.16),transparent 70%)}
.orb-c{width:420px;height:260px;left:-140px;bottom:-80px;background:radial-gradient(ellipse,rgba(0,196,255,.12),transparent 70%)}
.grid-floor{
    position:absolute;left:-15%;right:-15%;bottom:-170px;height:410px;
    background:
        linear-gradient(rgba(40,143,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(40,143,255,.08) 1px,transparent 1px);
    background-size:70px 70px;
    transform:perspective(500px) rotateX(62deg);
    transform-origin:center top;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 35%,transparent 100%);
}

.site-header{
    position:relative;z-index:5;
    max-width:1180px;margin:0 auto;
    min-height:78px;padding:18px 24px;
    display:flex;align-items:center;justify-content:space-between;gap:22px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;white-space:nowrap}
.brand-mark{
    width:30px;height:30px;border-radius:9px;
    display:grid;place-items:center;
    background:linear-gradient(145deg,#5266ff,#2455ee);
    box-shadow:0 7px 25px rgba(49,91,255,.35);
}
.main-nav{display:flex;align-items:center;gap:28px;font-size:12px;font-weight:600;color:#d1dced}
.main-nav a{position:relative;padding:8px 0;opacity:.9}
.main-nav a.active:after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:3px;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
}
.header-actions{display:flex;gap:9px}
.btn{
    min-height:42px;padding:0 18px;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;
    border:1px solid transparent;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
    background:linear-gradient(135deg,#087fff,#14b8ff);
    box-shadow:0 10px 28px rgba(0,128,255,.24);
}
.btn-ghost,.btn-outline{
    background:rgba(4,19,43,.45);
    border-color:rgba(55,155,255,.55);
}
.btn-large{min-height:48px;padding:0 22px;font-size:13px;border-radius:7px}
.btn-large span{font-size:18px;margin-left:7px}

.hero-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:28px 24px 70px}
.hero{
    min-height:470px;
    display:grid;grid-template-columns:42% 58%;align-items:center;gap:12px;
}
.hero-copy{padding:12px 0 0 18px;position:relative;z-index:3}
.eyebrow{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 12px;border-radius:999px;
    color:#cfe4ff;background:rgba(19,89,164,.22);
    border:1px solid rgba(45,146,255,.22);
    font-size:10px;font-weight:700;
}
.eyebrow span{width:6px;height:6px;border-radius:50%;background:#1ab8ff;box-shadow:0 0 10px #1ab8ff}
h1{
    margin:17px 0 14px;
    font-size:48px;line-height:1.02;letter-spacing:-2.4px;
    font-weight:800;
}
h1 strong{
    color:#0baeff;
    background:linear-gradient(90deg,#0a9cff,#1bc9ff);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-text{max-width:505px;color:#b8c7d9;font-size:13px;line-height:1.75;margin:0 0 24px}
.hero-actions{display:flex;gap:10px}

.hero-visual{position:relative;height:445px;display:flex;align-items:center;justify-content:center;perspective:1100px}
.light-beam{
    position:absolute;height:2px;border-radius:50%;
    background:linear-gradient(90deg,transparent,#0e8fff,#28d0ff,transparent);
    filter:blur(.2px);opacity:.9;transform:rotate(-13deg);
}
.beam-one{width:600px;top:90px;left:20px}
.beam-two{width:470px;top:155px;left:120px;transform:rotate(-22deg);opacity:.55}

.device-scene{
    position:relative;width:650px;height:400px;
    transform:rotateY(-8deg) rotateX(2deg);
    transform-style:preserve-3d;
}
.device-scene:before{
    content:"";position:absolute;inset:60px 25px 20px;
    background:radial-gradient(ellipse,rgba(0,146,255,.35),transparent 66%);
    filter:blur(28px);transform:translateZ(-50px);
}
.laptop{
    position:absolute;left:42px;top:58px;width:510px;height:315px;
    transform:rotateY(4deg) rotateX(3deg) rotateZ(-1deg);
    transform-style:preserve-3d;
}
.laptop-screen{
    position:absolute;inset:0 0 25px;
    padding:11px;border:2px solid #8da5bd;border-radius:13px 13px 7px 7px;
    background:#071323;
    box-shadow:
        0 0 0 2px rgba(8,24,45,.8),
        0 22px 55px rgba(0,0,0,.55),
        0 0 55px rgba(0,137,255,.30);
    transform:translateZ(12px);
    display:flex;overflow:hidden;
}
.laptop-screen:after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(125deg,rgba(255,255,255,.10),transparent 25%,transparent 70%,rgba(0,180,255,.08));
    pointer-events:none;
}
.laptop-base{
    position:absolute;left:-22px;right:-22px;bottom:0;height:34px;
    background:linear-gradient(180deg,#60798f,#17283b 58%,#091525);
    clip-path:polygon(5% 0,95% 0,100% 82%,0 82%);
    border-radius:0 0 12px 12px;
    box-shadow:0 18px 25px rgba(0,0,0,.45);
}
.laptop-base:after{
    content:"";position:absolute;left:40%;right:40%;top:7px;height:4px;border-radius:10px;background:#40546a;
}
.mock-sidebar{
    width:28%;padding:8px 6px;background:#06152d;display:flex;flex-direction:column;gap:8px;
    color:#9eb0c5;font-size:6px;font-weight:600;
}
.mock-logo{width:18px;height:18px;border-radius:5px;background:#405cff;color:#fff;display:grid;place-items:center;font-size:9px;margin:0 0 5px}
.mock-sidebar span{padding:5px;border-radius:4px}
.mock-sidebar .mock-active{background:#123c70;color:#fff}
.mock-content{flex:1;background:#f4f8fc;color:#12233a;padding:28px 30px;position:relative}
.mock-title{font-size:14px;font-weight:800;margin-bottom:18px}
.mock-label{font-size:7px;font-weight:700;color:#5d7087;margin:10px 0 5px}
.mock-input{height:25px;border:1px solid #c8d6e5;border-radius:5px;background:#fff}
.mock-input.small{width:68%}
.mock-button{display:inline-flex;margin-top:16px;padding:8px 12px;background:#1768ed;color:#fff;border-radius:5px;font-size:7px;font-weight:700}

.phone{
    position:absolute;right:25px;top:98px;width:135px;height:260px;
    padding:7px;border:2px solid #7c95ac;border-radius:25px;
    background:#081526;
    box-shadow:0 22px 55px rgba(0,0,0,.55),0 0 34px rgba(0,160,255,.32);
    transform:rotateY(-5deg) rotateZ(4deg) translateZ(60px);
    z-index:4;
}
.phone-top{position:absolute;top:4px;left:42px;width:46px;height:9px;border-radius:0 0 8px 8px;background:#030912;z-index:2}
.phone-screen{height:100%;border-radius:19px;background:linear-gradient(160deg,#071a34,#0a2441);padding:34px 11px 12px;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.phone-brand{font-size:8px;font-weight:700;display:flex;align-items:center;gap:4px}
.phone-brand span{width:14px;height:14px;border-radius:4px;background:#4564ff;display:grid;place-items:center}
.phone-heading{font-size:11px;font-weight:800;margin-top:29px;line-height:1.25}
.phone-email{font-size:7px;margin-top:12px;padding:7px;border-radius:5px;background:#0f5eaa;color:#dff2ff}
.phone-button{font-size:7px;font-weight:800;text-align:center;margin-top:9px;padding:7px;border-radius:5px;background:linear-gradient(90deg,#087fff,#11b7ff)}
.telegram-bubble{
    position:absolute;right:-2px;top:55px;width:58px;height:58px;border-radius:50%;
    display:grid;place-items:center;
    background:linear-gradient(145deg,#1ec6ff,#087cf1);
    border:1px solid rgba(255,255,255,.45);
    box-shadow:0 0 30px rgba(10,180,255,.55),0 16px 30px rgba(0,0,0,.35);
    z-index:6;
    transform:translateZ(95px);
}
.telegram-plane{font-size:27px;line-height:1;transform:translate(-2px,1px) rotate(-16deg);text-shadow:0 2px 5px rgba(0,0,0,.25)}

.feature-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
    margin-top:4px;
}
.feature{
    min-height:70px;padding:14px 16px;
    display:flex;align-items:center;gap:12px;
    border:1px solid rgba(72,142,214,.25);
    border-radius:8px;
    background:linear-gradient(145deg,rgba(8,31,62,.88),rgba(4,19,42,.76));
    box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.feature-icon{
    flex:0 0 31px;width:31px;height:31px;border-radius:8px;
    display:grid;place-items:center;
    background:linear-gradient(145deg,#087cf5,#0db8ff);
    box-shadow:0 8px 18px rgba(0,130,255,.22);
    font-size:15px;font-weight:800;
}
.feature h3{margin:0 0 4px;font-size:10px}
.feature p{margin:0;color:#8298b2;font-size:8px}
.below-section{padding:90px 10px 0;max-width:700px}
.section-kicker{font-size:9px;color:#16baff;font-weight:800;letter-spacing:2px}
.below-section h2{font-size:30px;margin:10px 0}
.below-section p{color:#9dafc5;font-size:13px;line-height:1.8}
.faq-section{padding-bottom:80px}

@media (max-width:900px){
    .main-nav{display:none}
    .hero{grid-template-columns:1fr;min-height:0;padding-top:20px}
    .hero-copy{padding-left:0}
    h1{font-size:43px}
    .hero-visual{height:390px;margin-top:10px}
    .device-scene{transform:scale(.86) rotateY(-6deg)}
    .feature-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
    .site-header{padding:15px 16px}
    .header-actions .btn-ghost{display:none}
    .hero-wrap{padding:20px 16px 55px}
    h1{font-size:36px;letter-spacing:-1.7px}
    .hero-text{font-size:12px}
    .hero-actions{flex-wrap:wrap}
    .hero-visual{height:330px;overflow:visible}
    .device-scene{transform:scale(.60) translateX(-8px) rotateY(-5deg)}
    .feature-row{grid-template-columns:1fr}
    .feature{min-height:64px}
}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .btn{transition:none}
}

/* Keep the fixed-size decorative scene inside responsive grid tracks. */
.hero{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
.hero-copy,.hero-visual{min-width:0}
.device-scene{flex-shrink:0}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.hero-visual{overflow:hidden}}
@media(max-width:620px){.device-scene{transform:scale(.50) rotateY(-5deg)}}

/* Homepage visual polish: restore depth, hierarchy and controlled accent color. */
.home-page{background:#020817;color:#f7fbff}
.home-bg{background:radial-gradient(ellipse at 74% 29%,rgba(16,113,255,.15),transparent 34%),radial-gradient(ellipse at 20% 82%,rgba(0,196,255,.08),transparent 38%)}
.site-header{min-height:82px;background:linear-gradient(180deg,rgba(2,8,23,.82),rgba(2,8,23,.22));backdrop-filter:blur(12px)}
.hero-wrap{padding-top:42px}.hero-copy{padding-top:0}.hero-copy h1{font-size:54px;text-shadow:0 8px 30px rgba(0,0,0,.25)}
.hero-visual{filter:drop-shadow(0 30px 45px rgba(0,0,0,.25))}.device-scene{transform:rotateY(-11deg) rotateX(5deg) rotateZ(-1deg);transition:transform .35s ease}.device-scene:hover{transform:rotateY(-6deg) rotateX(2deg) rotateZ(0deg) translateY(-5px)}
.device-scene:after{content:"";position:absolute;left:50px;right:40px;bottom:4px;height:24px;border-radius:50%;background:rgba(0,0,0,.62);filter:blur(18px);transform:translateZ(-70px)}
.laptop{transform:rotateY(7deg) rotateX(7deg) rotateZ(-1deg) translateZ(12px)}.laptop-screen{background:linear-gradient(145deg,#0b1d39,#061120);border-color:#a5c3df;box-shadow:0 0 0 2px rgba(8,24,45,.8),0 28px 60px rgba(0,0,0,.58),0 0 70px rgba(0,137,255,.38);transform:translateZ(18px)}
.laptop-base{transform:rotateX(-7deg) translateZ(0);background:linear-gradient(180deg,#89a5bd,#273c53 48%,#091525)}
.phone{transform:rotateY(-13deg) rotateZ(6deg) translateZ(74px);box-shadow:0 26px 65px rgba(0,0,0,.65),0 0 42px rgba(0,160,255,.42)}
.telegram-bubble{box-shadow:0 0 0 6px rgba(33,181,255,.08),0 0 38px rgba(10,180,255,.75),0 18px 35px rgba(0,0,0,.45)}
.beam-one{opacity:.7;filter:blur(1px);box-shadow:0 0 18px #11b8ff}.beam-two{opacity:.35}
.feature-row{margin-top:20px;gap:14px}.feature{background:linear-gradient(145deg,rgba(14,40,77,.92),rgba(5,20,43,.95));border-color:rgba(75,160,255,.32);box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.07)}.feature:nth-child(2) .feature-icon{background:linear-gradient(145deg,#635bff,#23a8ff)}.feature:nth-child(3) .feature-icon{background:linear-gradient(145deg,#0da4c6,#176af2)}.feature:nth-child(4) .feature-icon{background:linear-gradient(145deg,#3f7bff,#18c9b6)}
.below-section{padding-top:75px}.below-section h2{letter-spacing:-.7px}.below-section p{max-width:650px}.faq-section{padding-bottom:110px}
@media(max-width:900px){.hero-copy h1{font-size:46px}.device-scene{transform:scale(.86) rotateY(-8deg) rotateX(4deg)}.device-scene:hover{transform:scale(.86) rotateY(-5deg) rotateX(2deg) translateY(-4px)}}
@media(max-width:620px){.hero-wrap{padding-top:24px}.hero-copy h1{font-size:38px}.device-scene{transform:scale(.54) rotateY(-6deg) rotateX(3deg)}.device-scene:hover{transform:scale(.54) rotateY(-3deg) rotateX(2deg)}.feature-row{margin-top:10px}.below-section{padding-top:64px}}
.workflow-section,.trust-section{max-width:1040px;margin:0 auto;padding:108px 18px 0}.section-intro{max-width:640px}.section-intro h2{font-size:38px;line-height:1.1;letter-spacing:-1.1px;margin:12px 0}.section-intro p{color:#9dafc5;font-size:13px;line-height:1.8;margin:0}.workflow-grid,.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.workflow-card,.trust-card{display:flex;gap:14px;align-items:flex-start;padding:19px;border:1px solid rgba(72,142,214,.28);border-radius:13px;background:linear-gradient(145deg,rgba(9,32,64,.85),rgba(3,17,37,.9));box-shadow:0 15px 35px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.05)}.workflow-number{color:#56c9ff;font-size:11px;font-weight:800;letter-spacing:1px}.workflow-card h3,.trust-card h3{margin:0 0 6px;font-size:13px}.workflow-card p,.trust-card p{margin:0;color:#879bb5;font-size:11px;line-height:1.6}.trust-icon{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:8px;color:#fff;background:linear-gradient(145deg,#087fff,#12b9ff);font-weight:800}.faq-strip{display:flex;align-items:center;gap:16px;margin-top:24px;padding:16px 18px;border-radius:12px;background:linear-gradient(90deg,rgba(15,58,105,.7),rgba(7,28,57,.72));border:1px solid rgba(73,156,255,.28)}.faq-strip strong{font-size:13px}.faq-strip span{color:#9eb2ca;font-size:11px;margin-right:auto}.faq-strip .btn{min-height:38px;font-size:11px}.faq-section{padding-bottom:110px}@media(max-width:760px){.workflow-section,.trust-section{padding:70px 0 0}.section-intro h2{font-size:29px}.workflow-grid,.trust-grid{grid-template-columns:1fr;gap:10px}.workflow-card,.trust-card{padding:15px}.faq-strip{align-items:flex-start;flex-wrap:wrap;gap:8px}.faq-strip span{flex-basis:100%}.faq-strip .btn{margin-top:5px}}