:root{--bg:#f5f8f8;--surface:#fff;--surface-2:#eaf2f1;--text:#112023;--muted:#607174;--accent:#18c6b7;--accent-2:#0aa294;--line:rgba(17,32,35,.12);--shadow:0 24px 70px rgba(13,52,52,.12);--header:rgba(245,248,248,.82);--radius:28px}
html[data-theme="dark"]{--bg:#071619;--surface:#0c2327;--surface-2:#102d31;--text:#f1fbfa;--muted:#9bb3b5;--accent:#42e8d8;--accent-2:#19b9ac;--line:rgba(255,255,255,.11);--shadow:0 24px 70px rgba(0,0,0,.28);--header:rgba(7,22,25,.82)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:95px}body{font-family:Manrope,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden;transition:background .55s,color .55s}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit}.section-shell{width:min(1180px,calc(100% - 40px));margin:auto;padding:110px 0}.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(66,232,216,.09),transparent 66%);transform:translate(-50%,-50%);z-index:-1}.site-header{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 28px));height:68px;display:flex;align-items:center;gap:28px;padding:0 22px;border:1px solid var(--line);border-radius:22px;background:var(--header);backdrop-filter:blur(18px);z-index:1000;box-shadow:0 12px 34px rgba(0,0,0,.08)}.brand{font:700 18px "Space Grotesk";white-space:nowrap}.brand span{color:var(--accent)}.site-nav{display:flex;gap:25px;margin-left:auto}.site-nav a{font-size:14px;font-weight:700;color:var(--muted);position:relative}.site-nav a:after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--accent);transition:.3s}.site-nav a:hover,.site-nav a.active{color:var(--text)}.site-nav a:hover:after,.site-nav a.active:after{width:100%}.menu-toggle{display:none;background:none;border:0;color:var(--text);font-size:21px}.theme-toggle{border:0;background:none;cursor:pointer}.toggle-track{display:block;width:72px;height:36px;border-radius:30px;background:#102d46;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:.55s}.toggle-orb{position:absolute;z-index:2;left:4px;top:4px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#d9e8ff;color:#465a70;transition:.55s cubic-bezier(.68,-.35,.27,1.35);box-shadow:0 3px 12px rgba(0,0,0,.28)}.toggle-orb .fa-sun{display:none}.stars{position:absolute;color:#fff;font-size:10px;right:10px;top:5px}.cloud{position:absolute;color:#fff;font-size:15px;right:7px;bottom:-2px;opacity:.5}html[data-theme="light"] .toggle-track{background:#86d5ff}html[data-theme="light"] .toggle-orb{left:40px;background:#ffd44c;color:#db8e00;transform:rotate(360deg)}html[data-theme="light"] .toggle-orb .fa-moon{display:none}html[data-theme="light"] .toggle-orb .fa-sun{display:block}html[data-theme="light"] .stars{opacity:0}.hero{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;position:relative;padding-top:135px}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--accent-2);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px}.status-dot{width:9px;height:9px;background:#36d982;border-radius:50%;box-shadow:0 0 0 7px rgba(54,217,130,.12);animation:pulse 2s infinite}.hello{font-size:20px;margin-top:26px;color:var(--muted)}.hero h1{font:700 clamp(52px,7vw,92px)/.95 "Space Grotesk";letter-spacing:-5px;margin:8px 0 18px}.hero h1 span{color:transparent;-webkit-text-stroke:2px var(--accent)}.hero h2{font:700 clamp(25px,4vw,42px) "Space Grotesk"}.hero-description{max-width:670px;color:var(--muted);font-size:17px;margin:20px 0 30px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:14px;padding:14px 20px;font-weight:800;transition:.3s}.primary-btn{background:var(--accent);color:#042522;box-shadow:0 14px 30px rgba(24,198,183,.22)}.primary-btn:hover{transform:translateY(-4px);box-shadow:0 20px 38px rgba(24,198,183,.3)}.secondary-btn{border:1px solid var(--line);background:var(--surface)}.secondary-btn:hover{border-color:var(--accent)}.socials{display:flex;gap:12px;margin-top:28px}.socials a{width:43px;height:43px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;background:var(--surface);transition:.3s}.socials a:hover{color:var(--accent);transform:translateY(-4px)}.hero-visual{min-height:570px;position:relative;display:grid;place-items:end center}.hero-blob{position:absolute;inset:70px 25px 20px;background:linear-gradient(145deg,var(--accent),#357bff);clip-path:polygon(28% 0,100% 18%,92% 100%,0 92%,7% 22%);filter:saturate(.8)}.hero-visual>img{position:relative;z-index:2;width:min(440px,90%);height:520px;object-fit:cover;object-position:center 18%;border-radius:34% 34% 18% 18%;filter:saturate(.82);box-shadow:var(--shadow)}.orbit{position:absolute;border:1px solid rgba(66,232,216,.3);border-radius:50%;animation:spin 18s linear infinite}.orbit-one{width:520px;height:520px}.orbit-two{width:430px;height:430px;animation-direction:reverse}.floating-card{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid var(--line);border-radius:15px;background:var(--header);backdrop-filter:blur(14px);box-shadow:var(--shadow);font-size:12px;font-weight:800}.floating-card i{color:var(--accent);font-size:20px}.code-card{left:-8px;top:130px}.quality-card{right:-18px;bottom:80px}.scroll-cue{position:absolute;bottom:25px;left:0;color:var(--muted);font-size:12px;letter-spacing:2px;text-transform:uppercase;display:flex;gap:10px;align-items:center}.scroll-cue span{width:32px;height:1px;background:var(--accent)}.section-heading{display:flex;align-items:center;gap:16px;margin-bottom:45px}.section-heading>span{font:700 15px "Space Grotesk";color:var(--accent)}.section-heading p{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}.section-heading h2{font:700 clamp(34px,5vw,56px) "Space Grotesk";letter-spacing:-2px}.about-stage{min-height:580px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;box-shadow:var(--shadow)}.about-copy{padding:70px;display:flex;flex-direction:column;justify-content:center}.about-copy h3{font:700 clamp(30px,4vw,49px)/1.08 "Space Grotesk";margin:16px 0 22px}.about-copy p{color:var(--muted);margin:8px 0}.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}.about-stats div{border-top:1px solid var(--line);padding-top:15px}.about-stats strong,.about-stats span{display:block}.about-stats strong{font-size:22px;color:var(--accent)}.about-stats span{font-size:11px;color:var(--muted)}.about-portrait{position:relative;min-height:580px;background:linear-gradient(145deg,var(--accent),#5c57ff);display:flex;align-items:end;justify-content:center}.about-portrait:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.28),transparent 35%)}.about-portrait>img{width:85%;height:95%;object-fit:cover;object-position:center 15%;position:relative;z-index:2;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,0 18%)}.angular-cut{position:absolute;background:var(--surface);width:150px;height:150px;left:-1px;top:-1px;clip-path:polygon(0 0,100% 0,0 100%);z-index:4}.role-ring{position:absolute;z-index:5;left:25px;bottom:25px;width:115px;height:115px;border-radius:50%;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow)}.role-ring:after{content:"MA";font:700 24px "Space Grotesk";color:var(--accent)}.role-ring span{position:absolute;inset:6px;font-size:8px;letter-spacing:2px;animation:spin 12s linear infinite}.skill-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.skill-panel{border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:28px;transition:.35s}.skill-panel:hover{transform:translateY(-7px);border-color:rgba(66,232,216,.55);box-shadow:var(--shadow)}.panel-icon{font-size:28px;color:var(--accent);margin-bottom:18px}.skill-panel h3{font:700 20px "Space Grotesk";margin-bottom:18px}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.chip-list span,.tags span{font-size:11px;border:1px solid var(--line);border-radius:50px;padding:6px 10px;color:var(--muted);background:var(--surface-2)}.timeline{position:relative;max-width:930px;margin:auto}.timeline:before{content:"";position:absolute;left:25px;top:12px;bottom:12px;width:3px;background:linear-gradient(var(--accent),rgba(66,232,216,.08));box-shadow:0 0 18px rgba(66,232,216,.4)}.timeline-item{position:relative;padding-left:90px;margin-bottom:34px}.timeline-dot{position:absolute;left:8px;top:28px;width:37px;height:37px;border-radius:50%;background:var(--bg);border:4px solid var(--surface);box-shadow:0 0 0 3px var(--accent),0 0 25px rgba(66,232,216,.35)}.timeline-dot:after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--accent)}.timeline-card{padding:28px 32px;border:1px solid var(--line);border-radius:20px;background:var(--surface);transition:.3s}.timeline-card:hover{transform:translateX(8px);border-color:var(--accent)}.timeline-date{font-size:12px;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:1px}.timeline-card h3{font:700 24px "Space Grotesk";margin-top:7px}.timeline-card h4{color:var(--muted);font-size:14px;margin:3px 0 12px}.timeline-card p{color:var(--muted)}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.project-card{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--surface);transition:.38s}.project-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(66,232,216,.48)}.project-card.featured{grid-column:1/-1;display:grid;grid-template-columns:1.15fr .85fr}.project-image{height:300px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden}.featured .project-image{height:100%;min-height:420px}.project-image img{width:100%;height:100%;object-fit:cover;transition:.55s}.project-card:hover .project-image img{transform:scale(1.045)}.project-image[href*="carto"] img{object-fit:contain;padding:70px;background:radial-gradient(circle,#28353b,#101719)}.project-image[href*="yumi"] img{object-fit:contain;padding:20px;background:linear-gradient(145deg,#fff5de,#f3ba58)}.project-image.tradify img{object-fit:contain;padding:50px;background:#fff}.placeholder{background:linear-gradient(135deg,#132f34,#1b6a66);color:#fff}.placeholder.sport{background:linear-gradient(135deg,#192d55,#6d1d8e)}.placeholder span{font:700 32px "Space Grotesk";display:flex;gap:15px;align-items:center}.project-body{padding:28px}.project-meta{display:flex;justify-content:space-between;color:var(--accent);font-size:12px;font-weight:800}.project-meta a{font-size:22px}.project-body h3{font:700 30px "Space Grotesk";margin:7px 0 10px}.project-body p{color:var(--muted);min-height:80px}.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.contact-card{padding:55px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(135deg,var(--surface),var(--surface-2));display:flex;align-items:center;justify-content:space-between;gap:40px;box-shadow:var(--shadow)}.contact-card h2{font:700 clamp(34px,5vw,60px)/1.05 "Space Grotesk";max-width:720px;margin:14px 0}.contact-card p{color:var(--muted)}.contact-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px}.contact-links a{font-size:13px;color:var(--muted)}.contact-links i{color:var(--accent);margin-right:5px}footer{width:min(1180px,calc(100% - 40px));margin:auto;padding:30px 0 42px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:13px}footer a{color:var(--accent)}.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(54,217,130,0)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:960px){.site-nav{position:fixed;top:82px;left:14px;right:14px;display:flex;flex-direction:column;padding:25px;border:1px solid var(--line);border-radius:20px;background:var(--surface);opacity:0;pointer-events:none;transform:translateY(-12px);transition:.3s}.site-nav.open{opacity:1;pointer-events:auto;transform:none}.menu-toggle{display:block;margin-left:auto}.theme-toggle{margin-left:0}.hero{grid-template-columns:1fr;padding-top:145px}.hero-visual{min-height:520px}.scroll-cue{display:none}.about-stage{grid-template-columns:1fr}.about-copy{padding:45px}.about-portrait{min-height:520px}.skill-groups{grid-template-columns:repeat(2,1fr)}.project-card.featured{display:block}.contact-card{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.section-shell{width:min(100% - 24px,1180px);padding:78px 0}.site-header{top:8px;height:62px}.brand{font-size:15px}.hero{gap:25px;padding-top:115px}.hero h1{font-size:52px;letter-spacing:-3px}.hero-visual{min-height:430px}.hero-visual>img{height:400px}.orbit-one{width:390px;height:390px}.orbit-two{width:330px;height:330px}.floating-card{font-size:10px}.code-card{left:0}.quality-card{right:0}.section-heading{margin-bottom:28px}.about-copy{padding:30px 24px}.about-stats{grid-template-columns:1fr}.about-portrait{min-height:400px}.angular-cut{width:90px;height:90px}.skill-groups,.project-grid{grid-template-columns:1fr}.skill-panel{padding:22px}.timeline:before{left:17px}.timeline-item{padding-left:55px}.timeline-dot{left:0;width:35px;height:35px}.timeline-card{padding:22px}.project-image,.featured .project-image{height:260px;min-height:0}.project-body p{min-height:0}.contact-card{padding:30px 23px}.contact-links{flex-direction:column}.contact-card>.primary-btn{width:100%}footer{flex-direction:column;gap:8px;text-align:center}.cursor-glow{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* =========================================================
   2026 interaction upgrade: colorful brand, circular theme
   reveal, typewriter, animated timeline and contact channels
   ========================================================= */
:root{
  --brand-1:#ff4d7d;
  --brand-2:#7c3aed;
  --brand-3:#078fca;
  --brand-4:#00a99a;
  --theme-reveal-duration:900ms;
}
html[data-theme="dark"]{
  --brand-1:#ff668f;
  --brand-2:#a78bfa;
  --brand-3:#4fd8ff;
  --brand-4:#42e8d8;
}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.site-header{gap:17px;padding:0 20px}
.brand{display:inline-flex;align-items:center;gap:2px;font-size:19px;letter-spacing:.2px}
.brand-bracket{color:var(--accent)!important;text-shadow:0 0 16px color-mix(in srgb,var(--accent) 55%,transparent)}
.brand-name{background:linear-gradient(100deg,var(--brand-1),var(--brand-2) 34%,var(--brand-3) 67%,var(--brand-4));background-size:180% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brand-shimmer 6s linear infinite}
@keyframes brand-shimmer{to{background-position:180% 0}}

/* The theme control is intentionally a circle at the top-left of the bar. */
.theme-toggle{position:relative;isolation:isolate;width:46px;height:46px;min-width:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--surface-2);color:var(--text);cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.12),inset 0 0 0 4px color-mix(in srgb,var(--surface) 70%,transparent);transition:transform .3s ease,border-color .3s ease,background .35s ease}
.theme-toggle:hover{transform:rotate(-8deg) scale(1.06);border-color:var(--accent)}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle-ring{position:absolute;inset:5px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent) 75%,transparent);animation:spin 8s linear infinite}
.theme-toggle i{position:absolute;font-size:18px;transition:transform .55s cubic-bezier(.2,.85,.25,1.25),opacity .35s ease;color:var(--accent)}
.theme-sun{opacity:0;transform:translateY(28px) rotate(-100deg) scale(.55)}
.theme-moon{opacity:1;transform:translateY(0) rotate(0) scale(1)}
html[data-theme="light"] .theme-sun{opacity:1;transform:translateY(0) rotate(0) scale(1);color:#f5a300}
html[data-theme="light"] .theme-moon{opacity:0;transform:translateY(-28px) rotate(100deg) scale(.55)}
html[data-theme="light"] .theme-toggle{background:#fff8df}

/* Circular page wipe, matching the supplied light/night transition reference. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-transition::view-transition-old(root){z-index:1}
html.theme-transition::view-transition-new(root){z-index:9999;clip-path:circle(0 at var(--theme-x) var(--theme-y));animation:theme-circle-reveal var(--theme-reveal-duration) cubic-bezier(.76,0,.24,1) forwards}
@keyframes theme-circle-reveal{to{clip-path:circle(var(--theme-radius) at var(--theme-x) var(--theme-y))}}
.theme-transition-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;clip-path:circle(0 at var(--theme-x,32px) var(--theme-y,32px));visibility:hidden}
.theme-transition-overlay.is-revealing{visibility:visible;animation:fallback-theme-circle var(--theme-reveal-duration) cubic-bezier(.76,0,.24,1) forwards}
@keyframes fallback-theme-circle{to{clip-path:circle(var(--theme-radius,150vmax) at var(--theme-x,32px) var(--theme-y,32px))}}

.typed-role{min-height:1.28em;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.25em}
.typed-prefix{color:var(--text)}
#typedText{color:var(--accent);text-wrap:balance}
.typing-caret{width:3px;height:.9em;display:inline-block;background:var(--accent);margin-left:5px;border-radius:4px;animation:caret-blink .8s steps(1) infinite}
@keyframes caret-blink{50%{opacity:0}}

.role-ring{overflow:hidden;border:5px solid var(--surface);background:var(--surface-2)}
.role-ring:after{content:none!important}
.role-logo{width:77px;height:77px;object-fit:cover;border-radius:50%;position:relative;z-index:2;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}
.role-ring span{z-index:3;color:var(--text);font-weight:800;text-shadow:0 1px 5px var(--surface)}

/* Scroll-driven education progression. */
.timeline:before{display:none}
.timeline-track{position:absolute;left:25px;top:12px;bottom:12px;width:3px;border-radius:99px;background:color-mix(in srgb,var(--line) 84%,transparent);overflow:visible}
.timeline-progress{position:absolute;left:0;top:0;width:100%;height:0;border-radius:99px;background:linear-gradient(to bottom,var(--accent),var(--accent-2));box-shadow:0 0 20px color-mix(in srgb,var(--accent) 58%,transparent);transition:height .12s linear}
.timeline-dot{background:var(--bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--muted) 48%,transparent);transition:box-shadow .45s ease,transform .45s cubic-bezier(.2,.85,.25,1.35),border-color .45s ease}
.timeline-dot:after{background:color-mix(in srgb,var(--muted) 40%,transparent);transition:background .45s ease,transform .45s ease}
.timeline-item.is-active .timeline-dot{transform:scale(1.08);box-shadow:0 0 0 3px var(--accent),0 0 26px color-mix(in srgb,var(--accent) 55%,transparent)}
.timeline-item.is-active .timeline-dot:after{background:var(--accent);transform:scale(1.18)}
.timeline-item.is-active .timeline-card{border-color:color-mix(in srgb,var(--accent) 46%,var(--line))}

/* Two-channel contact experience. */
.contact-hub{display:block;padding:52px}
.contact-intro{max-width:900px;margin-bottom:34px}
.contact-intro h2{max-width:850px}
.contact-options{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:stretch}
.contact-option{border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--surface) 82%,transparent);padding:30px;min-width:0;position:relative;overflow:hidden}
.contact-option:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-90px;top:-105px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 68%);pointer-events:none}
.contact-option-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.channel-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:22px;flex:0 0 auto}
.channel-icon.telegram{color:#fff;background:linear-gradient(145deg,#38bdf8,#168dd3)}
.channel-icon.email{color:#042522;background:linear-gradient(145deg,var(--accent),#8ff4e9)}
.channel-label{font-size:10px!important;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent)!important;font-weight:800}
.contact-option h3{font:700 23px "Space Grotesk";line-height:1.2}
.channel-description{font-size:14px;margin-bottom:22px}
.contact-form{display:grid;gap:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.contact-form label{display:grid;gap:7px;color:var(--text);font-size:12px;font-weight:800}
.contact-form label small{font-weight:500;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);color:var(--text);font:500 14px Manrope,sans-serif;padding:13px 14px;outline:none;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent);transform:translateY(-1px)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:color-mix(in srgb,var(--muted) 74%,transparent)}
.bot-field{position:absolute!important;left:-9999px!important;opacity:0!important;pointer-events:none!important}
.contact-submit{border:0;cursor:pointer;width:max-content;min-width:190px}
.contact-submit[disabled]{opacity:.65;cursor:wait;transform:none}
.form-status{min-height:24px;font-size:13px!important;font-weight:700}
.form-status.success{color:#22c55e!important}.form-status.error{color:#ef4444!important}
.email-option{display:flex;flex-direction:column}
.email-address-card{position:relative;border:1px dashed color-mix(in srgb,var(--accent) 44%,var(--line));border-radius:18px;background:var(--surface-2);padding:20px 54px 20px 18px;margin:8px 0 20px;overflow:hidden}
.email-address-card span,.email-address-card strong{display:block;overflow-wrap:anywhere}
.email-address-card>span{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:5px}
.email-address-card strong{font-size:15px}
.copy-email{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--accent);cursor:pointer;display:grid;place-items:center}
.copy-email span{display:none}
.email-action{margin-top:auto;width:100%}
.email-note{font-size:11px!important;margin-top:12px;text-align:center}

