:root{
    --front-bg:#020613;
    --front-surface:rgba(9,20,38,.64);
    --front-surface-strong:rgba(18,52,85,.72);
    --front-line:rgba(0,231,255,.22);
    --front-text:#f6fbff;
    --front-muted:#9eb6ce;
    --front-accent:#00e7ff;
    --front-blue:#168cff;
    --front-hot:#256dff;
    --front-gold:#f4fbff;
    --front-violet:#5bbcff;
    --front-shadow:0 24px 80px rgba(0,18,46,.55);
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100%;
    background:
        radial-gradient(circle at 10% 15%, rgba(0,231,255,.18), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(22,140,255,.18), transparent 28%),
        radial-gradient(circle at 52% 85%, rgba(244,251,255,.08), transparent 32%),
        var(--front-bg);
    color:var(--front-text);
}

body.menu-open{
    overflow:hidden;
}

body::before{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-2;
    background:
        linear-gradient(rgba(0,231,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,231,255,.04) 1px, transparent 1px);
    background-size:54px 54px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.16));
}

.bg-grid{
    opacity:.45;
}

.container{
    width:min(1180px, calc(100% - 40px));
    max-width:1180px;
    padding:0;
}

.site-header,
header{
    padding:14px 0;
    background:rgba(5,6,7,.74);
    border-bottom:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
}

.site-header .container,
header .container,
.nav-shell{
    min-height:54px;
}

.logo,
.brand-mark{
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.brand-logo{
    width:46px;
    height:46px;
    flex:0 0 46px;
    object-fit:contain;
    border:1px solid rgba(0,231,255,.32);
    border-radius:12px;
    padding:2px;
    background:#020613;
    box-shadow:0 0 22px rgba(0,231,255,.24);
}

.logo h1,
.brand-mark strong{
    margin:0;
    font-family:'Orbitron', sans-serif;
    font-size:1.55rem;
    letter-spacing:0;
    color:var(--front-text);
    background:none;
    -webkit-text-fill-color:currentColor;
    text-shadow:none;
    white-space:nowrap;
}

.brand-mark span,
.logo span{
    color:var(--front-accent);
    font-size:.82rem;
    font-weight:700;
    text-transform:uppercase;
}

nav.desktop ul{
    gap:8px;
}

nav.desktop a{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 14px;
    border:1px solid transparent;
    border-radius:999px;
    color:#dfe6ec;
    font-size:.96rem;
    letter-spacing:0;
}

nav.desktop a:hover,
nav.desktop a.is-active{
    color:var(--front-bg) !important;
    background:linear-gradient(135deg, var(--front-accent), var(--front-blue) 56%, var(--front-gold));
    border-color:rgba(0,231,255,.36);
    text-shadow:none;
}

nav.desktop a::after{
    display:none;
}

.menu-btn{
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    display:none;
    place-items:center;
    background:rgba(255,255,255,.07);
    color:var(--front-text);
    cursor:pointer;
    position:relative;
    z-index:1200;
}

.menu-btn span,
.menu-btn::before,
.menu-btn::after{
    content:'';
    width:19px;
    height:2px;
    border-radius:4px;
    background:currentColor;
    position:absolute;
    transition:transform .25s ease, opacity .25s ease;
}

.menu-btn span{
    top:21px;
}

.menu-btn::before{
    top:15px;
}

.menu-btn::after{
    top:27px;
}

.menu-btn i{
    display:none;
}

.menu-btn.active::before{
    transform:translateY(6px) rotate(45deg);
}

.menu-btn.active span{
    opacity:0;
}

.menu-btn.active::after{
    transform:translateY(-6px) rotate(-45deg);
}

.mobile{
    position:fixed;
    top:0;
    right:0;
    width:min(86vw, 360px);
    height:100vh;
    display:block;
    padding:96px 22px 26px;
    background:linear-gradient(180deg, rgba(13,17,20,.98), rgba(5,6,7,.96));
    border-left:1px solid rgba(255,255,255,.16);
    box-shadow:-28px 0 80px rgba(0,0,0,.55);
    transform:translateX(104%);
    transition:transform .35s cubic-bezier(.22,.72,.18,1);
    z-index:1100;
    overflow-y:auto;
}

.mobile.active{
    right:0;
    transform:translateX(0);
}

.mobile ul{
    list-style:none;
    display:grid;
    gap:10px;
    padding:0;
    margin:0;
}

.mobile a{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:14px;
    color:var(--front-text);
    text-decoration:none;
    font-family:'Orbitron', sans-serif;
    font-size:.98rem;
    letter-spacing:0;
    background:rgba(255,255,255,.045);
}

.mobile a::after{
    content:'>';
    color:var(--front-accent);
}

.mobile a:hover,
.mobile a.is-active{
    color:var(--front-bg) !important;
    background:linear-gradient(135deg, var(--front-accent), var(--front-blue) 56%, var(--front-gold));
}

.mobile a:hover::after,
.mobile a.is-active::after{
    color:var(--front-bg);
}

.overlay-menu{
    position:fixed;
    inset:0;
    z-index:1000;
    display:block;
    opacity:0;
    pointer-events:none;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:opacity .25s ease;
}

.overlay-menu.active{
    opacity:1;
    pointer-events:auto;
}

.section-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--front-accent);
    font-weight:800;
    text-transform:uppercase;
    font-size:.9rem;
}

.section-kicker::before{
    content:'';
    width:30px;
    height:2px;
    border-radius:10px;
    background:var(--front-accent);
}

.hero-cinematic{
    min-height:100vh;
    padding:136px 0 78px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:transparent !important;
}

.hero-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(360px, 520px);
    gap:44px;
    align-items:center;
    position:relative;
    z-index:3;
}

