/* Khalid Puerto personal landing page — static HTML/CSS/JS */
:root{--bg:#0b1020;--bg2:#0e1528;--card:#111a2e;--line:rgba(218,228,255,.12);--text:#f5f7fc;--muted:#9aa7bd;--gold:#f3bd62;--blue:#91a9ff;--font:'DM Sans',sans-serif;--display:'Manrope',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.site-shell{width:min(1180px,calc(100% - 48px));margin:auto}.header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5}.brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-size:17px;letter-spacing:-.5px}.brand b{font-weight:800}.brand-mark{width:38px;height:38px;border:1px solid rgba(243,189,98,.55);color:var(--gold);display:grid;place-items:center;border-radius:12px;font-size:12px;font-weight:800;letter-spacing:0}.nav{display:flex;align-items:center;gap:32px;color:#c0c8d8;font-size:13px}.nav a{transition:color .2s}.nav a:hover,.text-link:hover,.card-link:hover{color:var(--gold)}.language-switch{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:8px;padding:7px 10px;cursor:pointer;font-size:11px;font-weight:700}.menu-toggle{display:none;background:transparent;border:0;padding:8px}.menu-toggle span{display:block;width:22px;height:2px;background:white;margin:5px}
.hero{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center;padding:88px 0 78px;min-height:620px}.eyebrow,.section-kicker{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:10px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(243,189,98,.1)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--display);letter-spacing:-2px;line-height:1.14;font-weight:700}h1{font-size:clamp(40px,5.2vw,66px);margin:25px 0 22px}h1 em,h2 em{font-style:normal;color:var(--gold)}.hero-text{max-width:530px;color:#aeb9cc;font-size:16px;line-height:1.9}.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px}.button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;padding:0 18px;font-size:13px;font-weight:700;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.button-primary{background:var(--gold);color:#191817}.button-primary:hover{background:#ffd18a}.button-ghost{border:1px solid var(--line);color:#e4e9f3}.button-ghost span:last-child{color:var(--gold)}.hero-socials{display:flex;gap:24px;margin-top:42px;color:#8794ab;font-size:11px}.hero-socials a span{color:var(--gold);margin-left:4px}.hero-visual{position:relative;min-height:420px;display:grid;place-items:center}.visual-glow{position:absolute;width:290px;height:290px;border-radius:50%;background:rgba(77,104,194,.15);filter:blur(55px)}.orbit{position:absolute;border:1px solid rgba(145,169,255,.15);border-radius:50%;transform:rotate(-24deg)}.orbit-one{width:410px;height:260px}.orbit-two{width:330px;height:400px;transform:rotate(38deg);border-color:rgba(243,189,98,.14)}.portrait-card{position:relative;z-index:1;width:270px;height:330px;border-radius:22px;border:1px solid rgba(255,255,255,.15);background:linear-gradient(145deg,#1a2741,#10182b 65%,#18243a);box-shadow:0 30px 90px rgba(0,0,0,.3);padding:17px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.portrait-card:before{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(243,189,98,.15);border-radius:50%;left:15px;top:55px}.portrait-card:after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(145,169,255,.17);border-radius:50%;left:45px;top:85px}.portrait-top{display:flex;gap:5px;align-items:center;z-index:1}.tiny-dot{width:5px;height:5px;border-radius:50%;background:#71809b}.tiny-dot:first-child{background:var(--gold)}.portrait-label{font-size:7px;letter-spacing:1.3px;color:#7787a5;margin-left:auto}.monogram{z-index:1;align-self:center;font-family:var(--display);font-size:83px;letter-spacing:-9px;font-weight:800;color:#f3f5fb;text-shadow:0 10px 30px #0005}.monogram span{color:var(--gold)}.portrait-caption{z-index:1;display:flex;gap:10px;align-items:center;padding:13px;background:rgba(8,14,27,.55);border:1px solid rgba(255,255,255,.08);border-radius:12px}.caption-line{width:3px;height:32px;background:var(--gold);border-radius:3px}.portrait-caption b,.portrait-caption small{display:block}.portrait-caption b{font-size:12px}.portrait-caption small{color:#9ba9bf;font-size:10px}.float-card{position:absolute;z-index:2;display:flex;gap:11px;align-items:center;padding:12px 14px;background:#121d33;border:1px solid rgba(255,255,255,.12);border-radius:13px;box-shadow:0 15px 35px #0003}.float-teaching{left:-2px;top:85px}.float-code{right:-2px;bottom:70px}.float-icon{display:grid;place-items:center;width:35px;height:35px;background:rgba(243,189,98,.12);color:var(--gold);border-radius:9px;font-size:16px;font-weight:700}.float-card b,.float-card small{display:block;white-space:nowrap}.float-card b{font-size:11px}.float-card small{font-size:9px;color:#91a0b8;margin-top:2px}.visual-note{position:absolute;bottom:4px;font-size:8px;letter-spacing:3px;color:#65748d}
.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:23px 0;gap:20px}.trust-strip>div{display:flex;align-items:center;justify-content:center;gap:13px;color:#c6cede;font-size:12px}.strip-number{color:var(--gold);font-size:10px;letter-spacing:1px}.section{padding:105px 0}.section-kicker span:first-child{color:var(--gold)}.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;margin-top:28px}.about-grid h2,.section-heading h2,.social-section h2,.contact-section h2{font-size:clamp(36px,4.2vw,52px);margin-bottom:0}.about-copy{padding-top:6px;max-width:540px}.about-copy p{color:#b0bbce;font-size:14px;line-height:1.95}.about-copy .muted{font-size:12px;color:#7f8da5}.text-link,.card-link{display:inline-flex;align-items:center;gap:9px;color:var(--gold);font-size:12px;font-weight:700;margin-top:8px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:36px}.section-heading h2{margin-top:22px}.section-heading>p{max-width:320px;color:#9daac0;font-size:13px;line-height:1.8;margin-bottom:5px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service-card{min-height:290px;border:1px solid var(--line);background:linear-gradient(150deg,rgba(255,255,255,.025),rgba(255,255,255,.005));padding:25px;border-radius:15px;display:flex;flex-direction:column;align-items:flex-start;transition:transform .25s,border-color .25s}.service-card:hover{transform:translateY(-5px);border-color:rgba(243,189,98,.38)}.service-card-featured{background:linear-gradient(150deg,rgba(243,189,98,.09),rgba(255,255,255,.015));border-color:rgba(243,189,98,.22)}.service-top{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.service-icon{width:42px;height:42px;display:grid;place-items:center;background:rgba(145,169,255,.1);border-radius:12px;color:var(--blue);font-weight:700;font-size:17px}.service-card-featured .service-icon{color:var(--gold);background:rgba(243,189,98,.12)}.service-index{font-size:10px;color:#64728a}.service-card h3{font-family:var(--display);font-size:17px;letter-spacing:-.4px;margin-bottom:10px}.service-card p{color:#9eabc0;font-size:12px;line-height:1.85;margin-bottom:18px}.service-card .card-link{margin-top:auto;font-size:10px}.work-section{padding-top:55px}.portfolio-panel{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;min-height:285px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#10182a;transition:border-color .2s}.portfolio-panel:hover{border-color:rgba(243,189,98,.45)}.portfolio-art{position:relative;min-height:285px;background:radial-gradient(circle at 30% 40%,rgba(77,104,194,.3),transparent 50%),linear-gradient(145deg,#17233a,#0e1526);display:grid;place-items:center;overflow:hidden}.portfolio-art:before,.portfolio-art:after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(145,169,255,.16);border-radius:50%}.portfolio-art:after{width:330px;height:330px;border-color:rgba(243,189,98,.13)}.art-window{position:relative;z-index:1;width:220px;height:145px;background:#0b1020;border:1px solid rgba(255,255,255,.15);border-radius:10px;box-shadow:0 25px 45px #0005;padding:12px}.art-window>span{display:inline-block;width:5px;height:5px;background:#f3bd62;border-radius:50%;margin-right:4px}.art-window>span:nth-child(2){background:#91a9ff}.art-window>span:nth-child(3){background:#80c9ae}.art-code{margin:28px 0 0 13px;font:12px/1.8 monospace;color:#b7c5dc}.art-code b{color:#f3bd62}.art-code i{color:#8ed3bd;font-style:normal}.art-orb{position:absolute;width:75px;height:75px;border-radius:50%;border:1px solid rgba(243,189,98,.25);right:16%;top:17%}.portfolio-info{padding:42px 48px;align-self:center}.tag{display:inline-block;font-size:9px;letter-spacing:1.8px;color:var(--gold);font-weight:700}.portfolio-info h3{font-family:var(--display);font-size:25px;letter-spacing:-.8px;margin:15px 0 10px}.portfolio-info p{font-size:12px;color:#9eabc0;max-width:380px;line-height:1.8}.portfolio-link{display:inline-flex;gap:12px;align-items:center;margin-top:8px;font-size:12px;font-weight:700}.portfolio-link b{color:var(--gold);font-size:16px}.panel-arrow{position:absolute;right:23px;top:20px;color:var(--gold);font-size:18px}.work-note{font-size:10px;color:#6f7d94;margin:15px 0 0}
.social-section{padding-top:45px}.social-section h2{margin:22px 0 32px}.social-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.social-card{display:flex;align-items:center;gap:14px;padding:17px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.018);transition:background .2s,border-color .2s}.social-card:hover{background:rgba(255,255,255,.045);border-color:rgba(243,189,98,.3)}.social-symbol{width:40px;height:40px;border-radius:12px;background:#18243b;color:var(--gold);display:grid;place-items:center;font-size:18px;font-weight:700}.social-card b,.social-card small{display:block}.social-card b{font-size:12px}.social-card small{font-size:10px;color:#8492a9;margin-top:2px}.social-arrow{margin-left:auto;color:var(--gold)}
.contact-section{position:relative;overflow:hidden;margin:20px 0 50px;padding:54px 48px;border-radius:20px;border:1px solid rgba(243,189,98,.2);background:linear-gradient(120deg,#18233a,#11192b 65%,#171f31)}.contact-orb{position:absolute;width:320px;height:320px;right:-100px;top:-190px;border:1px solid rgba(243,189,98,.16);border-radius:50%;box-shadow:0 0 0 35px rgba(243,189,98,.025),0 0 0 70px rgba(243,189,98,.02)}.contact-grid{position:relative;display:grid;grid-template-columns:1fr .8fr;gap:45px;align-items:center;margin-top:25px}.contact-section h2{font-size:clamp(34px,4vw,48px)}.contact-grid>div:first-child p{font-size:12px;line-height:1.9;color:#9eabc0;max-width:390px;margin-top:20px}.contact-actions{display:grid;gap:10px}.contact-link{display:flex;align-items:center;gap:12px;padding:14px;background:rgba(7,12,24,.32);border:1px solid rgba(255,255,255,.08);border-radius:12px}.contact-icon{width:36px;height:36px;border-radius:10px;background:rgba(243,189,98,.12);color:var(--gold);display:grid;place-items:center;font-size:18px}.contact-link small,.contact-link b{display:block}.contact-link small{font-size:8px;letter-spacing:1.3px;color:#8b9ab1}.contact-link b{font-size:11px;margin-top:3px}.contact-arrow{margin-left:auto;color:var(--gold)}.footer{display:flex;align-items:center;gap:24px;padding:0 0 30px;color:#78869d;font-size:10px}.footer-brand{color:var(--text);font-size:13px}.footer-brand .brand-mark{width:30px;height:30px;border-radius:9px}.back-top{margin-left:auto;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;color:var(--gold);font-size:16px}.footer>small{white-space:nowrap}.floating-whatsapp{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:white;box-shadow:0 8px 28px #0006;z-index:10;transition:transform .2s}.floating-whatsapp:hover{transform:translateY(-3px)}.floating-whatsapp svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body[dir="rtl"]{font-family:var(--font)}body[dir="rtl"] .hero,body[dir="rtl"] .about-grid,body[dir="rtl"] .section-heading,body[dir="rtl"] .contact-grid{direction:rtl}body[dir="rtl"] .hero-socials{direction:rtl}body[dir="rtl"] .float-teaching{left:auto;right:-2px}body[dir="rtl"] .float-code{right:auto;left:-2px}body[dir="rtl"] .portfolio-info{ text-align:right}
@media(max-width:900px){.site-shell{width:min(100% - 36px,700px)}.hero{grid-template-columns:1fr;padding:65px 0 55px;gap:20px}.hero-copy{max-width:650px}.hero-visual{min-height:390px}.trust-strip>div{font-size:10px}.about-grid{gap:30px}.service-grid{grid-template-columns:1fr}.service-card{min-height:230px}.service-top{margin-bottom:18px}.portfolio-panel{grid-template-columns:.8fr 1.2fr}.portfolio-info{padding:30px}.contact-section{padding:42px 30px}.contact-grid{gap:25px}.section{padding:75px 0}.work-section,.social-section{padding-top:35px}}
@media(max-width:620px){.site-shell{width:calc(100% - 34px)}.header{height:72px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:71px;left:0;right:0;padding:18px;background:#10182a;border:1px solid var(--line);border-radius:0 0 14px 14px;flex-direction:column;align-items:stretch;gap:0}.nav.open{display:flex}.nav a{padding:12px 5px;border-bottom:1px solid var(--line)}.language-switch{align-self:flex-start;margin-top:12px}.hero{padding-top:48px}.eyebrow{font-size:8px;letter-spacing:1.4px}h1{font-size:clamp(38px,10vw,52px);letter-spacing:-1.8px}.hero-text{font-size:14px}.hero-socials{gap:17px;flex-wrap:wrap;margin-top:28px}.hero-visual{min-height:365px}.portrait-card{width:235px;height:295px}.monogram{font-size:72px}.orbit-one{width:320px;height:220px}.orbit-two{width:270px;height:330px}.float-teaching{left:-3px;top:55px}.float-code{right:-3px;bottom:58px}.float-card{padding:9px}.float-icon{width:30px;height:30px}.float-card b{font-size:10px}.float-card small{font-size:8px}.visual-note{font-size:7px}.trust-strip{grid-template-columns:1fr;gap:14px;padding:20px 0}.trust-strip>div{justify-content:flex-start}.about-grid{grid-template-columns:1fr;gap:20px}.section{padding:65px 0}.section-heading{display:block}.section-heading>p{margin-top:18px}.section-heading h2,.social-section h2{font-size:38px}.service-card{padding:22px}.portfolio-panel{grid-template-columns:1fr}.portfolio-art{min-height:210px}.portfolio-info{padding:28px 23px}.portfolio-info h3{font-size:22px}.social-grid{grid-template-columns:1fr}.contact-section{padding:35px 22px;margin-bottom:38px}.contact-grid{grid-template-columns:1fr;gap:20px}.contact-section h2{font-size:36px}.contact-link b{font-size:10px}.footer{flex-wrap:wrap;gap:13px}.footer>span{order:3;width:100%}.footer .back-top{margin-left:auto}.floating-whatsapp{right:15px;bottom:15px;width:48px;height:48px}}