:root{
  --bg:#07111d;
  --bg-soft:#0d1726;
  --panel:rgba(255,255,255,.05);
  --panel-strong:rgba(255,255,255,.08);
  --text:#eef3f8;
  --muted:#a9b8c7;
  --line:rgba(255,255,255,.10);
  --shadow:0 30px 90px rgba(0,0,0,.34);
  --radius:24px;
  --radius-lg:36px;
  --container:1240px;
  --muse:#f0a22b;
  --alpha:#6f7cff;
  --archi:#69c18c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  padding-top: 78px;
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(39,95,166,.18), transparent 26%),
    radial-gradient(circle at 80% 0%, rgba(236,132,63,.12), transparent 28%),
    linear-gradient(180deg, #07111d 0%, #0b1624 42%, #08111b 100%);
}
img{max-width:100%; display:block}
a{color:inherit}
.site-shell{overflow:visible}
.container{width:min(calc(100% - 40px), var(--container)); margin-inline:auto}
.section{padding:110px 0}
.section-heading{max-width:760px}
.section-heading.center{text-align:center; margin:0 auto 52px}
.section-label,.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:#d9e4ef; opacity:.86; letter-spacing:.12em; text-transform:uppercase;
  font-size:.78rem; font-weight:700;
}
.section-heading h2,.hero h1{
  margin:16px 0 18px;
  font-family:'Playfair Display', serif;
  line-height:.98;
  letter-spacing:-.03em;
}
.hero h1{font-size:clamp(3rem, 6vw, 5.6rem)}
.section-heading h2{font-size:clamp(2rem, 4vw, 3.35rem)}
.section-heading p,.hero-lead,.profile-text p,.ecosystem-card p,.project-card__text,.method-step p,.contact-copy p{
  color:var(--muted);
  line-height:1.72;
  font-size:1.04rem;
}
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  background: rgba(7, 17, 29, 0.34);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;
}

.site-header.is-scrolled{
  background: rgba(7, 17, 29, 0.72);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 40px rgba(0,0,0,0.22);
}

