@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700;800&display=swap");
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#070a0f;--surface:#0d1219;--card:#111821;--line:rgba(255,255,255,.09);--text:#f5f7fa;--muted:#929ba8;--accent:#42e6ae;--accent2:#9cf8d8}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 75% 10%,rgba(66,230,174,.09),transparent 27%),radial-gradient(circle at 10% 60%,rgba(77,118,255,.05),transparent 25%);z-index:-3}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
.page-noise{position:fixed;inset:0;opacity:.025;pointer-events:none;z-index:100;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(66,230,174,.09),transparent 65%);transform:translate(-50%,-50%);pointer-events:none;z-index:-1}
.nav{height:82px;position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,76px);border-bottom:1px solid transparent;transition:.35s}
.nav.scrolled{background:rgba(7,10,15,.78);backdrop-filter:blur(18px);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:38px;height:38px;border:1px solid rgba(66,230,174,.45);border-radius:11px;display:grid;place-items:center;color:var(--accent);font:700 12px "Space Grotesk";box-shadow:0 0 24px rgba(66,230,174,.08)}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.brand-copy strong{font:800 13px "Space Grotesk";letter-spacing:.18em}
.brand-copy small{font-size:8px;letter-spacing:.24em;color:var(--muted);margin-top:5px}
.nav-links{display:flex;align-items:center;gap:28px;color:#b6bec9;font-size:13px;font-weight:600}
.nav-links>a:not(.nav-cta){transition:.25s}.nav-links>a:not(.nav-cta):hover{color:var(--accent)}
.nav-cta{border:1px solid var(--line);padding:11px 15px;border-radius:100px;color:#fff;transition:.25s}.nav-cta:hover{border-color:var(--accent);color:var(--accent)}
.menu-toggle{display:none;background:none;border:0}
.section{position:relative;padding:140px clamp(22px,7vw,110px)}
.hero{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;padding-top:145px;overflow:hidden}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:75px 75px;mask-image:linear-gradient(to bottom,black,transparent 85%);z-index:-2}
.hero-copy{max-width:760px}
.availability{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(66,230,174,.2);background:rgba(66,230,174,.045);padding:9px 13px;border-radius:100px;color:#b7f7df;font-size:11px;font-weight:800;letter-spacing:.16em;margin-bottom:25px}
.availability span{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 13px var(--accent);animation:pulse 1.7s infinite}
.eyebrow{font-size:10px;letter-spacing:.23em;color:var(--accent);font-weight:800;margin-bottom:18px}
.hero h1,.section-heading h2,.about h2,.projects-head h2,.pricing h2,.cta-section h2,.contact h2{font:700 clamp(42px,6vw,82px)/.98 "Space Grotesk",sans-serif;letter-spacing:-.055em}
em{font-style:normal;color:var(--accent)}
.hero-text{max-width:600px;color:var(--muted);font-size:16px;line-height:1.85;margin:28px 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;border-radius:100px;padding:15px 21px;font-size:12px;font-weight:800;transition:.3s;cursor:pointer;border:1px solid transparent}
.btn span{font-size:16px}.btn-primary{background:var(--accent);color:#04100b;box-shadow:0 12px 35px rgba(66,230,174,.14)}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 45px rgba(66,230,174,.24)}
.btn-ghost{border-color:var(--line);color:#fff}.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
.btn-light{background:#fff;color:#07100c}.hero-meta{display:flex;gap:34px;margin-top:60px}.hero-meta div{display:flex;gap:9px;align-items:center}.hero-meta strong{font:700 22px "Space Grotesk"}.hero-meta span{font-size:11px;line-height:1.5;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.hero-visual{min-height:500px;display:grid;place-items:center;position:relative}
.code-card{width:min(520px,100%);border:1px solid var(--line);background:rgba(15,21,29,.82);border-radius:22px;box-shadow:0 35px 90px rgba(0,0,0,.45),0 0 80px rgba(66,230,174,.05);overflow:hidden;transform:perspective(1000px) rotateY(-6deg) rotateX(3deg);animation:float 6s ease-in-out infinite}
.code-top{height:44px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 15px}.code-top>span{width:8px;height:8px;border-radius:50%;background:#39414c}.code-top small{margin-left:auto;color:#6f7986;font-size:9px}.code-card pre{padding:27px 24px 30px;overflow:auto;font:500 12px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace;color:#c7d0da}.c-purple{color:#c7a4ff}.c-green{color:#65efbd}.c-orange{color:#ffbd7a}.c-blue{color:#76b8ff}.c-pink{color:#ff88bd}
.orb{position:absolute;border-radius:50%;filter:blur(1px);z-index:-1}.orb-one{width:350px;height:350px;background:radial-gradient(circle,rgba(66,230,174,.15),transparent 65%);animation:orb 8s ease-in-out infinite}.orb-two{width:180px;height:180px;background:radial-gradient(circle,rgba(91,112,255,.11),transparent 68%);right:0;bottom:15%;animation:orb 10s ease-in-out infinite reverse}
.float-chip{position:absolute;padding:9px 13px;border:1px solid var(--line);background:rgba(13,18,25,.78);backdrop-filter:blur(12px);border-radius:10px;font:700 9px "Space Grotesk";letter-spacing:.12em;color:#dce4ec;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:chip 4s ease-in-out infinite}
.chip-html{top:14%;left:4%;color:#ffae76}.chip-css{top:28%;right:2%;color:#78a9ff;animation-delay:-1s}.chip-js{bottom:18%;left:2%;color:#ffe27b;animation-delay:-2s}.chip-shopify{bottom:5%;right:16%;color:#79efad;animation-delay:-3s}.chip-wp{top:4%;right:20%;color:#82b9ff;animation-delay:-1.5s}
.ticker{overflow:hidden;border-block:1px solid var(--line);background:#0a0e14}.ticker-track{width:max-content;display:flex;align-items:center;gap:30px;padding:17px 0;animation:marquee 28s linear infinite;color:#7e8997;font:700 10px "Space Grotesk";letter-spacing:.18em}.ticker b{color:var(--accent)}
.section-label{position:absolute;left:clamp(22px,3vw,50px);top:145px;color:#5e6875;font:700 9px "Space Grotesk";letter-spacing:.18em;writing-mode:vertical-rl}
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:100px;margin-left:7%;align-items:end}.about h2{max-width:650px}.about-text{max-width:540px;color:var(--muted);font-size:14px;line-height:1.9}.about-text p+p{margin-top:17px}.text-link{display:inline-flex;gap:18px;color:#fff;margin-top:28px;font-size:11px;font-weight:800;border-bottom:1px solid var(--line);padding-bottom:8px}.text-link:hover{color:var(--accent);border-color:var(--accent)}
.about-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:80px 0 0 7%}.mini-card{min-height:220px;padding:24px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.025),transparent);transition:.35s;position:relative;overflow:hidden}.mini-card:hover{transform:translateY(-7px);border-color:rgba(66,230,174,.3)}.mini-card:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(66,230,174,.06);filter:blur(20px);right:-60px;bottom:-60px}.mini-card span,.group-number{font:700 10px "Space Grotesk";color:var(--accent)}.mini-card h3{font:700 20px/1.1 "Space Grotesk";margin-top:65px;letter-spacing:-.03em}.mini-card p{color:var(--muted);font-size:12px;line-height:1.7;margin-top:14px}
.section-heading{margin-left:7%}.section-heading h2{max-width:650px}
.skills-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:12px;margin:65px 0 0 7%}.skill-group{border:1px solid var(--line);padding:28px;min-height:250px;background:#0b1016}.skill-group h3{font:700 25px "Space Grotesk";margin:35px 0 22px}.skill-tags{display:flex;flex-wrap:wrap;gap:7px}.skill-tags span,.tags span{border:1px solid var(--line);padding:8px 10px;border-radius:100px;color:#aeb8c5;font-size:9px}
.timeline{margin:70px 0 0 7%;border-left:1px solid #28313c}.timeline-item{display:grid;grid-template-columns:190px 24px 1fr;gap:22px;padding:0 0 62px;position:relative}.timeline-date{font-size:10px;letter-spacing:.1em;color:#6f7986;padding-top:4px}.timeline-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(66,230,174,.7);margin-left:-26px;margin-top:4px}.timeline-content{max-width:700px}.company{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.15em}.timeline-content h3{font:700 30px "Space Grotesk";margin:8px 0 12px}.timeline-content>p:not(.company){color:var(--muted);font-size:13px;line-height:1.8}.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.projects-head{display:flex;justify-content:space-between;align-items:end;margin-left:7%;gap:50px}.projects-head>p{max-width:330px;color:var(--muted);font-size:12px;line-height:1.8}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:70px 0 0 7%}.project-card{border:1px solid var(--line);background:#0c1117;overflow:hidden;transition:.4s}.project-card:hover{transform:translateY(-8px);border-color:rgba(66,230,174,.3);box-shadow:0 30px 70px rgba(0,0,0,.28)}.project-large{grid-column:span 2}.project-art{height:300px;display:grid;place-items:center;overflow:hidden;position:relative}.project-large .project-art{height:430px}.project-art:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 45%)}.perfume{background:radial-gradient(circle at 75% 35%,#cfb681,transparent 24%),linear-gradient(135deg,#17140e,#5d4b2b 45%,#17130d)}.spice{background:linear-gradient(135deg,#20150e,#7c4724 48%,#21140d)}.fragrance{background:linear-gradient(135deg,#0e1714,#305047 48%,#111815)}.comforty{background:linear-gradient(135deg,#d4c7b1,#f2eee6 50%,#b8aa96)}.movies{background:linear-gradient(135deg,#080b14,#1b2346 50%,#080a11)}.weather{background:linear-gradient(135deg,#132537,#315f83 50%,#101923)}
.mock-browser{width:70%;height:78%;background:#f5eee0;border-radius:12px;box-shadow:0 30px 70px #0007;position:relative;overflow:hidden;padding:15px;color:#201a12}.mock-browser>span{display:inline-block;width:6px;height:6px;background:#6f6658;border-radius:50%;margin-right:3px}.mock-content{height:calc(100% - 20px);margin-top:10px;padding:28px;display:flex;flex-direction:column;justify-content:center}.mock-content small{font:700 10px "Space Grotesk";letter-spacing:.35em}.mock-content strong{font:700 clamp(28px,4vw,55px)/.88 "Space Grotesk";margin-top:14px}.mock-content i{width:55%;height:90px;border:1px solid #201a12;margin-top:28px}.mock-store{padding:35px;color:#f8efe1;text-align:center;position:relative;z-index:2}.mock-store span{display:block;font:700 12px "Space Grotesk";letter-spacing:.35em}.mock-store strong{font:700 50px/.85 "Space Grotesk";display:block;margin-top:12px}.mock-store small{display:block;font:700 11px "Space Grotesk";letter-spacing:.3em}.comforty-ui{width:65%;height:68%;background:#f8f5ef;padding:25px;color:#2b2924;box-shadow:0 25px 60px #0003}.comforty-ui>span{font:700 14px "Space Grotesk"}.comforty-ui div{height:22%;margin-top:12px;background:#ded8ce}.movie-ui{color:#d9e0ff;text-align:center;position:relative;z-index:2}.movie-ui span{font:700 55px "Space Grotesk";display:block;color:#6ea3ff}.movie-ui strong{font:700 35px/.85 "Space Grotesk"}.weather-ui{position:relative;z-index:2;text-align:center}.weather-ui span{font-size:10px;letter-spacing:.3em;color:#b7dfff}.weather-ui strong{font:700 90px "Space Grotesk";display:block;color:#eaf6ff}.weather-ui small{color:#b7dfff;font-size:11px}.project-info{padding:22px;display:flex;justify-content:space-between;align-items:center}.project-index{font-size:9px;color:var(--accent);letter-spacing:.15em}.project-info h3{font:700 21px "Space Grotesk";margin:5px 0}.project-info p{color:#737e8b;font-size:11px}.project-arrow{font-size:22px;color:#8994a0;transition:.25s}.project-card:hover .project-arrow{color:var(--accent);transform:translate(4px,-4px)}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:65px 0 0 7%}.service-card{min-height:360px;border:1px solid var(--line);padding:25px;position:relative;transition:.35s;background:linear-gradient(145deg,rgba(255,255,255,.025),transparent)}.service-card:hover{border-color:rgba(66,230,174,.3);transform:translateY(-8px)}.service-card>span{color:#65707d;font:700 10px "Space Grotesk"}.service-icon{width:48px;height:48px;border:1px solid rgba(66,230,174,.2);border-radius:13px;display:grid;place-items:center;color:var(--accent);font-size:20px;margin:52px 0 30px}.service-card h3{font:700 25px "Space Grotesk"}.service-card p{color:var(--muted);font-size:13px;line-height:1.8;margin:14px 0 28px}.service-card a{position:absolute;bottom:25px;color:var(--accent);font-size:11px;font-weight:800}
.pricing{padding-top:70px}.pricing-box{margin-left:7%;border:1px solid rgba(66,230,174,.18);background:radial-gradient(circle at 80% 0%,rgba(66,230,174,.09),transparent 35%),#0b1117;padding:60px;display:grid;grid-template-columns:1fr .7fr;gap:30px}.pricing-copy h2{font-size:55px}.pricing-copy>p:last-child{color:var(--muted);font-size:12px;line-height:1.8;max-width:400px;margin-top:20px}.rate{grid-column:2;grid-row:1;display:flex;align-items:baseline;justify-content:flex-end;gap:4px}.rate span{font:700 30px "Space Grotesk";color:var(--accent)}.rate strong{font:700 clamp(70px,9vw,125px) "Space Grotesk";letter-spacing:-.08em}.rate small{font-size:11px;color:#71808d}.rate-list{grid-column:1/-1;border-top:1px solid var(--line);margin-top:20px}.rate-list div{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);font-size:11px}.rate-list b{color:var(--accent)}.negotiable{grid-column:1/-1;color:#7e8997;font-size:10px}
.education-card{margin-left:7%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:50px 0;display:flex;justify-content:space-between;align-items:end}.education-card h2{font:700 clamp(32px,4vw,55px) "Space Grotesk";letter-spacing:-.04em}.education-card>div:last-child{display:flex;flex-direction:column;gap:7px;text-align:right}.education-card strong{font:700 14px "Space Grotesk"}.education-card span{font-size:11px;color:var(--muted)}
.cta-section{min-height:75vh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:#42e6ae;color:#06100b}.cta-section:before{content:"";position:absolute;width:650px;height:650px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.32),transparent 62%);animation:orb 9s infinite}.cta-content{position:relative;z-index:2}.cta-section .eyebrow{color:#143e31}.cta-section h2{font-size:clamp(48px,7vw,90px)}.cta-section em{color:#0a3729}.cta-section .btn{margin-top:35px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;margin-left:7%}.contact h2{font-size:clamp(45px,5vw,72px)}.contact-copy{max-width:520px;color:var(--muted);font-size:13px;line-height:1.8;margin:25px 0}.contact-details{display:grid;gap:17px;margin-top:30px}.contact-details a,.contact-details div{display:flex;flex-direction:column;gap:5px}.contact-details small{color:#64707c;font-size:8px;letter-spacing:.2em}.contact-details strong{font:600 13px "Space Grotesk"}.socials{display:flex;gap:20px;margin-top:30px}.socials a{font-size:11px;color:#aab4c0;border-bottom:1px solid var(--line);padding-bottom:7px}.socials a:hover{color:var(--accent);border-color:var(--accent)}
.contact-form{border:1px solid var(--line);padding:30px;background:#0b1016}.contact-form label{display:block;color:#7f8996;font-size:10px;letter-spacing:.12em;margin-bottom:18px}.contact-form input,.contact-form textarea,.contact-form select{display:block;width:100%;margin-top:8px;border:0;border-bottom:1px solid var(--line);background:transparent;color:#fff;padding:11px 0;outline:none;font-size:12px;border-radius:0}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--accent)}.contact-form select option{background:#10161e}.contact-form textarea{resize:vertical}.contact-form .btn{margin-top:5px;width:100%}.form-note{color:#596572;font-size:11px;margin-top:12px}
.footer{border-top:1px solid var(--line);padding:30px clamp(22px,7vw,110px);display:flex;justify-content:space-between;align-items:end}.footer-brand{font:700 17px "Space Grotesk";letter-spacing:.06em}.footer p,.footer-links{font-size:9px;color:#65707c;margin-top:7px}.footer-links{display:flex;gap:25px;align-items:center}.footer-links a:hover{color:var(--accent)}
.reveal{opacity:1;transform:none;transition:none}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}.delay-3{transition-delay:.32s}
@keyframes pulse{50%{transform:scale(1.6);opacity:.5}}@keyframes float{0%,100%{transform:perspective(1000px) rotateY(-6deg) rotateX(3deg) translateY(0)}50%{transform:perspective(1000px) rotateY(-6deg) rotateX(3deg) translateY(-13px)}}@keyframes chip{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes orb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(15px,-20px) scale(1.08)}}@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:1050px){.nav-links{gap:17px}.hero{grid-template-columns:1fr}.hero-visual{min-height:430px}.about-content,.contact-grid{gap:50px}.services-grid{grid-template-columns:repeat(2,1fr)}.skills-grid{grid-template-columns:1fr 1fr}.skill-group:last-child{grid-column:span 2}.about-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.nav{height:70px}.menu-toggle{display:flex;flex-direction:column;gap:5px}.menu-toggle span{display:block;width:25px;height:1px;background:#fff}.nav-links{position:absolute;top:70px;left:15px;right:15px;display:none;flex-direction:column;align-items:stretch;padding:20px;background:rgba(10,14,20,.96);border:1px solid var(--line);border-radius:16px}.nav-links.open{display:flex}.nav-cta{text-align:center}.section{padding:100px 22px}.hero{padding-top:125px}.hero h1{font-size:48px}.hero-meta{gap:15px;flex-wrap:wrap;margin-top:45px}.hero-visual{min-height:390px}.code-card{width:100%;transform:none}.float-chip{display:none}.section-label{display:none}.about-content,.contact-grid{grid-template-columns:1fr;margin-left:0}.about-cards,.skills-grid,.timeline,.project-grid,.services-grid{margin-left:0}.about-cards{grid-template-columns:1fr 1fr}.skills-grid{grid-template-columns:1fr}.skill-group:last-child{grid-column:auto}.timeline-item{grid-template-columns:1fr;padding-left:20px}.timeline-date{order:1}.timeline-dot{position:absolute;left:-5px;top:4px}.timeline-content{order:2}.projects-head{margin-left:0;display:block}.projects-head>p{margin-top:20px}.project-grid{grid-template-columns:1fr}.project-large{grid-column:auto}.project-large .project-art{height:300px}.project-art{height:260px}.pricing-box{margin-left:0;padding:35px 22px;display:block}.pricing-copy h2{font-size:48px}.rate{justify-content:flex-start;margin:35px 0 20px}.rate-list{margin-top:20px}.education-card{margin-left:0;display:block}.education-card>div:last-child{text-align:left;margin-top:30px}.cta-section{min-height:65vh;padding:50px 22px}.contact-grid{margin-left:0}.footer{display:block}.footer-links{margin-top:20px;justify-content:space-between}.cursor-glow{display:none}}
@media(max-width:480px){.hero h1{font-size:42px}.about-cards,.services-grid{grid-template-columns:1fr}.mini-card{min-height:190px}.mini-card h3{margin-top:45px}.hero-meta div{min-width:85px}.code-card pre{font-size:9px}.project-info h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* ---------- READABILITY + PRICING UPGRADE ---------- */
body{font-size:16px}
.nav-links{font-size:13px}
.nav-cta{font-size:12px}
.eyebrow{font-size:11px}
.section-label{font-size:10px}
.hero-text{font-size:17px;line-height:1.85}
.hero-meta span{font-size:10px}
.about-text{font-size:16px;line-height:1.9}
.about-text p{max-width:620px}
.mini-card p{font-size:12px;line-height:1.75}
.skill-tags span,.tags span{font-size:11px;padding:9px 12px}
.skill-group h3{font-size:27px}
.timeline-date{font-size:10px}
.timeline-content>p:not(.company){font-size:14px;line-height:1.85}
.company{font-size:11px}
.project-info p{font-size:12px}
.project-info h3{font-size:23px}
.project-index{font-size:10px}
.projects-head>p{font-size:13px}
.service-card p{font-size:13px;line-height:1.85}
.service-card a{font-size:11px}
.pricing-box{
  grid-template-columns:1fr 1fr;
  padding:72px clamp(28px,5vw,72px);
  border-radius:4px;
  box-shadow:0 35px 90px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
}
.pricing-copy h2{font-size:clamp(52px,5vw,72px);line-height:.95}
.pricing-copy>p:last-child{font-size:14px;line-height:1.85}
.rate{
  min-height:180px;
  padding:20px 0 20px 30px;
  border-left:1px solid rgba(66,230,174,.18);
  justify-content:center;
  align-items:center;
}
.rate span{font-size:42px}
.rate strong{font-size:clamp(90px,11vw,150px);line-height:.8}
.rate small{font-size:12px;font-weight:800;letter-spacing:.12em}
.rate-list{margin-top:35px}
.rate-list div{padding:20px 4px;font-size:15px}
.rate-list b{font-size:15px}
.negotiable{
  font-size:13px;
  line-height:1.7;
  padding-top:8px;
}
.education-card h2{font-size:clamp(34px,4vw,58px)}
.education-card strong{font-size:15px}
.education-card span{font-size:11px}
.contact-copy{font-size:15px;line-height:1.9}
.contact-details strong{font-size:15px}
.contact-details small{font-size:9px}
.contact-form label{font-size:10px}
.contact-form input,.contact-form textarea,.contact-form select{font-size:14px;padding:13px 0}
.form-note{font-size:10px}
.footer p,.footer-links{font-size:10px}

@media(max-width:760px){
  .hero-text{font-size:15px}
  .about-text{font-size:15px}
  .pricing-box{display:block;padding:42px 24px}
  .rate{
    min-height:150px;
    border-left:0;
    border-top:1px solid rgba(66,230,174,.18);
    border-bottom:1px solid rgba(66,230,174,.18);
    margin:30px 0 10px;
    padding:30px 0;
    justify-content:flex-start;
  }
  .rate strong{font-size:95px}
  .rate-list div{font-size:13px}
  .rate-list b{font-size:13px}
}

/* ---------- FINAL TYPOGRAPHY PASS ---------- */
:root{
  --body-size:17px;
  --body-line:1.85;
}

body{
  font-family:"Manrope",Arial,sans-serif;
  font-size:var(--body-size);
  line-height:var(--body-line);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.hero h1,
.section-heading h2,
.about h2,
.projects-head h2,
.pricing h2,
.cta-section h2,
.contact h2,
.timeline-content h3,
.project-info h3,
.service-card h3,
.skill-group h3,
.education-card h2{
  font-family:"Space Grotesk",Arial,sans-serif;
  font-weight:700;
}

.hero h1{
  font-size:clamp(52px,6.6vw,92px);
  line-height:.96;
  letter-spacing:-.055em;
}

.section-heading h2,
.about h2,
.projects-head h2,
.contact h2{
  font-size:clamp(48px,5.3vw,76px);
  line-height:1;
}

.hero-text{
  font-size:18px;
  line-height:1.85;
  max-width:650px;
}

.about-text{
  font-size:17px;
  line-height:1.9;
  max-width:620px;
}

.about-text p{
  margin-bottom:18px;
}

.mini-card h3{
  font-size:22px;
  line-height:1.15;
}

.mini-card p{
  font-size:13px;
  line-height:1.8;
}

.skill-group h3{
  font-size:29px;
}

.skill-tags span,
.tags span{
  font-size:12px;
  font-weight:600;
  padding:10px 13px;
}

.timeline-content h3{
  font-size:32px;
}

.timeline-content>p:not(.company){
  font-size:15px;
  line-height:1.9;
}

.project-info h3{
  font-size:24px;
}

.project-info p{
  font-size:13px;
}

.service-card h3{
  font-size:28px;
}

.service-card p{
  font-size:14px;
  line-height:1.9;
}

.service-card a{
  font-size:12px;
}

.pricing-copy h2{
  font-size:clamp(56px,5.5vw,80px);
}

.pricing-copy>p:last-child{
  font-size:15px;
  line-height:1.9;
}

.rate strong{
  font-size:clamp(100px,11vw,160px);
}

.rate-list div{
  font-size:16px;
  padding:22px 4px;
}

.rate-list b{
  font-size:16px;
}

.negotiable{
  font-size:13px;
  line-height:1.8;
}

.contact-copy{
  font-size:16px;
  line-height:1.9;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  font-size:15px;
  line-height:1.6;
}

.contact-form label{
  font-size:11px;
}

@media(max-width:760px){
  body{font-size:16px}
  .hero h1{font-size:clamp(44px,12vw,62px)}
  .hero-text{font-size:16px}
  .about-text{font-size:16px}
  .section-heading h2,
  .about h2,
  .projects-head h2,
  .contact h2{
    font-size:clamp(42px,10vw,60px);
  }
  .timeline-content h3{font-size:27px}
  .service-card h3{font-size:25px}
  .rate strong{font-size:100px}
  .rate-list div{font-size:14px}
  .rate-list b{font-size:14px}
}

@media(max-width:480px){
  .hero h1{font-size:43px}
  .section-heading h2,
  .about h2,
  .projects-head h2,
  .contact h2{font-size:42px}
}

/* =========================================================
   PREMIUM UI / UX + READABLE BODY TYPOGRAPHY
   ========================================================= */

:root{
  --accent:#42e6ae;
  --accent-soft:rgba(66,230,174,.12);
  --accent-line:rgba(66,230,174,.28);
  --body-font:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display-font:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html{scroll-behavior:smooth}

body{
  font-family:var(--body-font)!important;
  font-size:17px!important;
  line-height:1.8!important;
  letter-spacing:-.005em;
  color:#d8dee7;
}

p, li, label, input, textarea, select, button, a{
  font-family:var(--body-font);
}

p{
  font-size:17px;
  line-height:1.85;
}

.hero h1,.section-heading h2,.about h2,.projects-head h2,
.pricing h2,.cta-section h2,.contact h2,.timeline-content h3,
.project-info h3,.service-card h3,.skill-group h3,.education-card h2{
  font-family:var(--display-font)!important;
  font-weight:800!important;
  letter-spacing:-.045em;
}

.nav-links a{font-size:13px;font-weight:700;letter-spacing:.01em}
.hero-text{font-size:18px!important;line-height:1.9!important}
.about-text{font-size:17px!important;line-height:1.95!important}
.timeline-content>p:not(.company){font-size:15px!important;line-height:1.9!important}
.project-info p{font-size:14px!important;line-height:1.8!important}
.service-card p{font-size:15px!important;line-height:1.9!important}
.contact-copy{font-size:16px!important;line-height:1.9!important}

.contact-form input,.contact-form textarea,.contact-form select{
  font-size:15px!important;
  padding:15px 0!important;
}

.contact-details strong{font-size:15px!important}
.contact-details small{font-size:10px!important;letter-spacing:.08em}

/* Stronger email/contact treatment */
.contact-details a{
  font-size:16px;
  font-weight:700;
  color:#eef3f8;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:.25s ease;
}
.contact-details a:hover{
  color:var(--accent);
  border-bottom-color:var(--accent-line);
}

/* Accent theme variables */
a:hover,.accent,.section-label,.eyebrow{color:var(--accent)}
.btn-primary{
  background:var(--accent)!important;
  color:#06120f!important;
}
.tag,.skill-tags span,.tags span{
  border-color:var(--accent-line)!important;
}
.timeline-line,.progress,.project-accent{
  background:var(--accent)!important;
}

/* Theme switcher */
.theme-panel{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9999;
  font-family:var(--body-font);
}
.theme-toggle{
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(13,17,23,.92);
  color:#f3f6f9;
  padding:11px 15px;
  border-radius:999px;
  cursor:pointer;
  backdrop-filter:blur(16px);
  box-shadow:0 14px 40px rgba(0,0,0,.3);
  font-size:12px;
  font-weight:800;
}
.theme-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 16px var(--accent);
}
.theme-options{
  display:none;
  width:190px;
  margin-bottom:10px;
  padding:13px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  background:rgba(13,17,23,.97);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.theme-panel.open .theme-options{display:block}
.theme-options p{
  font-size:9px!important;
  font-weight:900;
  letter-spacing:.15em;
  color:#7f8997;
  margin:3px 8px 8px;
}
.theme-options button{
  width:100%;
  border:0;
  background:transparent;
  color:#dce2e9;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 8px;
  border-radius:9px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  text-align:left;
}
.theme-options button:hover{background:rgba(255,255,255,.06)}
.theme-options i{
  width:11px;height:11px;border-radius:50%;
  background:var(--swatch,#42e6ae);
}
.theme-options button[data-theme="green"] i{--swatch:#42e6ae}
.theme-options button[data-theme="blue"] i{--swatch:#55a7ff}
.theme-options button[data-theme="violet"] i{--swatch:#a78bfa}
.theme-options button[data-theme="orange"] i{--swatch:#ff9f5b}
.theme-options button[data-theme="mono"] i{--swatch:#e7edf5}

/* Better cards and interaction */
.project,.service-card,.mini-card,.education-card{
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.project:hover,.service-card:hover,.mini-card:hover,.education-card:hover{
  transform:translateY(-5px);
  border-color:var(--accent-line);
  box-shadow:0 22px 55px rgba(0,0,0,.22);
}
button,.btn,.project a,.service-card a{transition:all .25s ease}

@media(max-width:760px){
  body{font-size:16px!important}
  p{font-size:16px;line-height:1.8}
  .hero-text{font-size:16px!important}
  .about-text{font-size:16px!important}
  .theme-panel{right:14px;bottom:14px}
}


/* ===== TWO-FONT TYPOGRAPHY SYSTEM ===== */
:root {
  --heading-font: "Playfair Display", Georgia, serif;
  --body-font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body {
  font-family: var(--body-font);
}

body,
p,
li,
a,
button,
input,
textarea,
select,
label,
small,
span,
nav,
.card,
.service-card,
.project-card,
.rate-card,
.contact-card {
  font-family: var(--body-font);
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.logo,
.brand,
.display,
.stat-value,
.rate-price {
  font-family: var(--heading-font);
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.logo,
.brand,
.display {
  font-weight: 700;
  letter-spacing: -0.025em;
}


/* ===== FINAL TYPOGRAPHY: PLAYFAIR DISPLAY + INTER ===== */
:root {
  --heading-font: "Playfair Display", Georgia, serif;
  --body-font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body {
  font-family: var(--body-font);
}

body,
p,
li,
a,
button,
input,
textarea,
select,
label,
small,
span,
nav,
.card,
.service-card,
.project-card,
.rate-card,
.contact-card {
  font-family: var(--body-font);
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.logo,
.brand,
.display,
.stat-value,
.rate-price {
  font-family: var(--heading-font);
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.logo,
.brand,
.display {
  font-weight: 700;
  letter-spacing: -0.02em;
}


/* =========================================================
   PROFESSIONAL DARK PORTFOLIO THEME SYSTEM
   Website-standard contrast, spacing and dark surfaces
   ========================================================= */
:root {
  --bg: #080b12;
  --surface: #101520;
  --surface2: #151c29;
  --text: #f4f7fb;
  --muted: #aab4c3;
  --border: rgba(255,255,255,.10);
  --accent: #5eead4;
  --accent-soft: rgba(94,234,212,.13);
  --accent-line: rgba(94,234,212,.32);
}

html {
  color-scheme: dark;
  background: var(--bg);
}

body {
  background:
    radial-gradient(circle at 85% 5%, var(--accent-soft), transparent 28rem),
    radial-gradient(circle at 5% 35%, rgba(255,255,255,.025), transparent 24rem),
    var(--bg);
  color: var(--text);
}

body::before {
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%);
}

p, li, .muted, .eyebrow, .subtitle {
  color: var(--muted);
}

a {
  color: var(--text);
}

.card,
.service-card,
.project-card,
.rate-card,
.contact-card,
.skill-card,
.timeline-item,
.about-card,
footer,
header,
nav {
  background: rgba(16,21,32,.88);
  border-color: var(--border);
}

.card:hover,
.service-card:hover,
.project-card:hover,
.skill-card:hover {
  border-color: var(--accent-line);
  box-shadow: 0 22px 60px rgba(0,0,0,.28), 0 0 0 1px var(--accent-soft);
  transform: translateY(-4px);
}

button,
.btn,
.button {
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.btn-primary,
button.primary {
  background: var(--accent);
  color: #07110f;
  border-color: var(--accent);
  box-shadow: 0 12px 30px var(--accent-soft);
}

.btn-primary:hover,
button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px var(--accent-soft);
}

.btn-secondary,
button.secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover,
button.secondary:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

::selection {
  background: var(--accent);
  color: #07110f;
}

/* Theme control */
.theme-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(16,21,32,.92);
  color: var(--text);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  cursor: pointer;
  font: 600 13px/1 var(--body-font);
}

.theme-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}

.theme-options {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 190px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(12,16,24,.97);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.98);
  transition: .2s ease;
}

.theme-panel.open .theme-options {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.theme-options p {
  margin: 5px 9px 8px;
  color: #7f8b9d;
  font: 700 10px/1.2 var(--body-font);
  letter-spacing: .14em;
}

.theme-options button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: 600 13px/1.3 var(--body-font);
}

.theme-options button:hover,
.theme-options button.active {
  background: var(--accent-soft);
}

.theme-options button i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}

.theme-options button[data-theme="graphite"] i { background:#c8d1dc; }
.theme-options button[data-theme="navy"] i { background:#67b7ff; }
.theme-options button[data-theme="forest"] i { background:#6ee7b7; }
.theme-options button[data-theme="burgundy"] i { background:#f28aa7; }

@media (max-width: 640px) {
  .theme-panel {
    right: 14px;
    bottom: 14px;
  }

  .theme-options {
    width: 180px;
  }
}

/* Accessibility: preserve readable contrast and comfortable text rhythm */
body,
p,
li,
a,
button,
input,
textarea,
select {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p, li {
  line-height: 1.75;
}


/* =========================================================
   FINAL PROFESSIONAL SYSTEM
   Typography: Playfair Display + Inter
   Base: 1rem = 16px
   Scale: 1.2 Minor Third
   ========================================================= */

:root {
  --bg:#080b12;
  --surface:#101520;
  --surface2:#151c29;
  --text:#f4f7fb;
  --muted:#aab4c3;
  --border:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.10);
  --accent:#5eead4;
  --accent-soft:rgba(94,234,212,.12);
  --accent-line:rgba(94,234,212,.30);

  --heading-font:"Playfair Display", Georgia, serif;
  --body-font:"Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-h1:2.986rem;
  --fs-h2:2.488rem;
  --fs-h3:2.074rem;
  --fs-h4:1.728rem;
  --fs-h5:1.44rem;
  --fs-h6:1.2rem;
  --fs-body:1rem;
  --fs-small:.833rem;
  --fs-caption:.694rem;
}

html {
  font-size:16px;
  color-scheme:dark;
  background:var(--bg);
}

body {
  margin:0;
  background:
    radial-gradient(circle at 82% 4%, var(--accent-soft), transparent 28rem),
    radial-gradient(circle at 7% 42%, rgba(255,255,255,.025), transparent 24rem),
    var(--bg) !important;
  color:var(--text) !important;
  font-family:var(--body-font) !important;
  font-size:var(--fs-body) !important;
  line-height:1.6 !important;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

p, li, label, input, textarea, select, button, a,
.nav-links a, .availability, .company, .timeline-date,
.project-index, .project-info p, .service-card p,
.contact-copy, .contact-details, .form-note, .footer,
.footer p, .footer-links {
  font-family:var(--body-font) !important;
}

p { font-size:1rem !important; line-height:1.6 !important; }
small { font-size:var(--fs-caption); }

h1, h2, h3, h4, h5, h6,
.hero h1, .section-heading h2, .about h2, .projects-head h2,
.pricing h2, .cta-section h2, .contact h2,
.timeline-content h3, .project-info h3, .service-card h3,
.skill-group h3, .education-card h2, .mini-card h3,
.hero-meta strong, .rate strong, .rate span, .footer-brand,
.mock-content strong, .mock-store strong, .movie-ui strong,
.weather-ui strong {
  font-family:var(--heading-font) !important;
  font-weight:700 !important;
}

h1, .hero h1 {
  font-size:var(--fs-h1) !important;
  line-height:1.15 !important;
  letter-spacing:-.022em !important;
}
h2, .section-heading h2, .about h2, .projects-head h2,
.pricing h2, .contact h2, .cta-section h2 {
  font-size:var(--fs-h2) !important;
  line-height:1.15 !important;
  letter-spacing:-.022em !important;
}
h3, .timeline-content h3, .service-card h3, .skill-group h3,
.project-info h3, .mini-card h3 {
  font-size:var(--fs-h3) !important;
  line-height:1.2 !important;
  letter-spacing:-.018em !important;
}
h4 { font-size:var(--fs-h4) !important; line-height:1.2 !important; }
h5 { font-size:var(--fs-h5) !important; line-height:1.25 !important; }
h6 { font-size:var(--fs-h6) !important; line-height:1.3 !important; }

.hero-text, .about-text {
  font-size:1rem !important;
  line-height:1.7 !important;
}
.nav-links a {
  font-size:var(--fs-small) !important;
}
.eyebrow, .section-label, .availability, .company {
  font-size:var(--fs-caption) !important;
}
.hero-meta strong { font-size:var(--fs-h6) !important; }
.hero-meta span { font-size:var(--fs-caption) !important; }

/* Dark surfaces — every major portfolio surface follows the active theme. */
.nav,
.nav.scrolled,
.code-card,
.mini-card,
.skill-group,
.project-card,
.service-card,
.pricing-box,
.education-card,
.contact-form,
.footer,
.ticker {
  background-color:var(--surface) !important;
  border-color:var(--border) !important;
}

.mini-card,
.service-card {
  background-image:linear-gradient(145deg, rgba(255,255,255,.025), transparent) !important;
}

.project-card {
  background:var(--surface) !important;
}

.pricing-box {
  background:
    radial-gradient(circle at 80% 0%, var(--accent-soft), transparent 35%),
    var(--surface) !important;
}

.contact-form {
  background:var(--surface) !important;
}

.ticker {
  background:var(--surface2) !important;
}

.cta-section {
  min-height:60vh;
  background:
    radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 40%),
    var(--surface2) !important;
  color:var(--text) !important;
}

.cta-section:before {
  background:radial-gradient(circle, var(--accent-soft), transparent 62%) !important;
}

.cta-section .eyebrow,
.cta-section em {
  color:var(--accent) !important;
}

/* Theme-aware text and accents. */
p, li, .hero-text, .about-text, .project-info p,
.service-card p, .timeline-content>p:not(.company),
.contact-copy, .contact-details span, .footer p {
  color:var(--muted) !important;
}

a, h1, h2, h3, h4, h5, h6, strong {
  color:var(--text);
}

a:hover, .accent, .section-label, .eyebrow,
.company, .project-index, .service-card a,
.project-card:hover .project-arrow {
  color:var(--accent) !important;
}

.timeline-line, .progress, .project-accent,
.timeline-dot {
  background:var(--accent) !important;
}

.btn-primary {
  background:var(--accent) !important;
  color:var(--bg) !important;
  border-color:var(--accent) !important;
  box-shadow:0 .75rem 2rem var(--accent-soft) !important;
}

.btn-secondary {
  background:var(--surface2) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

.btn-secondary:hover {
  background:var(--accent-soft) !important;
  border-color:var(--accent-line) !important;
}

/* Theme picker */
.theme-panel {
  position:fixed !important;
  right:1.25rem !important;
  bottom:1.25rem !important;
  z-index:99999 !important;
  font-family:var(--body-font) !important;
}

.theme-toggle {
  display:inline-flex !important;
  align-items:center !important;
  gap:.5625rem !important;
  padding:.75rem 1rem !important;
  border:.0625rem solid var(--border) !important;
  border-radius:999rem !important;
  background:rgba(16,21,32,.94) !important;
  color:var(--text) !important;
  cursor:pointer !important;
  backdrop-filter:blur(1rem);
  box-shadow:0 .75rem 2rem rgba(0,0,0,.3);
  font:600 var(--fs-small)/1 var(--body-font) !important;
}

.theme-dot {
  width:.5625rem !important;
  height:.5625rem !important;
  border-radius:50%;
  background:var(--accent) !important;
  box-shadow:0 0 .875rem var(--accent) !important;
}

.theme-options {
  display:none !important;
  width:11.875rem !important;
  margin-bottom:.625rem !important;
  padding:.75rem !important;
  border:.0625rem solid var(--border) !important;
  border-radius:1rem !important;
  background:var(--surface) !important;
  box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.45);
}

.theme-panel.open .theme-options {
  display:block !important;
}

.theme-options p {
  margin:.3125rem .5625rem .5rem !important;
  color:var(--muted) !important;
  font:700 var(--fs-caption)/1.2 var(--body-font) !important;
  letter-spacing:.14em !important;
}

.theme-options button {
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:.5625rem !important;
  padding:.5625rem .625rem !important;
  border:0 !important;
  border-radius:.5625rem !important;
  background:transparent !important;
  color:var(--text) !important;
  cursor:pointer !important;
  text-align:left !important;
  font:600 var(--fs-small)/1.3 var(--body-font) !important;
}

.theme-options button:hover,
.theme-options button.active {
  background:var(--accent-soft) !important;
}

.theme-options button i {
  width:.6875rem !important;
  height:.6875rem !important;
  flex:0 0 .6875rem;
  border-radius:50%;
  background:var(--accent) !important;
}

.theme-options button[data-theme="graphite"] i { background:#d3dae3 !important; }
.theme-options button[data-theme="navy"] i { background:#6db8ff !important; }
.theme-options button[data-theme="forest"] i { background:#6ee7b7 !important; }
.theme-options button[data-theme="burgundy"] i { background:#f08ba8 !important; }

/* Forms */
.contact-form input,
.contact-form textarea,
.contact-form select {
  font-family:var(--body-font) !important;
  font-size:var(--fs-body) !important;
  line-height:1.6 !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color:var(--accent) !important;
}

::selection {
  background:var(--accent);
  color:var(--bg);
}

/* Responsive TypeScale */
@media (max-width:48rem) {
  :root {
    --fs-h1:2.488rem;
    --fs-h2:2.074rem;
    --fs-h3:1.728rem;
  }

  body { font-size:1rem !important; }
  .hero-text, .about-text, p { font-size:1rem !important; }
  .theme-panel { right:.875rem !important; bottom:.875rem !important; }
}

@media (max-width:30rem) {
  :root {
    --fs-h1:2.074rem;
    --fs-h2:1.728rem;
    --fs-h3:1.44rem;
  }
}

/* =========================================================
   EXPERIENCE TYPOGRAPHY + SPACING REFINEMENT
   Based on the supplied TypeScale reference (1rem base / 1.2 scale)
   ========================================================= */
.experience .section-heading {
  margin-bottom: 0;
}

.experience .section-heading .eyebrow {
  font-size: .694rem !important;
  line-height: 1.3 !important;
  letter-spacing: .16em !important;
  margin-bottom: 1rem !important;
}

.experience .section-heading h2 {
  font-size: 2.488rem !important;
  line-height: 1.15 !important;
  letter-spacing: -.022em !important;
  max-width: 42rem;
}

.experience .timeline {
  margin: 4.5rem 0 0 7% !important;
  border-left: .0625rem solid var(--border) !important;
}

.experience .timeline-item {
  display: grid !important;
  grid-template-columns: 12rem 1.5rem minmax(0, 44rem) !important;
  column-gap: 1.5rem !important;
  padding: 0 0 4rem !important;
  position: relative;
}

.experience .timeline-item:last-child {
  padding-bottom: 0 !important;
}

.experience .timeline-date {
  font-family: var(--body-font) !important;
  font-size: .694rem !important;
  line-height: 1.5 !important;
  letter-spacing: .09em !important;
  color: var(--muted) !important;
  padding-top: .25rem !important;
  white-space: nowrap;
}

.experience .timeline-dot {
  width: .5rem !important;
  height: .5rem !important;
  margin-left: -.25rem !important;
  margin-top: .35rem !important;
  z-index: 2;
}

.experience .timeline-content {
  max-width: 44rem !important;
  min-width: 0;
}

.experience .timeline-content .company {
  font-family: var(--body-font) !important;
  font-size: .833rem !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  margin: 0 0 .625rem !important;
}

.experience .timeline-content h3 {
  font-family: var(--heading-font) !important;
  font-size: 1.728rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -.018em !important;
  margin: 0 0 .875rem !important;
}

.experience .timeline-content > p:not(.company) {
  font-family: var(--body-font) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  max-width: 42rem !important;
  margin: 0 !important;
}

.experience .tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .5rem !important;
  margin-top: 1.25rem !important;
}

.experience .tags span {
  font-family: var(--body-font) !important;
  font-size: .694rem !important;
  line-height: 1.3 !important;
  padding: .4rem .65rem !important;
  border: .0625rem solid var(--border) !important;
  border-radius: 999rem !important;
}

@media (max-width: 48rem) {
  .experience .timeline {
    margin-left: 1.25rem !important;
    margin-top: 3rem !important;
  }

  .experience .timeline-item {
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    padding-left: 1.5rem !important;
    padding-bottom: 3rem !important;
  }

  .experience .timeline-date {
    white-space: normal;
    font-size: .694rem !important;
  }

  .experience .timeline-dot {
    position: absolute !important;
    left: -.25rem !important;
    top: .25rem !important;
    margin: 0 !important;
  }

  .experience .timeline-content h3 {
    font-size: 1.44rem !important;
  }
}

@media (max-width: 30rem) {
  .experience .section-heading h2 {
    font-size: 2.074rem !important;
  }

  .experience .timeline-content > p:not(.company) {
    font-size: 1rem !important;
  }
}


/* =========================================================
   PROFESSIONAL TECHNOLOGY ICONS — FONT AWESOME
   ========================================================= */
.tech-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  font-family:var(--body-font);
}

.tech-badge i {
  font-size:.9em;
  line-height:1;
  flex:0 0 auto;
}

.tech-badge .fa-shopify {
  color:#95bf47;
}

.tech-badge .fa-wordpress {
  color:#21759b;
}

.tech-badge .fa-html5 {
  color:#e34f26;
}

.tech-badge .fa-css3-alt {
  color:#1572b6;
}

.tech-badge .fa-js {
  color:#f7df1e;
}

.tech-badge .fa-react {
  color:#61dafb;
}

.tech-badge .fa-git-alt {
  color:#f05032;
}

.tech-badge .fa-cart-shopping {
  color:var(--accent);
}

/* Keep the icons visually balanced inside compact skill/tag pills. */
.tech-badge i + span {
  line-height:1;
}

/* Brand icons should never inherit oversized heading typography. */
.project-card .tech-badge i,
.service-card .tech-badge i,
.timeline-content .tech-badge i,
.skill-group .tech-badge i {
  font-family:"Font Awesome 6 Brands","Font Awesome 6 Free" !important;
  font-weight:900;
}


/* =========================================================
   COMPLETE THEME BACKGROUND SYSTEM
   Every theme changes the page + section + card hierarchy.
   ========================================================= */
:root {
  --bg:#070a10;
  --section-bg:#0b1019;
  --section-alt:#0e1520;
  --surface:#121a26;
  --surface2:#172131;
  --text:#f5f7fb;
  --muted:#a8b3c2;
  --border:rgba(255,255,255,.10);
  --accent:#5eead4;
  --accent-soft:rgba(94,234,212,.12);
  --accent-line:rgba(94,234,212,.30);
}

html,
body {
  background:var(--bg) !important;
  color:var(--text) !important;
}

body {
  background:
    radial-gradient(circle at 85% 0%, var(--accent-soft), transparent 30rem),
    linear-gradient(180deg, var(--bg) 0%, var(--section-bg) 42%, var(--bg) 100%) !important;
}

/* Main website sections */
section,
main > section,
.section,
.hero,
.about,
.experience,
.projects,
.services,
.skills,
.pricing,
.contact,
.education {
  background-color:var(--section-bg) !important;
  color:var(--text) !important;
}

/* Alternating section rhythm */
section:nth-of-type(even),
main > section:nth-of-type(even),
.section:nth-of-type(even) {
  background-color:var(--section-alt) !important;
}

/* Keep hero visually richer */
.hero {
  background:
    radial-gradient(circle at 75% 15%, var(--accent-soft), transparent 30rem),
    var(--bg) !important;
}

/* Navigation/header follows active theme */
.nav,
.nav.scrolled,
header,
.site-header {
  background:color-mix(in srgb, var(--bg) 94%, transparent) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
  backdrop-filter:blur(1rem);
}

/* Cards and inner sections */
.card,
.project-card,
.service-card,
.skill-group,
.timeline-item,
.mini-card,
.code-card,
.education-card,
.pricing-box,
.contact-form,
.contact-card,
.rate-card {
  background:var(--surface) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
}

.card:nth-child(even),
.service-card:nth-child(even),
.skill-group:nth-child(even) {
  background:var(--surface2) !important;
}

.project-card:hover,
.service-card:hover,
.card:hover,
.skill-group:hover {
  border-color:var(--accent-line) !important;
  box-shadow:
    0 1.5rem 4rem rgba(0,0,0,.30),
    0 0 0 .0625rem var(--accent-soft) !important;
}

/* Pricing and CTA get theme-aware background rather than fixed colors */
.pricing,
.cta-section {
  background:
    radial-gradient(circle at 70% 0%, var(--accent-soft), transparent 32rem),
    var(--section-alt) !important;
}

.pricing-box {
  background:
    linear-gradient(145deg, var(--surface2), var(--surface)) !important;
}

.cta-section {
  color:var(--text) !important;
}

/* Footer */
footer,
.footer {
  background:var(--bg) !important;
  color:var(--text) !important;
  border-top:.0625rem solid var(--border) !important;
}

/* Text follows theme */
h1,h2,h3,h4,h5,h6,
strong,
.logo,
.brand {
  color:var(--text) !important;
}

p,
li,
.hero-text,
.about-text,
.project-info p,
.service-card p,
.contact-copy,
.contact-details span,
.footer p {
  color:var(--muted) !important;
}

a:hover,
.accent,
.section-label,
.eyebrow,
.company,
.project-index,
.project-arrow {
  color:var(--accent) !important;
}

/* Borders/dividers */
hr,
.timeline-line,
.divider,
.section-divider {
  border-color:var(--border) !important;
  background-color:var(--border);
}

/* Theme-aware controls */
.btn-primary {
  background:var(--accent) !important;
  color:var(--bg) !important;
  border-color:var(--accent) !important;
}

.btn-secondary,
button.secondary {
  background:var(--surface2) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

.btn-secondary:hover,
button.secondary:hover {
  background:var(--accent-soft) !important;
  border-color:var(--accent-line) !important;
}

/* Theme picker itself */
.theme-panel {
  z-index:99999 !important;
}

.theme-toggle,
.theme-options {
  background:var(--surface) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
}

.theme-options button {
  color:var(--text) !important;
}

.theme-options button:hover,
.theme-options button.active {
  background:var(--accent-soft) !important;
}

.theme-dot,
.theme-options button i {
  background:var(--accent) !important;
}

/* Form controls */
input,
textarea,
select {
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

input::placeholder,
textarea::placeholder {
  color:var(--muted) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color:var(--accent) !important;
  box-shadow:0 0 0 .1875rem var(--accent-soft) !important;
}

/* Technology tags/icons */
.tech-badge {
  background:var(--surface2);
  border-color:var(--border);
}

/* Prevent hard-coded light backgrounds from defeating themes */
.bg-white,
.background-white,
.white-bg {
  background:var(--section-bg) !important;
}


/* =========================================================
   FINAL TYPOGRAPHY / SPACING / EXPERIENCE TIMELINE
   TypeScale: 1.200 Minor Third, base 1rem = 16px
   ========================================================= */

:root {
  --fs-h1: 2.986rem;
  --fs-h2: 2.488rem;
  --fs-h3: 2.074rem;
  --fs-h4: 1.728rem;
  --fs-h5: 1.44rem;
  --fs-h6: 1.2rem;
  --fs-body: 1rem;
  --fs-small: .833rem;
  --fs-caption: .694rem;
  --section-space: 7rem;
  --content-gap: 3rem;
}

/* Global rhythm */
section,
.section {
  padding-top: var(--section-space) !important;
  padding-bottom: var(--section-space) !important;
}

.container,
.section-container,
.section-inner {
  max-width: 72rem;
}

.section-heading,
.section-header,
.projects-head {
  margin-bottom: 3rem !important;
}

h1 {
  font-size: var(--fs-h1) !important;
  line-height: 1.15 !important;
}
h2 {
  font-size: var(--fs-h2) !important;
  line-height: 1.18 !important;
}
h3 {
  font-size: var(--fs-h3) !important;
  line-height: 1.22 !important;
}
h4 {
  font-size: var(--fs-h4) !important;
  line-height: 1.25 !important;
}
h5 {
  font-size: var(--fs-h5) !important;
  line-height: 1.3 !important;
}
h6 {
  font-size: var(--fs-h6) !important;
  line-height: 1.35 !important;
}
body, p, li, input, textarea, button {
  font-size: var(--fs-body) !important;
  line-height: 1.65 !important;
}

/* Experience: unmistakable vertical timeline */
.experience,
#experience {
  position: relative;
}

.experience .timeline,
#experience .timeline,
.experience-timeline {
  position: relative;
  margin: 0 auto;
  padding: 0 0 0 10.5rem !important;
  max-width: 64rem;
}

.experience .timeline::before,
#experience .timeline::before,
.experience-timeline::before {
  content: "";
  position: absolute;
  top: .25rem;
  bottom: .25rem;
  left: 8.75rem;
  width: .125rem;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--accent-line) 4%,
    var(--accent) 50%,
    var(--accent-line) 96%,
    transparent
  );
  border-radius: 999rem;
}

.experience .timeline-item,
#experience .timeline-item,
.experience-timeline .timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  margin: 0 0 3.5rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.experience .timeline-item:last-child,
#experience .timeline-item:last-child,
.experience-timeline .timeline-item:last-child {
  margin-bottom: 0 !important;
}

.experience .timeline-item::before,
#experience .timeline-item::before,
.experience-timeline .timeline-item::before {
  content: "";
  position: absolute;
  left: -1.82rem;
  top: .35rem;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--bg);
  border: .125rem solid var(--accent);
  box-shadow: 0 0 0 .35rem var(--accent-soft), 0 0 .9rem var(--accent-soft);
  z-index: 2;
}

.experience .timeline-date,
#experience .timeline-date {
  position: absolute !important;
  right: calc(100% + 2.5rem);
  top: .05rem;
  width: 8rem;
  margin: 0 !important;
  text-align: right;
  color: var(--muted) !important;
  font-family: var(--body-font) !important;
  font-size: var(--fs-caption) !important;
  line-height: 1.45 !important;
  letter-spacing: .02em;
}

.experience .timeline-content,
#experience .timeline-content {
  min-width: 0;
  padding: 1.75rem 2rem !important;
  background: linear-gradient(145deg, var(--surface), var(--surface2)) !important;
  border: .0625rem solid var(--border) !important;
  border-radius: 1rem !important;
  box-shadow: 0 1.25rem 3rem rgba(0,0,0,.16);
}

.experience .timeline-content:hover,
#experience .timeline-content:hover {
  border-color: var(--accent-line) !important;
  transform: translateY(-.125rem);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 1.5rem 3.5rem rgba(0,0,0,.24);
}

.experience .timeline-content .company,
#experience .timeline-content .company {
  display: block;
  margin-bottom: .5rem !important;
  font-size: var(--fs-caption) !important;
  line-height: 1.3 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  font-weight: 700 !important;
}

.experience .timeline-content h3,
#experience .timeline-content h3 {
  margin: 0 0 .75rem !important;
  font-family: var(--heading-font) !important;
  font-size: var(--fs-h4) !important;
  line-height: 1.22 !important;
}

.experience .timeline-content p,
#experience .timeline-content p {
  margin: 0 0 1.25rem !important;
  max-width: 48rem;
  font-size: var(--fs-body) !important;
  line-height: 1.65 !important;
}

.experience .timeline-content .tags,
#experience .timeline-content .tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem !important;
}

.experience .timeline-content .tag,
#experience .timeline-content .tag {
  font-size: var(--fs-caption) !important;
  line-height: 1 !important;
  padding: .45rem .65rem !important;
}

/* Floating WhatsApp */
.floating-whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  z-index: 99998;
  border-radius: 50%;
  background: #25d366;
  color: #fff !important;
  font-size: 1.55rem;
  text-decoration: none !important;
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.floating-whatsapp:hover {
  transform: translateY(-.2rem) scale(1.04);
  box-shadow: 0 1rem 2.5rem rgba(37,211,102,.25);
}

/* Contact phone */
.contact-phone {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1rem;
  font-size: 1rem;
}

.contact-phone i {
  color: var(--accent);
  font-size: 1rem;
}

.contact-phone a {
  color: var(--text) !important;
  text-decoration: none;
}

/* LinkedIn + GitHub in final/footer section */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .9rem;
  border: .0625rem solid var(--border);
  border-radius: .65rem;
  background: var(--surface);
  color: var(--text) !important;
  text-decoration: none !important;
  font-size: var(--fs-small) !important;
  line-height: 1 !important;
  transition: .2s ease;
}

.footer-social a:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  transform: translateY(-.1rem);
}

.footer-social i {
  font-size: 1rem;
}

.footer-social .fa-linkedin-in {
  color: #0a66c2;
}

.footer-social .fa-github {
  color: var(--text);
}

/* Technology icon pills */
.tech-badge {
  font-size: var(--fs-caption) !important;
  line-height: 1 !important;
}

.tech-badge i {
  font-size: .9rem !important;
}

/* Responsive timeline */
@media (max-width: 48rem) {
  :root {
    --section-space: 5rem;
    --fs-h1: 2.488rem;
    --fs-h2: 2.074rem;
    --fs-h3: 1.728rem;
    --fs-h4: 1.44rem;
  }

  .experience .timeline,
  #experience .timeline,
  .experience-timeline {
    padding-left: 2rem !important;
  }

  .experience .timeline::before,
  #experience .timeline::before,
  .experience-timeline::before {
    left: .35rem;
  }

  .experience .timeline-item::before,
  #experience .timeline-item::before,
  .experience-timeline .timeline-item::before {
    left: .0rem;
    transform: translateX(-50%);
  }

  .experience .timeline-date,
  #experience .timeline-date {
    position: static !important;
    width: auto;
    margin: 0 0 .6rem !important;
    text-align: left;
  }

  .experience .timeline-content,
  #experience .timeline-content {
    padding: 1.4rem !important;
  }

  .floating-whatsapp {
    right: .875rem;
    bottom: .875rem;
    width: 3.25rem;
    height: 3.25rem;
  }
}

@media (max-width: 30rem) {
  :root {
    --section-space: 4rem;
    --fs-h1: 2.074rem;
    --fs-h2: 1.728rem;
    --fs-h3: 1.44rem;
    --fs-h4: 1.2rem;
  }

  .experience .timeline-content,
  #experience .timeline-content {
    padding: 1.15rem !important;
  }
}


/* =========================================================
   DASHING FINAL PASS
   Minimum readable type: 16px. No tiny sub-1rem UI text.
   Small metadata intentionally uses px for precision.
   ========================================================= */

:root {
  --min-readable: 16px;
  --small-readable: 14px;
  --micro-readable: 13px;
  --nav-height: 4.75rem;
}

/* ---- TypeScale: keep main hierarchy, but never use sub-16px text ---- */
body {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

p, li, input, textarea, select, button,
.nav a, .nav-link, .menu-link {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

small,
.small,
.eyebrow,
.section-label,
.company,
.project-meta,
.project-tag,
.tag,
.badge,
.theme-options p,
.theme-options button {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Any caption/date/technical metadata stays readable in px. */
.timeline-date,
.caption,
.meta,
.footer-meta {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* Never allow common helper classes to become tiny. */
[class*="caption"],
[class*="meta"],
[class*="small"] {
}

/* ---- Premium navbar ---- */
.nav,
.site-header,
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9990 !important;
  min-height: var(--nav-height) !important;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 10px 35px rgba(0,0,0,.14);
}

.nav::after,
.site-header::after,
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  opacity: .9;
}

.nav a,
.nav-link,
.menu-link {
  position: relative;
  padding: .65rem .8rem !important;
  color: var(--text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color .25s ease, transform .25s ease;
}

.nav a::after,
.nav-link::after,
.menu-link::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .35rem;
  height: 2px;
  border-radius: 99px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}

.nav a:hover,
.nav-link:hover,
.menu-link:hover {
  color: var(--accent) !important;
  transform: translateY(-1px);
}

.nav a:hover::after,
.nav-link:hover::after,
.menu-link:hover::after {
  transform: scaleX(1);
}

/* ---- Navbar WhatsApp button ---- */
.nav-whatsapp {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-left: .65rem;
  padding: .65rem 1rem !important;
  border: 1px solid rgba(37,211,102,.35) !important;
  border-radius: 999px !important;
  background: rgba(37,211,102,.10) !important;
  color: #25d366 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.nav-whatsapp i {
  font-size: 18px !important;
}

.nav-whatsapp:hover {
  background: rgba(37,211,102,.16) !important;
  color: #25d366 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37,211,102,.16);
}

/* ---- Theme button integrated into navbar ---- */
.theme-panel {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  z-index: 9995 !important;
  margin-left: .65rem;
}

.theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 42px;
  padding: .6rem .9rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line) !important;
  background: var(--accent-soft) !important;
}

.theme-toggle .fa-palette {
  color: var(--accent);
  font-size: 16px;
}

.theme-options {
  min-width: 210px !important;
  margin-top: .6rem !important;
  padding: .65rem !important;
  border-radius: 1rem !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}

.theme-options p {
  padding: .5rem .65rem !important;
  margin: 0 !important;
  font-weight: 800;
  letter-spacing: .08em;
}

.theme-options button {
  min-height: 42px;
  border-radius: .7rem;
  font-weight: 600;
}

/* ---- Dashing motion system ---- */
@keyframes dashFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dashFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes dashGlow {
  0%,100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50% { box-shadow: 0 0 0 10px transparent; }
}

@keyframes dashLine {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

.hero h1,
.hero h2 {
  animation: dashFadeUp .8s cubic-bezier(.2,.7,.2,1) both;
}

.hero p,
.hero .btn,
.hero .button,
.hero .hero-actions {
  animation: dashFadeUp .8s .12s cubic-bezier(.2,.7,.2,1) both;
}

.section-heading,
.section-header {
  animation: dashFadeUp .7s cubic-bezier(.2,.7,.2,1) both;
}

.card,
.project-card,
.service-card,
.skill-group,
.rate-card,
.contact-card,
.timeline-content {
  transition:
    transform .3s cubic-bezier(.2,.7,.2,1),
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.card:hover,
.project-card:hover,
.service-card:hover,
.skill-group:hover,
.rate-card:hover,
.contact-card:hover,
.timeline-content:hover {
  transform: translateY(-6px);
}

.floating-whatsapp {
  animation: dashFloat 3.2s ease-in-out infinite, dashGlow 2.6s ease-in-out infinite;
}

/* ---- Timeline polish ---- */
.experience .timeline::before,
#experience .timeline::before,
.experience-timeline::before {
  animation: dashLine .9s .2s ease-out both;
  transform-origin: top;
}

.experience .timeline-item::before,
#experience .timeline-item::before,
.experience-timeline .timeline-item::before {
  animation: dashGlow 2.8s ease-in-out infinite;
}

.experience .timeline-item:nth-child(2) .timeline-item::before { animation-delay: .2s; }
.experience .timeline-item:nth-child(3) .timeline-item::before { animation-delay: .4s; }
.experience .timeline-item:nth-child(4) .timeline-item::before { animation-delay: .6s; }

/* ---- Floating WhatsApp remains visible above all content ---- */
.floating-whatsapp {
  width: 58px !important;
  height: 58px !important;
  right: 22px !important;
  bottom: 22px !important;
  font-size: 27px !important;
  border: 2px solid rgba(255,255,255,.18);
  z-index: 99999 !important;
}

/* ---- Buttons feel more premium ---- */
.btn-primary,
.btn-secondary,
button {
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
}

/* ---- Tech pills: readable, not tiny ---- */
.tech-badge,
.project-card .tag,
.timeline-content .tag {
  min-height: 32px;
  padding: .45rem .7rem !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* ---- Respect reduced-motion accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Mobile navbar ---- */
@media (max-width: 48rem) {
  .nav,
  .site-header,
  header {
    min-height: 4.25rem !important;
  }

  .nav-whatsapp span {
    display: none;
  }

  .nav-whatsapp {
    width: 42px;
    height: 42px;
    padding: 0 !important;
    margin-left: .35rem;
  }

  .theme-toggle span:not(.theme-dot) {
    display: none;
  }

  .theme-toggle {
    width: 42px;
    min-width: 42px;
    padding: 0 !important;
  }

  .floating-whatsapp {
    width: 54px !important;
    height: 54px !important;
    right: 16px !important;
    bottom: 16px !important;
  }
}


/* =========================================================
   FINAL PRO UI — RELIABLE THEMES + TIMELINE + CURSOR
   ========================================================= */

/* ---- Reliable theme variables ---- */
:root {
  --bg:#070a10;
  --section-bg:#0b1019;
  --section-alt:#0e1520;
  --surface:#121a26;
  --surface2:#172131;
  --text:#f5f7fb;
  --muted:#a8b3c2;
  --border:rgba(255,255,255,.10);
  --accent:#5eead4;
  --accent-soft:rgba(94,234,212,.12);
  --accent-line:rgba(94,234,212,.30);
}

/* Force theme variables through the actual page hierarchy. */
html, body {
  background:var(--bg) !important;
  color:var(--text) !important;
  transition:background-color .45s ease, color .3s ease;
}

body {
  background-image:
    radial-gradient(circle at 85% 0%, var(--accent-soft), transparent 34rem),
    linear-gradient(180deg, var(--bg), var(--section-bg) 45%, var(--bg)) !important;
}

section, main > section, .section {
  background-color:var(--section-bg) !important;
  color:var(--text) !important;
  transition:background-color .45s ease, border-color .35s ease;
}

section:nth-of-type(even), main > section:nth-of-type(even), .section:nth-of-type(even) {
  background-color:var(--section-alt) !important;
}

.card, .project-card, .service-card, .skill-group, .timeline-content, .rate-card,
.contact-card, .pricing-box {
  background:linear-gradient(145deg,var(--surface),var(--surface2)) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
  transition:background .45s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}

/* ---- Professional theme switcher ---- */
.theme-switcher-pro {
  position:relative;
  margin-left:.5rem;
  z-index:10050;
}

.theme-switcher-button {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  height:42px;
  padding:0 .9rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  font:600 16px/1 "Inter",sans-serif;
  cursor:pointer;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}

.theme-switcher-button:hover {
  transform:translateY(-2px);
  border-color:var(--accent-line);
  background:var(--accent-soft);
}

.theme-switcher-button > i:first-child {
  color:var(--accent);
}

.theme-chevron {
  font-size:12px;
  transition:transform .25s ease;
}

.theme-switcher-pro.open .theme-chevron {
  transform:rotate(180deg);
}

.theme-switcher-menu {
  position:absolute;
  top:calc(100% + .7rem);
  right:0;
  width:220px;
  padding:.55rem;
  border:1px solid var(--border);
  border-radius:1rem;
  background:var(--surface);
  box-shadow:0 24px 60px rgba(0,0,0,.38);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.98);
  transform-origin:top right;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.theme-switcher-pro.open .theme-switcher-menu {
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.theme-switcher-menu button {
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:.65rem;
  border:0;
  border-radius:.65rem;
  padding:.55rem .65rem;
  background:transparent;
  color:var(--text);
  font:600 14px/1.2 "Inter",sans-serif;
  text-align:left;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}

.theme-switcher-menu button:hover,
.theme-switcher-menu button.active {
  background:var(--accent-soft);
  transform:translateX(3px);
}

.theme-swatch {
  width:20px;
  height:20px;
  flex:0 0 20px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
}

.sw-midnight { background:#5eead4; }
.sw-graphite { background:#d5dbe3; }
.sw-navy { background:#69b8ff; }
.sw-forest { background:#6ee7b7; }
.sw-burgundy { background:#f08aa7; }

/* ---- Premium timeline: vertical spine + alternating cards ---- */
.experience .timeline,
#experience .timeline,
.experience-timeline {
  position:relative;
  max-width:72rem;
  margin:0 auto;
  padding:1rem 0 1rem !important;
}

.experience .timeline::before,
#experience .timeline::before,
.experience-timeline::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--accent),var(--accent-line),transparent);
  box-shadow:0 0 18px var(--accent-soft);
  z-index:0;
}

.experience .timeline-item,
#experience .timeline-item,
.experience-timeline .timeline-item {
  position:relative;
  width:50%;
  margin:0 0 4rem !important;
  padding:0 3.5rem !important;
  background:transparent !important;
  border:0 !important;
}

.experience .timeline-item:nth-child(odd),
#experience .timeline-item:nth-child(odd),
.experience-timeline .timeline-item:nth-child(odd) {
  margin-left:0 !important;
  text-align:right;
}

.experience .timeline-item:nth-child(even),
#experience .timeline-item:nth-child(even),
.experience-timeline .timeline-item:nth-child(even) {
  margin-left:50% !important;
  text-align:left;
}

.experience .timeline-item::before,
#experience .timeline-item::before,
.experience-timeline .timeline-item::before {
  content:"";
  position:absolute;
  top:1.4rem;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--bg);
  border:3px solid var(--accent);
  box-shadow:0 0 0 7px var(--accent-soft), 0 0 25px var(--accent-soft);
  z-index:3;
}

.experience .timeline-item:nth-child(odd)::before,
#experience .timeline-item:nth-child(odd)::before,
.experience-timeline .timeline-item:nth-child(odd)::before {
  right:-8px;
}

.experience .timeline-item:nth-child(even)::before,
#experience .timeline-item:nth-child(even)::before,
.experience-timeline .timeline-item:nth-child(even)::before {
  left:-8px;
}

.experience .timeline-content,
#experience .timeline-content {
  position:relative;
  padding:1.75rem 2rem !important;
  border-radius:1.25rem !important;
  overflow:hidden;
}

.experience .timeline-content::after,
#experience .timeline-content::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 30%,var(--accent-soft),transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s ease;
  pointer-events:none;
}

.experience .timeline-content:hover::after,
#experience .timeline-content:hover::after {
  transform:translateX(120%);
}

.experience .timeline-date,
#experience .timeline-date {
  position:relative !important;
  display:block;
  width:auto !important;
  margin:0 0 .55rem !important;
  color:var(--accent) !important;
  font:700 13px/1.45 "Inter",sans-serif !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.experience .timeline-item:nth-child(odd) .timeline-date,
#experience .timeline-item:nth-child(odd) .timeline-date {
  text-align:right;
}

.experience .timeline-item:nth-child(even) .timeline-date,
#experience .timeline-item:nth-child(even) .timeline-date {
  text-align:left;
}

/* ---- Scroll reveal ---- */
section,
.section-heading,
.section-header,
.project-card,
.service-card,
.skill-group,
.timeline-item,
.rate-card,
.contact-card {
  opacity:0;
  transform:translateY(28px);
}

section.is-visible,
.section-heading.is-visible,
.section-header.is-visible,
.project-card.is-visible,
.service-card.is-visible,
.skill-group.is-visible,
.timeline-item.is-visible,
.rate-card.is-visible,
.contact-card.is-visible {
  opacity:1;
  transform:none;
  transition:
    opacity .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),
    transform .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms);
}

/* ---- Cursor ---- */
.cursor-dot,
.cursor-ring,
.cursor-glow {
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  z-index:100000;
  border-radius:50%;
  transform:translate3d(-50%,-50%,0);
}

.cursor-dot {
  width:7px;
  height:7px;
  background:var(--accent);
  box-shadow:0 0 14px var(--accent);
}

.cursor-ring {
  width:34px;
  height:34px;
  border:1px solid var(--accent-line);
  background:transparent;
  transition:width .25s ease, height .25s ease, border-color .25s ease, background .25s ease;
}

.cursor-glow {
  width:180px;
  height:180px;
  background:radial-gradient(circle,var(--accent-soft),transparent 68%);
  filter:blur(2px);
  opacity:.7;
}

body.cursor-hover .cursor-ring {
  width:54px;
  height:54px;
  border-color:var(--accent);
  background:var(--accent-soft);
}

/* Hide custom cursor on touch devices */
@media (pointer:coarse) {
  .cursor-dot,.cursor-ring,.cursor-glow { display:none !important; }
}

/* ---- Card motion ---- */
.project-card:hover,
.service-card:hover,
.skill-group:hover,
.rate-card:hover,
.contact-card:hover,
.timeline-content:hover {
  transform:translateY(-8px) !important;
  box-shadow:0 24px 55px rgba(0,0,0,.25), 0 0 0 1px var(--accent-soft);
}

/* ---- Mobile timeline ---- */
@media (max-width:48rem) {
  .theme-switcher-button span {
    display:none;
  }

  .theme-switcher-menu {
    right:0;
    width:205px;
  }

  .experience .timeline::before,
  #experience .timeline::before,
  .experience-timeline::before {
    left:10px;
    transform:none;
  }

  .experience .timeline-item,
  #experience .timeline-item,
  .experience-timeline .timeline-item,
  .experience .timeline-item:nth-child(even),
  #experience .timeline-item:nth-child(even),
  .experience-timeline .timeline-item:nth-child(even),
  .experience .timeline-item:nth-child(odd),
  #experience .timeline-item:nth-child(odd),
  .experience-timeline .timeline-item:nth-child(odd) {
    width:100%;
    margin-left:0 !important;
    padding:0 0 0 2.25rem !important;
    text-align:left !important;
  }

  .experience .timeline-item::before,
  #experience .timeline-item::before,
  .experience-timeline .timeline-item::before,
  .experience .timeline-item:nth-child(odd)::before,
  #experience .timeline-item:nth-child(odd)::before,
  .experience-timeline .timeline-item:nth-child(odd)::before {
    left:2px;
    right:auto;
    top:1.35rem;
  }

  .experience .timeline-date,
  #experience .timeline-date,
  .experience .timeline-item:nth-child(odd) .timeline-date,
  #experience .timeline-item:nth-child(odd) .timeline-date {
    text-align:left !important;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ---- SERVICE BRAND LOGOS ---- */
.service-card .service-icon.service-icon-brand {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent) !important;
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(94,234,212,.22);
  font-size: 30px !important;
  margin: 52px 0 30px;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.service-card .service-icon.service-icon-brand i {
  font-size: 30px;
  line-height: 1;
}

.service-card .service-stack-icons {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--accent) !important;
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(94,234,212,.22);
  margin: 52px 0 30px;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.service-card .service-stack-icons i {
  font-size: 20px;
  line-height: 1;
}

.service-card .service-stack-icons i:first-child {
  font-size: 22px;
}

.service-card:hover .service-icon.service-icon-brand,
.service-card:hover .service-stack-icons {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 12px 30px rgba(0,0,0,.18), 0 0 24px var(--accent-soft);
}

@media (max-width: 48rem) {
  .service-card .service-icon.service-icon-brand,
  .service-card .service-stack-icons {
    margin-top: 45px;
  }
}

/* =========================================================
   FINAL CLEANUP PASS — typography, navbar, themes, timeline,
   service logos and responsive fixes
   ========================================================= */
:root{
  --heading-font:"Playfair Display", Georgia, serif;
  --body-font:"Inter", Arial, sans-serif;
  --bg:#070a10;
  --section-bg:#0b1019;
  --section-alt:#0e1520;
  --surface:#121a26;
  --surface2:#172131;
  --text:#f5f7fb;
  --muted:#a8b3c2;
  --border:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.10);
  --accent:#5eead4;
  --accent-soft:rgba(94,234,212,.12);
  --accent-line:rgba(94,234,212,.30);
}

html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  background:
    radial-gradient(circle at 84% 0%,var(--accent-soft),transparent 30rem),
    linear-gradient(180deg,var(--bg) 0%,var(--section-bg) 46%,var(--bg) 100%) !important;
  color:var(--text) !important;
  font-family:var(--body-font) !important;
  font-size:16px !important;
  line-height:1.75 !important;
}

/* Consistent typography */
h1,h2,h3,h4,h5,h6,
.hero h1,.section-heading h2,.about h2,.projects-head h2,
.pricing h2,.cta-section h2,.contact h2,.timeline-content h3,
.project-info h3,.service-card h3,.skill-group h3,.education-card h2{
  font-family:var(--heading-font) !important;
  color:var(--text) !important;
}
p,li,label,input,textarea,select,button,a{font-family:var(--body-font)}
p{font-size:1rem}
.hero-text,.about-text,.contact-copy{font-size:1rem !important}

/* Theme-aware page hierarchy */
.nav.scrolled{
  background:color-mix(in srgb,var(--bg) 88%,transparent) !important;
  border-color:var(--border) !important;
}
.section,
.hero,
.about,.skills,.experience,.projects,.services,.pricing,.education,.contact{
  background-color:transparent !important;
  color:var(--text) !important;
}
.ticker{background:var(--section-alt) !important;border-color:var(--border) !important}
.skill-group,.project-card,.service-card,.contact-form,.timeline-content,.mini-card{
  background:linear-gradient(145deg,var(--surface),var(--surface2)) !important;
  border-color:var(--border) !important;
}
.project-info{background:transparent !important}
.cta-section{
  background:var(--accent) !important;
  color:var(--bg) !important;
}
.cta-section h2{color:var(--bg) !important}
.cta-section em{color:color-mix(in srgb,var(--bg) 78%,black) !important}
.cta-section .eyebrow{color:color-mix(in srgb,var(--bg) 78%,black) !important}

/* Navbar */
.nav{padding-inline:clamp(18px,5vw,76px);gap:20px}
.brand{flex:0 0 auto}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.7vw,28px)}
.nav-links>a{font-size:13px !important}
.nav-whatsapp{
  position:static !important;
  margin:0 !important;
  flex:0 0 auto;
  min-height:40px;
  padding:.58rem .82rem !important;
  font-size:13px !important;
  border:1px solid rgba(37,211,102,.32) !important;
  background:rgba(37,211,102,.08) !important;
  color:#25d366 !important;
}
.nav-whatsapp i{font-size:16px !important}
.theme-switcher-pro{position:relative !important;z-index:1000;margin:0 !important;flex:0 0 auto}
.theme-switcher-button{
  min-height:40px !important;
  padding:.58rem .82rem !important;
  border:1px solid var(--border) !important;
  border-radius:999px !important;
  background:var(--surface) !important;
  color:var(--text) !important;
  font-size:13px !important;
}
.theme-switcher-button:hover{border-color:var(--accent-line) !important;background:var(--accent-soft) !important}
.theme-switcher-menu{
  top:calc(100% + 10px) !important;
  bottom:auto !important;
  right:0 !important;
  width:210px !important;
  padding:8px !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  background:var(--surface) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.42) !important;
}
.theme-switcher-menu button{
  min-height:40px;
  padding:9px 10px !important;
  border-radius:9px !important;
  color:var(--text) !important;
  font-size:13px !important;
}
.theme-switcher-menu button:hover,.theme-switcher-menu button.active{background:var(--accent-soft) !important}

/* Service cards — actual technology logos */
.services-grid{gap:14px !important}
.service-card{
  min-height:405px !important;
  padding:28px !important;
  overflow:hidden;
}
.service-card>span{font-size:12px !important;color:var(--muted) !important}
.service-card .service-icon.service-icon-brand,
.service-card .service-stack-icons{
  width:60px !important;
  height:60px !important;
  margin:48px 0 28px !important;
  border:1px solid var(--accent-line) !important;
  border-radius:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.015) !important;
  color:var(--accent) !important;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease !important;
}
.service-card .service-icon-brand i{font-size:30px !important}
.service-card .service-stack-icons{gap:7px !important}
.service-card .service-stack-icons i{font-size:20px !important}
.service-card .service-stack-icons i:first-child{font-size:23px !important}
.service-card:hover .service-icon-brand,
.service-card:hover .service-stack-icons{
  transform:translateY(-4px) !important;
  border-color:var(--accent) !important;
  background:var(--accent-soft) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.22),0 0 25px var(--accent-soft) !important;
}
.service-card h3{font-size:clamp(26px,2.1vw,34px) !important;line-height:1.08 !important;margin-bottom:0 !important}
.service-card p{font-size:1rem !important;line-height:1.75 !important;color:var(--muted) !important}
.service-card a{font-size:14px !important}

/* Alternating timeline on desktop */
.experience .timeline,#experience .timeline{
  position:relative !important;
  max-width:1120px !important;
  margin:70px auto 0 !important;
  padding:0 !important;
  border:0 !important;
}
.experience .timeline::before,#experience .timeline::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  left:50% !important;
  width:2px !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(to bottom,transparent,var(--accent-line) 5%,var(--accent) 50%,var(--accent-line) 95%,transparent) !important;
  border-radius:999px !important;
}
.experience .timeline-item,#experience .timeline-item{
  position:relative !important;
  display:block !important;
  width:50% !important;
  margin:0 !important;
  padding:0 3.5rem 4rem 0 !important;
  background:transparent !important;
  border:0 !important;
  clear:both;
}
.experience .timeline-item:nth-child(even),#experience .timeline-item:nth-child(even){
  margin-left:50% !important;
  padding:0 0 4rem 3.5rem !important;
}
.experience .timeline-item:last-child,#experience .timeline-item:last-child{padding-bottom:0 !important}
.experience .timeline-content,#experience .timeline-content{
  max-width:none !important;
  padding:1.75rem 2rem !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,var(--surface),var(--surface2)) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.16) !important;
}
.experience .timeline-item::before,#experience .timeline-item::before{
  content:"" !important;
  position:absolute !important;
  left:auto !important;
  right:-7px !important;
  top:1.45rem !important;
  width:12px !important;
  height:12px !important;
  border:2px solid var(--accent) !important;
  border-radius:50% !important;
  background:var(--bg) !important;
  box-shadow:0 0 0 6px var(--accent-soft),0 0 20px var(--accent-soft) !important;
  z-index:3 !important;
}
.experience .timeline-item:nth-child(even)::before,#experience .timeline-item:nth-child(even)::before{
  left:-7px !important;
  right:auto !important;
}
.experience .timeline-date,#experience .timeline-date{
  position:absolute !important;
  top:1.55rem !important;
  right:calc(-1 * (50% - 2rem)) !important;
  width:calc(100% - 2rem) !important;
  color:var(--muted) !important;
  font-size:12px !important;
  line-height:1.4 !important;
  text-align:left !important;
  z-index:1 !important;
}
.experience .timeline-item:nth-child(even) .timeline-date,#experience .timeline-item:nth-child(even) .timeline-date{
  left:calc(-1 * (50% - 2rem));
  right:auto !important;
  text-align:right !important;
}
.experience .timeline-content h3,#experience .timeline-content h3{font-size:1.8rem !important;line-height:1.2 !important}
.experience .timeline-content p:not(.company),#experience .timeline-content p:not(.company){font-size:1rem !important;line-height:1.75 !important}
.experience .timeline-content .tags,#experience .timeline-content .tags{gap:7px !important}
.experience .timeline-content .tech-badge,#experience .timeline-content .tech-badge{font-size:13px !important}

