@charset "UTF-8";

#content img{max-width:100%;display:block;}


/* ===== PAIN SECTION ===== */
.pain{background:#fff;}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:768px){.pain-grid{grid-template-columns:1fr;}}
.pain-card{text-align:center;background:#F5F7FB;border:1.5px solid #E2E8F4;border-radius:20px;padding:36px 28px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;}
.pain-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--main-color),var(--main-color-cyan));transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease;}
.pain-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,102,255,0.15);border-color:rgba(0,102,255,0.25);}
.pain-card:hover::before{transform:scaleX(1);}
.pain-icon-wrap{width:80px;height:80px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px auto;font-size:28px;}
.pain-card h3{font-size:var(--fs-label-sub);font-weight:800;color:#1a1f2e;margin-bottom:12px;line-height:1.35;word-break:keep-all;}
.pain-card p{font-size:var(--fs-desc-sub);color:#5a6375;line-height:1.7;word-break:keep-all;}
.pain-card .pain-tag{display:inline-block;font-size:var(--fs-desc);font-weight:700;padding:4px 12px;border-radius:100px;background:rgba(239,68,68,0.08);color:#dc2626;margin-bottom:2rem;letter-spacing:0.05em;text-transform:uppercase;}

/* ===== FEATURES SECTION ===== */
.feat{background:#0D1220;position:relative;overflow:hidden;}
.feat::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,102,255,0.4),transparent);}
.feat-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:900px;height:500px;background:radial-gradient(ellipse,rgba(0,102,255,0.08) 0%,transparent 65%);pointer-events:none;}
.feat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;}
.feat-grid .feat-card:nth-child(-n+3){grid-column:span 2;}
.feat-grid .feat-card:nth-child(n+4){grid-column:span 3;}
@media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr);}.feat-grid .feat-card:nth-child(-n+3),.feat-grid .feat-card:nth-child(n+4){grid-column:span 1;}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr;}}
.feat-card{text-align:center;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:20px;padding:32px 28px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;}
.feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--main-color),var(--main-color-cyan));transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease;}
.feat-card:hover{background:rgba(0,102,255,0.08);border-color:rgba(0,102,255,0.3);transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,0.3);}
.feat-card:hover::before{transform:scaleX(1);}
.feat-icon{width:70px;height:70px;border-radius:16px;background:transparent;display:flex;align-items:center;justify-content:center;margin:0 auto 20px auto;overflow:hidden;}
.feat-icon img{width:100%;height:100%;object-fit:contain;}
.feat-card h3{font-size:var(--fs-label);font-weight:800;color:#fff;margin-bottom:10px;word-break:keep-all;}
.feat-def{font-size:var(--fs-desc-sub);color:#8B95A8;line-height:1.65;margin-bottom:16px;word-break:keep-all;}
.feat-benefit{font-size:var(--fs-desc-sub);color:#fff;line-height:1.6;padding-top:14px;border-top:1px solid rgba(255,255,255,0.07);word-break:keep-all;}
.feat-benefit::before{content:'✓ ';font-weight:700;}

/* ===== PROCESS SECTION ===== */
.process{background:#fff;}
.proc-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;margin-top:0;}
.proc-connector{position:absolute;top:28px;left:calc(8.33% + 24px);right:calc(8.33% + 24px);height:2px;background:linear-gradient(90deg,var(--main-color),var(--main-color-cyan));z-index:0;}
.proc-connector::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0.9);
    -webkit-mask:linear-gradient(90deg,transparent,#fff 50%,transparent) no-repeat;
    mask:linear-gradient(90deg,transparent,#fff 50%,transparent) no-repeat;
    -webkit-mask-size:40% 100%;
    mask-size:40% 100%;
    -webkit-mask-position:-40% 0;
    mask-position:-40% 0;
    animation:proc-line-flow 3.2s ease-in-out infinite;
}
@keyframes proc-line-flow{
    0%  {-webkit-mask-position:-40% 0;mask-position:-40% 0;}
    100%{-webkit-mask-position:140% 0;mask-position:140% 0;}
}
.proc-step{text-align:center;position:relative;z-index:1;padding:0 8px;}
.proc-num{width:56px;height:56px;border-radius:50%;background:var(--main-color);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#fff;margin:0 auto 26px;box-shadow:0 0 0 6px rgba(0,102,255,0.12),0 0 24px rgba(0,102,255,0.3);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
.proc-step:hover .proc-num{transform:scale(1.1);box-shadow:0 0 0 8px rgba(0,102,255,0.15),0 0 32px rgba(0,102,255,0.5);}
.proc-step h4{display:inline-block;font-size:var(--fs-desc-sub);font-weight:700;color:#0891b2;background:rgba(8,145,178,0.08);border:1px solid rgba(8,145,178,0.25);border-radius:100px;padding:5px 14px;margin-bottom:10px;word-break:keep-all;line-height:1.4;}
.proc-step p{font-size:var(--fs-desc-sub);color:#666;line-height:1.6;word-break:keep-all;}
@media(max-width:900px){
    .proc-steps{grid-template-columns:repeat(3,1fr);gap:24px;}
    .proc-connector{display:none;}
}
@media(max-width:480px){
    .proc-steps{grid-template-columns:repeat(2,1fr);gap:4rem 1rem;}
    .proc-step h4 {display:block;}
}

/* ===== DIFF SECTION ===== */
.diff{background:#0A0E1A;position:relative;overflow:hidden;}
.diff::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,242,255,0.3),transparent);}
.diff-glow{position:absolute;top:50%;right:-200px;transform:translateY(-50%);width:600px;height:600px;background:radial-gradient(ellipse,rgba(0,242,255,0.07) 0%,transparent 65%);pointer-events:none;}
.diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.diff-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:20px;padding:32px 28px;display:flex;gap:20px;align-items:flex-start;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
.diff-card:hover{border-color:rgba(0,102,255,0.3);background:rgba(255,255,255,0.05);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.25);}
.diff-card.primary{background:rgba(0,102,255,0.1);border-color:rgba(0,102,255,0.35);box-shadow:0 0 30px rgba(0,102,255,0.12);}
.diff-icon{width:64px;height:64px;border-radius:14px;background:rgba(0,102,255,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.diff-icon img{width:100%;height:100%;object-fit:contain;}
.diff-icon.svg-wrap{font-size:28px;}
.diff-text h3{font-size:var(--fs-label-sub);font-weight:800;color:#fff;margin-bottom:8px;word-break:keep-all;}
.diff-text p{font-size:var(--fs-desc-sub);color:#8B95A8;line-height:1.7;word-break:keep-all;}
@media(max-width:768px){
    .diff-grid {grid-template-columns:1fr;}
    .diff-card {padding:1.5rem 1rem;}
}

/* ===== OS POSITION SECTION ===== */
.ospos{background:#fff;}
.ospos-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
@media(max-width:900px){.ospos-inner{grid-template-columns:1fr;gap:48px;}}
.ospos-diagram{display:flex;flex-direction:column;gap:1rem;}
.os-row{background:#F5F7FB;border:1.5px solid #E2E8F4;border-radius:14px;padding:1.5rem 20px;display:flex;align-items:center;gap:16px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:default;}
.os-row:hover{border-color:rgba(0,102,255,0.3);background:rgba(0,102,255,0.02);}
.os-row.highlight{background:rgba(0,102,255,0.06);border-color:rgba(0,102,255,0.35);box-shadow:0 4px 20px rgba(0,102,255,0.1);}
.os-icon{width:36px;height:36px;border-radius:10px;background:rgba(0,102,255,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.os-row.highlight .os-icon{background:rgba(0,102,255,0.15);}
.os-name{font-size:var(--fs-label-sub);font-weight:700;min-width:56px;flex-shrink:0;color:#1a1f2e;}
.os-name.accent{color:var(--main-color);}
.os-sep{width:1px;height:16px;background:#E2E8F4;flex-shrink:0;}
.os-desc{font-size:var(--fs-desc-sub);color:#666;flex:1;}
.os-here{margin-left:auto;font-size:0.75rem;font-weight:700;color:var(--main-color);background:rgba(0,102,255,0.08);border:1px solid rgba(0,102,255,0.2);padding:4px 12px;border-radius:100px;white-space:nowrap;font-family:'Inter',sans-serif;letter-spacing:0.05em;flex-shrink:0;animation: os-here-nudge 2s linear infinite;}
.ospos-caption{margin-top:28px;padding:22px 24px;background:rgba(0,102,255,0.04);border:1px solid rgba(0,102,255,0.12);border-radius:14px;}
.ospos-caption p{font-size:var(--fs-desc-sub);color:#1a1f2e;line-height:1.7;word-break:keep-all;}
.ospos-caption p span{color:var(--main-color);font-weight:700;}

/* ===== VEHICLES SECTION ===== */
.vehicles{background:#EEF1F8;}
.veh-list{display:flex;flex-wrap:nowrap;gap:12px;}
.veh-chip{font-size:1.125rem;background:#fff;border:1.5px solid #E2E8F4;border-radius:16px;padding:20px 16px 16px;font-weight:600;color:#333;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;flex:1;min-width:0;box-sizing:border-box;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
@media(max-width:1024px){
    .veh-list {flex-wrap:wrap;justify-content:center;}
    .veh-chip {flex:none;width:calc(25% - 9px);min-width:80px;}
}
@media(max-width:768px){
    .veh-chip {width:calc(50% - 6px);}
}
.veh-chip img{width:56px!important;height:56px!important;}
.veh-chip:hover{border-color:var(--main-color);color:var(--main-color);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,102,255,0.1);}
/* ===== APP SECTION ===== */
.app{padding:100px 28px;background:#fff;}
.app-badges{display:flex;gap:12px;flex-wrap:wrap;}
@media(max-width:640px){.app-badges{justify-content:center;}}
.app-badge{display:flex;align-items:center;gap:12px;background:#0A0E1A;border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:14px 22px;text-decoration:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
.app-badge:hover{background:#111827;border-color:rgba(255,255,255,0.2);transform:translateY(-2px);}
.app-badge-icon{font-size:26px;}
.app-badge-text .small{font-size:10px;color:rgba(255,255,255,0.5);font-family:'Inter',sans-serif;display:block;}
.app-badge-text .big{font-size:15px;font-weight:700;color:#fff;font-family:'Inter',sans-serif;display:block;}
.app-badge-text .soon{font-size:11px;color:var(--main-color-cyan);font-family:'Inter',sans-serif;display:block;margin-top:2px;}
.app-phone-visual{width:160px;height:160px;background:linear-gradient(135deg,rgba(0,102,255,0.15),rgba(0,242,255,0.08));border:1px solid rgba(0,102,255,0.2);border-radius:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.app-phone-visual svg{width:72px;height:72px;color:var(--main-color);opacity:0.7;}


.app-cta{background:linear-gradient(135deg,#0d1b2a,#163457);color:#fff;position:relative;overflow:hidden}
.app-cta::before{content:"";position:absolute;width:600px;height:600px;left:-200px;top:-150px;background:radial-gradient(circle,rgba(0,102,255,0.4),transparent 65%);filter:blur(20px)}
.app-inner{display:grid;max-width:1200px;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:center;position:relative;z-index:2}
.app-cta .eyebrow{color:var(--main-color-cyan);font-size:28px;font-weight:700}.app-cta .eyebrow::before{background:var(--main-color-cyan);width:40px;height:3px}
.app-cta h2{font-size:clamp(34px,4.4vw,54px);font-weight:700;letter-spacing:-0.03em;line-height:1.18;margin-bottom:20px}
.app-cta .lead{font-size:20px;font-weight:400;color:#cdd8e6;margin-bottom:34px}
.store-row{display:flex;gap:14px;flex-wrap:wrap}
.store-btn{display:flex;align-items:center;gap:12px;background:#fff;color:#16181d;padding:14px 24px;border-radius:12px;text-decoration:none;transition:all .25s}
.store-btn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,0.4)}
.store-btn .si{width:26px;height:26px}
.store-btn .st{text-align:left;line-height:1.15}
.store-btn .st small{font-size:11px;color:#6b717c;display:block}
.store-btn .st b{font-size:16px;}
.phone-mock{position:relative;display:flex;justify-content:center;align-items:center;perspective:1400px}
.phone-mock::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
    background:radial-gradient(circle,rgba(0,140,255,0.45),rgba(0,102,255,0.12) 45%,transparent 70%);
    filter:blur(30px);z-index:0;animation:glowPulse 6s ease-in-out infinite}
.phone-shot{position:relative;z-index:1;width:auto;max-width:100%;height:auto;max-height:600px;display:block;
    transform:rotateY(-12deg) rotateX(4deg) rotateZ(-1deg);
    transform-style:preserve-3d;
    filter:drop-shadow(28px 40px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 1px rgba(255,255,255,0.25));
    animation:phoneFloat 6s ease-in-out infinite;
    transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.phone-shot:hover{transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1.03);animation-play-state:paused}

@keyframes glowPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

@media(max-width:980px){
    .phone-shot{transform:none;max-height:520px;animation:phoneFloatFlat 6s ease-in-out infinite}
    .phone-shot:hover{transform:scale(1.02)}
    .phone-mock::before{width:300px;height:300px}
    @keyframes phoneFloatFlat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
    .nav-menu{display:none}
    .hero-inner,.ai-engine,.control-inner,.app-inner{grid-template-columns:1fr;gap:48px}
    .app-inner{text-align:center;}
    .store-row {justify-content:center;}
    .hero-overlay{background:linear-gradient(95deg,rgba(7,16,28,0.95) 0%,rgba(7,16,28,0.82) 45%,rgba(7,16,28,0.5) 100%)}
    .feat-grid{grid-template-columns:1fr}
    .benefit-grid{grid-template-columns:1fr}
    .proc-track{grid-template-columns:1fr 1fr 1fr}
    .proc-track::before{display:none}
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
    .pain-card h3,.feat-card h3,.diff-text h3{font-size:18px;}
}

@media(max-width:560px){
    .store-row {justify-content: center;}
    .store-btn { padding: 10px 8px; }
    .app-inner {text-align:center;}
}