:root {
  --bg: #f5f7fb; --bg-soft: #edf1f7; --surface: rgba(255,255,255,.76); --surface-solid: #fff;
  --text: #111827; --muted: #657084; --primary: #6657f7; --primary-2: #04bfc4; --accent: #b5f13c;
  --border: rgba(15,23,42,.1); --header: rgba(245,247,251,.76); --shadow: 0 24px 70px rgba(28,35,60,.12);
  --display: "Space Grotesk", sans-serif; --body: "Manrope", sans-serif;
}
body.dark {
  --bg: #070a12; --bg-soft: #0b101c; --surface: rgba(16,22,35,.72); --surface-solid: #101624;
  --text: #f4f5f8; --muted: #929bad; --primary: #8174ff; --primary-2: #2de1d1; --accent: #b8f34a;
  --border: rgba(255,255,255,.09); --header: rgba(7,10,18,.72); --shadow: 0 26px 80px rgba(0,0,0,.4);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { min-width: 320px; overflow-x: hidden; font-family: var(--body); color: var(--text); background: var(--bg); line-height: 1.7; transition: color .35s, background .35s; }
body.menu-open { overflow: hidden; }
a { color: inherit; } img, video { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: #071018; background: var(--accent); }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { position: relative; padding: 120px 0; }
.page-noise { position: fixed; inset: 0; z-index: 2000; opacity: .025; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
#scroll-progress { position: fixed; inset: 0 auto auto 0; width: 0; height: 3px; z-index: 1600; background: linear-gradient(90deg,var(--primary),var(--primary-2),var(--accent)); box-shadow: 0 0 16px var(--primary-2); }
.site-header { position: fixed; inset: 0 0 auto; z-index: 1400; border-bottom: 1px solid transparent; transition: .3s; }
.site-header.scrolled { background: var(--header); border-color: var(--border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-family: var(--display); font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 40px; aspect-ratio: 1; color: #fff; border-radius: 12px; font-size: .86rem; letter-spacing: -.04em; background: linear-gradient(135deg,var(--primary),#473bbd); box-shadow: 0 10px 24px rgba(102,87,247,.28); }
.brand-name { font-size: .95rem; }
.nav { display: flex; align-items: center; gap: 8px; padding: 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); backdrop-filter: blur(16px); }
.nav-link { position: relative; padding: 8px 14px; color: var(--muted); border-radius: 999px; text-decoration: none; font-size: .79rem; font-weight: 700; transition: .25s; }
.nav-link:hover, .nav-link.active { color: var(--text); background: color-mix(in srgb,var(--primary) 12%,transparent); }
.nav-actions { display: flex; gap: 8px; }.icon-btn { display: grid; place-items: center; width: 42px; aspect-ratio: 1; color: var(--text); cursor: pointer; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); transition: transform .25s, background .25s, opacity .25s; }
.icon-btn:hover { transform: translateY(-2px); background: var(--surface-solid); }.theme-toggle { position: relative; overflow: hidden; font-size: 1.1rem; }.theme-toggle span { position: absolute; transition: .3s; }
.dark .theme-toggle .sun, .theme-toggle .moon { transform: translateY(28px); opacity: 0; }.dark .theme-toggle .moon, .theme-toggle .sun { transform: translateY(0); opacity: 1; }.menu-toggle { display: none; }
.hero { min-height: 100svh; padding: 118px 0 78px; display: grid; place-items: center; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 50% -20%,color-mix(in srgb,var(--primary) 18%,transparent),transparent 40%); }
.hero::after { content:""; position:absolute; inset:0; z-index:-2; opacity:.35; background-image: linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom,black,transparent 75%); }
.hero-glow { position:absolute; z-index:-1; width:420px; aspect-ratio:1; border-radius:50%; filter:blur(110px); opacity:.18; animation: drift 9s ease-in-out infinite alternate; }.glow-one { background:var(--primary); top:5%; left:-12%; }.glow-two { background:var(--primary-2); right:-12%; bottom:3%; animation-delay:-4s; }
.hero-layout { display:grid; grid-template-columns: minmax(0,1.03fr) minmax(390px,.97fr); gap:clamp(45px,6vw,90px); align-items:center; }
.availability { width:max-content; display:flex; align-items:center; gap:9px; padding:7px 12px; margin-bottom:28px; color:var(--muted); border:1px solid var(--border); border-radius:999px; background:var(--surface); font-size:.72rem; font-weight:700; letter-spacing:.02em; }.status-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 14%,transparent); animation:pulse 2s infinite; }
.eyebrow { color:var(--primary-2); font-size:.74rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }.hero h1 { max-width:700px;white-space: nowrap; margin:7px 0 18px; font:700 clamp(3.9rem,7.2vw,6.8rem)/.88 var(--display); letter-spacing:-.075em; }.hero h1 span,.section-title span,.contact-card h2 span { color:transparent; background:linear-gradient(100deg,var(--primary),var(--primary-2)); background-clip:text; -webkit-background-clip:text; }
.role-stack { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--text); font-family:var(--display); font-size:clamp(.86rem,1.2vw,1rem); font-weight:600; }.role-stack i { width:4px; height:4px; border-radius:50%; background:var(--accent); }
.hero-lead { max-width:620px; margin:25px 0 31px; color:var(--muted); font-size:clamp(.98rem,1.3vw,1.1rem); }.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }.btn { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:0 20px; border:1px solid transparent; border-radius:14px; text-decoration:none; font-size:.82rem; font-weight:800; transition:transform .25s,box-shadow .25s,background .25s; }.btn span { font-size:1rem; }.btn:hover { transform:translateY(-3px); }.btn-primary { color:#fff; background:linear-gradient(120deg,var(--primary),#5a4cdc); box-shadow:0 13px 30px rgba(102,87,247,.28); }.btn-primary:hover { box-shadow:0 17px 38px rgba(102,87,247,.4); }.btn-secondary { border-color:var(--border); background:var(--surface); backdrop-filter:blur(12px); }.text-link { padding:12px 5px; color:var(--muted); text-decoration:none; font-size:.82rem; font-weight:800; }.text-link:hover { color:var(--primary-2); }.hero-meta { display:flex; gap:30px; margin-top:38px; padding-top:25px; border-top:1px solid var(--border); }.hero-meta div { display:flex; flex-direction:column; }.hero-meta strong { font:700 1.25rem var(--display); }.hero-meta span { color:var(--muted); font-size:.67rem; }
.hero-visual { position:relative; width:100%; animation:float 5s ease-in-out infinite; }.avatar-shell { position:relative; padding:12px; border:1px solid var(--border); border-radius:30px; background:linear-gradient(145deg,var(--surface-solid),color-mix(in srgb,var(--surface-solid) 70%,transparent)); box-shadow:var(--shadow); transform:rotate(1.2deg); }.avatar-shell::before { content:""; position:absolute; inset:-1px; z-index:-1; border-radius:31px; background:linear-gradient(140deg,color-mix(in srgb,var(--primary-2) 55%,transparent),transparent 40%,color-mix(in srgb,var(--primary) 55%,transparent)); filter:blur(8px); opacity:.45; }
.avatar-topline,.avatar-caption { display:flex; justify-content:space-between; align-items:center; padding:1px 8px 10px; color:var(--muted); font-size:.68rem; font-weight:700; }.avatar-topline span:first-child { display:flex; align-items:center; gap:7px; }.avatar-topline i { width:6px; height:6px; border-radius:50%; background:#f15b64; box-shadow:10px 0 #f5bd4f,20px 0 #56c458; margin-right:20px; }.avatar-container { position:relative; overflow:hidden; aspect-ratio:4/4.55; border-radius:21px; background:#0d1320; }.avatar-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.avatar-video { z-index:2; opacity:1; transition:opacity .8s ease; }.avatar-video.fade-out { opacity:0; pointer-events:none; }.avatar-image { z-index:1; opacity:0; transform:scale(1.04); transition:opacity .9s ease,transform 1.2s ease; }.avatar-image.visible { opacity:1; transform:scale(1); }.avatar-gradient { position:absolute; inset:auto 0 0; z-index:3; height:35%; pointer-events:none; background:linear-gradient(transparent,rgba(6,10,18,.6)); }.avatar-caption { padding:11px 8px 1px; }.avatar-caption strong { color:var(--text); }
.play-intro-btn{
    position:absolute;
    z-index:10;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    padding:16px 28px;
    border:none;
    border-radius:16px;
    cursor:pointer;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-2)
    );

    color:white;
    font-weight:700;
    font-size:0.95rem;

    box-shadow:
      0 15px 40px rgba(0,0,0,.25);

    transition:.3s;
}

