@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--bg:#f8fafc;--surface:#fff;--surface-alt:#f1f5f9;--text:#1f2937;--muted:#64748b;--border:#e2e8f0;--accent:#4f46e5;--accent-hover:#4338ca;--accent-soft:#eef2ff;--shadow:0 14px 38px rgba(15,23,42,.055);--header:rgba(248,250,252,.88)}
:root[data-theme=dark]{color-scheme:dark;--bg:#111827;--surface:#1f2937;--surface-alt:#172033;--text:#f9fafb;--muted:#9ca3af;--border:#374151;--accent:#818cf8;--accent-hover:#a5b4fc;--accent-soft:#282d50;--shadow:0 14px 38px rgba(0,0,0,.18);--header:rgba(17,24,39,.88)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.7;transition:background .2s,color .2s}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4,.brand{font-family:Manrope,sans-serif;letter-spacing:-.04em}h1{font-size:clamp(2.8rem,6vw,5.1rem);line-height:1.08;font-weight:800;margin:22px 0}h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.16;margin:12px 0}h3{font-size:1.25rem;line-height:1.35}p{color:var(--muted)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{outline-offset:4px}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent)}.section-wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}.section{padding-block:112px}.section-alt{background:var(--surface-alt)}.section-heading{max-width:680px;margin-bottom:42px}.section-heading>p{font-size:1.04rem;max-width:560px}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--accent);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em}.accent-text{color:var(--accent)}.muted-heading{color:var(--muted)}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid color-mix(in srgb,var(--border) 75%,transparent);background:var(--header);backdrop-filter:blur(18px)}.navbar{min-height:78px;display:flex;align-items:center;gap:28px}.brand{font-size:1.08rem;font-weight:800;letter-spacing:-.06em;white-space:nowrap}.brand span{color:var(--accent)}.nav-links{display:flex;align-items:center;justify-content:center;gap:23px;margin-left:auto}.nav-links a{font-size:.83rem;color:var(--muted);transition:color .2s}.nav-links a:hover,.nav-links a:focus-visible{color:var(--accent)}.nav-actions{display:flex;align-items:center;gap:14px}.theme-toggle,.menu-toggle{border:1px solid var(--border);background:var(--surface);color:var(--text);width:39px;height:39px;border-radius:50%;display:grid;place-items:center;cursor:pointer}.theme-icon{font-size:1.2rem}.nav-contact{background:var(--text);color:var(--bg);border-radius:9px;padding:10px 14px;font-size:.82rem;font-weight:700;white-space:nowrap}.nav-contact span{margin-left:7px}.menu-toggle{display:none;border-radius:10px}.hero{min-height:calc(100vh - 78px);position:relative;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:55px;padding-top:82px;padding-bottom:120px}.hero-copy{max-width:620px}.hero h1{max-width:650px}.hero-intro{font-size:1.08rem;max-width:570px;line-height:1.9}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:10px;padding:13px 18px;font-size:.88rem;font-weight:700;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--accent);color:white}.button-primary:hover{background:var(--accent-hover)}.button-secondary{border-color:var(--border);background:var(--surface);color:var(--text)}.button-secondary:hover{border-color:var(--accent);color:var(--accent)}.hero-socials{display:flex;gap:20px;margin-top:30px}.hero-socials a{font-size:.82rem;color:var(--muted);font-weight:600}.hero-socials a:hover{color:var(--accent)}.hero-art{height:430px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid var(--border);border-radius:50%;aspect-ratio:1}.orbit-one{width:380px}.orbit-two{width:300px;border-style:dashed;opacity:.75}.code-window{width:min(420px,100%);position:relative;z-index:2;background:#171d2c;color:#e5e7eb;border:1px solid #30394d;border-radius:15px;overflow:hidden;box-shadow:0 25px 80px rgba(15,23,42,.25);transform:rotate(-2deg)}.window-top{height:44px;border-bottom:1px solid #30394d;display:flex;align-items:center;gap:7px;padding:0 15px}.window-top>span{width:8px;height:8px;border-radius:50%;background:#fb7185}.window-top>span:nth-child(2){background:#fbbf24}.window-top>span:nth-child(3){background:#4ade80}.window-top small{margin-left:auto;color:#8792a8;font-size:.7rem}.code-lines{padding:23px 25px 30px;font: .84rem/1.95 ui-monospace,SFMono-Regular,Consolas,monospace;min-height:260px}.code-lines p{margin:0;color:#e5e7eb}.code-muted{color:#8290a8}.code-purple{color:#c4b5fd}.code-green{color:#86efac}.indent{padding-left:24px}.code-cursor{width:7px;height:16px;background:#a5b4fc;display:inline-block;vertical-align:middle;animation:blink 1.1s step-end infinite}.floating-chip{position:absolute;z-index:3;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow);font-size:.75rem;font-weight:700}.chip-top{top:55px;right:-5px}.chip-bottom{bottom:48px;left:0;display:flex;align-items:center;gap:9px}.scroll-cue{position:absolute;bottom:30px;left:0;display:flex;align-items:center;gap:10px;font-size:.72rem;color:var(--muted)}.scroll-cue span{height:28px;width:17px;border:1px solid var(--muted);border-radius:10px;position:relative}.scroll-cue span:after{content:'';position:absolute;top:5px;left:6px;width:3px;height:5px;border-radius:3px;background:var(--accent);animation:scrollDot 1.5s infinite}.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:start}.about-copy>p{font-size:1rem;line-height:1.95}.interest-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.interest-list span,.tag-list span{background:var(--accent-soft);color:var(--accent);padding:7px 11px;border-radius:7px;font-size:.76rem;font-weight:600}.detail-card{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:8px 25px;box-shadow:var(--shadow)}.detail-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:17px 0;border-bottom:1px solid var(--border)}.detail-row:last-child{border:0}.detail-row span{color:var(--muted);font-size:.85rem}.detail-row strong{text-align:right;font-size:.87rem;max-width:60%}.education-list{display:grid;gap:18px}.education-card{display:grid;grid-template-columns:112px 1fr;gap:26px;padding:27px;background:var(--surface);border:1px solid var(--border);border-radius:15px}.institution-logo{height:100px;width:100px;border:1px solid var(--border);border-radius:12px;background:#fff;display:grid;place-items:center;padding:10px}.institution-logo img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}.education-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.education-top h3{margin-bottom:5px}.education-qualification{font-size:.9rem;margin-bottom:0}.date-pill{white-space:nowrap;background:var(--accent-soft);color:var(--accent);font-size:.75rem;font-weight:700;padding:6px 10px;border-radius:7px}.education-content>p:last-child{margin-bottom:0}.location-line{font-size:.82rem;margin:12px 0}.skill-group{margin-top:30px}.skill-group>h3{font-size:1rem;margin-bottom:15px}.skills-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.skill-card{display:flex;align-items:center;gap:13px;min-height:88px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:transform .2s,border-color .2s}.skill-card:hover{transform:translateY(-3px);border-color:var(--accent)}.skill-icon{width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;font-size:1.85rem;color:var(--accent)}.skill-icon .devicon-microsoftsqlserver-plain{font-size:1.65rem}.skill-icon span{font-size:1.5rem}.skill-card h4{font-size:.87rem;letter-spacing:-.02em;margin:0 0 3px}.skill-card p{font-size:.72rem;line-height:1.45;margin:0}.learning-note{display:flex;gap:16px;margin-top:25px;padding:22px;background:var(--accent-soft);border-radius:12px}.learning-symbol{font-size:1.5rem;color:var(--accent)}.learning-note strong{font-size:.92rem}.learning-note p{margin:4px 0 0;font-size:.86rem}.heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.text-link{display:inline-flex;gap:8px;align-items:center;color:var(--accent);font-size:.84rem;font-weight:700}.text-link:hover{text-decoration:underline}.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.project-card{overflow:hidden;border:1px solid var(--border);background:var(--surface);border-radius:15px;transition:transform .2s,box-shadow .2s}.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.project-visual{display:block;height:220px;overflow:hidden;background:var(--accent-soft)}.project-visual img{width:100%;height:100%;object-fit:cover;display:block}.project-placeholder{height:100%;min-height:190px;display:grid;place-content:center;text-align:center;gap:10px;background:radial-gradient(ellipse at top right,color-mix(in srgb,var(--accent) 17%,transparent),transparent 60%),linear-gradient(135deg,var(--surface-alt),var(--accent-soft));color:var(--accent)}.project-placeholder>span{font-family:Manrope,sans-serif;font-weight:800;font-size:4.2rem;line-height:1;letter-spacing:-.1em}.project-placeholder small{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.visual-education .project-placeholder{background:var(--accent-soft)}.project-body{padding:23px}.project-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:.72rem;margin-bottom:12px}.project-meta span:first-child{color:var(--accent);font-weight:700}.project-body h3,.project-body h2{font-size:1.32rem;margin-bottom:10px}.project-body>p{font-size:.88rem;line-height:1.8}.tag-list{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.tag-list span{font-size:.7rem;padding:5px 8px}.project-links{display:flex;flex-wrap:wrap;align-items:center;gap:17px;border-top:1px solid var(--border);padding-top:16px;margin-top:19px}
.icon-link{font-size:.8rem;font-weight:700;color:var(--text)}.icon-link:hover{color:var(--accent)}.coming-soon{color:var(--muted);font-size:.78rem;font-weight:600}.future-placeholder{background:var(--surface-alt)}.future-placeholder>span{font-size:3.4rem}.achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.achievement-card{display:flex;gap:16px;padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:13px}.achievement-mark{color:var(--accent);font-size:1.3rem}.achievement-card h3{font-size:1rem;margin-bottom:7px}.achievement-card p{font-size:.86rem;margin-bottom:8px}.achievement-card small{display:block;color:var(--muted);font-size:.75rem;margin-bottom:8px}.empty-state{padding:35px;text-align:center;border:1px dashed var(--border);border-radius:13px}.empty-state>span{font-size:1.8rem;color:var(--accent)}.empty-state p{margin:8px auto 0;max-width:520px}.contact-section{background:var(--surface-alt)}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;align-items:start}.email-card{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:17px}.email-icon{width:42px;height:42px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border-radius:10px;font-size:1.2rem}.email-card>span:nth-child(2){display:grid;gap:2px;min-width:0}.email-card small{color:var(--muted);font-size:.75rem}.email-card strong{font-size:.82rem;overflow-wrap:anywhere}.email-card .arrow{margin-left:auto;color:var(--accent)}.copy-email{margin:12px 0 0;padding:7px 0;border:0;background:transparent;color:var(--accent);font-size:.8rem;font-weight:700;cursor:pointer}.copy-email span{margin-left:7px}.copy-feedback{font-size:.78rem;min-height:1.2em}.social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:22px}.social-grid a{display:flex;align-items:center;gap:10px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:9px;font-size:.8rem;font-weight:600}.social-grid a>span{display:grid;place-items:center;color:var(--accent);width:22px;font-weight:800}.social-grid b{margin-left:auto;color:var(--muted)}.social-grid a:hover{border-color:var(--accent)}.contact-form{background:var(--surface);border:1px solid var(--border);padding:27px;border-radius:15px;box-shadow:var(--shadow)}.form-row{display:grid;gap:7px;margin-bottom:17px}.form-row label{font-size:.8rem;font-weight:700}.form-row input,.form-row textarea{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:12px 13px;font-size:.86rem;resize:vertical}.form-row input::placeholder,.form-row textarea::placeholder{color:var(--muted);opacity:.8}.form-row input:focus,.form-row textarea:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 18%,transparent)}.submit-button{width:100%}.form-note{font-size:.72rem;margin:12px 0 0}.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.notice{grid-column:1/-1;padding:12px 15px;border-radius:9px;font-size:.88rem}.notice.success{background:#dcfce7;color:#166534}.notice.error{background:#fee2e2;color:#991b1b}.site-footer{border-top:1px solid var(--border);padding:27px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-inner p,.footer-inner>span{font-size:.76rem;margin:0;color:var(--muted)}.back-to-top{position:fixed;right:22px;bottom:22px;width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--accent);font-size:1.3rem;box-shadow:var(--shadow);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s;z-index:10}.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.inner-page{padding-top:40px;padding-bottom:100px;min-height:70vh}.breadcrumb{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.78rem;margin-bottom:35px}.breadcrumb a:hover{color:var(--accent)}.inner-heading{padding:40px 0 15px}.inner-heading h1,.project-detail h1{font-size:clamp(2.5rem,5vw,4rem)}.project-detail{max-width:900px;margin:auto}.detail-visual{height:320px;border-radius:16px;overflow:hidden;margin:35px 0;background:var(--accent-soft)}.detail-content{max-width:720px;margin:auto}.detail-content section{margin:35px 0}.detail-content h2{font-size:1.5rem}.detail-content p{line-height:1.9}.detail-content .hero-actions{margin-top:35px}@keyframes blink{50%{opacity:0}}@keyframes scrollDot{0%{transform:translateY(0);opacity:1}100%{transform:translateY(9px);opacity:0}}@media(max-width:1000px){.navbar{gap:18px}.nav-links{gap:13px}.nav-links a{font-size:.78rem}.hero{gap:25px}.hero-art{transform:scale(.92)}.skills-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.contact-grid{gap:35px}}@media(max-width:800px){.section-wrap{width:min(100% - 36px,650px)}.section{padding-block:82px}.navbar{min-height:70px}.menu-toggle{display:grid;margin-left:auto}.nav-actions{margin-left:0}.nav-contact{display:none}.nav-links{display:none;position:absolute;left:0;right:0;top:69px;padding:15px 22px 22px;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow);align-items:stretch;gap:0}.nav-links.is-open{display:flex;flex-direction:column}.nav-links a{padding:11px 4px;font-size:.9rem}.hero{min-height:auto;grid-template-columns:1fr;padding-top:75px;padding-bottom:105px;gap:15px}.hero-copy{max-width:650px}.hero-art{height:370px;max-width:550px;width:100%;margin:auto;transform:none}.orbit-one{width:330px}.orbit-two{width:260px}.code-window{width:min(390px,90%)}.chip-top{right:0;top:30px}.chip-bottom{left:0;bottom:30px}.scroll-cue{bottom:24px}.about-grid,.contact-grid{grid-template-columns:1fr;gap:30px}.about-grid{gap:35px}.education-card{grid-template-columns:85px 1fr;gap:18px;padding:21px}.institution-logo{width:82px;height:82px}.education-top{flex-direction:column;gap:10px}.education-top .date-pill{align-self:flex-start}.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.projects-grid{gap:16px}.project-visual{height:180px}.project-body{padding:18px}.project-meta{flex-wrap:wrap}.contact-grid{gap:30px}.footer-inner{flex-wrap:wrap}.footer-inner p{order:3;flex-basis:100%}}@media(max-width:540px){h1{font-size:2.65rem}.section-wrap{width:calc(100% - 32px)}.section{padding-block:68px}.section-heading{margin-bottom:30px}.hero{padding-top:58px}.hero-intro{font-size:1rem}.hero-art{height:320px}.orbit-one{width:280px}.orbit-two{width:220px}.code-window{width:95%}.code-lines{padding:18px;font-size:.72rem;min-height:225px}.floating-chip{font-size:.65rem;padding:8px 10px}.chip-top{top:10px}.chip-bottom{bottom:14px}.hero-socials{gap:15px;flex-wrap:wrap}.detail-card{padding-inline:17px}.detail-row{gap:12px}.detail-row span,.detail-row strong{font-size:.78rem}.education-card{grid-template-columns:1fr;padding:18px;gap:15px}.institution-logo{height:72px;width:72px}.education-top h3{font-size:1.08rem}.skills-grid{gap:9px}.skill-card{min-height:78px;padding:11px;gap:9px}.skill-icon{width:28px;height:30px;flex-basis:28px;font-size:1.5rem}.skill-card h4{font-size:.78rem}.skill-card p{font-size:.68rem}.heading-row{align-items:flex-start;flex-direction:column}.projects-grid,.achievement-grid{grid-template-columns:1fr}.project-visual{height:205px}.project-body{padding:20px}.social-grid{grid-template-columns:1fr 1fr}.contact-form{padding:20px}.email-card strong{font-size:.74rem}.footer-inner{align-items:flex-start;flex-direction:column;gap:8px}.footer-inner p{order:initial}.detail-visual{height:230px}.detail-content .hero-actions{flex-direction:column;align-items:stretch}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Portrait frame in the hero section */
.hero-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 440px;
    isolation: isolate;
}