.hero-copy h1,
.portfolio-hero h1,
.ceo-hero h1{
    margin:16px 0 20px;
    font-family:'Orbitron', sans-serif;
    font-size:clamp(2.6rem, 7vw, 6.4rem);
    line-height:.96;
    letter-spacing:0;
    color:var(--front-text);
    text-transform:uppercase;
}

.hero-copy h1 span,
.portfolio-hero h1 span,
.ceo-hero h1 span{
    color:var(--front-accent);
    text-shadow:0 0 36px rgba(0,231,255,.42);
}

.hero-copy p,
.portfolio-hero p,
.ceo-hero p{
    max-width:660px;
    color:#c8d1dc;
    font-size:1.22rem;
    line-height:1.7;
}

.hero-actions,
.cta-row{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:32px;
}

.btn-neo,
.btn-chamada button.orcamento,
.btn-live{
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 22px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:16px;
    background:linear-gradient(135deg, var(--front-accent), var(--front-blue) 58%, var(--front-gold));
    color:#020613;
    font-family:'Orbitron', sans-serif;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 18px 38px rgba(0,231,255,.2);
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.btn-neo:hover,
.btn-chamada button.orcamento:hover,
.btn-live:hover{
    transform:translateY(-3px);
    filter:brightness(1.04);
    box-shadow:0 22px 48px rgba(0,136,255,.24);
}

.btn-ghost{
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 20px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:16px;
    color:var(--front-text);
    text-decoration:none;
    background:rgba(255,255,255,.06);
}

.hero-metrics{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    margin-top:34px;
    max-width:660px;
}

.metric-pill{
    padding:15px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    background:rgba(255,255,255,.055);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.metric-pill strong{
    display:block;
    font-family:'Orbitron', sans-serif;
    font-size:1.45rem;
    color:var(--front-text);
}

.metric-pill span{
    display:block;
    margin-top:4px;
    color:var(--front-muted);
    font-size:.95rem;
}

#globe-canvas-container{
    position:absolute;
    inset:0;
    z-index:1;
    opacity:.55;
}

.hero-orbit{
    min-height:520px;
    position:relative;
    perspective:1200px;
}

.orbit-core{
    position:absolute;
    inset:40px 20px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:32px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.025)),
        radial-gradient(circle at 30% 20%, rgba(0,231,255,.22), transparent 34%),
        radial-gradient(circle at 70% 80%, rgba(22,140,255,.2), transparent 35%);
    box-shadow:var(--front-shadow), inset 0 1px 0 rgba(255,255,255,.16);
    transform:rotateY(-13deg) rotateX(8deg);
    transform-style:preserve-3d;
    overflow:hidden;
}

.orbit-core::before{
    content:'';
    position:absolute;
    inset:18px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.12);
    background:
        linear-gradient(90deg, transparent 48%, rgba(0,231,255,.2) 49%, transparent 51%),
        linear-gradient(transparent 48%, rgba(39,215,255,.16) 49%, transparent 51%);
    background-size:42px 42px;
    transform:translateZ(42px);
}

.orbit-card{
    position:absolute;
    width:210px;
    min-height:118px;
    padding:18px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(7,10,12,.76);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 22px 60px rgba(0,0,0,.36);
    transform-style:preserve-3d;
}

.orbit-card strong{
    display:block;
    color:var(--front-text);
    font-family:'Orbitron', sans-serif;
    margin-bottom:8px;
}

.orbit-card span{
    color:var(--front-muted);
}

.orbit-card.one{
    top:16px;
    left:0;
    transform:translateZ(74px) rotateY(-10deg);
}

.orbit-card.two{
    right:0;
    top:188px;
    transform:translateZ(96px) rotateY(10deg);
}

.orbit-card.three{
    left:60px;
    bottom:4px;
    transform:translateZ(62px) rotateY(-5deg);
}

.floating-chip{
    position:absolute;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    color:#020613;
    background:var(--front-gold);
    font-weight:800;
    box-shadow:0 18px 36px rgba(0,136,255,.18);
}

.floating-chip.top{
    top:58px;
    right:38px;
}

.floating-chip.bottom{
    bottom:60px;
    right:26px;
    background:var(--front-accent);
}

section{
    padding:96px 0;
}

section h2,
.section-title h2{
    left:auto;
    transform:none;
    display:block;
    margin:10px 0 18px;
    text-align:left;
    font-size:clamp(2rem, 4vw, 3.4rem);
    line-height:1;
    letter-spacing:0;
}

section h2::after{
    margin:16px 0 0;
    background:linear-gradient(90deg, var(--front-accent), var(--front-blue), var(--front-gold));
    box-shadow:none;
}

.section-title{
    margin-bottom:34px;
    max-width:760px;
}

.section-title p{
    color:var(--front-muted);
    line-height:1.7;
    font-size:1.12rem;
}

.feature-grid,
.portfolio-grid,
.value-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}

.service-card,
.portfolio-card,
.value-card,
.stat-card,
.tab-pane,
.contact-panel{
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    background:linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
    box-shadow:0 20px 60px rgba(0,0,0,.24);
    position:relative;
    overflow:hidden;
}

.service-card::before,
.portfolio-card::before,
.value-card::before,
.contact-panel::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(0,231,255,.16), transparent 38%, rgba(22,140,255,.16));
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
}

.service-card:hover::before,
.portfolio-card:hover::before,
.value-card:hover::before{
    opacity:1;
}

.service-card,
.value-card{
    padding:28px;
    transform-style:preserve-3d;
    transition:transform .22s ease, border-color .22s ease;
}

.service-card:hover,
.value-card:hover,
.portfolio-card:hover{
    border-color:rgba(0,231,255,.48);
}