/* Cursor must never block clicks */
.cursor-dot,.cursor-ring,.cursor-glow{pointer-events:none !important}
.cursor-glow{z-index:1 !important}
.page-noise{z-index:99 !important;pointer-events:none !important}

/* Footer */
.footer{background:var(--bg) !important;border-color:var(--border) !important;gap:20px}
.footer-links{display:flex;flex-wrap:wrap;gap:18px !important;align-items:center}
.footer-links a{font-size:13px !important;color:var(--muted)}
.footer-links i{margin-right:4px}
.socials a{font-size:14px !important}

/* Contact details */
.contact-details strong{font-size:16px !important}
.contact-details small{font-size:11px !important}

/* Prevent reveal styles from hiding content if JS is blocked */
.no-js .reveal{opacity:1;transform:none}

/* Mobile */
@media (max-width:1050px){
  .nav-links{gap:14px}
  .nav-links>a{font-size:12px !important}
  .theme-switcher-button,.nav-whatsapp{min-height:38px !important}
  .service-card{min-height:390px !important}
}

@media (max-width:760px){
  .nav{height:70px !important;min-height:70px !important}
  .brand-copy strong{font-size:12px}
  .nav-links{
    top:70px !important;
    left:14px !important;
    right:14px !important;
    padding:16px !important;
    gap:4px !important;
    background:var(--surface) !important;
    border:1px solid var(--border) !important;
    box-shadow:0 25px 70px rgba(0,0,0,.4);
  }
  .nav-links>a{padding:12px 10px !important;font-size:14px !important}
  .nav-whatsapp,.theme-switcher-pro{width:100%;margin-top:4px !important}
  .nav-whatsapp{justify-content:center !important}
  .theme-switcher-button{width:100% !important;justify-content:center !important}
  .theme-switcher-button span{display:inline !important}
  .theme-switcher-menu{position:relative !important;top:auto !important;right:auto !important;width:100% !important;margin-top:8px !important}

  .section{padding:100px 20px !important}
  .hero{padding-top:115px !important;min-height:auto !important}
  .hero h1{font-size:clamp(42px,12vw,62px) !important}
  .hero-text{font-size:16px !important}
  .hero-meta{gap:18px !important;margin-top:42px !important}
  .hero-meta span{font-size:11px !important}
  .about-content,.contact-grid{gap:45px !important}
  .about-cards{grid-template-columns:1fr 1fr !important}
  .services-grid{grid-template-columns:1fr !important;margin-left:0 !important}
  .service-card{min-height:360px !important}

  /* Mobile timeline */
  .experience .timeline,#experience .timeline{
    margin:55px 0 0 !important;
    padding-left:28px !important;
  }
  .experience .timeline::before,#experience .timeline::before{
    left:8px !important;
    transform:none !important;
  }
  .experience .timeline-item,#experience .timeline-item,
  .experience .timeline-item:nth-child(even),#experience .timeline-item:nth-child(even){
    width:100% !important;
    margin:0 !important;
    padding:0 0 28px !important;
  }
  .experience .timeline-item::before,#experience .timeline-item::before,
  .experience .timeline-item:nth-child(even)::before,#experience .timeline-item:nth-child(even)::before{
    left:2px !important;
    right:auto !important;
    top:1.3rem !important;
  }
  .experience .timeline-date,#experience .timeline-date,
  .experience .timeline-item:nth-child(even) .timeline-date,#experience .timeline-item:nth-child(even) .timeline-date{
    position:static !important;
    width:auto !important;
    margin:0 0 10px !important;
    text-align:left !important;
    font-size:11px !important;
  }
  .experience .timeline-content,#experience .timeline-content{padding:1.35rem !important;border-radius:15px !important}
  .experience .timeline-content h3,#experience .timeline-content h3{font-size:1.5rem !important}
  .experience .timeline-content p:not(.company),#experience .timeline-content p:not(.company){font-size:15px !important}

  .footer{display:block !important;padding:28px 20px !important}
  .footer-links{margin-top:18px !important;justify-content:flex-start !important}
  .footer-links a,.footer-links span{font-size:12px !important}
}

