:root{
    --bg: #0b0c10;
    --card: rgba(234, 24, 24, 0.48);
    --glass: rgba(255,255,255,.08);
    --text: #e8e8e8;
    --muted:#b8b8c2;
    --accent:#7c5cff;
    --accent-2:#00e6a7;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius: 16px;
    --tr: .25s ease;
}
@media (prefers-color-scheme: light){
    :root{
        --bg: #f7f7fb;
        --card: rgba(0,0,0,.04);
        --glass: rgba(255,255,255,.8);
        --text: #141414;
        --muted:#52525b;
        --shadow: 0 8px 24px rgba(0,0,0,.10);
    }
}

html{scroll-behavior:smooth;}
body{
    margin:0; background: radial-gradient(1200px 800px at 20% -10%, rgba(124,92,255,.25), transparent 60%),
radial-gradient(1000px 700px at 120% 20%, rgba(0,230,167,.18), transparent 55%),
var(--bg);
    color:var(--text); font: 500 16px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.site-header{
    position:sticky; top:0; z-index:1000;
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--glass) 70%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    transition: background var(--tr), border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.site-header.scrolled{
    background: color-mix(in srgb, var(--glass) 88%, transparent);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--text) 16%, transparent);
}

.nav-wrap{
    max-width: 1200px; margin-inline:auto; padding: 14px 20px;
    display:flex; align-items:center; gap:16px;
}
.brand{
    display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text);
}
.brand-badge{
    width:38px;height:38px;border-radius:12px;
    background:
            conic-gradient(from 210deg at 50% 50%, var(--accent), var(--accent-2), var(--accent));
    box-shadow: 0 8px 22px rgba(124,92,255,.35), inset 0 0 0 2px rgba(255,255,255,.25);
}
.brand-name{ font-weight:800; letter-spacing:.2px; font-size:18px; }

nav{ margin-left:auto; }
.nav{
    display:flex; align-items:center; gap:6px;
    background: var(--card); padding:6px; border-radius: 999px; border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.nav a{
    --pad: 12px;
    position:relative; display:inline-flex; align-items:center; gap:8px;
    padding:10px var(--pad); border-radius:999px; text-decoration:none; color:var(--text);
    font-weight:600; letter-spacing:.2px; transition: color var(--tr), background var(--tr), transform var(--tr);
}
.nav a .dot{
    width:6px;height:6px;border-radius:50%;
    background: transparent; transition: background var(--tr), transform var(--tr);
}
.nav a::after{
    content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
    transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius:2px;
}
.nav a:hover{ transform: translateY(-1px); }
.nav a:hover::after{ transform: scaleX(1); }
.nav a.active{
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--text);
}
.nav a.active .dot{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scale(1.2); }

.burger{
    display:none; margin-left:auto; width:44px;height:44px;border-radius:12px;border:1px solid color-mix(in srgb, var(--text) 16%, transparent);
    background: var(--card); align-items:center; justify-content:center; cursor:pointer;
    transition: transform var(--tr), background var(--tr);
}
.burger span, .burger::before, .burger::after{
    content:""; display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition: transform var(--tr), opacity var(--tr);
}
.burger span{ transform: translateY(0); }
.burger::before{ transform: translateY(-6px); }
.burger::after{ transform: translateY(6px); }

.burger.open span{ opacity:0; }
.burger.open::before{ transform: translateY(0) rotate(45deg); }
.burger.open::after{ transform: translateY(0) rotate(-45deg); }

@media (max-width: 880px){
    nav{ display:none; }
    nav.open{ display:block; position:absolute; left:12px; right:12px; top:68px; }
    .nav{
        flex-direction:column; align-items:stretch; gap:8px;
        padding:10px; border-radius:16px;
        background: color-mix(in srgb, var(--glass) 92%, transparent);
    }
    .nav a{ padding:12px 14px; }
    .burger{ display:flex; }
}

.hero{
    position: relative;
    min-height: 92vh;
    display: grid;
    place-items: center;
    padding: 20px 20px 80px;
    isolation: isolate;
    overflow: clip;
}
.hero-inner{
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 36px;
    align-items: center;
}
@media (max-width: 980px){
    .hero-inner{ grid-template-columns: 1fr; gap: 28px; }
}