.service-card i,
.value-card i{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:rgba(0,231,255,.12);
    color:var(--front-accent);
    font-size:1.45rem;
    margin-bottom:22px;
}

.service-card h3,
.value-card h3,
.portfolio-card h3{
    margin:0 0 10px;
    color:var(--front-text);
    font-family:'Orbitron', sans-serif;
    font-size:1.15rem;
}

.service-card p,
.value-card p,
.portfolio-card p{
    color:var(--front-muted);
    line-height:1.65;
}

.split-section{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 440px);
    gap:34px;
    align-items:center;
}

.control-panel{
    padding:24px;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    box-shadow:var(--front-shadow);
    transform:perspective(1000px) rotateY(-7deg);
}

.panel-row{
    display:grid;
    grid-template-columns:40px 1fr auto;
    gap:14px;
    align-items:center;
    min-height:66px;
    padding:12px;
    border-radius:18px;
    background:rgba(0,0,0,.22);
    margin-bottom:10px;
}

.panel-row i{
    color:var(--front-accent);
}

.panel-row strong{
    display:block;
}

.panel-row span{
    color:var(--front-muted);
}

.panel-row em{
    color:var(--front-gold);
    font-style:normal;
    font-weight:800;
}

.portfolio-hero,
.ceo-hero{
    min-height:72vh;
    padding:138px 0 70px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
}

.portfolio-hero{
    min-height:78vh;
}

.portfolio-hero .container,
.ceo-hero .container{
    position:relative;
    z-index:2;
}

.portfolio-hero-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 440px);
    gap:52px;
    align-items:center;
}

.portfolio-hero-copy{
    min-width:0;
}

.portfolio-logo-stage{
    width:min(440px, 100%);
    aspect-ratio:1;
    justify-self:end;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:1px solid rgba(0,231,255,.28);
    border-radius:30px;
    padding:14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
        radial-gradient(circle at 20% 18%, rgba(0,231,255,.25), transparent 34%),
        radial-gradient(circle at 82% 76%, rgba(22,140,255,.2), transparent 36%),
        rgba(2,6,19,.72);
    box-shadow:0 38px 110px rgba(0,18,46,.6), inset 0 1px 0 rgba(255,255,255,.12);
    transform:perspective(1000px) rotateY(-7deg) rotateX(3deg);
}

.portfolio-logo-stage::before{
    content:'';
    position:absolute;
    inset:20px;
    z-index:-1;
    border-radius:24px;
    border:1px solid rgba(0,231,255,.16);
    background:
        linear-gradient(90deg, transparent 48%, rgba(0,231,255,.16) 49%, transparent 51%),
        linear-gradient(transparent 48%, rgba(22,140,255,.14) 49%, transparent 51%);
    background-size:38px 38px;
}

.portfolio-logo-stage::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.16) 48%, transparent 70%);
    transform:translateX(-120%);
    animation:logoLightSweep 6s ease-in-out infinite;
}

.portfolio-logo-stage img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    border-radius:22px;
    filter:drop-shadow(0 0 24px rgba(0,231,255,.22));
}

.logo-scanline{
    position:absolute;
    inset:14px;
    pointer-events:none;
    border-radius:22px;
    background:linear-gradient(to bottom, transparent, rgba(0,231,255,.18), transparent);
    mix-blend-mode:screen;
    opacity:.55;
    transform:translateY(-100%);
    animation:logoScan 4.8s linear infinite;
}

@keyframes logoLightSweep{
    0%, 42%{transform:translateX(-120%);}
    68%, 100%{transform:translateX(120%);}
}

@keyframes logoScan{
    to{transform:translateY(100%);}
}

.portfolio-wall{
    position:absolute;
    inset:auto 0 -74px auto;
    width:min(560px, 48vw);
    height:430px;
    opacity:.56;
    transform:perspective(1000px) rotateY(-18deg) rotateX(8deg);
    pointer-events:none;
}

.portfolio-wall span{
    position:absolute;
    display:block;
    border:1px solid rgba(255,255,255,.16);
    border-radius:22px;
    background:linear-gradient(135deg, rgba(0,231,255,.2), rgba(22,140,255,.16));
    box-shadow:0 30px 80px rgba(0,0,0,.34);
}

.portfolio-wall span:nth-child(1){width:220px;height:150px;right:250px;top:40px;}
.portfolio-wall span:nth-child(2){width:260px;height:190px;right:40px;top:96px;}
.portfolio-wall span:nth-child(3){width:240px;height:160px;right:180px;top:250px;}

.portfolio-grid{
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    max-width:1180px;
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
    padding:0 0 96px;
}

.portfolio-card{
    cursor:pointer;
    transform-style:preserve-3d;
    transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.portfolio-card:hover{
    transform:translateY(-8px);
    box-shadow:0 26px 80px rgba(0,0,0,.34);
}

.card-img{
    height:230px;
    border-radius:22px 22px 0 0;
    overflow:hidden;
    background:#090d10;
}

.card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.01);
    transition:transform .4s ease;
}

.portfolio-card:hover .card-img img{
    transform:scale(1.08);
}

.card-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    background:rgba(0,0,0,.52);
    transition:opacity .22s ease;
}

.portfolio-card:hover .card-overlay{
    opacity:1;
}

.card-overlay span{
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    background:linear-gradient(135deg, var(--front-accent), var(--front-blue) 58%, var(--front-gold));
    color:#020613;
    padding:11px 16px;
    font-weight:900;
}

.card-info{
    padding:22px;
}

.card-tags,
.tech-stack,
.tech-tags-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.card-tags span,
.tech-stack span,
.tech-tag{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    color:var(--front-text);
    background:rgba(255,255,255,.06);
    font-size:.88rem;
}

