:root{
    --bg:#050507;
    --bg-soft:#0b0910;
    --panel:#120d14;
    --panel-2:#19111c;
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,59,82,.34);
    --text:#f6f3f5;
    --muted:#bcb1b8;
    --red:#ff314d;
    --red-2:#9f0018;
    --red-3:#ff6b7f;
    --white:#ffffff;
    --radius:28px;
    --radius-lg:38px;
    --shadow:0 26px 70px rgba(0,0,0,.45);
    --glow:0 0 30px rgba(255,49,77,.18);
    --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    color:var(--text);
    font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    background:
        radial-gradient(circle at 15% 12%, rgba(255,49,77,.16), transparent 18%),
        radial-gradient(circle at 82% 18%, rgba(160,0,24,.18), transparent 20%),
        radial-gradient(circle at 50% 65%, rgba(255,49,77,.08), transparent 26%),
        linear-gradient(180deg, #070609 0%, #050507 100%);
    min-height:100vh;
    overflow-x:hidden;
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.65;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.035), transparent 18%),
        radial-gradient(circle at 80% 80%, rgba(255,49,77,.06), transparent 16%),
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,.015) 22%, transparent 46%, rgba(255,49,77,.02) 62%, transparent 86%);
    mix-blend-mode:screen;
}
body::after{
    content:"";
    position:fixed;
    inset:-5%;
    pointer-events:none;
    opacity:.16;
    filter:blur(56px);
    background:
        radial-gradient(circle at 24% 28%, rgba(255,49,77,.55), transparent 18%),
        radial-gradient(circle at 76% 18%, rgba(160,0,24,.45), transparent 17%),
        radial-gradient(circle at 68% 72%, rgba(255,49,77,.3), transparent 18%);
    animation:floatSmoke 18s ease-in-out infinite alternate;
}
@keyframes floatSmoke{
    from{transform:translate3d(-1%, 0, 0) scale(1)}
    to{transform:translate3d(1.5%, -1%, 0) scale(1.04)}
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
.container{width:min(var(--max), calc(100% - 30px));margin:0 auto}
.site-header{
    position:fixed;
    inset:0 0 auto 0;
    z-index:40;
    height:88px;
    background:rgba(7,6,9,.72);
    border-bottom:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(16px);
}
.site-header::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,49,77,.65), transparent);
}

body.nav-spotlight .site-header{box-shadow:0 22px 60px rgba(0,0,0,.45),0 0 38px rgba(255,49,77,.18)}
body.nav-spotlight .nav a.active::after,body.nav-spotlight .nav a::after{transform:scaleX(1)}
.header-inner{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand img{width:62px;height:62px}
.brand-copy{display:flex;flex-direction:column;gap:1px}
.brand-title,.heading-xl,.heading-lg,.heading-md,.heading-sm{
    margin:0;
    font-family:"Bebas Neue","Arial Narrow",Arial,sans-serif;
    text-transform:uppercase;
    font-style:italic;
    letter-spacing:.05em;
    line-height:.94;
}
.brand-title{font-size:2rem}
.brand-subtitle{
    color:var(--red-3);
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.32em;
    font-weight:800;
}
.nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}
.nav a{
    position:relative;
    padding:12px 14px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.92rem;
}
.nav a::after{
    content:"";
    position:absolute;
    left:12px;right:12px;bottom:7px;height:2px;
    background:linear-gradient(90deg, transparent, var(--red), transparent);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .25s ease;
}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:10px}
.lang-switch{
    display:flex;align-items:center;gap:8px;
    padding:6px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    border-radius:999px;
    box-shadow:var(--glow);
}
.lang-switch a{
    width:38px;height:38px;border-radius:999px;
    display:grid;place-items:center;
    background:transparent;
    transition:background .25s ease, transform .25s ease;
}
.lang-switch img{width:20px;height:20px;border-radius:999px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.lang-switch a.active,.lang-switch a:hover{background:rgba(255,49,77,.14);transform:translateY(-1px)}
.mobile-toggle{display:inline-flex;min-width:52px;padding:0 16px}

.header-menu-wrap{position:relative}
.desktop-quick-menu{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    min-width:260px;
    display:none;
    padding:14px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(9,8,12,.98);
    box-shadow:var(--shadow), var(--glow);
    z-index:45;
}

.desktop-quick-menu.open{
    display:grid;
    gap:8px;
}

.desktop-quick-menu a{
    display:block;
    padding:13px 15px;
    border-radius:14px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.88rem;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
    transition:background .22s ease, border-color .22s ease, transform .22s ease;
}

.desktop-quick-menu a:hover,
.desktop-quick-menu a.active{
    background:rgba(255,49,77,.14);
    border-color:rgba(255,49,77,.28);
    transform:translateY(-1px);
}


.hero{
    position:relative;
    overflow:hidden;
    padding:140px 0 40px;
}
.hero-media{
    position:absolute;inset:0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,49,77,.18), transparent 22%),
        radial-gradient(circle at 80% 12%, rgba(120,0,24,.18), transparent 19%),
        linear-gradient(135deg, rgba(255,255,255,.04), transparent 18%, rgba(255,49,77,.05) 48%, transparent 64%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 140px),
        linear-gradient(180deg, rgba(10,8,12,.68), rgba(8,7,10,.94));
    mask-image:linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,.94), rgba(0,0,0,.7), transparent 100%);
}
.hero-inner{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 330px;
    gap:24px;
    align-items:end;
}
.hero-copy{
    min-height:520px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--red-3);
    text-transform:uppercase;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.25em;
    margin-bottom:12px;
}
.eyebrow::before,.eyebrow::after{
    content:"";
    width:18px;height:2px;
    background:linear-gradient(90deg, transparent, var(--red), transparent);
}
.heading-xl{font-size:clamp(3.4rem, 7vw, 7rem)}
.heading-lg{font-size:clamp(2.4rem, 4.3vw, 4.2rem)}
.heading-md{font-size:clamp(1.9rem, 2.6vw, 2.8rem)}
.heading-sm{font-size:clamp(1.35rem, 1.9vw, 1.85rem)}
.glow-text{text-shadow:0 0 24px rgba(255,49,77,.28)}
.hero-text,.page-intro{
    max-width:820px;
    margin:12px 0 0;
    color:#f2dee1;
    font-size:clamp(1rem, 1.4vw, 1.14rem);
    line-height:1.75;
}
.hero-tagline{
    margin-top:18px;
    font-size:.86rem;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:#fff2f4;
}
.hero-pills{
    display:flex;flex-wrap:wrap;gap:12px;
    margin-top:28px;
}
.pill{
    padding:12px 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    box-shadow:var(--glow);
    color:#f3e8ea;
}
.hero-actions,.cta-actions{
    display:flex;flex-wrap:wrap;gap:12px;
    margin-top:28px;
}
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:52px;
    padding:0 22px;
    border-radius:18px;
    border:1px solid rgba(255,49,77,.32);
    background:linear-gradient(180deg, rgba(255,64,90,.24), rgba(122,0,22,.85));
    color:var(--white);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.1em;
    box-shadow:var(--shadow), var(--glow);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    cursor:pointer;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 28px 64px rgba(0,0,0,.5),0 0 36px rgba(255,49,77,.24)}