@media(max-width:960px){
  .contact-options{grid-template-columns:1fr}
  .contact-hub{padding:38px}
}
@media(max-width:640px){
  .site-header{gap:10px;padding:0 12px}
  .theme-toggle{width:40px;height:40px;min-width:40px}
  .brand{font-size:14px}
  .typed-role{font-size:clamp(22px,7vw,31px)!important;min-height:2.55em;align-content:flex-start}
  .timeline-track{left:17px}
  .contact-hub{padding:26px 18px}
  .contact-option{padding:23px 18px}
  .form-grid{grid-template-columns:1fr}
  .contact-submit{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .brand-name,.theme-toggle-ring,.typing-caret{animation:none!important}
  .timeline-progress{transition:none}
}

.role-ring-text{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);z-index:3;overflow:visible;animation:spin 12s linear infinite}
.role-ring-text text{font:800 7px Manrope,sans-serif;letter-spacing:1.15px;fill:var(--text)}
.role-ring-text textPath{dominant-baseline:middle}

/* =========================================================
   Final portfolio refinements
   ========================================================= */

/* Stable hero layout and theme-aware animated name. */
.hero{
  grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);
}
.hero-copy{min-width:0}
.hero h1.hero-name{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:max-content;
  max-width:100%;
  margin:8px 0 16px;
  font:700 clamp(54px,7vw,94px)/.92 "Space Grotesk";
  letter-spacing:-5px;
}
.hero h1.hero-name span{
  display:block;
  color:transparent;
  -webkit-text-stroke:0;
  background:linear-gradient(105deg,var(--brand-1),var(--brand-2) 28%,var(--brand-3) 62%,var(--brand-4));
  background-size:260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:hero-name-gradient 7s linear infinite;
  filter:drop-shadow(0 12px 28px color-mix(in srgb,var(--brand-3) 12%,transparent));
}
.hero h1.hero-name span:nth-child(2){animation-delay:-2.3s}
@keyframes hero-name-gradient{to{background-position:260% 0}}