/* Portfolio cinematic showcase */
.portfolio-ticker{
    width:100%;
    overflow:hidden;
    border-block:1px solid rgba(255,255,255,.12);
    background:rgba(4,7,8,.72);
}

.ticker-track{
    width:max-content;
    min-height:58px;
    display:flex;
    align-items:center;
    gap:26px;
    padding-inline:26px;
    animation:portfolioTicker 28s linear infinite;
}

.ticker-track span{
    color:#dce4ea;
    font-family:'Orbitron', sans-serif;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;
}

.ticker-track i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--front-accent);
    box-shadow:0 0 16px rgba(0,231,255,.9);
}

@keyframes portfolioTicker{
    to{transform:translateX(-50%);}
}

.project-showcase{
    padding:104px 0 58px;
    overflow:hidden;
}

.showcase-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:34px;
}

.showcase-heading h2,
.more-heading h2{
    max-width:760px;
    margin:12px 0 0;
    font-family:'Orbitron', sans-serif;
    font-size:clamp(2.15rem, 4.8vw, 4.7rem);
    line-height:.98;
    letter-spacing:-.045em;
    text-transform:uppercase;
}

.showcase-heading h2 span{
    color:var(--front-accent);
}

.showcase-heading > p{
    max-width:360px;
    margin:0 0 5px;
    color:var(--front-muted);
    font-size:1.05rem;
    line-height:1.6;
}

.showcase-viewport{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.15);
    border-radius:34px;
    background:#030916;
    box-shadow:0 34px 100px rgba(0,0,0,.42);
    cursor:grab;
    outline:none;
}

.showcase-viewport:focus-visible{
    box-shadow:0 0 0 2px var(--front-accent), 0 34px 100px rgba(0,0,0,.42);
}

.showcase-viewport.is-dragging{
    cursor:grabbing;
}

.showcase-track{
    display:flex;
    transition:transform .52s cubic-bezier(.2,.78,.2,1);
}

.showcase-slide{
    --case-accent:var(--front-accent);
    --case-rgb:0,231,255;
    flex:0 0 100%;
    min-width:0;
    min-height:570px;
    display:grid;
    grid-template-columns:minmax(310px, .72fr) minmax(0, 1.28fr);
    position:relative;
    overflow:hidden;
}

.showcase-slide[data-accent="violet"]{
    --case-accent:#7cc7ff;
    --case-rgb:124,199,255;
}

.showcase-slide[data-accent="gold"]{
    --case-accent:#f4fbff;
    --case-rgb:244,251,255;
}

.showcase-slide[data-accent="blue"]{
    --case-accent:#18c8ff;
    --case-rgb:24,200,255;
}

.showcase-slide[data-accent="pink"]{
    --case-accent:#7ef7ff;
    --case-rgb:126,247,255;
}

.showcase-slide[data-accent="silver"]{
    --case-accent:#edf7ff;
    --case-rgb:237,247,255;
}

.showcase-slide[data-accent="orange"]{
    --case-accent:#1d76ff;
    --case-rgb:29,118,255;
}

.showcase-slide::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(120deg, rgba(var(--case-rgb),.1), transparent 44%);
}

.showcase-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:28px;
    padding:44px 24px 44px 46px;
    position:relative;
    z-index:2;
}

.project-index{
    color:var(--case-accent);
    font-family:'Orbitron', sans-serif;
    font-size:1.05rem;
    font-weight:800;
    letter-spacing:.08em;
}

.project-index small{
    color:#67727c;
    font-size:.7rem;
}

.project-type{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    color:var(--case-accent);
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:.72rem;
}

.project-type::before{
    content:'';
    width:22px;
    height:1px;
    background:currentColor;
}

.showcase-copy h3{
    margin:0 0 18px;
    color:#fff;
    font-family:'Orbitron', sans-serif;
    font-size:clamp(2.35rem, 4.1vw, 4.5rem);
    line-height:.86;
    letter-spacing:-.055em;
}

.showcase-copy p{
    max-width:390px;
    margin:0;
    color:#aeb9c3;
    font-size:1.04rem;
    line-height:1.6;
}

.showcase-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}

.showcase-tags span{
    padding:7px 10px;
    border:1px solid rgba(var(--case-rgb),.28);
    border-radius:999px;
    background:rgba(var(--case-rgb),.08);
    color:#dfe8ed;
    font-size:.78rem;
}

.project-open,
.project-link{
    width:max-content;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:0 18px;
    border:1px solid rgba(var(--case-rgb),.42);
    border-radius:14px;
    background:var(--case-accent);
    color:#020613;
    font:800 .92rem 'Rajdhani', sans-serif;
    text-decoration:none;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease;
}

.project-open:hover,
.project-link:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 36px rgba(var(--case-rgb),.22);
}

.showcase-visual{
    min-width:0;
    min-height:570px;
    display:grid;
    place-items:center;
    position:relative;
    z-index:1;
    perspective:1100px;
}

.visual-glow{
    width:74%;
    aspect-ratio:1;
    position:absolute;
    border-radius:50%;
    background:rgba(var(--case-rgb),.2);
    filter:blur(85px);
    opacity:.6;
}

.browser-frame{
    width:91%;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.2);
    border-radius:18px;
    background:#020613;
    box-shadow:0 40px 90px rgba(0,0,0,.58);
    transform:rotateY(-7deg) rotateX(2deg) translateX(2%);
    transition:transform .65s cubic-bezier(.2,.8,.2,1);
}

.showcase-slide.is-active .browser-frame{
    transform:rotateY(-4deg) rotateX(1deg) translateX(0);
}

.browser-bar{
    height:40px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 13px;
    border-bottom:1px solid rgba(255,255,255,.1);
    background:#101416;
}

.browser-bar i{
    width:8px;
    height:8px;
    flex:0 0 auto;
    border-radius:50%;
    background:#4a5257;
}