@media (max-width:480px){
  .about-cards{grid-template-columns:1fr !important}
  .service-card{padding:24px !important}
  .service-card h3{font-size:29px !important}
  .service-card p{font-size:15px !important}
  .hero-meta{display:grid !important;grid-template-columns:1fr 1fr !important}
  .code-card pre{font-size:9px !important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important}
}


/* =========================================================
   FINAL CLEAN PATCH — CONTENT SAFETY + CURSOR + TYPOGRAPHY
   ========================================================= */
:root{
  --heading-font:"Playfair Display", Georgia, serif;
  --body-font:"Inter", Arial, sans-serif;
}

html,body{font-family:var(--body-font) !important;}

h1,h2,h3,h4,h5,h6,
.hero h1,.section-heading h2,.about h2,.projects-head h2,
.pricing h2,.cta-section h2,.contact h2,.timeline-content h3,
.education-card h2,.service-card h3,.mini-card h3,.skill-group h3{
  font-family:var(--heading-font) !important;
}

/* Never leave the entire page blank if JavaScript is delayed/blocked. */
.reveal{
  opacity:1 !important;
  visibility:visible !important;
}

/* Custom cursor: hide native pointer only on precise-pointer devices. */
@media (pointer:fine){
  html.custom-cursor-active,
  html.custom-cursor-active body,
  html.custom-cursor-active a,
  html.custom-cursor-active button,
  html.custom-cursor-active input,
  html.custom-cursor-active textarea,
  html.custom-cursor-active select{
    cursor:none !important;
  }
}