.typewriter-shell{
  width:min(100%,680px);
  min-height:110px;
  display:grid;
  align-content:start;
}
.typed-prefix{
  display:block;
  color:var(--text);
  font:700 clamp(22px,3vw,36px) "Space Grotesk";
  line-height:1.1;
  margin-bottom:7px;
}
.typed-role{
  min-height:1.28em!important;
  width:29ch;
  max-width:100%;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:baseline!important;
  overflow:hidden;
  white-space:nowrap;
  line-height:1.15!important;
}
#typedText{
  display:inline-block;
  width:27ch;
  max-width:calc(100% - 12px);
  white-space:nowrap;
  text-wrap:nowrap;
  overflow:hidden;
  color:var(--accent);
}
.typing-caret{flex:0 0 3px}

/* The actual logo is now the animation—no circular text around it. */
.role-logo-badge{
  position:absolute;
  z-index:6;
  left:26px;
  bottom:25px;
  width:116px;
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent);
  backdrop-filter:blur(14px);
  animation:logo-float 4.2s ease-in-out infinite;
}
.role-logo-badge img{
  width:92px;
  height:92px;
  border-radius:50%;
  object-fit:cover;
  animation:logo-spin 18s linear infinite;
  box-shadow:0 0 0 3px var(--surface),0 0 28px color-mix(in srgb,var(--accent) 40%,transparent);
}
.logo-halo{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px dashed color-mix(in srgb,var(--accent) 72%,transparent);
  animation:logo-spin-reverse 10s linear infinite;
}
@keyframes logo-spin{to{transform:rotate(360deg)}}
@keyframes logo-spin-reverse{to{transform:rotate(-360deg)}}
@keyframes logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Floating technical tags. */
.floating-card{
  will-change:transform;
  animation:tag-float 4.6s ease-in-out infinite;
}
.quality-card{animation-delay:-2.1s}
@keyframes tag-float{
  0%,100%{transform:translate3d(0,0,0) rotate(-.3deg)}
  50%{transform:translate3d(0,-13px,0) rotate(.8deg)}
}