.btn-secondary{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border-color:rgba(255,255,255,.12);
}
.btn-ghost{
    background:transparent;
    border-color:rgba(255,255,255,.14);
}
.btn.full{width:100%}

.panel{
    position:relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 18%),
        linear-gradient(135deg, rgba(255,52,78,.08), rgba(17,12,18,.92) 34%, rgba(10,10,14,.98));
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow), var(--glow);
    overflow:hidden;
}
.panel::after{
    content:"";
    position:absolute;inset:0;
    pointer-events:none;
    background:
        linear-gradient(135deg, rgba(255,255,255,.05), transparent 26%),
        radial-gradient(circle at 100% 0, rgba(255,49,77,.13), transparent 22%);
}
.panel-inner{position:relative;z-index:1;padding:24px}
.hero-side{align-self:center}
.hero-card-label{
    color:var(--red-3);
    text-transform:uppercase;
    font-size:.82rem;
    letter-spacing:.28em;
    font-weight:800;
}
.hero-stacked{
    display:grid;gap:14px;
    margin:18px 0 20px;
}
.hero-stat{
    display:flex;justify-content:space-between;gap:14px;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
}
.hero-stat span{color:var(--muted)}
.hero-stat strong{font-size:1.04rem}

.section{padding:22px 0}
.section-head{
    display:flex;align-items:end;justify-content:space-between;gap:16px;
    margin-bottom:18px;
}
.grid{display:grid;gap:18px}
.cards-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.cards-4{grid-template-columns:repeat(4, minmax(0,1fr))}
.compact-grid .panel-inner{padding:20px}
.service-card h3,.service-card-lg h2,.price-card .price-name,.workflow-card h3,.compare-card h3{margin-bottom:10px}
.muted{color:var(--muted);line-height:1.72}
.why-icon{
    font-size:1.5rem;color:var(--red-3);margin-bottom:10px
}
.compare-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px;
}
.compare-badge{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:.74rem;
    font-weight:800;
    margin-bottom:12px;
}
.compare-badge.final{
    background:rgba(255,49,77,.16);
    border-color:rgba(255,49,77,.32);
}
.visual{
    margin-top:18px;height:200px;border-radius:22px;
    border:1px solid rgba(255,255,255,.06);
    overflow:hidden;
}
.visual-raw{
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
        linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        radial-gradient(circle at 22% 24%, rgba(255,255,255,.08), transparent 15%),
        linear-gradient(180deg, #141217, #0d0c12);
    filter:saturate(.4) contrast(.85);
}
.visual-final{
    background:
        linear-gradient(120deg, rgba(255,49,77,.16), transparent 28%, rgba(255,255,255,.04) 52%, transparent 74%),
        radial-gradient(circle at 22% 24%, rgba(255,49,77,.2), transparent 15%),
        radial-gradient(circle at 82% 72%, rgba(255,49,77,.18), transparent 18%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
        linear-gradient(180deg, #171018, #0e0c11);
    box-shadow:inset 0 0 34px rgba(255,49,77,.18);
}
.price-name{
    font-size:.94rem;
    color:var(--red-3);
    text-transform:uppercase;
    letter-spacing:.24em;
    font-weight:800;
}
.price-value{
    margin:12px 0;
    font-family:"Bebas Neue","Arial Narrow",Arial,sans-serif;
    font-size:clamp(2.2rem, 4vw, 3.2rem);
    letter-spacing:.05em;
}
.workflow-step{
    width:56px;height:56px;border-radius:18px;
    display:grid;place-items:center;
    font-weight:900;
    color:#fff;
    background:linear-gradient(180deg, rgba(255,49,77,.24), rgba(90,0,16,.82));
    border:1px solid rgba(255,49,77,.3);
    margin-bottom:14px;
}
.page-hero{
    padding:136px 0 8px;
}
.site-footer{
    padding:36px 0 46px;
}
.footer-inner{
    display:flex;justify-content:space-between;gap:18px;align-items:end;
    border-top:1px solid rgba(255,255,255,.06);
    padding-top:24px;
}
.footer-title{
    text-transform:uppercase;
    letter-spacing:.18em;
    font-weight:800;
    color:#f3e8ea;
}
.footer-copy{color:var(--muted);max-width:700px}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 18px;text-transform:uppercase;letter-spacing:.1em;font-size:.88rem}
.cta-panel{margin:8px 0 24px}
.cta-inner{
    display:flex;justify-content:space-between;gap:18px;align-items:center;
}
.founder-grid{
    display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px;margin-top:18px
}
.founder-card{
    padding:18px;border-radius:20px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    display:flex;flex-direction:column;gap:6px
}
.founder-card span{color:var(--muted)}
.service-page-grid .panel-inner{min-height:220px}
.service-line{
    width:90px;height:3px;border-radius:999px;
    background:linear-gradient(90deg, var(--red), transparent);
    margin-bottom:14px;
}
.site-form{display:grid;gap:18px}
.form-grid{
    display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px
}
label{display:grid;gap:8px}
label span{font-size:.88rem;text-transform:uppercase;letter-spacing:.12em;color:#f0dde0;font-weight:700}
input,textarea,select{
    width:100%;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    color:var(--text);
    border-radius:18px;
    padding:15px 16px;
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
input:focus,textarea:focus,select:focus{
    border-color:rgba(255,49,77,.34);
    box-shadow:0 0 0 4px rgba(255,49,77,.08);
    transform:translateY(-1px);
}
textarea{resize:vertical;min-height:160px}
.full-width{grid-column:1 / -1}
.contact-stack{display:grid;gap:20px}
.contact-item{
    display:grid;gap:8px;
    padding:18px;border-radius:20px;
    border:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.03);
}
.contact-item span{
    color:var(--red-3);
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:.78rem;
    font-weight:800;
}
.contact-item strong{font-size:1rem}
.flash{
    border-radius:18px;
    padding:16px 18px;
    margin-bottom:16px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
}
.flash-success{border-color:rgba(0,220,150,.28);background:rgba(0,220,150,.08)}
.flash-warning{border-color:rgba(255,180,0,.28);background:rgba(255,180,0,.08)}
.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
    opacity:1;
    transform:none;
}

@media(max-width:1080px){
    .desktop-quick-menu{display:none !important}
    .nav{
        position:fixed;
        top:88px;
        left:15px;right:15px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        background:rgba(9,8,12,.97);
        border:1px solid rgba(255,255,255,.08);
        border-radius:24px;
        padding:14px;
        box-shadow:var(--shadow);
    }
    .nav.open{display:flex}
    .mobile-toggle{display:inline-flex}
    .hero-inner{grid-template-columns:1fr}
    .hero-copy{min-height:unset;padding-top:30px}
    .cards-4{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media(max-width:760px){
    .cards-2,.cards-3,.cards-4,.compare-grid,.form-grid,.founder-grid{grid-template-columns:1fr}
    .section-head,.cta-inner,.footer-inner{flex-direction:column;align-items:flex-start}
    .hero{padding-top:122px}
    .brand-copy{display:none}
    .brand img{width:56px;height:56px}
    .hero-actions,.cta-actions{width:100%}
    .hero-actions .btn,.cta-actions .btn{width:100%}
    .lang-switch a{width:34px;height:34px}
}