.cursor-dot,.cursor-ring,.cursor-glow{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  pointer-events:none !important;
  z-index:100000 !important;
  opacity:0;
  transition:opacity .18s ease;
}

.cursor-dot{
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  background:var(--accent) !important;
  box-shadow:0 0 14px var(--accent) !important;
  transform:translate3d(-50%,-50%,0);
}
.cursor-ring{
  width:34px !important;
  height:34px !important;
  border:1px solid var(--accent-line) !important;
  border-radius:50% !important;
  background:transparent !important;
  transform:translate3d(-50%,-50%,0);
  transition:width .25s ease,height .25s ease,border-color .25s ease,background .25s ease,opacity .18s ease;
}
.cursor-glow{
  width:180px !important;
  height:180px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,var(--accent-soft),transparent 68%) !important;
  filter:blur(2px);
  transform:translate3d(-50%,-50%,0);
}
html.custom-cursor-active .cursor-dot,
html.custom-cursor-active .cursor-ring,
html.custom-cursor-active .cursor-glow{opacity:1;}
body.cursor-hover .cursor-ring{
  width:54px !important;
  height:54px !important;
  border-color:var(--accent) !important;
  background:var(--accent-soft) !important;
}

/* Keep the actual service technology logos crisp and aligned. */
.service-icon{width:60px;height:60px;border:1px solid var(--accent-line);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:var(--accent-soft);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;}
.service-icon-brand i{font-size:30px !important;}
.service-stack-icons{gap:6px;}
.service-stack-icons i{font-size:21px !important;}
.service-stack-icons i:first-child{font-size:24px !important;}
.service-card:hover .service-icon{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 12px 30px var(--accent-soft);}