.blob{
    position:absolute; filter: blur(50px); opacity:.6; pointer-events:none; z-index:-2;
    background: radial-gradient(closest-side, rgba(124,92,255,.45), transparent 70%);
}
.blob.b1{ width: 460px; height: 460px; top: -120px; left: -80px; }
.blob.b2{ width: 520px; height: 520px; bottom: -140px; right: -120px;
    background: radial-gradient(closest-side, rgba(0,230,167,.38), transparent 70%);
}

.grid-bg{
    position:absolute; inset:-10% -5% -5% -10%;
    background-image:
            linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(80% 60% at 50% 35%, #000 60%, transparent 100%);
    z-index:-1; opacity:.5;
}

.hero-left h1{
    font-size: clamp(32px, 5vw, 60px);
    line-height: 1.05; margin: 10px 0 12px;
    letter-spacing: .2px;
}
.hero-left .grad{
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.underline{
    position:relative;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.underline::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    filter: blur(6px); opacity:.55; border-radius:4px;
}

.subtitle{ color: var(--muted); max-width: 56ch; }

.hello-chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:999px;
    border:1px solid color-mix(in srgb, var(--text) 14%, transparent);
    background: color-mix(in srgb, var(--glass) 92%, transparent);
    font-weight:600; letter-spacing:.2px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

.service-chips{ margin:18px 0 6px; display:flex; gap:10px; flex-wrap:wrap; }
.chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 12px; border-radius:12px;
    background: var(--card);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
    font-weight:600;
}
.chip svg{ width:18px; height:18px; fill: currentColor; opacity:.9; }

.cta{ margin:18px 0 10px; display:flex; gap:12px; flex-wrap:wrap; }
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700;
    border:1px solid transparent; transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn.primary{
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: #0b0c10;
}
.btn.primary:hover{ transform: translateY(-2px); }
.btn.ghost{
    background: color-mix(in srgb, var(--glass) 88%, transparent);
    border-color: color-mix(in srgb, var(--text) 18%, transparent);
    color: var(--text);
}
.btn.ghost:hover{ transform: translateY(-2px); }

.trust{
    margin-top: 16px;
    display:flex; gap:16px; flex-wrap:wrap;
}
.kpi{
    min-width:180px;
    padding:12px 14px; border-radius:14px;
    background: color-mix(in srgb, var(--glass) 90%, transparent);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
    display:flex; flex-direction:column; gap:2px;
}
.kpi strong{ font-size:22px; }
.kpi span{ color:var(--muted); font-size:13px; }

.hero-right{
    position: relative; min-height: 420px;
    display:grid; place-items:center;
}
.glass.card{
    width: min(420px, 92%); border-radius: 20px;
    padding: 16px 16px 8px; backdrop-filter: blur(16px);
    background: color-mix(in srgb, var(--glass) 92%, transparent);
    border:1px solid color-mix(in srgb, var(--text) 14%, transparent);
    box-shadow: var(--shadow);
    transform: translateY(0);
    animation: float 6s ease-in-out infinite;
}
.glass.card.delay{ animation-delay: 1.2s; margin-top: 18px; }
.card-head{
    display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.3px;
    padding-bottom:8px; border-bottom:1px dashed color-mix(in srgb, var(--text) 18%, transparent);
}
.card-head .dot{
    width:10px; height:10px; border-radius:50%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 18px rgba(124,92,255,.6);
}
.card-head .dot.alt{
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    box-shadow: 0 0 18px rgba(0,230,167,.5);
}
.card-body ul{ margin:12px 4px 6px; padding-left: 18px; }
.card-body li{ margin:8px 0; }

.floating-badge{
    position:absolute; right: -6px; top: -6px;
    transform: rotate(3deg);
    background: #0b0c10; color: #e8e8e8;
    padding:10px 14px; border-radius: 999px;
    border:1px solid color-mix(in srgb, var(--text) 20%, transparent);
    box-shadow: 0 12px 24px rgba(0,0,0,.3);
    font-weight:800; letter-spacing:.2px; font-size:14px;
}

@keyframes float{
    0%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
    100%{ transform: translateY(0); }
}

.card-tilt{
    transform-style: preserve-3d;
    transition: transform .2s ease;
    will-change: transform;
}
.card-tilt:hover{ transform: rotateX(6deg) rotateY(-6deg) translateY(-2px); }

@media (max-width: 980px){
    .hero{ padding-top: 110px; }
    .hero-right{ min-height: auto; }
    .floating-badge{ right: 6px; top: -10px; transform: none; }
}
.about{
    padding: 100px 20px;
    background: var(--bg);
    color: var(--text);
}
.about-inner{
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
@media(max-width: 900px){
    .about-inner{ grid-template-columns: 1fr; }
}

.about-image{
    position: relative;
    display: flex; justify-content:center; align-items:center;
}
.about-image img{
    width: 100%; max-width: 380px;
    border-radius: 20px;
    z-index: 2;
    position: relative;
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.shape-bg{
    position:absolute;
    width: 420px; height: 420px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: 50%;
    filter: blur(80px);
    z-index:1;
}

.about-content h2{
    font-size: 36px;
    margin-bottom: 20px;
}
.about-content p{
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 16px;
}
.highlight{
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip:text;
    color:transparent;
    font-weight:700;
}

.stats{
    display:flex; gap: 20px; margin: 28px 0;
    flex-wrap:wrap;
}
.stat{
    flex:1; min-width:140px;
    background: var(--card);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 16px;
    padding: 16px;
    text-align:center;
}
.stat strong{ font-size: 26px; display:block; margin-bottom: 6px; }
.stat span{ font-size: 14px; color: var(--muted); }

.skills{ display:flex; flex-direction:column; gap:16px; }
.skill span{ font-weight:600; font-size:14px; display:block; margin-bottom:6px; }
.bar{
    background: var(--card);
    border-radius: 999px;
    overflow:hidden;
    height: 10px;
}
.bar div{
    height:100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius:999px;
}
.services{
    position: relative;
    padding: 100px 20px;
}
.services-bg{
    position:absolute; inset:0;
    background:
            radial-gradient(800px 500px at 15% 10%, rgba(124,92,255,.15), transparent 60%),
            radial-gradient(700px 500px at 85% 80%, rgba(0,230,167,.12), transparent 55%);
    pointer-events:none; z-index:-1;
}
.services-inner{ max-width:1200px; margin:auto; }
.services-head{ text-align:center; margin-bottom:24px; }
.services-head h2{ font-size: clamp(28px, 4vw, 40px); margin:0 0 8px; }
.services-head p{ color:var(--muted); margin:0 0 14px; }

.tabs{
    display:inline-flex; gap:8px;
    background: var(--card);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
    padding:6px; border-radius:999px;
}
.tab{
    padding:10px 14px; border-radius:999px; border:0; cursor:pointer;
    background: transparent; color: var(--text); font-weight:700;
}
.tab.active{ background: color-mix(in srgb, var(--accent) 14%, transparent); }

.panel{ margin-top: 26px; }
.panel.show{ display:block; }
.panel[hidden]{ display:none; }

.cards{
    display:grid; gap:18px;
    grid-template-columns: repeat(2, minmax(0,2fr));
}
@media (max-width: 1024px){ .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px){ .cards{ grid-template-columns: 1fr; } }

.card{
    position:relative;
    border-radius:20px;
    background: color-mix(in srgb, var(--glass) 92%, transparent);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
    padding:18px 16px 14px;
    box-shadow: var(--shadow);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
    overflow:hidden;
}
.card::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
    transform: translateX(-100%); transition: transform .6s ease;
}
.card:hover{ transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.card:hover::after{ transform: translateX(100%); }

.card-top{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.card-top .icon{
    width:44px;height:44px;border-radius:12px; display:grid;place-items:center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#0b0c10;
    box-shadow: 0 10px 20px rgba(124,92,255,.35);
}
.card-top svg{ width:22px;height:22px; }
.card h3{ margin:0; font-size: 18px; }

.card p{ color:var(--muted); margin:6px 2px 8px; }
.bullets{ padding-left:18px; margin: 0 2px 10px; }
.bullets li{ margin:6px 0; }

.card-cta{ display:flex; justify-content:flex-end; }
.btn.tiny{
    padding:8px 12px; border-radius:10px; font-weight:800; font-size:13px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color:#0b0c10; text-decoration:none; border:1px solid transparent;
}

.stack{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 12px; border-radius:999px; font-weight:700;
    background: var(--card);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.badge.ghost{ opacity:.8; }
.stack-notes{
    display:grid; gap:10px; margin-top:16px;
    max-width:860px; margin-inline:auto;
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){ .stack-notes{ grid-template-columns: 1fr; } }
.note{
    padding:12px 14px; border-radius:14px;
    background: color-mix(in srgb, var(--glass) 92%, transparent);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.timeline{
    list-style:none; padding:0; margin:0; max-width:900px; margin-inline:auto;
}
.timeline li{ position:relative; padding:16px 14px 16px 46px; border-left:2px dashed color-mix(in srgb, var(--text) 18%, transparent); }
.timeline li::before{
    content:""; position:absolute; left:-7px; top:22px; width:12px; height:12px; border-radius:50%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 12px rgba(124,92,255,.6);
}
.timeline h4{ margin:0 0 6px; }
.timeline p{ margin:0; color:var(--muted); }

.reveal{ opacity:0; transform: translateY(14px); }
.reveal.in{ opacity:1; transform:none; transition: all .5s ease; }
.contact{ padding: 100px 20px; position: relative; }
.contact-inner{ max-width: 1200px; margin: auto; }
.contact-head{ text-align:center; margin-bottom: 24px; }
.contact-head h2{ font-size: clamp(28px, 4vw, 40px); margin:0 0 8px; }
.contact-head p{ color: var(--muted); margin:0; }

.contact-grid{
    display: grid; gap: 20px;
    grid-template-columns: .9fr 1.1fr;
}
@media (max-width: 980px){ .contact-grid{ grid-template-columns: 1fr; } }

.glass{
    background: color-mix(in srgb, var(--glass) 92%, transparent);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 20px; box-shadow: var(--shadow);
}
.contact-card{ padding: 20px; }
.contact-card h3{ margin: 0 0 10px; }
.contact-list{ list-style:none; padding:0; margin: 0 0 12px; display:grid; gap:10px; }
.contact-list li{ display:flex; align-items:center; gap:10px; }
.contact-list a{ color: var(--text); text-decoration: none; border-bottom: 1px dashed transparent; }
.contact-list a:hover{ border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.contact-badges{ display:flex; gap:8px; flex-wrap: wrap; margin-top: 6px; }
.contact-badges .badge{
    padding:8px 10px; border-radius:999px; background: var(--card);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent); font-weight:700;
}

.contact-form{ padding: 20px; }
.row{ display:grid; gap:14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px){ .row{ grid-template-columns: 1fr; } }

.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:700; }
.field input, .field select, .field textarea{
    background: var(--card); color: var(--text);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 12px; padding: 12px 12px; outline: none;
    transition: border-color .2s ease, background .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.field .err{ color: #ff6b6b; min-height: 16px; font-size: 12px; }

.form-actions{ display:flex; align-items:center; gap:16px; margin-top: 6px; flex-wrap: wrap; }
.status{ margin:0; color: var(--muted); }
.btn .spinner{
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.6); border-top-color: transparent;
    display:none; margin-left:8px; animation: spin 1s linear infinite;
}
.btn.loading .spinner{ display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.site-footer{
    margin-top: 40px;
    position: relative;
    background: color-mix(in srgb, var(--glass) 88%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    backdrop-filter: blur(10px);
}
.footer-inner{
    max-width: 1200px; margin: auto;
    padding: 36px 20px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr;
    gap: 26px;
}
@media (max-width: 980px){
    .footer-inner{ grid-template-columns: 1fr; }
}
.brand.mini .brand-badge{ width:32px;height:32px;border-radius:10px; }
.brand.mini .brand-name{ font-size: 16px; }

.f-desc{ color: var(--muted); margin: 8px 0 12px; max-width: 48ch; }
.f-social{ display:flex; gap:10px; }
.f-social a{
    width:38px;height:38px; display:grid; place-items:center;
    background: var(--card);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 12px; color: var(--text); text-decoration: none;
    transition: transform .2s ease, border-color .2s ease;
}
.f-social a:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

.f-col h4{ margin:4px 0 10px; font-size: 16px; }
.f-links{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.f-links a{
    color: var(--text); text-decoration:none; border-bottom: 1px dashed transparent;
}
.f-links a:hover{ border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.f-links .dot{
    display:inline-block; width:8px; height:8px; border-radius:50%;
    margin-right:8px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 10px rgba(124,92,255,.5);
}
.f-contact{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 10px; }
.f-contact a{
    padding:8px 10px; border-radius: 999px;
    background: var(--card);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
    text-decoration:none; color: var(--text); font-weight:600;
}

.f-bottom{
    border-top: 1px dashed color-mix(in srgb, var(--text) 14%, transparent);
    padding: 12px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    max-width: 1200px; margin: 0 auto;
}
.to-top{
    width:40px; height:40px; border-radius:12px; cursor:pointer;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border:0; color:#0b0c10; font-weight:900;
    transition: transform .2s ease;
}
.to-top:hover{ transform: translateY(-2px); }