.browser-bar i:first-child{background:#168cff;}
.browser-bar i:nth-child(2){background:#f4fbff;}
.browser-bar i:nth-child(3){background:#00e7ff;}

.browser-bar span{
    max-width:65%;
    margin-left:8px;
    overflow:hidden;
    color:#77828b;
    font-size:.68rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.browser-frame img{
    width:100%;
    aspect-ratio:16 / 8.7;
    display:block;
    object-fit:cover;
    object-position:top;
}

.floating-label{
    position:absolute;
    z-index:3;
    padding:10px 13px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:11px;
    background:rgba(5,8,9,.78);
    color:#dfe8ed;
    box-shadow:0 16px 40px rgba(0,0,0,.36);
    backdrop-filter:blur(12px);
    font:700 .7rem 'Orbitron', sans-serif;
    letter-spacing:.05em;
}

.floating-label b{
    width:7px;
    height:7px;
    display:inline-block;
    margin-right:6px;
    border-radius:50%;
    background:var(--case-accent);
    box-shadow:0 0 12px rgba(var(--case-rgb),.9);
}

.label-top{top:15%;right:4%;}
.label-bottom{bottom:14%;left:5%;}

.agent-visual{
    place-items:center start;
    padding-left:7%;
}

.agent-phone{
    width:min(390px, 62%);
    height:490px;
    display:flex;
    flex-direction:column;
    position:relative;
    z-index:2;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.2);
    border-radius:28px;
    background:#0b141a;
    box-shadow:0 38px 90px rgba(0,0,0,.62);
    transform:perspective(1000px) rotateY(-5deg) rotateX(1deg);
}

.agent-head{
    min-height:72px;
    display:grid;
    grid-template-columns:46px 1fr auto;
    gap:11px;
    align-items:center;
    padding:12px 16px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:#202c33;
}

.agent-head > i{
    color:#87969f;
}

.agent-avatar{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#25d366;
    color:#fff;
    font-size:1.45rem;
    box-shadow:0 0 24px rgba(37,211,102,.25);
}

.agent-head strong,
.agent-head small{
    display:block;
}

.agent-head strong{
    color:#f4f7f9;
    font-size:.9rem;
}

.agent-head small{
    margin-top:2px;
    color:#83d8a1;
    font-size:.68rem;
}

.agent-chat{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:18px 14px;
    background:
        linear-gradient(rgba(11,20,26,.92), rgba(11,20,26,.92)),
        radial-gradient(circle at 30% 20%, rgba(var(--case-rgb),.2), transparent 45%);
}

.chat-day{
    align-self:center;
    padding:4px 8px;
    border-radius:6px;
    background:#182229;
    color:#92a0a8;
    font-size:.58rem;
}

.chat-bubble{
    max-width:82%;
    margin:0;
    padding:10px 12px;
    border-radius:4px 13px 13px 13px;
    color:#dfe7eb !important;
    font-size:.75rem !important;
    line-height:1.4 !important;
    box-shadow:0 6px 18px rgba(0,0,0,.16);
}

.chat-bubble.bot{
    background:#202c33;
}

.chat-bubble.user{
    align-self:flex-end;
    border-radius:13px 4px 13px 13px;
    background:#075e54;
}

.product-message{
    display:flex;
    align-items:center;
    gap:10px;
}

.product-message > i{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:9px;
    background:rgba(var(--case-rgb),.18);
    color:var(--case-accent);
    font-size:1rem;
}

.product-message b,
.product-message small{
    display:block;
}

.product-message small{
    margin-top:3px;
    color:#a9b4ba;
}

.agent-typing{
    display:flex;
    gap:4px;
    padding:9px 12px;
    border-radius:12px;
    background:#202c33;
}

.agent-typing i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#7e8c94;
    animation:agentTyping 1.1s infinite alternate;
}

.agent-typing i:nth-child(2){animation-delay:.18s;}
.agent-typing i:nth-child(3){animation-delay:.36s;}

@keyframes agentTyping{
    to{transform:translateY(-3px);background:var(--case-accent);}
}

.agent-input{
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:9px 12px 9px 18px;
    background:#202c33;
    color:#77858d;
    font-size:.72rem;
}

.agent-input i{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#25d366;
    color:#fff;
}

.agent-modules{
    width:190px;
    display:grid;
    gap:10px;
    position:absolute;
    z-index:3;
    right:4%;
}

.agent-modules span{
    display:grid;
    grid-template-columns:34px 1fr;
    grid-template-rows:auto auto;
    column-gap:10px;
    padding:13px;
    border:1px solid rgba(var(--case-rgb),.22);
    border-radius:14px;
    background:rgba(7,11,13,.8);
    box-shadow:0 16px 42px rgba(0,0,0,.3);
    backdrop-filter:blur(14px);
}

.agent-modules i{
    grid-row:1 / 3;
    align-self:center;
    color:var(--case-accent);
    font-size:1.1rem;
}

.agent-modules b{
    color:#f3f6f8;
    font:700 .68rem 'Orbitron', sans-serif;
}

.agent-modules small{
    margin-top:3px;
    color:#7f8c94;
    font-size:.64rem;
}

.showcase-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:20px;
}

.showcase-dots{
    display:flex;
    align-items:center;
    gap:8px;
}

.showcase-dots button{
    width:50px;
    height:18px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    cursor:pointer;
}

.showcase-dots span{
    width:100%;
    height:3px;
    display:block;
    border-radius:999px;
    background:#30373b;
    transition:background .25s ease, box-shadow .25s ease;
}

.showcase-dots button.is-active span{
    background:var(--front-accent);
    box-shadow:0 0 15px rgba(0,231,255,.75);
}

.showcase-arrows{
    display:flex;
    gap:10px;
}

.showcase-arrows button{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    background:rgba(255,255,255,.055);
    color:#fff;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease, color .2s ease;
}

.showcase-arrows button:hover{
    border-color:rgba(0,231,255,.58);
    background:rgba(0,231,255,.11);
    color:var(--front-accent);
}

.portfolio-more{
    padding:68px 0 110px;
}

.more-heading{
    max-width:780px;
    margin-bottom:34px;
}

.more-heading h2{
    font-size:clamp(2rem, 4vw, 3.6rem);
}

.portfolio-bento{
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:18px;
}

.portfolio-bento .portfolio-card{
    min-height:430px;
    display:flex;
    flex-direction:column;
    cursor:default;
}

.portfolio-bento .portfolio-card:hover{
    transform:translateY(-6px);
}

.portfolio-bento .card-img{
    height:250px;
    flex:0 0 auto;
}

.portfolio-bento .card-info{
    min-height:180px;
    flex:1;
    padding:24px;
    position:relative;
}

.portfolio-bento .card-info h3{
    padding-right:48px;
}

.bento-goodstyle{grid-column:span 7;}
.bento-fono{grid-column:span 5;}
.bento-finansa{grid-column:span 12;}
.bento-jkstore,
.bento-techpdv{grid-column:span 6;}

.bento-telegramvip{
    grid-column:span 12;
    min-height:520px !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1.45fr) minmax(320px, .7fr);
    overflow:hidden;
}