/* Projects: compact three-column cards. */
.projects-heading-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:38px;
}
.projects-heading-row .section-heading{margin-bottom:0}
.view-all-projects{
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
  color:var(--accent);
  font-size:13px;
  font-weight:800;
  padding:11px 15px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  border-radius:13px;
  transition:transform .28s ease,background .28s ease,border-color .28s ease;
}
.view-all-projects:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-color:var(--accent)}
.project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}
.project-card,.project-card.featured{
  grid-column:auto;
  display:flex;
  flex-direction:column;
  min-width:0;
  border-radius:22px;
}
.project-image,.featured .project-image{
  position:relative;
  height:214px;
  min-height:214px;
  flex:0 0 214px;
  overflow:hidden;
  background:var(--surface-2);
}
.project-image img,
.project-image[href*="carto"] img,
.project-image[href*="yumi"] img,
.project-image.tradify img{
  width:100%;
  height:100%;
  padding:0;
  object-fit:cover;
  background:transparent;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s ease;
}
.project-card:hover .project-image img{transform:scale(1.035)}
.project-year{
  position:absolute;
  z-index:3;
  left:14px;
  top:14px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(8,18,21,.72);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.4px;
  backdrop-filter:blur(10px);
}
.project-body{
  padding:22px;
  display:flex;
  flex:1;
  flex-direction:column;
  min-height:274px;
}
.project-body h3{
  font:700 22px/1.15 "Space Grotesk";
  margin:0 0 9px;
}
.project-body p{
  min-height:88px;
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.65;
}
.project-body .tags{margin:17px 0 18px}
.project-body .tags span{font-size:10px;padding:5px 9px}
.project-link{
  width:100%;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:12px;
  background:var(--text);
  color:var(--bg);
  font-size:12px;
  font-weight:800;
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.project-link:hover{transform:translateY(-2px);background:var(--accent);color:#042522}
.yumi-image{
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.9),transparent 30%),
    linear-gradient(135deg,#fff4d6,#e49a34);
}
.yumi-image .phone-glow{
  position:absolute;
  width:145px;
  height:190px;
  border-radius:30px;
  background:rgba(255,255,255,.4);
  box-shadow:0 22px 55px rgba(70,35,0,.25);
  transform:rotate(-5deg);
}
.yumi-image img,
.project-image[href*="yumi"] img{
  position:relative;
  z-index:2;
  width:auto;
  height:132%;
  object-fit:contain;
  object-position:center top;
  filter:drop-shadow(0 18px 22px rgba(45,24,0,.24));
}
.projects-footer{display:flex;justify-content:center;margin-top:30px}

/* Certificates restored as their own section. */
.certificate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.certificate-card{
  position:relative;
  display:grid;
  grid-template-columns:94px 1fr;
  gap:22px;
  align-items:center;
  min-height:220px;
  padding:30px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 72%,var(--surface)));
  overflow:hidden;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.certificate-card:before{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-85px;
  top:-100px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 68%);
}
.certificate-card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--accent) 58%,var(--line));box-shadow:var(--shadow)}
.certificate-icon{
  width:90px;
  height:90px;
  border-radius:25px;
  display:grid;
  place-items:center;
  font-size:43px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 14px 30px rgba(0,0,0,.12);
}
.android-certificate{background:linear-gradient(145deg,#3ddc84,#159957);color:#071d12}
.flutter-certificate{background:linear-gradient(145deg,#5ec9f8,#1769aa);color:#fff}
.certificate-date{color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.certificate-content h3{font:700 23px/1.2 "Space Grotesk";margin:7px 0 5px}
.certificate-content>p{font-size:13px;color:var(--muted)}
.certificate-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}
.certificate-meta span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:700}
.certificate-meta i{color:var(--accent)}

/* Telegram contact fallback and clearer action state. */
.telegram-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.telegram-fallback{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:800;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.telegram-fallback:hover{color:#229ed9;border-color:#229ed9}

@media(max-width:1100px){
  .site-nav{gap:17px}
  .site-nav a{font-size:12px}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .hero{grid-template-columns:1fr}
  .projects-heading-row{align-items:flex-start}
}
@media(max-width:760px){
  .projects-heading-row{flex-direction:column;align-items:stretch}
  .view-all-projects{width:max-content}
  .certificate-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero h1.hero-name{font-size:clamp(50px,16vw,70px);letter-spacing:-3px}
  .typewriter-shell{min-height:92px}
  .typed-prefix{font-size:22px}
  .typed-role{font-size:clamp(21px,6vw,27px)!important;width:25ch;max-width:100%;min-height:1.3em!important}
  #typedText{width:24ch;max-width:calc(100% - 9px)}
  .role-logo-badge{width:92px;left:16px;bottom:16px}
  .role-logo-badge img{width:72px;height:72px}
  .project-grid{grid-template-columns:1fr}
  .project-image,.featured .project-image{height:230px;min-height:230px;flex-basis:230px}
  .project-body{min-height:250px}
  .project-body p{min-height:0}
  .certificate-card{grid-template-columns:72px 1fr;padding:22px;gap:16px;min-height:190px}
  .certificate-icon{width:70px;height:70px;font-size:34px;border-radius:20px}
  .certificate-content h3{font-size:19px}
  .telegram-actions{align-items:stretch;flex-direction:column}
  .telegram-fallback,.contact-submit{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .hero h1.hero-name span,.role-logo-badge,.role-logo-badge img,.logo-halo,.floating-card{animation:none!important}
}

/* =========================================================
   July 2026 — certificates, skill gallery and brand correction
   ========================================================= */

/* The animated gradient belongs to the navbar identity only. */
.brand-name{
  background:linear-gradient(105deg,var(--brand-1),var(--brand-2) 28%,var(--brand-3) 60%,var(--brand-4),var(--brand-1));
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  animation:top-brand-gradient 5.5s linear infinite;
  filter:drop-shadow(0 0 13px color-mix(in srgb,var(--brand-3) 22%,transparent));
}
@keyframes top-brand-gradient{to{background-position:300% 0}}

/* Keep the hero name readable and theme-related, not rainbow-colored. */
.hero h1.hero-name span{
  background:none!important;
  animation:none!important;
  filter:none!important;
}
.hero h1.hero-name span:first-child{
  color:var(--text)!important;
  -webkit-text-stroke:0!important;
}
.hero h1.hero-name span:last-child{
  color:transparent!important;
  -webkit-text-stroke:2px var(--accent)!important;
}

/* Skill view switcher. */
.skills-heading-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:38px;
}
.skills-heading-row .section-heading{margin-bottom:0}
.skills-view-toggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:45px;
  padding:11px 16px;
  border:1px solid color-mix(in srgb,var(--accent) 48%,var(--line));
  border-radius:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface));
  color:var(--text);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(0,0,0,.08);
  transition:transform .28s ease,border-color .28s ease,background .28s ease,color .28s ease;
}
.skills-view-toggle i{color:var(--accent);font-size:16px;transition:transform .35s ease}
.skills-view-toggle:hover{transform:translateY(-3px);border-color:var(--accent)}
.skills-view-toggle[aria-pressed="true"]{background:var(--accent);color:#042522;border-color:var(--accent)}
.skills-view-toggle[aria-pressed="true"] i{color:#042522;transform:rotate(90deg)}
.skills-view[hidden]{display:none!important}
.skills-view.is-active{animation:skills-view-enter .5s cubic-bezier(.2,.8,.2,1)}
@keyframes skills-view-enter{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

.skill-gallery{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:16px;
}
.skill-tile{
  position:relative;
  min-width:0;
  min-height:136px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px 10px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 76%,var(--surface)));
  box-shadow:0 13px 27px rgba(0,0,0,.06);
  overflow:hidden;
  transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease;
}
.skill-tile:before{
  content:"";
  position:absolute;
  width:78px;
  height:78px;
  right:-30px;
  top:-34px;
  border-radius:50%;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  transition:transform .4s ease;
}
.skill-tile:hover{
  transform:translateY(-7px);
  border-color:color-mix(in srgb,var(--accent) 65%,var(--line));
  box-shadow:var(--shadow);
}
.skill-tile:hover:before{transform:scale(1.7)}
.skill-icon-frame{
  position:relative;
  z-index:1;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:color-mix(in srgb,var(--surface-2) 86%,transparent);
  box-shadow:inset 0 0 0 1px var(--line);
}
.skill-icon-frame img{width:38px;height:38px;object-fit:contain}
.skill-icon-frame.icon-fallback:after{
  content:attr(data-fallback);
  color:var(--accent);
  font:800 17px "Space Grotesk";
}
.skill-tile>span{
  position:relative;
  z-index:1;
  text-align:center;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}
.skill-tile:hover>span{color:var(--text)}

/* Complete certificate gallery. */
.certificate-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}
.certificate-card{
  grid-template-columns:68px minmax(0,1fr);
  gap:18px;
  min-height:188px;
  padding:24px;
  border-radius:21px;
}
.certificate-icon{
  width:64px;
  height:64px;
  border-radius:18px;
  font-size:28px;
  overflow:hidden;
  background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));
  color:var(--accent);
}
.certificate-icon img{width:42px;height:42px;object-fit:contain}
.udemy-certificate{background:linear-gradient(145deg,#a435f0,#6617aa)}
.web-certificate{background:linear-gradient(145deg,#dff7f1,#cce8df);color:#126d64}
.iti-certificate{background:#eef5f2}
.iti-certificate img{width:52px;height:42px}
.certificate-content{min-width:0;display:flex;flex-direction:column}
.certificate-content h3{font-size:18px;line-height:1.3;margin:6px 0 6px}
.certificate-content>p{line-height:1.55;min-height:42px}
.certificate-meta{margin-top:13px;gap:7px}
.certificate-meta span{font-size:9px;padding:5px 8px}
.certificate-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  margin-top:14px;
  color:var(--accent-2);
  font-size:11px;
  font-weight:800;
  transition:color .25s ease,transform .25s ease;
}
.certificate-link:hover{color:var(--accent);transform:translateX(3px)}

@media(max-width:1100px){
  .skill-gallery{grid-template-columns:repeat(6,minmax(0,1fr))}
  .certificate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .skills-heading-row{align-items:flex-start;flex-direction:column}
  .skills-view-toggle{width:max-content}
  .skill-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:640px){
  .skill-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .skill-tile{min-height:124px;border-radius:17px}
  .skill-icon-frame{width:54px;height:54px}
  .certificate-grid{grid-template-columns:1fr}
  .certificate-card{grid-template-columns:62px minmax(0,1fr);min-height:178px;padding:21px;gap:15px}
  .certificate-icon{width:58px;height:58px}
  .certificate-content h3{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .brand-name{animation:none!important}
  .skills-view.is-active{animation:none!important}
}