:root { --bg:#07111f; --card:#101b2d; --accent:#8b5cf6; --accent-strong:#a78bfa; --text:#e8eef8; --muted:#91a4bf; }
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(135deg,var(--bg),#13233a);color:var(--text);min-height:100vh}
a{color:inherit}
.page-shell{max-width:1100px;margin:0 auto;padding:24px 20px 56px}
.site-header{padding:16px 0 32px;width:100%}
.site-header__toprow{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px;flex-wrap:nowrap}
.brand{font-size:1.2rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;margin:0;flex-shrink:0;white-space:nowrap}
.site-header__subtitle{margin:0;color:var(--muted)}
.site-nav{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;margin-left:auto}
.site-nav a{text-decoration:none;color:var(--muted)}
.site-nav a:hover{color:var(--text)}
.mobile-nav{display:none;position:relative;margin-left:8px;flex-shrink:0}
.mobile-nav__toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;width:44px;height:44px;border:1px solid rgba(255,255,255,0.16);border-radius:10px;background:rgba(255,255,255,0.04);padding:0;cursor:pointer;flex-shrink:0;margin-left:auto;order:2}
.mobile-nav__toggle span{display:block;width:20px;height:2px;border-radius:999px;background:var(--text);transition:transform 0.25s ease, opacity 0.25s ease}
.mobile-nav__toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-nav__toggle.is-open span:nth-child(2){opacity:0}
.mobile-nav__toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-nav__menu{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:16px;background:rgba(7,17,31,0.98);border:1px solid rgba(255,255,255,0.16);box-shadow:0 16px 36px rgba(0,0,0,0.35);position:absolute;top:calc(100% + 10px);right:0;left:auto;min-width:190px;z-index:999;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease}
.mobile-nav__menu a{display:block;padding:10px 4px;text-decoration:none;color:#ffffff !important;font-weight:700;font-size:1rem;white-space:normal;border-bottom:1px solid rgba(255,255,255,0.14)}
.mobile-nav__menu a:last-child{border-bottom:none}
.mobile-nav__menu a:hover{color:var(--accent-strong) !important}
.mobile-nav__menu.is-open{display:flex;opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.hero,.page-intro,.contact-card{padding:32px 0 20px}
.hero--with-image{position:relative;min-height:420px;padding:40px;border-radius:24px;overflow:hidden;display:flex;align-items:flex-end;background-image:url('../img/lucas-carl-1358141-unsplash-bw.jpg');background-size:cover;background-position:center;isolation:isolate}
.hero--with-image::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,17,31,0.84),rgba(7,17,31,0.35));z-index:-1}
.hero__content{position:relative;z-index:1;max-width:720px}
.hero h1,.page-intro h1,.contact-page__intro h1{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:8px 0 12px;max-width:720px}
.eyebrow{margin:0;color:var(--accent-strong);font-weight:700;letter-spacing:0.2em;text-transform:uppercase;font-size:0.8rem}
.hero p,.page-intro p,.card p,.contact-card p,.contact-page__intro p{color:var(--muted);line-height:1.7}
.hero__content p{color:#dfe8f5}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.button{display:inline-block;padding:10px 16px;background:var(--accent);color:white;border-radius:999px;text-decoration:none;font-weight:600;transition:background 0.2s ease}
.button:hover{background:var(--accent-strong)}
.button.secondary{background:transparent;border:1px solid rgba(255,255,255,0.18)}
.info-grid,.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:20px}
.card,.contact-card{background:rgba(16,27,45,0.9);padding:20px;border:1px solid rgba(255,255,255,0.08);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,0.2)}
.card h2,.contact-card h2{margin-top:0;font-size:1.15rem}
.projects-grid .card{display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.projects-grid .button{margin-top:8px;align-self:flex-start}
.contact-page{display:grid;gap:24px;padding-top:8px}
.contact-page__intro{max-width:720px}
.contact-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:20px;align-items:start}
.contact-card--primary{min-height:240px;display:flex;flex-direction:column;justify-content:space-between}
.contact-card--primary .button{margin-top:16px;align-self:flex-start}
.contact-card--secondary h3{margin:18px 0 6px;font-size:1rem}
.contact-card--secondary h3:first-child{margin-top:0}
.contact-form{display:grid;gap:12px;margin-top:16px}
.contact-form label{display:grid;gap:6px;font-size:0.95rem}
.contact-form input,.contact-form textarea{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,0.12);border-radius:10px;background:rgba(255,255,255,0.04);color:var(--text)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}
.g-recaptcha{margin-top:4px}
.form-feedback{margin-top:12px;font-size:0.95rem}
.form-feedback.success{color:#7dd3fc}
.form-feedback.error{color:#fda4af}
@media (max-width: 900px){.page-shell{padding:20px 16px 48px}.site-header{padding-bottom:24px}.site-header__toprow{align-items:center}.site-nav{gap:10px 12px}.hero--with-image,.bg-projects{min-height:360px;padding:24px}.contact-grid{grid-template-columns:1fr}}
@media (max-width: 700px){.page-shell{padding:16px 12px 40px}.hero,.page-intro,.contact-card{padding:24px 0 16px}.hero--with-image,.bg-projects{min-height:320px;padding:20px;border-radius:18px}.hero-actions{flex-direction:column;align-items:stretch}.button{width:100%;text-align:center}.info-grid,.projects-grid{grid-template-columns:1fr}.card,.contact-card{padding:16px}.timeline{padding-left:16px}.timeline::before{left:6px}.project-card.right,.project-card.left{align-self:stretch;max-width:none}.project-card__header{flex-direction:column;align-items:flex-start}.project-card__meta{flex-direction:column;gap:6px}.project-card__dot{left:-13px;top:18px;width:12px;height:12px}.contact-grid{grid-template-columns:1fr}.site-header__toprow{align-items:center}.site-nav{display:none}.mobile-nav,.mobile-nav__toggle{display:flex}.mobile-nav{position:relative}}
@media (max-width: 480px){.site-header{gap:10px;padding-bottom:20px}.brand{font-size:1rem}.site-nav a{font-size:0.95rem}.hero h1,.page-intro h1,.contact-page__intro h1{font-size:clamp(1.6rem,8vw,2.2rem)}.hero--with-image,.bg-projects{min-height:280px;padding:16px}.hero p,.page-intro p,.card p,.contact-card p,.contact-page__intro p{line-height:1.6}.button{padding:10px 14px}}
.bg-projects{position:relative;min-height:420px;padding:40px;border-radius:24px;overflow:hidden;background-image:url('../img/carlos-muza-84523-unsplash-bw.jpg');background-size:cover;background-position:center;isolation:isolate;}
.bg-projects::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,17,31,0.84),rgba(7,17,31,0.35));z-index:-1}
.timeline-section{margin-top:12px;padding:24px 0 8px;}
.timeline-section h2{margin-bottom:24px;font-size:1.25rem}
.timeline{position:relative;display:flex;flex-direction:column;gap:24px;padding-left:24px}
.timeline::before{content:'';position:absolute;left:12px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent),rgba(255,255,255,0.16));}
.project-card{transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;position:relative;overflow:hidden;animation:timelineSlideIn 0.6s ease both;max-width:min(100%, 520px);width:100%}
.project-card:nth-child(2){animation-delay:0.12s}
.project-card:nth-child(3){animation-delay:0.24s}
.project-card.left{align-self:flex-start}
.project-card.right{align-self:flex-end}
.project-card__dot{position:absolute;left:-20px;top:24px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(139,92,246,0.2)}
.project-card__header{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:start;gap:12px}
.project-card__details{position:relative;z-index:1;max-height:0;opacity:0;overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease}
.project-card__details.visible{max-height:240px;opacity:1;margin-top:12px}
.project-card__details ul{padding-left:18px;color:var(--muted);line-height:1.7}
.project-card:hover{transform:translateY(-4px);border-color:rgba(167,139,250,0.45);box-shadow:0 18px 45px rgba(0,0,0,0.25)}
.project-card__meta{margin:4px 0 0;color:var(--accent-strong);font-size:0.9rem;display:flex;flex-wrap:wrap;gap:10px}
.project-card__meta span{display:inline-flex;gap:4px}
.button.ghost{background:transparent;border:1px solid rgba(255,255,255,0.16)}
.project-card.open{border-color:rgba(167,139,250,0.45)}
@media (max-width: 700px){.timeline{padding-left:18px}.timeline::before{left:8px}.project-card.right,.project-card.left{align-self:stretch;max-width:none}.project-card__dot{left:-16px}}
@keyframes timelineSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}