.bento-telegramvip .card-img{
    height:100%;
    min-height:360px;
    border-radius:22px 0 0 22px;
    background:linear-gradient(135deg, rgba(8,126,216,.2), rgba(0,231,255,.1));
}

.bento-telegramvip .card-img img{
    object-fit:cover;
    object-position:top left;
}

.bento-telegramvip .card-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.resume-project-bento .resume-bento-card{
    grid-column:span 6;
}

.resume-project-bento .is-wide-case{
    grid-column:span 12;
}

.resume-project-bento .resume-bento-0,
.resume-project-bento .resume-bento-2{
    grid-column:span 5;
}

.resume-project-bento .resume-bento-1,
.resume-project-bento .resume-bento-3{
    grid-column:span 7;
}

.bento-finansa{
    min-height:300px !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1.65fr) minmax(280px, .7fr);
}

.bento-finansa .card-img{
    height:100%;
    min-height:300px;
    border-radius:22px 0 0 22px;
}

.bento-finansa .card-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.bento-number{
    display:block;
    margin-bottom:12px;
    color:var(--front-accent);
    font:700 .78rem 'Orbitron', sans-serif;
    letter-spacing:.08em;
}

.project-open.compact{
    --case-accent:var(--front-accent);
    --case-rgb:0,231,255;
    width:44px;
    min-height:44px;
    padding:0;
    position:absolute;
    right:22px;
    bottom:22px;
    border-radius:50%;
}

.modal-overlay{
    position:fixed;
    inset:0;
    z-index:1300;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(0,0,0,.74);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
}

.modal-overlay.active{
    opacity:1;
    pointer-events:auto;
}

.modal-content{
    width:min(1040px, 100%);
    max-height:86vh;
    display:grid;
    grid-template-columns:1.25fr .9fr;
    overflow:hidden;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.16);
    background:#080b0d;
    box-shadow:0 34px 100px rgba(0,0,0,.6);
    transform:translateY(20px) scale(.98);
    transition:transform .25s ease;
}

.modal-content.no-preview{
    width:min(680px, 100%);
    grid-template-columns:1fr;
}

.modal-content.no-preview .modal-right{
    padding:54px;
}

.modal-overlay.active .modal-content{
    transform:translateY(0) scale(1);
}

.modal-close{
    position:absolute;
    top:18px;
    right:24px;
    z-index:2;
    width:42px;
    height:42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:var(--front-text);
    background:rgba(0,0,0,.48);
    border:1px solid rgba(255,255,255,.16);
    font-size:1.8rem;
    cursor:pointer;
}

.modal-left{
    max-height:86vh;
    overflow:auto;
    background:#050607;
}

.modal-left img{
    width:100%;
    display:block;
}

.modal-right{
    padding:44px;
    align-self:center;
}

.modal-right h2{
    margin:0 0 18px;
    color:var(--front-accent);
    font-family:'Orbitron', sans-serif;
    font-size:2rem;
}

.modal-right p{
    color:#cbd4df;
    line-height:1.7;
}

.modal-right .btn-live{
    margin-top:28px;
}

.ceo-layout{
    display:grid;
    grid-template-columns:minmax(300px, 420px) minmax(0, 1fr);
    gap:42px;
    align-items:center;
}

.profile-stage{
    position:relative;
    min-height:580px;
    perspective:1100px;
}

.profile-frame{
    position:absolute;
    inset:0 32px 0 0;
    overflow:hidden;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.16);
    background:#090d10;
    box-shadow:var(--front-shadow);
    transform:rotateY(10deg) rotateX(4deg);
}

.profile-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(1.05) contrast(1.05);
}

.profile-frame::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.78), transparent 48%);
}

.profile-badge{
    position:absolute;
    left:22px;
    bottom:26px;
    z-index:2;
    padding:18px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.52);
    backdrop-filter:blur(10px);
}

.profile-badge strong{
    display:block;
    font-family:'Orbitron', sans-serif;
    color:var(--front-accent);
}

.profile-badge span{
    color:#dce5ec;
}

.ceo-content p{
    color:#cbd4df;
    line-height:1.75;
    font-size:1.1rem;
    margin-bottom:18px;
}

.stat-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    margin:28px 0;
}

.stat-card{
    padding:18px;
}