@media (pointer:coarse){
  .cursor-dot,.cursor-ring,.cursor-glow{display:none !important;}
}

/* =========================================================
   FINAL VISIBILITY FIX
   Content must NEVER depend on JavaScript to become visible.
   ========================================================= */
html, body, main, section, .section,
.hero, .ticker, .about, .skills, .experience, .projects,
.services, .pricing, .education, .cta-section, .contact, .footer,
.section-heading, .section-label, .projects-head,
.about-content, .about-cards, .skills-grid, .skill-group,
.timeline, .timeline-item, .timeline-content,
.project-grid, .project-card, .services-grid, .service-card,
.pricing-box, .education-card, .cta-content, .contact-grid,
.contact-form, .reveal {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep reveal content visible by default; GSAP is free to animate transforms. */
.js-reveal-ready .reveal,
.js-reveal-ready .reveal.visible,
.js-reveal-ready .reveal.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* These are decorative cursor elements only; they never affect layout/content. */
.cursor-dot,.cursor-ring,.cursor-glow {
  pointer-events:none !important;
}


/* =========================================================
   PREMIUM FINAL CTA + CONTACT REDESIGN
   ========================================================= */
.cta-premium{
  min-height:78vh !important;
  padding:clamp(90px,10vw,150px) 7vw !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 30%),
    linear-gradient(135deg,var(--surface2),var(--section-bg) 55%,var(--bg)) !important;
  color:var(--text) !important;
  border-top:1px solid var(--accent-line);
  border-bottom:1px solid var(--border);
}
.cta-premium::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid var(--border);
  pointer-events:none;
  opacity:.7;
}
.cta-premium::after{
  content:"";
  position:absolute;
  width:52vw;
  height:52vw;
  max-width:760px;
  max-height:760px;
  border-radius:50%;
  border:1px solid var(--accent-line);
  opacity:.22;
  transform:scale(.72);
  pointer-events:none;
}
.cta-grid-lines{
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(circle at center,black 10%,transparent 72%);
  pointer-events:none;
}
.cta-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px)}
.cta-orb-one{width:360px;height:360px;left:-170px;top:15%;background:radial-gradient(circle,var(--accent-soft),transparent 68%)}
.cta-orb-two{width:300px;height:300px;right:-120px;bottom:-70px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 10%,transparent),transparent 68%)}
.cta-index,.cta-side-note{position:absolute;z-index:3;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.cta-index{left:7vw;top:45px}.cta-index span{color:var(--accent)}
.cta-side-note{right:7vw;bottom:45px;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}.cta-side-note strong{color:var(--text);font-size:9px;letter-spacing:.13em}
.cta-content{position:relative;z-index:4;max-width:950px}
.cta-premium .eyebrow{color:var(--accent) !important;margin-bottom:22px}
.cta-premium h2{font-size:clamp(52px,7.2vw,104px) !important;line-height:.94 !important;letter-spacing:-.06em !important;color:var(--text) !important;margin:0}
.cta-premium h2 em{color:var(--accent) !important;font-style:normal}
.cta-subcopy{max-width:590px;margin:28px auto 0;color:var(--muted);font-size:1rem;line-height:1.75}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:36px;flex-wrap:wrap}
.cta-premium .btn-light{margin-top:0;background:var(--accent);color:var(--bg);border:1px solid var(--accent);box-shadow:0 16px 45px var(--accent-soft)}
.cta-premium .btn-light:hover{background:transparent;color:var(--accent)}
.cta-whatsapp{height:52px;padding:0 21px;border:1px solid var(--border);border-radius:999px;display:inline-flex;align-items:center;gap:9px;color:var(--text);font-size:.9rem;font-weight:600;transition:.3s ease}
.cta-whatsapp i{font-size:18px;color:var(--accent)}
.cta-whatsapp:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-3px)}

