:root{
  --bg:#07101b;
  --bg-soft:#0d1724;
  --panel:#111d2c;
  --panel-strong:#152235;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(0,188,212,.28);
  --text:#f5f8fc;
  --muted:#aab7c6;
  --muted-2:#7f8c9b;
  --cyan:#00bcd4;
  --cyan-soft:#7cecff;
  --green:#2cff92;
  --radius:24px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 78% 0%, rgba(0,188,212,.16), transparent 32%),
    linear-gradient(180deg,#060d16 0%,#0a1320 52%,#070d15 100%);
  color:var(--text);
}
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; opacity:.11;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom, #000, transparent 76%);
}
a{color:inherit;text-decoration:none}
.site-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--max); margin:0 auto; padding:18px 22px;
  backdrop-filter: blur(18px);
}
.brand img{width:150px; height:auto; display:block}
.nav{display:flex; gap:6px; padding:7px; border:1px solid var(--line); border-radius:999px; background:rgba(7,16,27,.68)}
.nav a{font-size:14px; color:var(--muted); padding:10px 13px; border-radius:999px}
.nav a:hover{color:var(--text); background:rgba(255,255,255,.06)}
.section-pad{padding:74px 22px; max-width:var(--max); margin:0 auto}
.compact{padding-top:26px}
.hero{min-height:calc(100vh - 88px); display:grid; align-items:center}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center}
.eyebrow{margin:0 0 14px; color:var(--cyan-soft); text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:800}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(54px,9vw,104px); line-height:.9; letter-spacing:-.07em; margin-bottom:10px}
.hero h2{font-size:clamp(28px,4vw,48px); line-height:1.02; letter-spacing:-.045em; margin-bottom:24px; color:#dce8f4}
h2{font-size:clamp(31px,5vw,56px); line-height:1.02; letter-spacing:-.045em; max-width:960px; margin-bottom:22px}
h3{font-size:23px; letter-spacing:-.025em; margin-bottom:10px}
.lead{font-size:clamp(18px,2vw,22px); color:#ccd8e5; line-height:1.55; max-width:760px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}.hero-actions.center{justify-content:center}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:999px; font-weight:800; border:1px solid var(--line-strong)}
.btn.primary{background:linear-gradient(135deg,var(--cyan),#10dec5); color:#001117; box-shadow:0 18px 50px rgba(0,188,212,.18)}
.btn.ghost{background:rgba(255,255,255,.035); color:var(--text)}
.profile-card,.text-panel,.card,.timeline-item,.brand-panel,.contact-box{border:1px solid var(--line); background:linear-gradient(180deg,rgba(21,34,53,.88),rgba(12,22,35,.88)); border-radius:var(--radius); box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.profile-card{padding:30px; border-color:var(--line-strong)}
.card-label{font-size:13px; color:var(--cyan-soft); text-transform:uppercase; letter-spacing:.12em; font-weight:900; margin-bottom:18px}
.check-list{margin:0; padding:0; list-style:none; display:grid; gap:13px}
.check-list li{color:#d7e1ec; line-height:1.45; padding-left:26px; position:relative}
.check-list li:before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green); position:absolute; left:2px; top:.6em; box-shadow:0 0 18px rgba(44,255,146,.55)}
.section-head{margin-bottom:30px}
.text-panel{padding:34px; max-width:940px}.text-panel p,.brand-panel p{font-size:18px; color:var(--muted); line-height:1.7}.text-panel p:last-child,.brand-panel p:last-child{margin-bottom:0}
.cards{display:grid; gap:16px}.cards.four{grid-template-columns:repeat(4,1fr)}
.card{padding:26px; min-height:265px}.card p,.timeline-item p,.contact-box p{color:var(--muted); line-height:1.62}
.tech-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px}
.tech-grid span{border:1px solid var(--line); background:rgba(255,255,255,.04); border-radius:999px; padding:12px 14px; color:#d8e3ee; text-align:center; font-weight:700; font-size:14px}
.timeline{display:grid; gap:16px}.timeline-item{padding:28px}.tag{color:var(--green)!important; font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; margin-bottom:8px}
.brand-panel{padding:38px; border-color:var(--line-strong)}.note{font-size:15px!important; color:var(--muted-2)!important; border-top:1px solid var(--line); padding-top:20px; margin-top:22px}
.contact{padding-bottom:100px}.contact-box{max-width:880px; margin:0 auto; padding:44px; text-align:center; border-color:var(--line-strong)}.contact-box p{font-size:18px; max-width:650px; margin:0 auto 26px}
.footer{max-width:var(--max); margin:0 auto; padding:28px 22px 44px; display:flex; justify-content:space-between; color:var(--muted); border-top:1px solid var(--line)}.footer-links{display:flex; gap:18px}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}.reveal.visible{opacity:1; transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr}.cards.four{grid-template-columns:1fr 1fr}.tech-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.nav{display:none}.brand img{width:136px}.hero{min-height:auto;padding-top:36px}h1{font-size:58px}.section-pad{padding:56px 16px}.cards.four,.tech-grid{grid-template-columns:1fr}.footer{flex-direction:column; gap:14px}.contact-box,.brand-panel,.text-panel{padding:28px 20px}.hero-actions{flex-direction:column}.btn{width:100%}}