.stat-card strong{
    display:block;
    color:var(--front-gold);
    font-family:'Orbitron', sans-serif;
    font-size:1.5rem;
}

.stat-card span{
    color:var(--front-muted);
}

.tabs-wrapper{
    margin-top:42px;
}

.tab-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.tab-btn{
    min-height:42px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    padding:0 15px;
    color:var(--front-text);
    background:rgba(255,255,255,.06);
    cursor:pointer;
    font-weight:800;
}

.tab-btn.active{
    color:#020613;
    background:linear-gradient(135deg, var(--front-accent), var(--front-blue) 58%, var(--front-gold));
}

.tab-pane{
    display:none;
    padding:24px;
}

.tab-pane.active{
    display:block;
}

.tab-pane h3{
    margin:0 0 8px;
    color:var(--front-accent);
    font-family:'Orbitron', sans-serif;
}

.tab-pane p{
    color:var(--front-muted);
    line-height:1.7;
}

.contact-panel{
    padding:28px;
    max-width:720px;
    margin:0 auto;
}

.resume-hero .hero-grid{
    grid-template-columns:minmax(0, 1fr) minmax(340px, 520px);
}

.resume-console{
    border:1px solid rgba(255,255,255,.15);
    border-radius:28px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
        radial-gradient(circle at 20% 10%, rgba(0,231,255,.22), transparent 32%),
        radial-gradient(circle at 90% 80%, rgba(22,140,255,.18), transparent 32%);
    box-shadow:var(--front-shadow), inset 0 1px 0 rgba(255,255,255,.14);
    overflow:hidden;
    transform-style:preserve-3d;
}

.console-top{
    min-height:56px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 18px;
    border-bottom:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.22);
}

.console-top span{
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--front-hot);
}

.console-top span:nth-child(2){
    background:var(--front-gold);
}

.console-top span:nth-child(3){
    background:var(--front-accent);
}

.console-top strong{
    margin-left:auto;
    color:var(--front-muted);
    font-size:.92rem;
}

.resume-console pre{
    margin:0;
    padding:30px;
    white-space:pre-wrap;
    color:#d9fff4;
    font-size:1.05rem;
    line-height:1.7;
}

.resume-console code{
    font-family:'Rajdhani', monospace;
}

.console-status{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:0 22px 24px;
}

.console-status span{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:rgba(0,0,0,.2);
    color:var(--front-text);
}

.console-status i{
    color:var(--front-accent);
}

.resume-stack-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}

.resume-timeline{
    display:grid;
    grid-template-columns:minmax(280px, 430px) minmax(0, 1fr);
    gap:34px;
    align-items:start;
    border:1px solid rgba(255,255,255,.12);
    border-radius:28px;
    padding:34px;
    background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    box-shadow:0 20px 60px rgba(0,0,0,.24);
}

.timeline-list{
    display:grid;
    gap:14px;
}

.timeline-item{
    padding:18px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    background:rgba(0,0,0,.22);
}

.timeline-item strong{
    display:block;
    color:var(--front-accent);
    font-family:'Orbitron', sans-serif;
    margin-bottom:8px;
}

.timeline-item span{
    color:var(--front-muted);
    line-height:1.6;
}

.resume-cta{
    text-align:center;
    max-width:900px;
}

.resume-cta h2{
    text-align:center;
}

.resume-cta h2::after{
    margin-left:auto;
    margin-right:auto;
}

.resume-cta p{
    max-width:680px;
    margin:0 auto;
    color:var(--front-muted);
    font-size:1.14rem;
    line-height:1.7;
}

.wraper-form{
    width:100%;
    max-width:none;
    flex:auto;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
}

.wraper-form::before{
    display:none;
}

.wraper-form form{
    display:grid;
    gap:14px;
}

.wraper-form-single{
    margin:0;
}

.wraper-form label{
    color:#dce5ec;
    text-transform:none;
    font-weight:700;
}

.wraper-form input,
.wraper-form textarea{
    min-height:48px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    background:rgba(0,0,0,.22);
    color:var(--front-text);
}

.wraper-form textarea{
    min-height:118px;
    resize:vertical;
}

.wraper-form input[type="submit"]{
    min-height:52px;
    border-radius:16px;
    clip-path:none;
    background:linear-gradient(135deg, var(--front-accent), var(--front-blue) 58%, var(--front-gold));
    color:#020613;
}

footer{
    border-top:1px solid rgba(255,255,255,.1);
    background:rgba(0,0,0,.42);
}

@media (max-width: 900px){
    .menu-btn{
        display:grid;
    }

    nav.desktop{
        display:none;
    }

    .hero-grid,
    .portfolio-hero-grid,
    .split-section,
    .ceo-layout,
    .resume-hero .hero-grid,
    .resume-timeline{
        grid-template-columns:1fr;
    }

    .portfolio-hero-grid{
        gap:30px;
    }

    .portfolio-logo-stage{
        width:min(360px, 100%);
        justify-self:start;
        transform:none;
    }

    .hero-orbit{
        min-height:380px;
        margin-top:22px;
    }

    .hero-metrics,
    .feature-grid,
    .value-grid,
    .stat-grid,
    .resume-stack-grid,
    .console-status{
        grid-template-columns:1fr;
    }

    .portfolio-wall{
        width:80vw;
        opacity:.28;
    }

    .modal-content{
        grid-template-columns:1fr;
        overflow:auto;
    }

    .modal-left{
        max-height:42vh;
    }

    .modal-right{
        padding:24px;
    }

    .profile-stage{
        min-height:500px;
    }
}