.contact-premium{position:relative;padding-top:clamp(110px,10vw,155px) !important;padding-bottom:clamp(80px,8vw,120px) !important;background:var(--bg) !important}
.contact-intro{margin-left:7%;max-width:780px;margin-bottom:60px}
.contact-intro .eyebrow{margin-bottom:18px}
.contact-intro h2{font-size:clamp(52px,6vw,86px) !important;line-height:.96 !important;margin:0;letter-spacing:-.06em !important}
.contact-intro h2 em{color:var(--accent);font-style:normal}
.contact-grid-premium{margin-left:7% !important;margin-right:7%;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr) !important;gap:clamp(50px,8vw,120px) !important;align-items:start}
.contact-info-panel{padding-top:8px}
.contact-copy{max-width:580px !important;font-size:1rem !important;line-height:1.8 !important;margin:0 0 38px !important}
.contact-details-premium{gap:0 !important;margin-top:0 !important;border-top:1px solid var(--border)}
.contact-detail{display:grid !important;grid-template-columns:48px 1fr 22px;align-items:center;gap:15px;border-bottom:1px solid var(--border);padding:18px 0;transition:.3s ease}
.contact-detail:hover{padding-left:8px;background:linear-gradient(90deg,var(--accent-soft),transparent 75%)}
.contact-detail-icon{width:42px;height:42px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;color:var(--accent);background:var(--surface)}
.contact-detail span:nth-child(2){display:flex;flex-direction:column;gap:5px;min-width:0}
.contact-detail small{font-size:11px !important;letter-spacing:.16em;color:var(--muted)}
.contact-detail strong{font-size:1rem !important;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.contact-arrow{font-size:11px;color:var(--muted);transition:.25s ease}
.contact-detail:hover .contact-arrow{color:var(--accent);transform:translate(2px,-2px)}
.socials-premium{gap:10px !important;margin-top:25px !important}
.socials-premium a{display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:10px;border:1px solid var(--border) !important;border-radius:999px;padding:11px 15px !important;min-width:145px;font-size:.9rem !important;color:var(--text) !important;background:var(--surface);transition:.3s ease}
.socials-premium a:hover{border-color:var(--accent) !important;background:var(--accent-soft);transform:translateY(-3px)}
.socials-premium i{color:var(--accent);font-size:16px}.socials-premium b{font-weight:500;color:var(--muted)}
.contact-form-premium{background:linear-gradient(145deg,var(--surface2),var(--surface)) !important;border:1px solid var(--border) !important;border-radius:24px !important;padding:clamp(25px,3vw,38px) !important;box-shadow:0 30px 80px rgba(0,0,0,.16);position:relative;overflow:hidden}
.contact-form-premium::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.form-topline{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px;letter-spacing:.16em;margin-bottom:30px;padding-bottom:15px;border-bottom:1px solid var(--border)}
.contact-form-premium label{display:block !important;margin-bottom:19px !important;color:var(--muted);font-size:12px !important;letter-spacing:.04em}
.contact-form-premium label>span{display:block;margin-bottom:8px;color:var(--text);font-size:13px;font-weight:600}
.contact-form-premium input,.contact-form-premium textarea,.contact-form-premium select{width:100%;background:color-mix(in srgb,var(--bg) 62%,transparent) !important;border:1px solid var(--border) !important;border-radius:12px !important;color:var(--text) !important;padding:14px 15px !important;font:inherit !important;font-size:1rem !important;outline:none;transition:.25s ease}
.contact-form-premium input,.contact-form-premium select{height:50px}
.contact-form-premium textarea{min-height:135px;resize:vertical}
.contact-form-premium input:focus,.contact-form-premium textarea:focus,.contact-form-premium select:focus{border-color:var(--accent) !important;box-shadow:0 0 0 4px var(--accent-soft)}
.contact-form-premium input::placeholder,.contact-form-premium textarea::placeholder{color:var(--muted);opacity:.7}
.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:6px}
.form-bottom .btn{margin-top:0;white-space:nowrap}
.form-bottom .form-note{margin:0;font-size:13px !important;line-height:1.5;color:var(--muted)}