.header-inner{
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand-lockup{text-decoration:none; display:flex; align-items:center; gap:12px}
.brand-mark{
  width:14px; height:14px; border-radius:4px;
  background:linear-gradient(135deg,#6f7cff, #f0a22b 55%, #69c18c);
  box-shadow:0 0 0 6px rgba(255,255,255,.03);
}
.brand-text{font-weight:700; letter-spacing:.01em}
.main-nav{display:flex; gap:28px}
.main-nav a{
  text-decoration:none; color:#cfd9e5; font-size:.95rem; position:relative
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-7px; width:0; height:1px;
  background:#fff; transition:width .3s ease
}
.main-nav a:hover::after{width:100%}
.header-actions{display:flex; align-items:center; gap:18px}
.language-switch{display:flex; align-items:center; gap:10px}
.lang-btn{
  border:none; background:none; color:#aab7c5; font-weight:700; letter-spacing:.12em;
  cursor:pointer; padding:0
}
.lang-btn.is-active{color:#fff}
.lang-divider{color:rgba(255,255,255,.35)}
.nav-toggle{
  display:none; width:44px; height:44px; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); cursor:pointer
}
.nav-toggle span{
  display:block; width:18px; height:2px; background:#fff; margin:4px auto; border-radius:2px
}

.hero{position:relative; padding:72px 0 90px}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 25% 40%, rgba(255,113,77,.18), transparent 28%),
    radial-gradient(circle at 70% 35%, rgba(96,127,255,.18), transparent 24%);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns: 1.08fr .92fr; gap:44px; align-items:center;
}
.hero-copy{position:relative; z-index:2}
.hero-lead{max-width:740px; margin-bottom:30px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 22px; border-radius:16px; text-decoration:none; font-weight:700;
  transition:transform .25s ease, background .25s ease, border-color .25s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.18); color:#fff;
  box-shadow:0 12px 32px rgba(0,0,0,.24)
}
.btn-secondary{
  background:transparent; border:1px solid rgba(255,255,255,.14); color:#d7e3ee
}
.brand-chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px}
.chip{
  border-radius:999px; padding:10px 14px; font-size:.9rem; font-weight:700;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04)
}
.chip-museyoum{box-shadow:inset 0 0 0 1px rgba(240,162,43,.24)}
.chip-alpha{box-shadow:inset 0 0 0 1px rgba(111,124,255,.24)}
.chip-archi{box-shadow:inset 0 0 0 1px rgba(105,193,140,.24)}
.hero-metrics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:760px
}
.metric{
  padding:18px 18px 16px; border-radius:18px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08)
}
.metric-value{display:block; font-size:1.2rem; font-weight:800; margin-bottom:6px}
.metric-label{font-size:.88rem; color:var(--muted)}
.hero-portrait-wrap{display:flex; justify-content:flex-end}
.hero-portrait-frame{
  position:relative; width:min(100%, 560px); aspect-ratio: 10 / 11;
  border-radius:36px; overflow:hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.hero-portrait-frame::before{
  content:""; position:absolute; inset:auto -12% -16% auto; width:44%; height:44%;
  background:radial-gradient(circle, rgba(236,132,63,.24), transparent 68%); z-index:1
}
.hero-portrait{
  width:100%; height:100%; object-fit:cover; object-position:58% center; position:relative; z-index:0;
  filter:saturate(1.04) contrast(1.03)
}

.profile-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:start}
.ecosystem-grid,.competence-grid,.projects-grid,.method-steps{
  display:grid; gap:24px
}
.ecosystem-grid{grid-template-columns:repeat(3,1fr)}
.ecosystem-card,.competence-item,.method-step,.contact-panel{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:0 16px 50px rgba(0,0,0,.20)
}
.ecosystem-card{
  padding:28px; min-height:100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.card-museyoum{box-shadow:inset 0 0 0 1px rgba(240,162,43,.12), 0 16px 50px rgba(0,0,0,.20)}
.card-alpha{box-shadow:inset 0 0 0 1px rgba(111,124,255,.12), 0 16px 50px rgba(0,0,0,.20)}
.card-archi{box-shadow:inset 0 0 0 1px rgba(105,193,140,.12), 0 16px 50px rgba(0,0,0,.20)}
.ecosystem-topline{font-size:.86rem; font-weight:800; margin-bottom:12px; letter-spacing:.08em; text-transform:uppercase}
.ecosystem-card h3{font-size:1.42rem; line-height:1.18; margin:0 0 14px}
.competence-grid{grid-template-columns:repeat(3,1fr)}
.competence-item{padding:26px 22px; text-align:center}
.competence-item .icon{display:inline-block; font-size:1.6rem; margin-bottom:12px; opacity:.92}
.competence-item h3{margin:0; font-size:1.04rem; line-height:1.35}

.selected-projects{padding-top:120px}
.projects-grid{grid-template-columns:repeat(3,1fr)}
.project-card{
  position:relative; overflow:hidden; min-height:100%;
  border-radius:28px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.24);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.project-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 84px rgba(0,0,0,.30);
  border-color:rgba(255,255,255,.15)
}
.project-card__link{text-decoration:none; display:block; height:100%}
.project-card__image-wrap{position:relative; aspect-ratio:16/10; overflow:hidden; background:#09121f}
.project-card__image{
  width:100%; height:100%; object-fit:cover; transform:scale(1);
  transition:transform .8s ease
}
.project-card:hover .project-card__image{transform:scale(1.05)}
.project-card__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(4,8,15,.92) 0%, rgba(4,8,15,.38) 44%, rgba(4,8,15,.08) 100%),
    linear-gradient(to right, rgba(4,8,15,.25), rgba(4,8,15,.06));
}
.project-card__brand{
  position:absolute; top:18px; left:18px; z-index:2;
  padding:9px 12px; border-radius:999px;
  background:rgba(16,22,32,.74);
  border:1px solid rgba(255,255,255,.12);
  font-size:.8rem; font-weight:800; letter-spacing:.05em
}
.project-card__content{padding:24px 24px 28px}
.project-card__kicker{
  display:inline-block; margin-bottom:12px;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.10em; font-weight:800; color:#c1cfdd
}
.project-card__title{
  margin:0 0 12px; font-size:1.7rem; line-height:1.08; letter-spacing:-.02em
}
.project-card__cta{
  display:inline-flex; align-items:center; gap:8px; font-weight:800; margin-top:4px
}
.project-card__cta::after{content:"→"; transition:transform .25s ease}
.project-card:hover .project-card__cta::after{transform:translateX(4px)}
.featured-museyoum{box-shadow:inset 0 0 0 1px rgba(240,162,43,.10), 0 20px 60px rgba(0,0,0,.24)}
.featured-alpha{box-shadow:inset 0 0 0 1px rgba(111,124,255,.10), 0 20px 60px rgba(0,0,0,.24)}
.featured-archi{box-shadow:inset 0 0 0 1px rgba(105,193,140,.10), 0 20px 60px rgba(0,0,0,.24)}