.photo-glow {
    position: absolute;
    width: 320px;
    height: 360px;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    filter: blur(70px);
    opacity: 0.22;
    border-radius: 50%;
    z-index: -1;
}

.photo-frame {
    width: 290px;
    height: 370px;
    padding: 5px;
    border-radius: 50% / 45%;
    background: linear-gradient(145deg, #6366f1, #06b6d4, #818cf8);
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.22);
    overflow: hidden;
    animation: portrait-float 5s ease-in-out infinite;
}

.profile-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: inherit;
}

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

.floating-chip {
    position: absolute;
    z-index: 2;
    padding: 12px 16px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: #1e293b;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.chip-top {
    top: 55px;
    right: -5px;
}

.chip-bottom {
    bottom: 55px;
    left: -5px;
    display: flex;
    align-items: center;
    gap: 9px;
}

@media (max-width: 768px) {
    .hero-art {
        min-height: 360px;
        margin-top: 24px;
    }

    .photo-frame {
        width: 230px;
        height: 300px;
    }

    .photo-glow {
        width: 260px;
        height: 290px;
    }

    .chip-top {
        top: 30px;
        right: 0;
    }

    .chip-bottom {
        bottom: 30px;
        left: 0;
    }

    .floating-chip {
        padding: 10px 12px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .photo-frame {
        animation: none;
    }
}

.social-grid a img {
    width: 32px;
    height: 30px;
    object-fit: contain;
    display: block;
}

.social-grid a {
    min-height: 30px;
    padding:25px 25px;
    font-size: 20px;
    gap: 19px;
    box-sizing: border-box;
}

.social-grid a img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* PROJECT DETAIL PAGE */
.project-detail-heading {
    max-width: 850px;
    margin: 0 auto 36px;
    text-align: center;
}

.project-detail-heading h1 {
    margin: 14px 0;
}

.project-lead,
.gallery-description {
    color: #64748b;
    line-height: 1.8;
}

.detail-content {
    max-width: 1000px;
    margin: 0 auto;
}

.detail-section {
    margin: 42px 0;
}

.detail-section h2 {
    margin-bottom: 16px;
}

.detail-section p {
    line-height: 1.85;
}

.project-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 40px 0;
}