.footer{position:relative;border-top:1px solid var(--border) !important;background:var(--section-bg) !important;padding:28px 7% !important;display:flex;align-items:center;justify-content:space-between;gap:30px}
.footer-brand{font-family:"Playfair Display",serif !important;font-size:1rem !important;letter-spacing:.04em;color:var(--text) !important}
.footer p{font-size:13px !important;color:var(--muted);margin:5px 0 0}
.footer-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.footer-links a,.footer-links span{font-size:13px !important;color:var(--muted);transition:.25s ease}
.footer-links a:hover{color:var(--accent)}
.footer-links i{margin-right:6px;color:var(--accent)}

@media(max-width:1050px){
  .contact-grid-premium{grid-template-columns:1fr !important;}
  .contact-info-panel{max-width:760px}
}
@media(max-width:760px){
  .cta-premium{min-height:75vh !important;padding:90px 22px !important}
  .cta-premium::before{inset:12px}
  .cta-index{left:22px;top:30px}.cta-side-note{right:22px;bottom:28px}
  .cta-premium h2{font-size:clamp(44px,13vw,64px) !important}
  .cta-subcopy{font-size:1rem}
  .cta-actions{flex-direction:column;align-items:stretch}.cta-actions .btn,.cta-whatsapp{justify-content:center;width:100%}
  .contact-premium{padding-left:22px !important;padding-right:22px !important}
  .contact-intro{margin-left:0;margin-bottom:45px}
  .contact-intro h2{font-size:clamp(44px,12vw,62px) !important}
  .contact-grid-premium{margin-left:0 !important;margin-right:0 !important;gap:45px !important}
  .contact-detail{grid-template-columns:44px 1fr 18px;gap:11px}
  .socials-premium{flex-wrap:wrap}
  .socials-premium a{flex:1;min-width:135px}
  .contact-form-premium{padding:22px !important;border-radius:18px !important}
  .form-bottom{align-items:stretch;flex-direction:column}.form-bottom .btn{width:100%;justify-content:center}
  .footer{display:flex !important;flex-direction:column;align-items:flex-start !important;padding:25px 22px !important}
  .footer-links{justify-content:flex-start;gap:12px 18px}
}


