:root {
    color-scheme:dark;
    --bg:#070b16;
    --panel:#10182b;
    --muted:#a4b3ca;
    --line:#263249;
    --blue:#5e8cff;
    --cyan:#73e3dd;
    --white:#f5f7ff
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--bg);
    color:var(--white);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
    line-height:1.65
}
a {
    color:inherit;
    text-decoration:none
}
button,input {
    font:inherit
}
button {
    cursor:pointer
}
img {
    max-width:100%;
    display:block
}
.container {
    width:min(1160px,calc(100% - 40px));
    margin:auto
}
.top {
    position:sticky;
    top:0;
    z-index:50;
    background:#070b16ee;
    backdrop-filter:blur(16px);
    border-bottom:1px solid #ffffff14
}
.nav {
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px
}
.brand {
    display:flex;
    align-items:center;
    gap:11px;
    font-weight:800;
    letter-spacing:-.04em;
    font-size:22px
}
.brandmark {
    width:38px;
    height:38px;
    border-radius:12px;
    background:linear-gradient(135deg,#315bff,#77e3e1);
    display:grid;
    place-items:center;
    color:white;
    font-weight:900
}
.brand span:last-child {
    color:#8eabff
}
.links {
    display:flex;
    gap:24px;
    align-items:center
}
.links a {
    color:#c4cee1;
    font-size:13px;
    font-weight:650
}
.links a:hover,.links a.active {
    color:white
}
.menu {
    display:none;
    border:1px solid var(--line);
    background:#10182b;
    color:white;
    border-radius:12px;
    padding:8px 13px
}
.btn {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    padding:12px 20px;
    border-radius:12px;
    background:linear-gradient(135deg,#4776ff,#6c8dff);
    color:white;
    font-weight:750;
    border:1px solid #ffffff20;
    transition:transform .2s
}
.btn:hover {
    transform:translateY(-2px)
}
.btn.ghost {
    background:#ffffff08;
    border:1px solid #ffffff2c
}
.hero {
    position:relative;
    overflow:hidden;
    padding:88px 0 65px;
    background:radial-gradient(ellipse at 80% 12%,#2549a13b,transparent 50%),radial-gradient(ellipse at 0% 90%,#106d7a1b,transparent 50%)
}
.hero-grid {
    display:grid;
    grid-template-columns:1.18fr .82fr;
    gap:65px;
    align-items:center
}
.eyebrow {
    font-size:12px;
    font-weight:850;
    letter-spacing:.18em;
    color:#7ce5df;
    text-transform:uppercase
}
.hero h1 {
    font-size:clamp(44px,6.3vw,82px);
    line-height:1.08;
    letter-spacing:-.065em;
    margin:19px 0 24px
}
.accent {
    background:linear-gradient(95deg,#7aa4ff,#80e3dd);
    background-clip:text;
    color:transparent
}
.lead {
    font-size:17px;
    color:var(--muted);
    max-width:660px
}
.actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:29px
}
.portrait-frame {
    position:relative;
    border:1px solid #7894ff42;
    border-radius:28px;
    overflow:hidden;
    max-height:515px;
    box-shadow:0 30px 90px #0007;
    background:#14203c
}
.portrait-frame img {
    width:100%;
    height:510px;
    object-fit:cover;
    object-position:center 18%
}
.portrait-frame:after {
    content:'';
    position:absolute;
    inset:55% 0 0;
    background:linear-gradient(transparent,#08101e99);
    pointer-events:none
}
.floating {
    position:absolute;
    bottom:20px;
    left:20px;
    z-index:2;
    padding:12px 17px;
    border-radius:12px;
    background:#0d1733d9;
    border:1px solid #ffffff3b;
    backdrop-filter:blur(12px);
    font-weight:700;
    font-size:13px
}
.section {
    padding:90px 0
}
.section.alt {
    background:#0b1121
}
.section-head {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:end;
    margin-bottom:31px
}
.section h2,.page-hero h1 {
    font-size:clamp(32px,4.1vw,55px);
    line-height:1.13;
    letter-spacing:-.045em;
    margin:10px 0
}
.section-desc {
    color:var(--muted);
    max-width:990px;
    margin:0
}
.stats {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
    margin-top:44px
}
.stat {
    padding:23px 14px;
    border:1px solid var(--line);
    background:#111b30;
    border-radius:18px
}
.stat strong {
    display:block;
    font-size:31px;
    letter-spacing:-.05em;
    color:#8eafff
}
.stat span {
    font-size:12px;
    color:var(--muted)
}
.service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.service-card,.project-card,.feature {
    border:1px solid var(--line);
    background:linear-gradient(150deg,#14203a,#0e1728);
    border-radius:20px;
    overflow:hidden;
    transition:transform .25s,border-color .25s
}
.service-card:hover,.project-card:hover {
    transform:translateY(-5px);
    border-color:#6689ff90
}
.service-card {
    padding:27px
}
.service-icon {
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    background:#315dff23;
    border:1px solid #6d93ff40;
    color:#94b1ff;
    border-radius:14px;
    font-weight:850;
    margin-bottom:18px
}
.service-card h3 {
    font-size:20px;
    margin:0 0 10px
}
.service-card p,.feature p {
    color:var(--muted);
    font-size:14px
}
.arrow {
    color:#90adff;
    font-weight:750;
    font-size:13px
}
.filters {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin:25px 0
}
.filter {
    padding:9px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#131d30;
    color:#c4d0e2;
    font-size:12px
}
.filter.active {
    background:#4775ff;
    color:white;
    border-color:#4775ff
}
.search {
    background:#101a2b;
    border:1px solid var(--line);
    border-radius:12px;
    color:white;
    padding:12px 16px;
    min-width:230px;
    max-width:100%;
    outline:none
}
.project-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:17px
}
.project-card {
    display:block
}
.mock {
    height:185px;
    position:relative;
    padding:17px;
    background:linear-gradient(125deg,var(--tone,#264ca0),#111c32 72%);
    overflow:hidden
}
.mock:before {
    content:'';
    position:absolute;
    width:190px;
    height:190px;
    right:-30px;
    top:-45px;
    border-radius:50%;
    background:#ffffff10
}
.browser {
    position:relative;
    height:100%;
    border-radius:10px 10px 0 0;
    border:1px solid #ffffff33;
    background:#0a1325d9;
    box-shadow:0 12px 30px #0005;
    overflow:hidden
}
.browser-bar {
    height:25px;
    border-bottom:1px solid #ffffff20;
    display:flex;
    align-items:center;
    gap:5px;
    padding:0 11px
}
.dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#8796b4
}
.fake-site {
    padding:18px 17px
}
.fake-line {
    height:8px;
    background:#ffffff24;
    border-radius:5px;
    width:60%;
    margin:9px 0
}
.fake-line.short {
    width:35%;
    height:13px;
    background:#ffffff80
}
.fake-tiles {
    display:flex;
    gap:7px;
    margin-top:16px
}
.fake-tiles i {
    width:32%;
    height:45px;
    border-radius:7px;
    background:#ffffff13
}
.mock-label {
    position:absolute;
    right:14px;
    bottom:10px;
    font-size:10px;
    font-weight:850;
    letter-spacing:.09em;
    color:#dce8ff;
    background:#0a1425c9;
    border:1px solid #ffffff2c;
    padding:5px 8px;
    border-radius:7px
}
.project-info {
    padding:18px 20px 21px
}
.project-info h3 {
    margin:0 0 4px;
    font-size:17px
}
.project-info p {
    margin:0 0 13px;
    color:#91a4c4;
    font-size:12px
}
.project-info .visit {
    font-size:12px;
    color:#95b0ff;
    font-weight:750
}
.about-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center
}
.about-logo {
    background:radial-gradient(circle,#2747a538,#0e1728 68%);
    border:1px solid var(--line);
    border-radius:26px;
    padding:30px;
    min-height:320px;
    display:grid;
    place-items:center
}
.about-logo img {
    max-height:280px;
    object-fit:contain
}
.about-copy p {
    color:var(--muted)
}
.page-hero {
    padding:90px 0 55px;
    background:radial-gradient(ellipse at 85% 10%,#294aa343,transparent 55%)
}
.page-hero p {
    color:var(--muted);
    max-width:740px;
    font-size:17px
}
.feature-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:17px
}
.feature {
    padding:25px
}
.feature h3 {
    margin:0 0 7px
}
.cta {
    padding:55px;
    border:1px solid #5d82ff60;
    border-radius:24px;
    background:linear-gradient(115deg,#1c3568,#111b2e);
    text-align:center
}
.cta h2 {
    font-size:clamp(27px,4vw,45px);
    margin:0 0 10px
}
.cta p {
    color:#c2cde0
}
footer {
    border-top:1px solid var(--line);
    padding:32px 0;
    color:#94a5c1;
    font-size:13px
}
.footer-inner {
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap
}
.footer-links {
    display:flex;
    gap:17px;
    flex-wrap:wrap
}
.footer-links a:hover {
    color:white
}
.no-results {
    color:#bac6dc;
    padding:30px 0
}
.reveal {
    opacity:0;
    transform:translateY(17px);
    transition:opacity .6s,transform .6s
}
.reveal.visible {
    opacity:1;
    transform:none
}
@media(max-width:850px) {
    .hero-grid {
        grid-template-columns:1fr;
        gap:36px
    }
    .portrait-frame {
        max-width:480px
    }
    .service-grid,.project-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .stats {
        grid-template-columns:repeat(3,1fr)
    }
    .about-grid {
        grid-template-columns:1fr
    }
    .links {
        display:none;
        position:absolute;
        top:77px;
        left:0;
        right:0;
        background:#0b1221;
        border-bottom:1px solid var(--line);
        padding:20px;
        flex-direction:column;
        align-items:flex-start
    }
    .links.open {
        display:flex
    }
    .menu {
        display:block
    }
}
@media(max-width:560px) {
    .container {
        width:min(100% - 30px,1160px)
    }
    .hero {
        padding:54px 0
    }
    .section {
        padding:60px 0
    }
    .hero h1 {
        font-size:45px
    }
    .portrait-frame img {
        height:400px
    }
    .service-grid,.project-grid,.feature-grid {
        grid-template-columns:1fr
    }
    .stats {
        grid-template-columns:repeat(2,1fr)
    }
    .section-head {
        display:block
    }
    .search {
        width:100%;
        margin-top:18px
    }
    .cta {
        padding:35px 18px
    }
    .mock {
        height:195px
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        scroll-behavior:auto!important;
        transition:none!important
    }
    .reveal {
        opacity:1;
        transform:none
    }
}
/* Portfolio refresh: top branding, live screenshot thumbnails and electric portrait */
.brand {
    flex:0 0 auto;
    min-width:118px
}
.nav-logo {
    display:block;
    width:142px;
    height:55px;
    object-fit:contain;
    object-position:left center;
    filter:drop-shadow(0 0 8px #3269ff44)
}
.mock {
    isolation:isolate
}
.site-preview {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    z-index:2;
    background:#101a2b;
    opacity:0;
    transition:opacity .45s ease,transform .7s ease
}
.site-preview.loaded {
    opacity:1
}
.project-card:hover .site-preview.loaded {
    transform:scale(1.055)
}
.mock-label {
    z-index:3
}
.project-card:hover .mock {
    box-shadow:inset 0 0 0 1px #669bff88
}
.portrait-electric {
    isolation:isolate;
    overflow:visible;
    border:0;
    background:transparent;
    box-shadow:none;
    max-height:none;
    padding:14px
}
.portrait-electric:before {
    content:'';
    position:absolute;
    inset:10% 0 5%;
    border:1px solid #5795ff66;
    border-radius:50%;
    transform:rotate(-14deg);
    box-shadow:0 0 35px #265fff50,inset 0 0 35px #275fff33;
    animation:portrait-pulse 6s ease-in-out infinite
}
.portrait-electric:after {
    inset:50% 14px 14px;
    border-radius:0 0 24px 24px
}
.portrait-electric img {
    position:relative;
    z-index:1;
    border-radius:24px;
    object-position:center 15%;
    filter:contrast(1.08) saturate(1.07);
    box-shadow:0 25px 85px #020617a8,0 0 55px #2368ff40;
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%)
}
.portrait-glow {
    position:absolute;
    inset:12%;
    border-radius:50%;
    background:radial-gradient(circle,#2e78ff70,#6049ff2e 44%,transparent 70%);
    filter:blur(18px);
    animation:glow-drift 8s ease-in-out infinite
}
.portrait-orbit {
    position:absolute;
    inset:7% 0;
    border:2px dashed #4f8bff4d;
    border-radius:50%;
    transform:rotate(19deg);
    animation:orbit-rotate 35s linear infinite
}
.portrait-electric .floating {
    bottom:28px;
    left:27px;
    box-shadow:0 10px 35px #0008
}
@keyframes portrait-pulse {
    50% {
        box-shadow:0 0 60px #2368ff7a,inset 0 0 55px #275fff55
    }
}
@keyframes glow-drift {
    50% {
        transform:translate(7px,-12px) scale(1.07)
    }
}
@keyframes orbit-rotate {
    to {
        transform:rotate(379deg)
    }
}
@media(max-width:850px) {
    .nav-logo {
        width:126px;
        height:50px
    }
    .portrait-electric {
        max-width:440px;
        margin:auto
    }
}
@media(max-width:560px) {
    .nav-logo {
        width:112px;
        height:46px
    }
    .portrait-electric img {
        height:390px
    }
    .portrait-electric .floating {
        font-size:11px
    }
}
@media(prefers-reduced-motion:reduce) {
    .portrait-electric:before,.portrait-glow,.portrait-orbit {
        animation:none!important
    }
    .site-preview {
        transition:none!important
    }
}
/* User-managed portfolio screenshots: local files only; no external thumbnail service. */
.nav-logo {
    width:156px;
    height:64px;
    object-fit:contain;
    object-position:left center
}
.mock {
    position:relative;
    overflow:hidden;
    isolation:isolate;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#0e1d3a,#11264a 60%,#0b1529)
}
.preview-placeholder {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:18px;
    text-align:center;
    color:#e6eeff;
    background:radial-gradient(circle at 50% 20%,#2254a050,transparent 70%)
}
.preview-placeholder-icon {
    font-size:42px;
    color:#78a8ff;
    line-height:1
}
.preview-placeholder span:not(.preview-placeholder-icon) {
    font-size:14px;
    font-weight:700
}
.preview-placeholder small {
    font-size:10px;
    color:#aabddd;
    max-width:95%;
    overflow-wrap:anywhere
}
.project-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    z-index:2;
    opacity:0;
    transition:opacity .3s ease,transform .5s ease
}
.project-image.ready {
    opacity:1
}
.project-card:hover .project-image.ready {
    transform:scale(1.045)
}
@media(max-width:560px) {
    .nav-logo {
        width:132px;
        height:54px
    }
}
@media(prefers-reduced-motion:reduce) {
    .project-image {
        transition:none!important
    }
}
/* Contact and updated identity — no external dependencies */
.contact-strip {
    display:flex;
    flex-wrap:wrap;
    gap:11px;
    margin-top:27px;
    max-width:670px
}
.contact-strip a {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    padding:10px 12px;
    border:1px solid #5279b45a;
    border-radius:12px;
    background:#101d33cf;
    font-size:12px;
    color:#e8efff;
    overflow-wrap:anywhere;
    transition:border-color .2s,transform .2s
}
.contact-strip a:hover {
    border-color:#6ca0ff;
    transform:translateY(-2px)
}
.contact-strip small {
    display:block;
    color:#8ca9d5;
    font-size:10px;
    line-height:1.4
}
.contact-icon {
    width:32px;
    height:32px;
    flex:none;
    border-radius:10px;
    background:#2d60e34a;
    display:grid;
    place-items:center;
    color:#9bbdff;
    font-weight:900;
    font-size:16px
}
.header-contact {
    flex:none;
    background:#2e63ef;
    border-radius:12px;
    padding:10px 14px;
    font-size:12px;
    font-weight:750;
    color:#fff;
    white-space:nowrap
}
.footer-contact {
    max-width:1160px;
    margin:18px auto 0;
    display:flex;
    flex-wrap:wrap;
    gap:12px 25px;
    padding:0 20px
}
.footer-contact a {
    color:#c3d3f7;
    overflow-wrap:anywhere
}
.footer-contact a:hover {
    color:#fff
}
.contact-float {
    position:fixed;
    right:18px;
    bottom:22px;
    z-index:100;
    display:flex;
    flex-direction:column;
    gap:10px
}
.contact-float a {
    width:54px;
    height:54px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    box-shadow:0 7px 28px #0009;
    border:2px solid #ffffff4d;
    transition:transform .2s
}
.contact-float a:hover {
    transform:translateY(-4px)
}
.float-wa {
    background:#17bb60
}
.float-in {
    background:#1766c2;
    font-weight:900;
    font-size:24px;
    letter-spacing:-.06em
}
.portrait-electric img {
    object-position:center 18%;
    filter:contrast(1.045) saturate(1.06)
}
@media(max-width:1100px) {
    .header-contact {
        display:none
    }
}
@media(max-width:560px) {
    .contact-strip {
        flex-direction:column
    }
    .contact-strip a {
        width:100%
    }
    .contact-float {
        right:12px;
        bottom:14px
    }
    .contact-float a {
        width:47px;
        height:47px
    }
    .footer-contact {
        padding:0 15px
    }
}
/* Cinematic hero: live, responsive HTML inspired by the approved visual concept. */
.hero {
    padding:64px 0 45px;
    min-height:710px;
    background:#030b1b;
    isolation:isolate
}
.hero-scenery {
    position:absolute;
    inset:0;
    z-index:-2;
    background:linear-gradient(90deg,#030a18 0%,#030a18ed 36%,#061532aa 64%,#07152bb3 100%),url('hero-lake.jpg') center 45%/cover no-repeat;
    filter:saturate(1.1)
}
.hero:before {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    background:radial-gradient(circle at 74% 42%,#146aff48,transparent 37%),linear-gradient(0deg,#030916 0%,transparent 25%)
}
.cinematic-grid {
    display:grid;
    grid-template-columns:1.04fr .96fr;
    gap:22px;
    align-items:center;
    min-height:525px
}
.cinematic-copy {
    position:relative;
    z-index:5
}
.hello-pill {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:7px 15px;
    border:1px solid #1687ff99;
    border-radius:40px;
    background:#041327b8;
    font-size:12px;
    letter-spacing:.09em
}
.live-dot {
    width:9px;
    height:9px;
    border-radius:50%;
    background:#04a8ff;
    box-shadow:0 0 13px #00aaff
}
.cinematic-copy h1 {
    font-size:clamp(60px,7.6vw,112px);
    line-height:.91;
    letter-spacing:-.072em;
    margin:24px 0 18px;
    font-weight:850
}
.hero-name {
    background:linear-gradient(105deg,#20c3ff,#1261ff);
    background-clip:text;
    color:transparent;
    text-shadow:0 7px 55px #1679ff48
}
.cinematic-copy h2 {
    font-size:clamp(20px,2.5vw,33px);
    font-weight:500;
    letter-spacing:-.035em;
    margin:0 0 18px
}
.hero-description {
    color:#c7d7ee;
    max-width:575px;
    font-size:16px;
    line-height:1.65
}
.skill-tags {
    display:flex;
    gap:12px 18px;
    flex-wrap:wrap;
    margin:22px 0 5px
}
.skill-tags span {
    font-size:12px;
    color:#d7e7ff;
    padding-right:13px;
    border-right:1px solid #6b9de74f
}
.cinematic-copy .actions {
    margin-top:27px
}
.cinematic-copy .btn {
    border-radius:50px;
    padding:12px 23px;
    background:linear-gradient(110deg,#009dff,#115aff)
}
.cinematic-copy .btn.ghost {
    background:#06152a99;
    border:1px solid #158eff
}
.cinematic-copy .contact-strip {
    margin-top:25px
}
.cinematic-art {
    height:525px;
    position:relative;
    isolation:isolate
}
.cinematic-art:before {
    content:'';
    position:absolute;
    width:78%;
    aspect-ratio:1;
    top:18%;
    left:14%;
    border-radius:50%;
    background:radial-gradient(circle,#187cff7a 0%,#035aff1e 48%,transparent 68%);
    filter:blur(20px)
}
.hero-person {
    position:absolute;
    inset:11% 10% 0 12%;
    z-index:3;
    border-radius:46% 46% 8% 8%;
    overflow:hidden;
    mask-image:linear-gradient(black 0%,black 73%,transparent 99%);
    -webkit-mask-image:linear-gradient(black 0%,black 73%,transparent 99%)
}
.hero-person img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 40%;
    filter:contrast(1.03) saturate(1.04)
}
.neon-orbit {
    position:absolute;
    inset:22% 9% 16%;
    border:2px solid #148bff9c;
    border-radius:50%;
    transform:rotate(-24deg);
    box-shadow:0 0 35px #157cff7a;
    z-index:1;
    pointer-events:none
}
.code-panel {
    position:absolute;
    z-index:4;
    top:3%;
    left:0%;
    transform:rotate(-5deg);
    padding:14px 19px;
    border-radius:15px;
    background:#07142cdb;
    border:1px solid #3786ff99;
    box-shadow:0 18px 50px #0008;
    backdrop-filter:blur(10px);
    font-size:12px;
    color:#90d5ff;
    line-height:1.65
}
.code-dots {
    color:#ff7995;
    letter-spacing:4px;
    margin-bottom:8px;
    font-size:11px
}
.float-card {
    position:absolute;
    z-index:5;
    max-width:160px;
    padding:12px 14px;
    background:#07152ce8;
    border:1px solid #148bff9c;
    border-radius:16px;
    box-shadow:0 0 30px #0077ff37;
    color:#dcecff;
    font-size:12px;
    font-weight:700;
    backdrop-filter:blur(10px)
}
.float-card span {
    font-size:24px;
    color:#139dff;
    display:block
}
.float-one {
    left:0;
    top:54%
}
.float-two {
    right:0;
    top:39%
}
.float-three {
    right:0;
    bottom:4%
}
.art-caption {
    position:absolute;
    right:0;
    top:2%;
    font-size:17px;
    color:#c6d9ff;
    font-style:italic;
    transform:rotate(-7deg)
}
.cinematic-stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:16px;
    max-width:980px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #2075d07a;
    border-radius:18px;
    background:#030d20d9;
    backdrop-filter:blur(12px);
    overflow:hidden;
    gap:0
}
.cinematic-stats .stat {
    background:none;
    border:0;
    border-right:1px solid #41618b69;
    border-radius:0;
    padding:18px 20px
}
.cinematic-stats .stat:last-child {
    border:0
}
.cinematic-stats .stat strong {
    color:white;
    font-size:29px
}
.cinematic-stats .stat span {
    color:#b3c5e4
}
@media(max-width:900px) {
    .cinematic-grid {
        grid-template-columns:1fr;
        gap:16px
    }
    .cinematic-art {
        height:440px;
        max-width:560px;
        width:100%;
        margin:auto
    }
    .hero {
        padding-top:55px
    }
    .cinematic-copy h1 {
        font-size:clamp(60px,11vw,90px)
    }
    .cinematic-stats {
        margin-top:15px
    }
}
@media(max-width:560px) {
    .cinematic-art {
        height:355px
    }
    .code-panel {
        font-size:10px;
        left:0;
        top:1%;
        padding:8px 10px
    }
    .float-card {
        font-size:10px;
        padding:8px;
        max-width:105px
    }
    .float-card span {
        font-size:18px
    }
    .art-caption {
        display:none
    }
    .cinematic-stats {
        grid-template-columns:repeat(2,1fr)
    }
    .cinematic-stats .stat:nth-child(2) {
        border-right:0
    }
    .cinematic-stats .stat:nth-child(-n+2) {
        border-bottom:1px solid #41618b69
    }
    .cinematic-copy h1 {
        font-size:clamp(55px,13vw,74px)
    }
    .skill-tags {
        gap:9px
    }
    .skill-tags span {
        font-size:11px
    }
    .cinematic-copy .contact-strip {
        overflow-wrap:anywhere
    }
}
@media(prefers-reduced-motion:no-preference) {
    .float-one {
        animation:affanFloat 6s ease-in-out infinite
    }
    .float-two {
        animation:affanFloat 6s ease-in-out -2s infinite
    }
    .float-three {
        animation:affanFloat 6s ease-in-out -4s infinite
    }
    @keyframes affanFloat {
        50% {
            transform:translateY(-10px)
        }
    }
}
/* Animated product-led hero — no personal photo in banner */
.hero {
    background:radial-gradient(ellipse at 78% 42%,#123f8a65,transparent 45%),#030b1b;
    overflow:hidden
}
.cinematic-grid {
    align-items:center
}
.cinematic-art {
    height:590px;
    min-width:0;
    position:relative
}
.tech-stage {
    position:absolute;
    inset:0;
    perspective:1100px;
    isolation:isolate
}
.tech-grid {
    position:absolute;
    inset:12% -10% 4%;
    background-image:linear-gradient(#2876e91c 1px,transparent 1px),linear-gradient(90deg,#2876e91c 1px,transparent 1px);
    background-size:36px 36px;
    transform:rotateX(58deg) rotateZ(-12deg);
    mask-image:radial-gradient(ellipse,#000,transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse,#000,transparent 75%)
}
.tech-halo {
    position:absolute;
    border-radius:50%;
    border:1px solid #2789ff75;
    box-shadow:0 0 32px #176aff40;
    pointer-events:none;
    animation:techPulse 7s ease-in-out infinite
}
.halo-a {
    inset:18% 4% 12%;
    transform:rotate(-23deg)
}
.halo-b {
    inset:24% 0% 20%;
    transform:rotate(27deg);
    animation-delay:-3s
}
.laptop {
    position:absolute;
    width:75%;
    left:13%;
    top:26%;
    transform:rotateY(-12deg) rotateX(5deg) rotateZ(5deg);
    filter:drop-shadow(0 28px 36px #000c);
    animation:laptopFloat 7s ease-in-out infinite;
    z-index:3
}
.laptop-screen {
    height:305px;
    background:#071122;
    border:9px solid #233b68;
    border-bottom-width:14px;
    border-radius:17px 17px 7px 7px;
    box-shadow:inset 0 0 0 1px #6a98f880,0 0 40px #156eff85;
    overflow:hidden
}
.site-top {
    height:43px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 15px;
    background:#091a37;
    color:#a7bde3;
    font-size:9px
}
.site-brand {
    font-size:13px;
    font-weight:900;
    color:#fff;
    letter-spacing:.09em
}
.site-brand span {
    font-size:8px;
    color:#41a9ff
}
.site-main {
    padding:29px 28px 19px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    background:radial-gradient(circle at 88% 20%,#196bde70,transparent 50%),linear-gradient(125deg,#09142b,#0b2b58);
    height:218px
}
.site-tag {
    font-size:8px;
    color:#70c7ff;
    letter-spacing:.2em;
    font-weight:800
}
.site-main strong {
    font-size:clamp(20px,2.6vw,32px);
    line-height:1.12;
    margin:10px 0;
    color:#fff
}
.site-main em {
    font-style:normal;
    color:#27b5ff
}
.site-blurb {
    font-size:10px;
    color:#b4cbea
}
.site-cta {
    margin-top:13px;
    background:#0a82ff;
    color:#fff;
    padding:8px 12px;
    border-radius:6px;
    font-size:9px;
    font-weight:800
}
.site-mini {
    display:flex;
    gap:9px;
    padding:10px 15px
}
.site-mini span {
    width:30%;
    height:7px;
    background:#1d477e;
    border-radius:10px
}
.laptop-base {
    height:18px;
    width:111%;
    margin-left:-5.5%;
    background:linear-gradient(#7a9ac7,#253e67 60%,#101e34);
    border-radius:4px 4px 55% 55%;
    box-shadow:0 8px 25px #0008
}
.tech-code {
    position:absolute;
    left:0;
    top:5%;
    z-index:5;
    transform:rotate(-5deg);
    border:1px solid #2e8cff88;
    border-radius:16px;
    background:#08172de8;
    padding:16px 20px;
    box-shadow:0 12px 35px #0008;
    animation:badgeFloat 6s ease-in-out infinite
}
.tech-code pre {
    font-size:12px;
    line-height:1.65;
    color:#86d5ff;
    margin:10px 0 0
}
.tech-dots {
    color:#ff699c;
    font-size:10px;
    letter-spacing:5px
}
.tech-badge {
    position:absolute;
    z-index:6;
    display:flex;
    gap:10px;
    align-items:center;
    padding:13px 16px;
    background:#081932f0;
    border:1px solid #2287ff85;
    border-radius:14px;
    color:#e9f5ff;
    box-shadow:0 10px 35px #0009,0 0 25px #087aff30;
    font-size:12px;
    font-weight:800;
    animation:badgeFloat 5.5s ease-in-out infinite
}
.tech-badge b {
    font-size:22px;
    color:#1ba8ff
}
.tech-badge small {
    color:#91acd3;
    font-size:9px;
    font-weight:500
}
.badge-speed {
    left:0;
    top:63%
}
.badge-seo {
    right:0;
    top:12%;
    animation-delay:-2s
}
.badge-growth {
    right:-1%;
    bottom:7%;
    animation-delay:-3s
}
.tech-orbit-label {
    position:absolute;
    right:5%;
    top:2%;
    font-style:italic;
    color:#a6d5ff;
    font-size:17px;
    transform:rotate(-8deg)
}
.about-photo {
    position:relative;
    min-height:450px;
    border:1px solid #318aff99;
    border-radius:24px;
    overflow:hidden;
    background:#0c1a32;
    box-shadow:0 0 45px #1268ed2c
}
.about-photo img {
    display:block;
    width:100%;
    height:470px;
    object-fit:cover;
    object-position:center 37%;
    filter:brightness(1.06) contrast(1.03)
}
.about-photo-label {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:24px 20px 17px;
    background:linear-gradient(transparent,#020918df);
    font-size:11px;
    letter-spacing:.15em;
    font-weight:850;
    color:#d9edff
}
@keyframes laptopFloat {
    0%,100% {
        transform:translateY(0) rotateY(-12deg) rotateX(5deg) rotateZ(5deg)
    }
    50% {
        transform:translateY(-13px) rotateY(-10deg) rotateX(5deg) rotateZ(4deg)
    }
}
@keyframes badgeFloat {
    0%,100% {
        translate:0 0
    }
    50% {
        translate:0 -9px
    }
}
@keyframes techPulse {
    50% {
        opacity:.4;
        scale:1.03
    }
}
@media(max-width:900px) {
    .cinematic-art {
        height:500px
    }
    .laptop-screen {
        height:275px
    }
    .site-main {
        height:190px
    }
    .tech-code pre {
        font-size:10px
    }
    .tech-code {
        padding:12px
    }
}
@media(max-width:560px) {
    .cinematic-art {
        height:370px
    }
    .laptop {
        width:77%;
        left:12%;
        top:27%
    }
    .laptop-screen {
        height:208px;
        border-width:6px;
        border-bottom-width:10px
    }
    .site-top {
        height:30px;
        font-size:7px
    }
    .site-brand {
        font-size:10px
    }
    .site-brand span {
        font-size:6px
    }
    .site-main {
        height:149px;
        padding:15px
    }
    .site-main strong {
        font-size:20px
    }
    .site-cta {
        margin-top:8px
    }
    .site-mini {
        padding:7px
    }
    .tech-code {
        top:3%;
        left:0;
        padding:9px 11px
    }
    .tech-code pre {
        font-size:7px
    }
    .tech-badge {
        font-size:9px;
        padding:7px;
        gap:5px
    }
    .tech-badge b {
        font-size:15px
    }
    .tech-badge small {
        font-size:7px
    }
    .badge-speed {
        top:70%
    }
    .badge-seo {
        top:15%
    }
    .badge-growth {
        bottom:1%
    }
    .tech-orbit-label {
        font-size:11px;
        right:2%
    }
    .about-photo img {
        height:390px
    }
    .about-photo {
        min-height:390px
    }
}
@media(prefers-reduced-motion:reduce) {
    .laptop,.tech-code,.tech-badge,.tech-halo {
        animation:none!important
    }
}

/* Project gallery — one consistent full-bleed image rule. */
.project-grid .project-card .mock {
  position: relative;
  display: block;
  width: 100%;
  height: 230px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}
.project-grid .project-card .mock::before { display: none; }
.project-grid .project-card .mock > .preview-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 12px;
  margin: 0;
}
.project-grid .project-card .mock > img.project-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
  border: 0;
  object-fit: cover;
  object-position: center top;
  transform: none;
  opacity: 0;
  z-index: 3;
}
.project-grid .project-card .mock > img.project-image.ready { opacity: 1; }
.project-grid .project-card:hover .mock > img.project-image.ready { transform: scale(1.025); }
@media (max-width: 600px) {
  .project-grid .project-card .mock { height: 210px; }
}