/* HORIZ.ONE SCREENSHOT GALLERY */
.horizone-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.gallery-item {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
}

.gallery-item a {
    position: relative;
    display: block;
    overflow: hidden;
    background: #f1f5f9;
}

.gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    background: #f1f5f9;
    transition: transform .3s ease;
}

.gallery-item:hover img {
    transform: scale(1.025);
}

.gallery-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .82);
    color: #fff;
    font-size: 18px;
}

.gallery-item figcaption {
    padding: 13px 15px;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 650px) {
    .horizone-gallery {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .project-detail-actions {
        flex-direction: column;
    }

    .project-detail-actions .button {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-item,
    .gallery-item img {
        transition: none;
    }
}

.skill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 58px;
    height: 58px;
}

.skill-icon img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.skill-card {
    display: flex;
    align-items: center;
    gap: 20px;
}

.skill-card h4 {
    margin: 0 0 6px;
}

.skill-card p {
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .skill-icon {
        width: 48px;
        height: 48px;
    }

    .skill-icon img {
        width: 40px;
        height: 36px;
    }
}


/* HORIZ.ONE FEATURES */
.horizone-feature-grid,
.horizone-benefits,
.horizone-future-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.horizone-feature,
.horizone-benefits > div,
.horizone-future-card {
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.horizone-feature:hover,
.horizone-benefits > div:hover,
.horizone-future-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.horizone-feature > span,
.horizone-future-card > span {
    display: block;
    font-size: 30px;
    margin-bottom: 16px;
}

.horizone-feature h3,
.horizone-benefits h3,
.horizone-future-card h3 {
    font-size: 17px;
    color: #1e293b;
    margin: 0 0 10px;
}

.horizone-feature p,
.horizone-benefits p,
.horizone-future-card p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* TECHNOLOGY LOGOS */
.horizone-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.horizone-tech-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 25px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}

.horizone-tech-card img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 15px;
}