/* =========================================================
   RESPONSIVE HEADER FINAL FIX
   The header collapses before it can become cramped or overlap.
   ========================================================= */
.nav{
  width:100%;
  box-sizing:border-box;
}

.menu-toggle{
  display:none;
  margin-left:auto;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  flex:0 0 auto;
}
.menu-toggle span{
  display:block;
  width:20px;
  height:1.5px;
  border-radius:999px;
  background:var(--text);
  transition:transform .25s ease,opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

@media (max-width: 1100px){
  .nav{
    min-height:70px !important;
    padding-inline:clamp(16px,4vw,32px) !important;
    gap:12px !important;
  }
  .nav .menu-toggle{display:flex !important}
  .nav-links{
    position:absolute !important;
    top:calc(100% + 10px) !important;
    left:16px !important;
    right:16px !important;
    width:auto !important;
    margin:0 !important;
    padding:12px !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:3px !important;
    background:color-mix(in srgb,var(--surface) 96%,transparent) !important;
    border:1px solid var(--border) !important;
    border-radius:18px !important;
    box-shadow:0 24px 70px rgba(0,0,0,.38) !important;
    backdrop-filter:blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(150%) !important;
    z-index:9998 !important;
  }
  .nav-links.open{display:flex !important}
  .nav-links>a{
    width:100% !important;
    box-sizing:border-box !important;
    padding:13px 14px !important;
    font-size:14px !important;
    border-radius:11px !important;
  }
  .nav-links>a::after{display:none !important}
  .nav-links>a:hover{background:var(--accent-soft) !important;transform:none !important}
  .nav-cta{text-align:left !important}
  .nav-whatsapp{
    width:100% !important;
    min-height:44px !important;
    margin:4px 0 0 !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }
  .nav-whatsapp span{display:inline !important}
  .theme-switcher-pro{width:100% !important;margin:4px 0 0 !important}
  .theme-switcher-button{
    width:100% !important;
    min-height:44px !important;
    justify-content:center !important;
  }
  .theme-switcher-menu{
    position:static !important;
    width:100% !important;
    box-sizing:border-box !important;
    margin-top:7px !important;
  }
}

@media (max-width: 600px){
  .nav{
    min-height:64px !important;
    height:64px !important;
    padding-inline:14px !important;
  }
  .brand{max-width:170px;overflow:hidden}
  .brand-mark{flex:0 0 auto}
  .brand-copy strong{font-size:11px !important;letter-spacing:.12em !important}
  .brand-copy small{font-size:7px !important}
  .menu-toggle{width:42px;height:42px;border-radius:11px}
  .nav-links{top:calc(100% + 8px) !important;left:10px !important;right:10px !important}
}

@media (max-width:360px){
  .brand{max-width:145px}
  .brand-copy{display:none}
  .brand-mark{width:34px;height:34px}
  .nav-links{left:8px !important;right:8px !important}
}