:root{
  --ink:#101318;
  --bg:#eef0f3;
  --blue:oklch(0.5 0.18 256);
  --blue-hover:oklch(0.42 0.17 256);
  --blue-soft:oklch(0.78 0.11 256);
  --font-sans:'Plus Jakarta Sans',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;color:var(--ink)}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-hover)}
button{font-family:inherit}
img{max-width:100%}

.app{min-height:100vh;display:flex;flex-direction:column}

/* Topbar */
.topbar{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px clamp(14px,4vw,32px)}
.brand{display:flex;align-items:center;gap:10px;background:transparent;border:0;padding:0;cursor:pointer;color:#fff}
.brand-mark{width:34px;height:34px;border-radius:9px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;font:800 13px/1 var(--font-sans);flex:none}
.brand-name{font:700 16px/1.2 var(--font-sans);letter-spacing:-.02em;white-space:nowrap}

.nav-desktop{display:none;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.nav-btn{position:relative;overflow:hidden;padding:12px 15px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;font:500 13.5px/1 var(--font-sans);background:transparent;color:rgba(255,255,255,.66);transition:background-color .2s ease,color .2s ease}
.nav-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-btn.active{font-weight:700;background:rgba(255,255,255,.12);color:#fff}

.top-actions-desktop{display:none;align-items:center;gap:12px}
.lang-switch{display:flex;gap:3px}
.lang-btn{position:relative;overflow:hidden;padding:10px 12px;cursor:pointer;border-radius:8px;font:600 11px/1 var(--font-mono);letter-spacing:.06em;border:1px solid rgba(255,255,255,.24);background:transparent;color:rgba(255,255,255,.7);transition:transform .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease}
.lang-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.5)}
.lang-btn.active{border-color:rgba(255,255,255,.7);background:#fff;color:var(--ink)}

.btn-pill{position:relative;overflow:hidden;border:0;cursor:pointer;border-radius:999px;font:700 12px/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;padding:13px 24px;transition:transform .2s ease,box-shadow .2s ease}
.btn-accent{background:var(--blue);color:#fff}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 10px 24px oklch(0.5 0.18 256 / .4)}
.btn-accent:active{transform:translateY(0) scale(.96)}

.top-actions-mobile{display:flex;align-items:center;gap:8px}

@media (min-width:861px){
  .top-actions-mobile,.fab-nav{display:none !important}
  .nav-desktop,.top-actions-desktop{display:flex}
}

/* Floating mobile navigation */
.fab-nav{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fab-menu-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;border-radius:999px;padding:15px 20px;background:var(--blue);color:#fff;font:700 13px/1 var(--font-sans);box-shadow:0 12px 28px oklch(0.5 0.18 256 / .45);transition:transform .2s ease,box-shadow .2s ease}
.fab-menu-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px oklch(0.5 0.18 256 / .5)}
.fab-menu-btn:active{transform:translateY(0) scale(.96)}
.fab-menu-icon{display:flex;transition:transform .25s ease}
.fab-menu-btn[aria-expanded="true"] .fab-menu-icon{transform:rotate(90deg)}

.fab-menu-panel{background:var(--ink);border-radius:18px;padding:12px;min-width:210px;box-shadow:0 24px 54px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:4px;animation:fabPanelIn .22s ease}
.fab-menu-panel[hidden]{display:none}
.nav-mobile{display:flex;flex-direction:column;gap:4px}
.nav-mobile .nav-btn{display:block;width:100%;text-align:start;padding:15px 16px;border-radius:12px;font-size:15px}
.fab-menu-panel .lang-switch{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);gap:6px}
@keyframes fabPanelIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* Flip transition container */
.flip-outer{flex:1;perspective:2200px;overflow:hidden;background:var(--bg)}
.flip-inner{transform-style:preserve-3d;backface-visibility:hidden;will-change:transform;transform-origin:left center}

/* Hero */
.hero-grid{display:grid;grid-template-columns:1fr;align-items:stretch;background:var(--bg)}
@media (min-width:861px){.hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hero-photo{order:0;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:26px 22px 34px}
@media (min-width:861px){
  .hero-photo{order:2;clip-path:polygon(min(9%,80px) 0,100% 0,100% 100%,0 100%);padding:clamp(34px,4vw,52px) clamp(22px,3vw,40px) clamp(34px,4vw,52px) clamp(48px,6vw,80px);min-height:clamp(420px,62vh,560px)}
}
.hero-copy{order:1;display:flex;flex-direction:column;justify-content:center;padding:30px 20px 36px}
@media (min-width:861px){.hero-copy{padding:clamp(40px,5vw,74px) clamp(24px,4vw,44px) clamp(38px,5vw,66px)}}

.hero-photo-inner{position:relative;max-width:420px;width:100%}
.hero-photo-card{background:#fff;border-radius:24px;padding:9px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.hero-photo-card img{display:block;width:100%;height:clamp(300px,46vh,470px);object-fit:cover;object-position:50% 20%;border-radius:17px}
.hero-photo-badge{position:absolute;inset-block-end:18px;inset-inline-start:clamp(-14px,-2vw,-6px);background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 16px;box-shadow:0 14px 32px rgba(0,0,0,.5)}
.badge-label{font:500 10px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.badge-value{margin-top:6px;font:700 14px/1.3 var(--font-sans)}

.pill{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid rgba(16,19,24,.1);font:600 11.5px/1.4 var(--font-sans);color:#4a525e}
.avail-badge{flex:none;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center}

.hero-greet{margin-top:26px;font:700 clamp(19px,4.6vw,26px)/1.2 var(--font-sans);letter-spacing:-.02em;color:var(--ink)}
.hero-title-big{margin:10px 0 0;font:800 clamp(38px,8vw,78px)/1.02 var(--font-sans);letter-spacing:-.045em;text-wrap:balance}
.hero-role{margin-top:14px;font:600 clamp(14.5px,3.4vw,17px)/1.5 var(--font-sans);color:#8a929d;max-width:540px}
.hero-hook{margin:20px 0 0;max-width:500px;font:400 clamp(14.5px,3.4vw,16px)/1.7 var(--font-sans);color:#4a525e;text-wrap:pretty}

.social-row{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;align-items:center}
.social-btn{position:relative;overflow:hidden;width:46px;height:46px;border-radius:12px;background:#dfe2e7;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,color .2s ease,transform .2s ease}
.social-btn:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}

.hero-cta-wrap{margin-top:28px}
.btn-cta-full{position:relative;overflow:hidden;width:100%;max-width:280px;white-space:nowrap;padding:17px 30px;border:0;cursor:pointer;border-radius:999px;background:var(--ink);color:#fff;font:700 13.5px/1 var(--font-sans);transition:transform .2s ease,box-shadow .2s ease}
.btn-cta-full:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,19,24,.3)}
.btn-cta-full:active{transform:translateY(0) scale(.97)}

/* Shared section chrome */
.section-wrap{padding:30px 18px 44px;max-width:1180px;margin:0 auto}
@media (min-width:641px){.section-wrap{padding:clamp(36px,6vw,64px) clamp(18px,5vw,44px) clamp(44px,7vw,72px)}}
.eyebrow{font:500 11px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.eyebrow.accent{color:var(--blue-soft)}
.section-title{margin:14px 0 40px;font:800 clamp(30px,3.4vw,44px)/1.1 var(--font-sans);letter-spacing:-.035em;max-width:760px;text-wrap:balance}

/* About */
.about-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media (min-width:641px){.about-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}}
.about-card{background:#fff;border:1px solid rgba(16,19,24,.09);border-radius:22px;padding:22px}
@media (min-width:641px){.about-card{padding:clamp(22px,4vw,34px) clamp(22px,4vw,36px)}}
.about-card p{margin:0 0 16px;font:400 16px/1.72 var(--font-sans);color:#2b313a;text-wrap:pretty}
.about-card p:last-child{margin-bottom:0}
.about-side{display:flex;flex-direction:column;gap:18px}
.currently-card{background:var(--ink);color:#fff;border-radius:22px;padding:22px 20px}
@media (min-width:641px){.currently-card{padding:clamp(22px,4vw,30px) clamp(20px,4vw,32px)}}
.currently-label{font:600 10.5px/1.6 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-soft)}
.currently-value{margin-top:12px;font:500 16px/1.62 var(--font-sans)}
.stats-card{background:#fff;border:1px solid rgba(16,19,24,.09);border-radius:22px;padding:20px 18px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (min-width:481px){.stats-card{grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));padding:clamp(20px,4vw,26px) clamp(18px,4vw,30px)}}
.stat-value{font:800 28px/1 var(--font-sans);letter-spacing:-.03em}
.stat-label{margin-top:7px;font:500 11.5px/1.45 var(--font-sans);color:#5c6470}

/* Experience */
.exp-card{background:#fff;border:1px solid rgba(16,19,24,.09);border-radius:24px;padding:24px 22px;box-shadow:0 12px 32px rgba(16,19,24,.06)}
@media (min-width:641px){.exp-card{padding:clamp(24px,4vw,36px) clamp(22px,4vw,38px)}}
.exp-top{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap}
.exp-role{margin:0;font:700 26px/1.18 var(--font-sans);letter-spacing:-.025em}
.exp-dates{display:inline-block;padding:7px 14px;border-radius:999px;background:#eef1f5;font:500 11.5px/1.4 var(--font-mono);color:oklch(0.45 0.17 256)}
.exp-org{margin-top:9px;font:500 14.5px/1.5 var(--font-sans);color:#6a7280}
.exp-bullets-grid{display:grid;grid-template-columns:1fr;gap:14px 30px;margin-top:28px}
@media (min-width:641px){.exp-bullets-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}}
.exp-bullet{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}
.exp-bullet-num{font:500 11px/1.9 var(--font-mono);color:var(--blue)}
.exp-bullet-text{font:400 15px/1.66 var(--font-sans);color:#2b313a;text-wrap:pretty}
.exp-stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(16,19,24,.09)}
.tag{display:inline-block;white-space:nowrap;padding:6px 11px;border-radius:7px;background:#f1f3f6;font:400 11.5px/1.4 var(--font-mono);color:#3c434e}
.tag-outline{background:transparent;border:1px solid rgba(16,19,24,.15)}

/* Projects */
.proj-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.proj-counter{font:500 12px/1.4 var(--font-mono);color:#8a929d}
.proj-flip-outer{margin-top:34px;perspective:2200px}
.proj-flip-inner{transform-style:preserve-3d;backface-visibility:hidden;will-change:transform;transform-origin:left center}
.proj-grid{display:flex;flex-direction:column-reverse;gap:26px}
@media (min-width:861px){.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:34px;align-items:start}}
.proj-name{margin:0;font:800 clamp(30px,7vw,52px)/1 var(--font-sans);letter-spacing:-.04em}
.proj-tagline{margin-top:10px;font:500 15px/1.5 var(--font-sans);color:#6a7280}
.proj-blocks{display:flex;flex-direction:column;gap:20px;margin-top:30px}
.proj-block{padding-inline-start:16px;border-inline-start:2px solid rgba(16,19,24,.12)}
.proj-block-label{font:600 10.5px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.proj-block-text{margin:0;font:400 15px/1.66 var(--font-sans);color:#2b313a;text-wrap:pretty}
.proj-stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:26px}
.proj-link{position:relative;overflow:hidden;display:inline-block;padding:14px 24px;border-radius:999px;background:var(--blue);color:#fff;font:600 13px/1 var(--font-sans);transition:transform .2s ease,box-shadow .2s ease}
.proj-link:hover{transform:translateY(-2px);box-shadow:0 10px 22px oklch(0.5 0.18 256 / .35);color:#fff}
.proj-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px}
.proj-next-wrap{margin-top:38px;padding-top:26px;border-top:1px solid rgba(16,19,24,.1)}
.proj-next-btn{position:relative;overflow:hidden;display:flex;width:100%;max-width:340px;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px 14px 24px;border:1px solid rgba(16,19,24,.16);border-radius:999px;background:#fff;cursor:pointer;color:var(--ink);font:700 13px/1 var(--font-sans);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.proj-next-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.proj-next-arrow{display:flex;align-items:center;justify-content:center;color:var(--blue);font:700 18px/1 var(--font-sans);flex:none;transition:transform .2s ease}
.proj-next-btn:hover .proj-next-arrow{color:#fff;transform:translateX(3px)}

.browser-card{background:var(--ink);border-radius:18px;padding:10px;box-shadow:0 26px 60px rgba(16,19,24,.22);max-width:230px;margin:0 auto}
.browser-dots{display:flex;align-items:center;gap:6px;padding:0 3px 10px}
.browser-dot{width:8px;height:8px;border-radius:50%;flex:none}
.browser-label{flex:1;min-width:0;margin-inline-start:8px;font:400 10px/1.4 var(--font-mono);color:rgba(255,255,255,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screenshot-frame{position:relative;width:100%;aspect-ratio:9/19;border-radius:14px;overflow:hidden;background:#1a1f26;display:flex;align-items:center;justify-content:center}
.screenshot-frame img{width:100%;height:100%;object-fit:contain;display:block}
.screenshot-placeholder{font:500 12px/1.4 var(--font-sans);color:#8a929d;text-align:center;padding:16px}

/* Services / Skills tab switch */
.serv-tabs-row{display:flex;justify-content:center;margin-bottom:28px}
.serv-tabs{display:inline-flex;background:#e4e7eb;border-radius:999px;padding:4px;gap:4px}
.serv-tab-btn{position:relative;overflow:hidden;border:0;background:transparent;cursor:pointer;padding:10px 24px;border-radius:999px;font:700 13px/1 var(--font-sans);color:#5c6470;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.serv-tab-btn.active{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(16,19,24,.12)}
.serv-panel-holder{animation:formFadeIn .25s ease}

.duo-panel{padding:24px 18px 26px;display:flex;flex-direction:column;border-radius:24px;box-shadow:0 20px 48px rgba(16,19,24,.1)}
@media (min-width:641px){.duo-panel{padding:clamp(28px,5vw,44px) clamp(20px,5vw,44px) clamp(26px,4vw,38px)}}
.duo-panel-dark{background:var(--ink);color:#fff}
.duo-panel-light{background:#fff;color:var(--ink);border:1px solid rgba(16,19,24,.09)}
.duo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px}
.duo-intro{margin:12px 0 0;max-width:460px;font:400 14.5px/1.6 var(--font-sans);color:rgba(255,255,255,.7)}
.duo-flip-wrap{flex:1;margin-top:16px;perspective:1800px;min-height:180px}
@media (min-width:481px){.duo-flip-wrap{min-height:clamp(180px,26vh,260px)}}
.duo-flip-inner{transform-style:preserve-3d;backface-visibility:hidden;will-change:transform;transform-origin:left center}
.svc-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:18px}
@media (min-width:641px){.svc-card{padding:clamp(20px,3.5vw,28px)}}
.svc-num{font:500 11.5px/1 var(--font-mono);color:var(--blue-soft)}
.svc-name{margin:12px 0 0;font:700 22px/1.2 var(--font-sans);letter-spacing:-.02em}
.svc-desc{margin:8px 0 0;font:400 14.5px/1.6 var(--font-sans);color:rgba(255,255,255,.75)}
.svc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tag-dark{display:inline-block;white-space:nowrap;padding:6px 11px;border-radius:7px;background:rgba(255,255,255,.1);font:400 11.5px/1.4 var(--font-mono);color:rgba(255,255,255,.92)}
.svc-price{margin-top:14px;font:700 13.5px/1.4 var(--font-sans);color:var(--blue-soft)}

.sk-card{background:#f4f6f9;border:1px solid rgba(16,19,24,.1);border-radius:20px;padding:18px}
@media (min-width:641px){.sk-card{padding:clamp(20px,3.5vw,28px)}}
.sk-num{font:500 11.5px/1 var(--font-mono);color:var(--blue)}
.sk-name{margin:12px 0 0;font:700 22px/1.2 var(--font-sans);letter-spacing:-.02em}
.sk-items{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tag-light{display:inline-block;white-space:nowrap;padding:8px 13px;border-radius:8px;background:#fff;border:1px solid rgba(16,19,24,.12);font:400 12.5px/1.4 var(--font-mono);color:#2b313a}

.duo-counter{font:500 11.5px/1.4 var(--font-mono)}
.duo-panel-dark .duo-counter{color:rgba(255,255,255,.5)}
.duo-panel-light .duo-counter{color:#8a929d}
.duo-next-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;padding:12px 14px 12px 22px;border-radius:999px;background:transparent;cursor:pointer;font:700 12.5px/1 var(--font-sans);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.duo-panel-dark .duo-next-btn{border:1px solid rgba(255,255,255,.22);color:#fff}
.duo-panel-dark .duo-next-btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.duo-panel-light .duo-next-btn{border:1px solid rgba(16,19,24,.16);color:var(--ink)}
.duo-panel-light .duo-next-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.duo-next-arrow{display:flex;align-items:center;justify-content:center;font:700 16px/1 var(--font-sans);flex:none;transition:transform .2s ease,color .2s ease}
.duo-panel-dark .duo-next-arrow{color:var(--blue-soft)}
.duo-panel-dark .duo-next-btn:hover .duo-next-arrow{color:var(--blue);transform:translateX(3px)}
.duo-panel-light .duo-next-arrow{color:var(--blue)}
.duo-panel-light .duo-next-btn:hover .duo-next-arrow{color:var(--blue-soft);transform:translateX(3px)}

.svc-noprice{margin-top:16px;font:500 11px/1.6 var(--font-mono);color:rgba(255,255,255,.45)}
.sk-cta{position:relative;overflow:hidden;margin-top:16px;background:transparent;border:0;padding:0;cursor:pointer;text-align:start;color:var(--blue);font:800 18px/1.3 var(--font-sans);letter-spacing:-.02em}
.sk-cta:hover{color:var(--blue-hover)}

/* Contact */
.contact-wrap{padding:20px 12px 24px;max-width:1280px;margin:0 auto}
@media (min-width:641px){.contact-wrap{padding:clamp(20px,4vw,56px) clamp(12px,3vw,24px) clamp(24px,4vw,40px)}}
.contact-panel{background:var(--ink);color:#fff;border-radius:20px;padding:30px 20px}
@media (min-width:481px){.contact-panel{border-radius:clamp(18px,3vw,28px);padding:clamp(30px,5vw,52px) clamp(20px,4vw,44px)}}
.contact-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media (min-width:641px){.contact-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}}
.contact-title{margin:16px 0 0;max-width:460px;font:800 clamp(30px,3.6vw,44px)/1.06 var(--font-sans);letter-spacing:-.04em;text-wrap:balance}
.contact-lead{margin:16px 0 0;max-width:470px;font:400 16px/1.68 var(--font-sans);color:rgba(255,255,255,.74);text-wrap:pretty}
.contact-social-row{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.contact-social-btn{position:relative;overflow:hidden;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.contact-social-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.contact-cta-wrap{margin-top:28px}
.btn-cta-full-accent{position:relative;overflow:hidden;width:100%;max-width:300px;padding:17px 30px;border:0;border-radius:999px;background:var(--blue);color:#fff;cursor:pointer;font:700 13.5px/1 var(--font-sans);transition:transform .2s ease,box-shadow .2s ease}
.btn-cta-full-accent:hover{transform:translateY(-2px);box-shadow:0 12px 26px oklch(0.5 0.18 256 / .4)}
.btn-cta-full-accent:active{transform:translateY(0) scale(.97)}
.contact-copyright{margin-top:34px;font:400 11px/1.6 var(--font-mono);color:rgba(255,255,255,.42)}

.contact-form-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:22px 20px}
@media (min-width:641px){.contact-form-card{padding:clamp(22px,4vw,30px) clamp(20px,4vw,32px)}}
.form-title{font:700 16px/1.3 var(--font-sans);color:#fff;margin:0 0 14px}
.form-stack{display:flex;flex-direction:column;gap:14px}
.form-field-dark{width:100%;box-sizing:border-box;padding:14px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;font:400 14px/1.4 var(--font-sans);transition:border-color .2s ease,background-color .2s ease}
.form-field-dark::placeholder{color:rgba(255,255,255,.4)}
.form-field-dark:focus{outline:none;border-color:var(--blue-soft);background:rgba(255,255,255,.09)}
textarea.form-field-dark{resize:vertical;font-family:var(--font-sans);line-height:1.55}
.form-submit-btn{position:relative;overflow:hidden;align-self:stretch;max-width:300px;padding:16px 28px;border:0;border-radius:999px;background:var(--blue);color:#fff;cursor:pointer;font:700 13px/1 var(--font-sans);transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.form-submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px oklch(0.5 0.18 256 / .4)}
.form-submit-btn:disabled{opacity:.65;cursor:progress;transform:none;box-shadow:none}
.form-sent-msg{font:600 17px/1.6 var(--font-sans);color:#fff;margin:0}
.form-error-msg{margin:4px 0 0;font:500 13px/1.5 var(--font-sans);color:#ff8a80}

.contact-form-card{animation:formFadeIn .3s ease}
@keyframes formFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Ripple */
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);pointer-events:none;animation:ripple-anim .6s ease-out forwards}
@keyframes ripple-anim{to{transform:scale(1);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .flip-inner,.proj-flip-inner,.duo-flip-inner{transition:none !important;transform:none !important;opacity:1 !important}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}