.horizone-tech-card h3 {
    font-size: 18px;
    margin: 0 0 8px;
    color: #1e293b;
}

.horizone-tech-card p {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 800px) {
    .horizone-feature-grid,
    .horizone-benefits,
    .horizone-future-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .horizone-tech-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .horizone-feature-grid,
    .horizone-benefits,
    .horizone-future-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .horizone-feature,
    .horizone-benefits > div,
    .horizone-future-card {
        transition: none;
    }
}

/* HORIZ.ONE Project Gallery */
.horizone-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.gallery-item {
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.gallery-item a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: #f1f5f9;
}


.gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1896 / 1075;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.03);
}

.gallery-item figcaption {
    padding: 12px 4px 4px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.gallery-lightbox.active {
    display: flex;
}
/* Fullscreen image viewer */
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(8, 12, 24, 0.94);
    align-items: center;
    justify-content: center;
    padding: 65px 80px;
    box-sizing: border-box;
}

.gallery-lightbox.active {
    display: flex;
}

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
}

.lightbox-content img {
    display: block;
    max-width: 100%;
    max-height: calc(100% - 35px);
    width: auto;
    height: auto;
    object-fit: contain;
    aspect-ratio: auto;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    box-shadow: 0 10px 45px rgba(0, 0, 0, 0.4);
}