.method-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:36px}
.method-steps{grid-template-columns:repeat(3,1fr)}
.method-step{padding:26px}
.step-no{display:inline-block; font-size:.86rem; font-weight:800; opacity:.7; margin-bottom:10px}
.method-step h3{margin:0 0 10px; font-size:1.15rem}
.contact-panel{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding:34px 36px;
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.03))
}
.contact-copy h2{margin:14px 0 16px; font-family:'Playfair Display', serif; font-size:clamp(2rem,4vw,3rem); line-height:1}
.contact-actions{display:flex; flex-wrap:wrap; gap:14px}

.reveal{
  opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease
}
.reveal.is-visible{opacity:1; transform:none}

@media (max-width: 1100px){
  .hero-grid,.profile-grid,.method-grid{grid-template-columns:1fr}
  .hero-portrait-wrap{justify-content:center}
  .ecosystem-grid,.projects-grid,.method-steps{grid-template-columns:repeat(2,1fr)}
  .competence-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 860px){
  .main-nav{
    position:fixed; inset:78px 20px auto 20px; flex-direction:column; gap:14px;
    padding:18px; border-radius:20px; background:rgba(8,15,24,.96);
    border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
    opacity:0; pointer-events:none; transform:translateY(-10px); transition:.25s ease
  }
  body.menu-open .main-nav{opacity:1; pointer-events:auto; transform:none}
  .nav-toggle{display:block}
  .hero{padding-top:46px}
  .hero-metrics{grid-template-columns:1fr}
  .contact-panel{flex-direction:column; align-items:flex-start}
}
@media (max-width: 640px){
  .section{padding:82px 0}
  .container{width:min(calc(100% - 24px), var(--container))}
  .projects-grid,.ecosystem-grid,.competence-grid,.method-steps{grid-template-columns:1fr}
  .project-card__content,.ecosystem-card,.method-step,.contact-panel{padding:22px}
  .hero-portrait-frame{aspect-ratio: 4 / 5; border-radius:28px}
  .hero-actions,.contact-actions{width:100%}
  .hero-actions .btn,.contact-actions .btn{width:100%}
}
.section-compact{
  padding-top: 70px;
  padding-bottom: 70px;
}

.archive-panel{
  display: grid;
  grid-template-columns: 1.15fr auto;
  gap: 28px;
  align-items: center;
  padding: 34px 36px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 54px rgba(0,0,0,0.18);
}

.archive-copy h2{
  margin: 14px 0 16px;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.archive-copy p{
  margin: 0;
  max-width: 820px;
}

.archive-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.site-footer{
  margin-top: 40px;
  padding: 70px 0 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.025));
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr 0.9fr;
  gap: 34px;
  align-items: start;
}

.footer-logo{
  display: inline-block;
  margin-bottom: 14px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
}

.footer-brand p{
  margin: 0;
  max-width: 380px;
  color: var(--muted);
  line-height: 1.7;
}

.footer-col h3{
  margin: 0 0 14px;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #dfe8f1;
}

.footer-col ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li + li{
  margin-top: 10px;
}

.footer-col a{
  text-decoration: none;
  color: var(--muted);
  transition: color 0.22s ease;
}

.footer-col a:hover{
  color: #ffffff;
}

.footer-bottom{
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-bottom p{
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.footer-separator{
  opacity: 0.5;
}
@media (max-width: 1100px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
  }

  .archive-panel{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .archive-actions{
    justify-content: flex-start;
  }
}

@media (max-width: 640px){
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .archive-panel{
    padding: 24px 22px;
    border-radius: 22px;
  }

  .footer-bottom p{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .footer-separator{
    display: none;
  }
}