:root { --ink:#07111f; --muted:#667085; --blue:#2563eb; --violet:#7c3aed; --line:#dfe3ec; --paper:#f8f9fc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:#fff; color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
main { width:100%; overflow:hidden; background:#fff; }
.nav-shell { height:76px; margin:18px max(clamp(18px,4.2vw,70px),calc((100vw - 1520px)/2 + 70px)) 0; padding:0 22px; border:1px solid #e3e7ef; border-radius:24px; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.78); backdrop-filter:blur(18px); position:relative; z-index:20; box-shadow:0 12px 40px rgba(39,55,95,.06); }
.brand { display:flex; align-items:center; gap:11px; font-size:14px; font-weight:800; letter-spacing:.16em; }
.brand span { width:9px; height:9px; border-radius:50%; background:#3b82f6; box-shadow:0 0 16px #3b82f6; }
nav { display:flex; gap:32px; font-size:13px; color:#344054; }
nav a { transition:.25s; } nav a:hover { color:var(--violet); transform:translateY(-1px); }
.nav-actions { display:flex; align-items:center; gap:9px; }
.language { display:flex; padding:4px; background:#f0f2f7; border-radius:13px; }
.language button { border:0; background:transparent; padding:8px 10px; border-radius:9px; font-size:12px; font-weight:800; cursor:pointer; color:#667085; }
.language button.active { background:linear-gradient(135deg,var(--blue),var(--violet)); color:white; box-shadow:0 5px 14px rgba(89,70,230,.28); }
.menu-toggle { display:none; width:40px; height:40px; padding:10px; border:0; border-radius:12px; background:#f0f2f7; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.menu-toggle span { display:block; width:18px; height:2px; border-radius:2px; background:var(--ink); transition:.25s; }
.menu-toggle.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity:0; }
.menu-toggle.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.hero { min-height:750px; display:grid; grid-template-columns:56% 44%; padding:70px max(clamp(24px,5vw,80px),calc((100vw - 1520px)/2 + 80px)) 72px; align-items:center; position:relative; }
.hero::before { content:""; position:absolute; width:520px; height:520px; left:-320px; top:120px; background:radial-gradient(circle,#dbeafe 0,transparent 68%); opacity:.8; }
.hero-copy { position:relative; z-index:2; }
.eyebrow,.section-number { display:flex; align-items:center; gap:12px; font-size:11px; text-transform:uppercase; letter-spacing:.22em; font-weight:800; color:#475467; }
.eyebrow span { width:34px; height:2px; background:linear-gradient(90deg,var(--blue),var(--violet)); }
h1 { margin:26px 0 24px; font-size:clamp(76px,10vw,154px); line-height:.73; letter-spacing:-.085em; font-weight:900; }
h1 span { display:block; }
h1 .surname { margin-left:clamp(24px,4vw,70px); background:linear-gradient(90deg,var(--blue) 5%,var(--violet) 88%); -webkit-background-clip:text; color:transparent; filter:drop-shadow(0 12px 20px rgba(76,75,225,.12)); }
.role { max-width:690px; font-size:clamp(17px,1.6vw,23px); line-height:1.55; color:#475467; }
.role strong { color:var(--ink); }
.primary-button { display:inline-flex; align-items:center; gap:18px; margin-top:18px; padding:15px 20px; background:linear-gradient(135deg,var(--blue),var(--violet)); color:white; border-radius:14px; font-weight:700; font-size:14px; box-shadow:0 14px 28px rgba(82,75,221,.25); transition:.3s; }
.primary-button:hover { transform:translateY(-4px); box-shadow:0 20px 36px rgba(82,75,221,.32); }
.primary-button span { font-size:20px; }
.hero-art { height:560px; position:relative; display:grid; place-items:center; }
.hero-art::before,.hero-art::after { content:""; position:absolute; border-radius:50%; filter:blur(2px); animation:float 9s ease-in-out infinite; }
.hero-art::before { width:410px; height:410px; background:radial-gradient(circle at 35% 30%,#eff6ff 0,#dbeafe 24%,#c4b5fd 55%,rgba(124,58,237,.15) 72%,transparent 73%); }
.hero-art::after { width:170px; height:170px; right:4%; top:10%; background:radial-gradient(circle at 35% 30%,#fff,#bfdbfe 35%,#8b5cf6 72%); opacity:.72; animation-delay:-3s; }
.orb { width:285px; height:285px; border-radius:50%; z-index:2; display:grid; place-items:center; background:radial-gradient(circle at 31% 25%,#93c5fd,#2563eb 35%,#6d28d9 72%,#2e1065); box-shadow:inset -28px -25px 55px rgba(11,20,50,.28),0 35px 75px rgba(62,76,210,.28); animation:float 7s ease-in-out infinite; }
.orb-core { color:white; font-size:62px; letter-spacing:-.06em; font-weight:800; }
.soft-orbit { position:absolute; border:1px solid rgba(72,96,205,.22); border-radius:50%; z-index:3; animation:spin 18s linear infinite; }
.soft-orbit::after { content:""; position:absolute; width:13px; height:13px; border-radius:50%; background:linear-gradient(135deg,#38bdf8,#7c3aed); top:12%; left:15%; box-shadow:0 0 20px #60a5fa; }
.orbit-one { width:480px; height:230px; transform:rotate(-18deg); }.orbit-two { width:400px; height:510px; transform:rotate(38deg); animation-direction:reverse; animation-duration:24s; }
.stat { position:absolute; z-index:5; background:rgba(255,255,255,.72); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.9); box-shadow:0 16px 45px rgba(51,65,110,.12); border-radius:18px; padding:14px 18px; display:flex; flex-direction:column; animation:float 6s ease-in-out infinite; }
.stat strong { font-size:28px; }.stat span { max-width:120px; font-size:9px; line-height:1.35; text-transform:uppercase; letter-spacing:.14em; color:#667085; }
.stat-years { left:3%; bottom:15%; }.stat-launches { right:3%; bottom:23%; animation-delay:-2.5s; }
.work-section,.experience-section { padding:100px max(clamp(24px,5vw,80px),calc((100vw - 1520px)/2 + 80px)); background:var(--paper); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:44px; }
.section-heading h2,.about-section h2,.contact-section h2 { margin:8px 0 0; font-size:clamp(43px,5vw,72px); line-height:.98; letter-spacing:-.055em; }
.section-heading>p { max-width:420px; color:var(--muted); line-height:1.6; }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.project-card { min-height:270px; padding:25px; border-radius:25px; background:rgba(255,255,255,.82); border:1px solid #e4e7ee; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; box-shadow:0 15px 50px rgba(43,53,89,.06); transition:.35s; }
.project-card::before { content:""; position:absolute; width:180px; height:180px; right:-40px; top:-70px; border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.3),rgba(124,58,237,.13) 50%,transparent 70%); transition:.45s; }
.project-card:nth-child(2n)::before { background:radial-gradient(circle,rgba(124,58,237,.3),rgba(37,99,235,.1) 50%,transparent 70%); }
.project-card:hover { transform:translateY(-8px); border-color:#a5b4fc; box-shadow:0 24px 65px rgba(64,73,126,.13); }.project-card:hover::before { transform:scale(1.3) translate(-10px,20px); }
.card-top,.card-bottom { display:flex; justify-content:space-between; gap:16px; font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:#667085; position:relative; z-index:2; }
.project-logo-wrap { height:62px; margin-top:30px; display:flex; align-items:center; position:relative; z-index:2; }
.project-logo-wrap img { display:block; width:auto; height:auto; max-width:155px; max-height:58px; object-fit:contain; object-position:left center; filter:saturate(.82); transition:.3s; }
.project-card:hover .project-logo-wrap img { filter:saturate(1); transform:scale(1.03); }
.project-logo-wrap img[src*="recovery-worldwide"] { width:155px; height:58px; max-width:none; object-fit:cover; border-radius:8px; }
.project-logo-wrap img[src*="star-force"] { transform:scale(1.5); transform-origin:left center; }
.project-card:hover .project-logo-wrap img[src*="star-force"] { transform:scale(1.56); }
.project-card h3 { margin:26px 0 38px; max-width:90%; font-size:clamp(25px,2.2vw,36px); letter-spacing:-.04em; line-height:1.02; position:relative; z-index:2; }
.arrow { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#eef2ff; color:var(--blue); font-size:20px; transition:.3s; }.project-card:hover .arrow { background:var(--violet); color:white; transform:rotate(8deg); }
.project-card:last-child { grid-column:auto; }
.about-section { padding:120px max(clamp(24px,7vw,120px),calc((100vw - 1520px)/2 + 120px)); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:10vw; margin-top:25px; align-items:start; }
.about-grid h2 { max-width:670px; }
.about-grid>div>p { color:#475467; font-size:20px; line-height:1.7; margin-top:10px; }
.skills { margin-top:45px; padding-top:24px; border-top:1px solid var(--line); }.skills span { font-size:11px; text-transform:uppercase; letter-spacing:.2em; font-weight:800; color:var(--blue); }.skills p { line-height:1.8; color:#344054; }
.timeline { border-top:1px solid #cfd5df; }.timeline-row { min-height:120px; border-bottom:1px solid #d6dbe4; display:grid; grid-template-columns:180px 1fr 1.4fr; align-items:center; gap:30px; transition:.25s; }.timeline-row:hover { padding-left:12px; color:var(--violet); }.timeline-row span { font-size:12px; color:#667085; }.timeline-row strong { font-size:20px; }.timeline-row p { color:#667085; }
.contact-section { margin:26px max(26px,calc((100vw - 1520px)/2 + 26px)); min-height:570px; border-radius:34px; padding:90px clamp(28px,7vw,110px); background:#07111f; color:white; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.contact-section .section-number { color:#93c5fd; }.contact-section h2 { max-width:900px; font-size:clamp(56px,8vw,120px); position:relative; z-index:2; }.contact-section>p:not(.section-number) { color:#cbd5e1; font-size:18px; position:relative; z-index:2; }
.contact-glow { position:absolute; width:620px; height:620px; right:-80px; top:-160px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#60a5fa,#4338ca 35%,#7e22ce 62%,transparent 72%); filter:blur(3px); opacity:.7; animation:float 8s ease-in-out infinite; }
.contact-actions { display:flex; gap:16px; flex-wrap:wrap; margin-top:34px; position:relative; z-index:2; }.contact-actions a { min-width:250px; padding:18px 20px; border:1px solid rgba(255,255,255,.28); border-radius:15px; display:flex; justify-content:space-between; gap:26px; background:rgba(255,255,255,.06); backdrop-filter:blur(8px); transition:.3s; }.contact-actions a:hover { background:white; color:var(--ink); transform:translateY(-4px); }.contact-actions span { color:#93c5fd; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
footer { min-height:90px; padding:0 max(clamp(26px,5vw,80px),calc((100vw - 1520px)/2 + 80px)); display:flex; align-items:center; justify-content:space-between; color:#667085; font-size:11px; letter-spacing:.12em; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
@keyframes spin { to{rotate:360deg} }
@media (max-width:1000px) { .nav-shell{position:relative}.menu-toggle{display:flex}nav{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;padding:12px;background:rgba(255,255,255,.97);border:1px solid #e3e7ef;border-radius:18px;box-shadow:0 18px 45px rgba(39,55,95,.14);backdrop-filter:blur(18px);flex-direction:column;gap:2px}nav.open{display:flex}nav a{padding:13px 14px;border-radius:10px}nav a:hover{background:#f3f4f8;transform:none}.hero{grid-template-columns:1fr; padding-top:80px}.hero-art{height:470px}.project-grid{grid-template-columns:repeat(2,1fr)}.project-card:last-child{grid-column:auto}.about-grid{grid-template-columns:1fr; gap:35px}.timeline-row{grid-template-columns:140px 1fr}.timeline-row p{grid-column:2} }
@media (max-width:640px) { .nav-shell{height:64px;margin:10px;padding:0 10px 0 14px}.brand{font-size:10px;letter-spacing:.1em;white-space:nowrap}.brand span{width:7px;height:7px}.nav-actions{gap:5px}.language{padding:3px}.language button{padding:7px 8px;font-size:10px}.menu-toggle{width:36px;height:36px}.hero{padding:70px 20px 55px;min-height:auto}.hero-copy{min-width:0}h1{font-size:21.5vw;line-height:.76;max-width:100%;letter-spacing:-.075em}h1 .surname{margin-left:5vw}.role{font-size:16px;overflow-wrap:anywhere}.hero-art{height:390px;max-width:100%}.orb{width:210px;height:210px}.orb-core{font-size:48px}.orbit-one{width:min(320px,86vw);height:160px}.orbit-two{width:min(280px,75vw);height:350px}.hero-art::before{width:300px;height:300px}.section-heading{align-items:start;flex-direction:column}.project-grid{grid-template-columns:1fr}.project-card{min-height:230px;min-width:0}.project-card h3{overflow-wrap:anywhere}.about-section,.work-section,.experience-section{padding:75px 20px}.about-grid>*{min-width:0}.timeline-row{grid-template-columns:1fr;gap:8px;padding:22px 0}.timeline-row p{grid-column:1;margin:0;overflow-wrap:anywhere}.contact-section{margin:10px;padding:60px 24px;min-height:530px}.contact-section h2{overflow-wrap:anywhere}.contact-actions{min-width:0}.contact-actions a{min-width:0;width:100%;font-size:12px;overflow-wrap:anywhere}.contact-actions a span{flex-shrink:0}footer{flex-direction:column;justify-content:center;gap:10px;text-align:center} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important} }