#lightboxCaption {
    color: white;
    text-align: center;
    margin: 12px 0 0;
    font-size: 14px;
}

.lightbox-arrow,
.lightbox-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-arrow:hover,
.lightbox-close:hover {
    background: #e67e22;
    transform: scale(1.08);
}

.lightbox-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 58px;
    border-radius: 12px;
    font-size: 24px;
}

.lightbox-arrow:hover {
    transform: translateY(-50%) scale(1.08);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-close {
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
}

.lightbox-counter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.12);
    padding: 7px 14px;
    border-radius: 20px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .gallery-lightbox {
        padding: 65px 45px;
    }

    .lightbox-arrow {
        width: 36px;
        height: 48px;
        font-size: 19px;
    }

    .lightbox-prev {
        left: 5px;
    }

    .lightbox-next {
        right: 5px;
    }

    .lightbox-content img {
        max-width: 100%;
        max-height: calc(100% - 35px);
    }
}
/* Tablet */
@media (max-width: 900px) {
    .horizone-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 550px) {
    .horizone-gallery {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gallery-item img {
        height: 220px;
    }
}

.horizone-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

.gallery-item {
    margin: 0;
    min-width: 0;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}

.gallery-item figcaption {
    margin-top: 8px;
    text-align: center;
}.project-detail-actions-top {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
    justify-content: flex-start;
}

.project-detail-actions-top .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 600px) {
    .project-detail-actions-top {
        gap: 8px;
    }
}

/* On small mobile screens, keep two columns */
@media (max-width: 480px) {
    .horizone-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}