@media (max-width: 560px){
    .container,
    .portfolio-grid{
        width:min(100% - 28px, 1180px);
    }

    .brand-logo{
        width:40px;
        height:40px;
        flex-basis:40px;
        border-radius:10px;
    }

    .brand-mark strong{
        font-size:1.28rem;
    }

    .brand-mark span{
        display:none;
    }

    .hero-cinematic,
    .portfolio-hero,
    .ceo-hero{
        padding-top:112px;
    }

    .hero-copy h1,
    .portfolio-hero h1,
    .ceo-hero h1{
        font-size:2.45rem;
    }

    .portfolio-logo-stage{
        width:min(280px, 100%);
        border-radius:24px;
        padding:10px;
    }

    .portfolio-logo-stage img,
    .logo-scanline{
        border-radius:18px;
    }

    .hero-copy p,
    .portfolio-hero p,
    .ceo-hero p{
        font-size:1.06rem;
    }

    .orbit-card{
        width:170px;
    }

    .orbit-card.two{
        right:0;
    }

    .floating-chip{
        display:none;
    }

    section{
        padding:70px 0;
    }
}

@media (max-width: 800px){
    .modal-content.no-preview .modal-right{
        padding:34px 24px;
    }

    .project-showcase{
        padding:78px 0 34px;
    }

    .showcase-heading{
        display:block;
        margin-bottom:26px;
    }

    .showcase-heading h2{
        font-size:clamp(2rem, 10.5vw, 3.25rem);
    }

    .showcase-heading > p{
        margin-top:18px;
        font-size:.98rem;
    }

    .showcase-viewport{
        width:calc(100vw - 14px);
        margin-left:0;
        overflow-x:auto;
        overflow-y:hidden;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        cursor:auto;
        scroll-padding-left:0;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .showcase-viewport::-webkit-scrollbar{
        display:none;
    }

    .showcase-track{
        gap:12px;
        padding-right:28px;
        transform:none !important;
        transition:none;
    }

    .showcase-slide{
        flex-basis:calc(100% - 25px);
        min-height:0;
        grid-template-columns:1fr;
        grid-template-rows:auto auto;
        border:1px solid rgba(255,255,255,.14);
        border-radius:26px;
        background:#080c0e;
        scroll-snap-align:start;
        box-shadow:0 24px 60px rgba(0,0,0,.34);
    }

    .showcase-copy{
        min-height:410px;
        padding:26px 24px 28px;
    }

    .showcase-copy h3{
        font-size:clamp(2.35rem, 14vw, 3.6rem);
    }

    .showcase-copy p{
        font-size:.98rem;
    }

    .showcase-visual{
        min-height:275px;
        order:-1;
        overflow:hidden;
    }

    .agent-visual{
        min-height:390px;
        place-items:center;
        padding-left:0;
    }

    .agent-phone{
        width:min(330px, 84%);
        height:355px;
        border-radius:21px;
        transform:rotateY(-2deg);
    }

    .agent-head{
        min-height:58px;
        grid-template-columns:38px 1fr auto;
        padding:9px 12px;
    }

    .agent-avatar{
        width:38px;
        height:38px;
        font-size:1.15rem;
    }

    .agent-chat{
        gap:7px;
        padding:10px;
    }

    .chat-bubble{
        padding:7px 9px;
        font-size:.66rem !important;
    }

    .agent-input{
        min-height:46px;
    }

    .agent-input i{
        width:31px;
        height:31px;
    }

    .agent-modules{
        display:none;
    }

    .browser-frame{
        width:88%;
        border-radius:13px;
        transform:rotateY(-3deg) rotateX(1deg);
    }

    .browser-bar{
        height:31px;
    }

    .browser-frame img{
        aspect-ratio:16 / 9;
    }

    .floating-label{
        padding:8px 10px;
        font-size:.58rem;
    }

    .label-top{top:10%;right:3%;}
    .label-bottom{bottom:8%;left:3%;}

    .showcase-controls{
        padding-top:16px;
    }

    .showcase-dots button{
        width:24px;
    }

    .showcase-dots{gap:5px;}

    .showcase-arrows button{
        width:44px;
        height:44px;
    }

    .portfolio-more{
        padding:64px 0 90px;
    }

    .portfolio-bento{
        grid-template-columns:1fr;
        gap:14px;
    }

    .bento-goodstyle,
    .bento-fono,
    .bento-finansa,
    .bento-jkstore,
    .bento-techpdv,
    .bento-telegramvip,
    .resume-project-bento .resume-bento-card{
        grid-column:auto;
    }

    .bento-telegramvip{
        min-height:430px !important;
        display:flex !important;
    }

    .bento-telegramvip .card-img{
        height:250px;
        min-height:0;
        border-radius:22px 22px 0 0;
    }

    .bento-finansa{
        min-height:430px !important;
        display:flex !important;
    }

    .bento-finansa .card-img{
        height:250px;
        min-height:0;
        border-radius:22px 22px 0 0;
    }

    .portfolio-bento .portfolio-card{
        min-height:430px;
    }
}

@media (max-width: 560px){
    .portfolio-ticker .ticker-track{
        min-height:52px;
        gap:20px;
    }

    .showcase-shell{
        width:calc(100% - 28px);
    }

    .showcase-copy{
        min-height:390px;
    }

    .showcase-visual{
        min-height:235px;
    }

    .agent-visual{
        min-height:370px;
    }

    .agent-phone{
        width:91%;
        height:340px;
    }

    .showcase-tags span:nth-child(3){
        display:none;
    }

    .floating-label.label-top{
        display:none;
    }

    .portfolio-more .more-heading h2{
        font-size:2.2rem;
    }
}

@media (prefers-reduced-motion: reduce){
    .ticker-track{
        animation-play-state:paused;
    }

    .showcase-track,
    .browser-frame,
    .project-open,
    .agent-typing i{
        transition:none;
        animation:none;
    }
}