.play-intro-btn:hover{
    transform:
      translate(-50%,-50%)
      scale(1.05);
}
.floating-chip { position:absolute; z-index:4; display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid rgba(255,255,255,.14); border-radius:13px; color:#fff; background:rgba(17,23,38,.82); backdrop-filter:blur(14px); box-shadow:0 16px 35px rgba(0,0,0,.24); font-size:.72rem; font-weight:800; }.floating-chip span { color:var(--accent); }.chip-ai { left:-36px; bottom:22%; }.chip-cloud { right:-27px; top:22%; }.visual-orbit { position:absolute; z-index:-2; border:1px dashed color-mix(in srgb,var(--primary) 35%,transparent); border-radius:50%; }.orbit-one { inset:-8%; animation:spin 30s linear infinite; }.orbit-two { inset:6% -14%; border-color:color-mix(in srgb,var(--primary-2) 25%,transparent); animation:spin 24s linear infinite reverse; }
.scroll-cue { position:absolute; bottom:25px; left:50%; display:flex; align-items:center; gap:10px; color:var(--muted); text-decoration:none; font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; transform:translateX(-50%); }.scroll-cue span { width:18px; height:28px; border:1px solid var(--border); border-radius:99px; }.scroll-cue span::after { content:""; display:block; width:3px; height:6px; margin:5px auto; border-radius:10px; background:var(--primary-2); animation:scroll 1.8s infinite; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:56px; }.section-heading.compact { margin-bottom:36px; }.section-heading>p { max-width:460px; color:var(--muted); font-size:.9rem; }.section-title { margin-top:10px; font:700 clamp(2.4rem,5vw,4.3rem)/1.02 var(--display); letter-spacing:-.055em; }
.project-story { background:var(--bg-soft); }.project-story::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 90% 20%,color-mix(in srgb,var(--primary) 10%,transparent),transparent 28%); }.project-showcase { display:grid; gap:34px; }.project-section { display:grid; grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr); gap:55px; padding:48px; overflow:hidden; }.panel { border:1px solid var(--border); border-radius:24px; background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(16px); }.project-index { color:var(--muted); font:600 .75rem var(--display); letter-spacing:.12em; }.project-tag { display:inline-flex; margin:17px 0 12px; padding:6px 10px; color:var(--primary-2); border:1px solid color-mix(in srgb,var(--primary-2) 25%,transparent); border-radius:999px; background:color-mix(in srgb,var(--primary-2) 7%,transparent); font-size:.63rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.left-content h3 { font:700 clamp(1.8rem,3vw,2.65rem)/1.05 var(--display); letter-spacing:-.04em; }.project-intro { margin:15px 0 24px; color:var(--muted); font-size:.86rem; }.project-details { display:grid; gap:17px; }.content-block h4 { margin-bottom:5px; color:var(--text); font-size:.67rem; letter-spacing:.13em; text-transform:uppercase; }.content-block p,.content-block li { color:var(--muted); font-size:.78rem; }.content-block ul { display:grid; gap:4px; list-style:none; }.content-block li { position:relative; padding-left:15px; }.content-block li::before { content:""; position:absolute; left:0; top:.68em; width:5px; height:5px; border-radius:50%; background:var(--primary); }.tech-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }.tech-tags span { padding:5px 9px; color:var(--text); border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb,var(--surface-solid) 65%,transparent); font-size:.67rem; font-weight:700; }.right-images { position:relative; min-width:0; display:flex; align-items:center; gap:15px; padding:25px; overflow-x:auto; border:1px solid var(--border); border-radius:20px; background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--bg-soft)),color-mix(in srgb,var(--primary-2) 7%,var(--bg-soft))); scroll-snap-type:x mandatory; scrollbar-width:thin; }.phone-shot { flex:0 0 min(42%,210px); aspect-ratio:9/19.5; overflow:hidden; border:5px solid #11151e; border-radius:25px; background:#000; box-shadow:0 20px 35px rgba(0,0,0,.25); scroll-snap-align:center; transition:transform .35s; }.phone-shot:nth-child(2) { transform:translateY(-12px); }.phone-shot:hover { transform:translateY(-7px) scale(1.025); }.phone-shot:nth-child(2):hover { transform:translateY(-18px) scale(1.025); }.phone-shot img,.workflow-shot img { width:100%; height:100%; display:block; object-fit:cover; cursor:zoom-in; }.workflow-shot { width:100%; overflow:hidden; border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,.18); }.workflow-shot img { height:auto; object-fit:contain; }
.services-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:15px; }.service-card { position:relative; grid-column:span 2; min-height:245px; padding:27px; overflow:hidden; transition:transform .3s,border-color .3s; }.service-card:nth-child(4),.service-card:nth-child(5) { grid-column:span 3; }.service-card:hover { transform:translateY(-7px); border-color:color-mix(in srgb,var(--primary) 45%,transparent); }.service-number { position:absolute; top:22px; right:23px; color:var(--muted); font:600 .64rem var(--display); }.service-icon { width:45px; height:45px; display:grid; place-items:center; margin-bottom:44px; color:var(--primary-2); border:1px solid var(--border); border-radius:13px; background:color-mix(in srgb,var(--primary-2) 8%,transparent); font-size:1.2rem; }.service-card h3 { max-width:230px; margin-bottom:10px; font:600 1.05rem/1.25 var(--display); }.service-card p { color:var(--muted); font-size:.77rem; }
#tech { background:var(--bg-soft); }.tech-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.tech-item { display:grid; grid-template-columns:46px 1fr; grid-template-rows:1fr 1fr; align-items:center; column-gap:15px; min-height:105px; padding:18px; transition:transform .3s,border-color .3s; }.tech-item:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--primary-2) 45%,transparent); }.tech-item img { grid-row:1/3; width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 7px 10px rgba(0,0,0,.15)); }.tech-item span { align-self:end; font:600 .9rem var(--display); }.tech-item small { align-self:start; color:var(--muted); font-size:.64rem; }
.contact-section { padding-bottom:90px; }.contact-card { position:relative; overflow:hidden; padding:clamp(45px,8vw,90px) 30px; text-align:center; border:1px solid var(--border); border-radius:30px; background:linear-gradient(145deg,var(--surface-solid),var(--bg-soft)); box-shadow:var(--shadow); }.contact-card::before { content:""; position:absolute; inset:0; opacity:.3; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:45px 45px; mask-image:radial-gradient(circle,black,transparent 70%); }.contact-glow { position:absolute; left:50%; top:50%; width:400px; aspect-ratio:1; border-radius:50%; background:var(--primary); filter:blur(140px); opacity:.13; transform:translate(-50%,-50%); }.contact-card>*:not(.contact-glow) { position:relative; }.contact-card h2 { margin:15px 0 18px; font:700 clamp(2.5rem,6vw,5.2rem)/.98 var(--display); letter-spacing:-.06em; }.contact-card>p:not(.eyebrow) { max-width:600px; margin:0 auto 27px; color:var(--muted); font-size:.9rem; }.contact-card .btn { margin:0 auto; }.contact-email { display:block; width:max-content; max-width:100%; margin:17px auto 0; color:var(--muted); font-size:.72rem; text-decoration:none; }
footer { padding:25px 0 35px; }.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:25px; color:var(--muted); border-top:1px solid var(--border); font-size:.68rem; }.footer-inner .brand-mark { width:34px; border-radius:10px; }
.lightbox { position:fixed; inset:0; z-index:1800; display:flex; align-items:center; justify-content:center; padding:24px; visibility:hidden; opacity:0; background:rgba(3,6,12,.92); backdrop-filter:blur(15px); transition:.25s; }.lightbox.open { visibility:visible; opacity:1; }.lightbox img { max-width:94vw; max-height:90vh; border:1px solid rgba(255,255,255,.16); border-radius:18px; box-shadow:0 25px 80px #000; transform:scale(.96); transition:.3s; }.lightbox.open img { transform:scale(1); }.lightbox-close { position:absolute; top:18px; right:18px; color:#fff; background:rgba(255,255,255,.08); }.to-top { position:fixed; right:18px; bottom:18px; z-index:1200; visibility:hidden; opacity:0; transform:translateY(12px); box-shadow:var(--shadow); }.to-top.show { visibility:visible; opacity:1; transform:translateY(0); }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s ease,transform .75s ease; }.reveal.visible { opacity:1; transform:none; }.fade-up { opacity:0; animation:fadeUp .8s ease forwards; }.delay-1 { animation-delay:.1s; }.delay-2 { animation-delay:.2s; }.delay-3 { animation-delay:.3s; }.delay-4 { animation-delay:.4s; }.delay-5 { animation-delay:.5s; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } from { opacity:0; transform:translateY(22px); } } @keyframes float { 50% { transform:translateY(-9px); } } @keyframes drift { to { transform:translate(45px,30px) scale(1.12); } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes pulse { 50% { box-shadow:0 0 0 8px transparent; } } @keyframes scroll { 0% { transform:translateY(0); opacity:0; } 40% { opacity:1; } 100% { transform:translateY(10px); opacity:0; } }
@media (max-width:980px) { .hero-layout { grid-template-columns:1fr 1fr; gap:35px; }.hero h1 { font-size:clamp(3.5rem,8vw,5rem); }.project-section { grid-template-columns:1fr; }.right-images { min-height:500px; }.tech-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { .container { width:min(100% - 28px,1180px); }.section { padding:85px 0; }.nav-wrap { min-height:68px; }.brand-name { display:none; }.menu-toggle { display:grid; position:relative; }.menu-toggle span { position:absolute; width:17px; height:1.5px; background:currentColor; transition:.25s; transform:translateY(-3px); }.menu-toggle span+span { transform:translateY(3px); }.menu-open .menu-toggle span { transform:rotate(45deg); }.menu-open .menu-toggle span+span { transform:rotate(-45deg); }.nav { position:fixed; inset:68px 14px auto; display:flex; flex-direction:column; align-items:stretch; padding:14px; visibility:hidden; opacity:0; transform:translateY(-12px); border-radius:18px; background:var(--surface-solid); box-shadow:var(--shadow); transition:.25s; }.menu-open .nav { visibility:visible; opacity:1; transform:none; }.nav-link { padding:12px 15px; }.hero { min-height:auto; padding:112px 0 90px; }.hero-layout { grid-template-columns:1fr; }.hero-copy { text-align:center; }.availability { margin-inline:auto; }.hero h1 { font-size:clamp(3.3rem,17vw,5.5rem); }.role-stack,.hero-actions,.hero-meta { justify-content:center; }.hero-lead { margin-inline:auto; }.hero-visual { width:min(100%,500px); margin:25px auto 0; }.chip-ai { left:-5px; }.chip-cloud { right:-5px; }.scroll-cue { display:none; }.section-heading { display:block; margin-bottom:38px; text-align:left; }.section-heading>p { margin-top:20px; }.project-section { gap:30px; padding:25px; }.right-images { min-height:410px; padding:18px; }.phone-shot { flex-basis:48%; }.services-grid { grid-template-columns:1fr 1fr; }.service-card,.service-card:nth-child(4),.service-card:nth-child(5) { grid-column:span 1; }.footer-inner { flex-wrap:wrap; }.footer-inner p:nth-child(2) { order:3; width:100%; } }
@media (max-width:520px) { .hero h1 { font-size:clamp(3rem,18vw,4.2rem); }.hero-actions { display:grid; grid-template-columns:1fr 1fr; }.hero-actions .text-link { grid-column:1/-1; }.btn { padding-inline:14px; font-size:.74rem; }.hero-meta { gap:16px; justify-content:space-between; }.hero-meta div { align-items:center; }.avatar-shell { border-radius:23px; }.avatar-container { border-radius:16px; }.floating-chip { padding:8px 10px; font-size:.62rem; }.services-grid,.tech-grid { grid-template-columns:1fr; }.service-card,.service-card:nth-child(4),.service-card:nth-child(5) { min-height:210px; }.service-icon { margin-bottom:28px; }.right-images { min-height:340px; }.project-section { padding:20px; border-radius:20px; }.phone-shot { flex-basis:62%; }.contact-card { padding-inline:18px; }.footer-inner { justify-content:center; text-align:center; }.footer-inner p:nth-child(2) { order:initial; }.footer-inner p:last-child { width:100%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .reveal,.fade-up { opacity:1; transform:none; } }
.github-project{
    width:100%;
    min-height:320px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:18px;
}

.github-icon{
    font-size:4rem;
}

.github-project h3{
    font-size:1.8rem;
}

.github-project p{
    color:var(--muted);
    max-width:400px;
}
.desktop-shot{
    width:100%;
    height:100%;
    border-radius:20px;
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow:0 20px 40px rgba(0,0,0,.2);
}

.desktop-shot img{
    width:100%;
    height:100%;
    object-fit:contain;
    cursor:zoom-in;
}
.project-links{
    display:flex;
    gap:12px;
    margin-top:18px;
    flex-wrap:wrap;
}

.project-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border-radius:10px;
    text-decoration:none;
    font-size:0.82rem;
    font-weight:700;
    transition:.3s;
}

.playstore-btn{
    background:#34A853;
    color:#fff;
}

.playstore-btn:hover{
    background:#2d9248;
    transform:translateY(-2px);
}

.github-btn{
    background:#24292e;
    color:#fff;
}

.github-btn:hover{
    background:#111;
    transform:translateY(-2px);
}