:root {
  --bg: #030611;
  --panel: rgba(7, 12, 29, .79);
  --line: rgba(144, 157, 255, .28);
  --line-soft: rgba(141, 158, 221, .13);
  --text: #f6f7ff;
  --muted: #b0b5d2;
  --accent: #8a63ff;
  --accent-2: #3f8cff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-family: "Montserrat", "Avenir Next", "Segoe UI", sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.page-width { width: min(88.2vw, 1412px); margin: 0 auto; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 20; height: 61px; border-bottom: 1px solid rgba(138, 155, 240, .17); background: linear-gradient(90deg, rgba(2,4,11,.9), rgba(4,7,17,.2) 45%, rgba(2,4,11,.72)); }
.header-inner { width: min(88.2vw, 1412px); height: 100%; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr auto; align-items: center; gap: 24px; }
.brand { width: 248px; height: 58px; display: block; overflow: hidden; }
.brand img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.36); }
.main-nav { justify-self: end; display: flex; align-items: stretch; height: 100%; gap: 42px; }
.main-nav a { position: relative; display: grid; place-items: center; min-width: 38px; color: #d8d9e9; font-size: 12px; font-weight: 500; text-shadow: 0 0 12px #5d62bd; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 15px; height: 2px; opacity: 0; background: #9a73ff; box-shadow: 0 0 10px #865dff; transform: scaleX(.3); transition: .25s ease; }
.main-nav a:hover::after, .main-nav a.active::after { opacity: 1; transform: scaleX(1); }
.main-nav a.active { color: white; }
.header-manifesto { margin: 0 0 0 24px; min-width: 174px; padding: 9px 18px; text-align: center; border: 1px solid rgba(135, 126, 248, .34); border-radius: 14px; color: #aeb3da; font-size: 8px; line-height: 1.75; letter-spacing: .24em; text-transform: uppercase; box-shadow: inset 0 0 22px rgba(74,78,180,.12); }
.menu-toggle { display: none; }

.hero { position: relative; height: 378px; isolation: isolate; overflow: hidden; background-color: #040713; background-image: url("assets/hero.png"); background-repeat: no-repeat; background-size: cover; background-position: center 42%; border-bottom: 1px solid rgba(128, 150, 230, .25); }
.hero::after { content: ""; position: absolute; z-index: -2; inset: 0; background: url("assets/hero.png") no-repeat calc(50% + 18px) -105px / 1180px auto; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%); pointer-events: none; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 68% 49%, rgba(2,4,11,.05) 0 23%, rgba(2,4,11,.13) 39%, rgba(2,4,11,.82) 100%), linear-gradient(90deg, rgba(2,4,10,.94) 0%, rgba(2,4,10,.72) 27%, rgba(2,4,10,.10) 58%, rgba(2,4,10,.23) 78%, rgba(2,4,10,.72) 100%); }
.hero-shade { position: absolute; z-index: -1; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, rgba(2, 6, 16, .62)); }
.hero-content { padding-top: 96px; }
.eyebrow { margin: 0 0 10px; color: #9ca9e6; font-size: 10px; font-weight: 600; letter-spacing: .43em; text-transform: uppercase; }
.eyebrow b { padding: 0 6px; font-weight: 400; }
.hero h1 { margin: 0; width: fit-content; color: #fbfcff; font-size: clamp(54px, 4.9vw, 79px); font-weight: 600; line-height: .96; letter-spacing: .17em; text-transform: uppercase; text-shadow: 0 0 18px rgba(141, 158, 255, .32), 0 2px 0 #5e668c; }
.hero h2 { margin: 8px 0 9px; font-size: clamp(19px, 1.65vw, 26px); font-weight: 500; letter-spacing: -.03em; }
.hero-copy { margin: 0; color: #c4c8dc; font-size: 15px; line-height: 1.55; font-weight: 400; letter-spacing: -.012em; }
.hero-actions { display: flex; gap: 14px; margin-top: 14px; }
.button { min-width: 143px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 1px solid rgba(136, 126, 252, .58); border-radius: 999px; font-size: 13px; font-weight: 500; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { min-width: 188px; background: linear-gradient(100deg, #7853ff 2%, #7e58ff 45%, #3c8fff 100%); border-color: rgba(221,215,255,.9); box-shadow: 0 0 22px rgba(97, 86, 255, .82), inset 0 0 18px rgba(255,255,255,.16); }
.button-primary span { font-size: 22px; line-height: 0; }
.button-secondary { background: rgba(2,5,16,.35); box-shadow: inset 0 0 16px rgba(80, 79, 175, .1); }
.hero-signoff { margin-top: 20px; display: flex; align-items: center; gap: 16px; color: #8d97c5; font-size: 8px; letter-spacing: .31em; text-transform: uppercase; }
.hero-signoff span { width: 41px; height: 1px; background: #96a3d7; }
.hero-side { position: absolute; z-index: 2; right: 5.15vw; color: #d9dcf3; text-align: right; text-transform: uppercase; font-size: 10px; font-weight: 500; line-height: 1.7; letter-spacing: .32em; text-shadow: 0 0 12px #5962b1; }
.hero-side-top { top: 107px; padding-right: 15px; border-right: 1px solid #7681af; }
.hero-side-bottom { bottom: 21px; right: 4.6vw; font-size: 8px; line-height: 1.5; }
.hero-side-bottom span { display: inline-block; width: 25px; height: 1px; margin-left: 12px; vertical-align: middle; background: #6f789f; }

.section-shell { background: radial-gradient(circle at 57% 0%, rgba(30, 37, 84, .11), transparent 43%), linear-gradient(180deg, #040813, #030711); border-bottom: 1px solid var(--line-soft); }
.pillars { min-height: 204px; }
.pillars-grid { display: grid; grid-template-columns: 324px repeat(3, minmax(0,1fr)); gap: 26px; align-items: center; min-height: 204px; }
.section-intro h2, .projects-heading h2 { margin: 0; font-size: 18px; line-height: 1.48; letter-spacing: .22em; text-transform: uppercase; }
.section-intro p { margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.pillar-card { position: relative; height: 160px; padding: 17px 37px; overflow: hidden; border: 1px solid rgba(130, 145, 224, .35); border-radius: 8px; background: radial-gradient(circle at 80% 10%, rgba(50,60,137,.14), transparent 50%), linear-gradient(135deg, rgba(7,12,29,.89), rgba(5,9,22,.69)); box-shadow: inset 0 0 26px rgba(32,43,96,.12), 0 8px 24px rgba(0,0,0,.12); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.pillar-card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(115deg, transparent 30%, rgba(102,81,232,.08), transparent 74%); transition: opacity .25s; }
.pillar-card:hover { transform: translateY(-3px); border-color: rgba(145, 115, 255, .72); box-shadow: 0 8px 28px rgba(45, 37, 127, .18); }
.pillar-card:hover::before { opacity: 1; }
.pillar-topline { height: 51px; display: flex; align-items: flex-start; justify-content: space-between; }
.pillar-icon { width: 50px; height: 50px; margin-top: -1px; fill: none; stroke: #9a65ff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(146, 89, 255, .7)); }
.pillar-topline small { color: #8c95c5; text-align: right; font-size: 7px; line-height: 1.75; letter-spacing: .28em; text-transform: uppercase; }
.pillar-card h3 { margin: 10px 0 6px; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
.pillar-card p { margin: 0; color: #acb1cd; font-size: 13px; line-height: 1.4; }
.round-arrow { position: absolute; right: 32px; bottom: 21px; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(128, 144, 218, .68); border-radius: 50%; color: #a9afe2; font-size: 18px; }

.projects { min-height: 220px; padding: 14px 0 17px; }
.projects-heading { height: 48px; display: flex; align-items: flex-start; justify-content: space-between; }
.projects-heading h2 { font-size: 17px; }
.projects-heading p { margin: 1px 0 0; color: #9ea4c5; font-size: 11px; }
.projects-heading > a { margin-top: 10px; color: #8f97c8; font-size: 8px; letter-spacing: .3em; text-transform: uppercase; }
.projects-heading > a span { padding-left: 10px; color: #9471ff; font-size: 16px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.project-card { position: relative; height: 143px; overflow: hidden; border: 1px solid rgba(126, 141, 214, .39); border-radius: 7px; background: #080d1e; box-shadow: inset 0 0 18px rgba(31, 36, 88, .18); }
.project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,7,17,.88) 0%, rgba(4,7,17,.52) 46%, rgba(3,6,15,.04) 74%); }
.project-content { position: absolute; z-index: 4; inset: 19px auto 13px 24px; }
.project-content small { display: block; margin-bottom: 8px; color: #aeb7e2; font-size: 7px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.project-content h3 { margin: 0 0 7px; font-size: 21px; line-height: 1; font-weight: 500; }
.project-content p { margin: 0; color: #bbc0d7; font-size: 12px; line-height: 1.35; }
.project-content b { position: absolute; left: 0; bottom: 0; width: max-content; color: #8a92bb; font-size: 6px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.external { position: absolute; z-index: 6; right: 20px; bottom: 14px; color: #d6daf4; font-size: 21px; }
.project-entre { background-image: radial-gradient(circle at 70% 38%, transparent 0 22px, rgba(245,228,255,.87) 23px 25px, rgba(159,122,255,.34) 29px, transparent 46px), url("assets/hero.png"); background-size: auto, 130%; background-position: center, 25% 58%; }
.project-entre::after { background: linear-gradient(90deg, rgba(4,7,17,.94), rgba(4,7,17,.56) 47%, rgba(3,6,15,.14)); }
.project-fince { background: linear-gradient(145deg, #070b18, #0c1030 53%, #080a1a); }
.project-fince::after { background: linear-gradient(90deg, rgba(4,7,17,.95) 0%, rgba(4,7,17,.5) 34%, transparent 56%); }
.wave { position: absolute; left: 43%; width: 75%; height: 112%; border: 3px solid transparent; border-top: 11px solid #4337ff; border-radius: 50%; filter: drop-shadow(0 0 9px #563cff); transform: rotate(-11deg); }
.wave-one { top: 42%; background: radial-gradient(ellipse at 43% 0%, rgba(88,44,255,.36), transparent 54%); }
.wave-two { top: 57%; left: 48%; border-top-color: #8c62ff; opacity: .75; transform: rotate(-3deg); }
.project-labs { background: radial-gradient(circle at 67% 50%, rgba(50,49,141,.26), transparent 36%), #070b19; }
.project-labs::after { background: linear-gradient(90deg, rgba(4,7,17,.95), rgba(4,7,17,.65) 43%, transparent 69%); }
.crystal { position: absolute; z-index: 1; width: 58px; aspect-ratio: 1; border: 1px solid rgba(189, 188, 255, .8); background: linear-gradient(135deg, rgba(107,92,255,.75), rgba(73,77,178,.12) 47%, rgba(203,211,255,.67)); clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); box-shadow: 0 0 16px #4c45d8; transform: rotate(15deg); }
.crystal::after { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(213,216,255,.75); clip-path: inherit; }
.c1 { right: 84px; top: 10px; width: 76px; transform: rotate(7deg); }
.c2 { right: 153px; top: 66px; width: 67px; transform: rotate(-7deg); }
.c3 { right: 212px; top: 28px; width: 43px; }
.c4 { right: 45px; top: 83px; width: 31px; opacity: .58; }

.site-footer { height: 98px; position: relative; overflow: hidden; background-image: linear-gradient(90deg, rgba(2,5,13,.89), rgba(2,5,13,.55), rgba(2,5,13,.9)), url("assets/hero.png"); background-size: cover; background-position: center 82%; }
.footer-grid { height: 100%; display: grid; grid-template-columns: 1fr 1.25fr .8fr auto; align-items: center; gap: 34px; }
.footer-built { display: grid; gap: 6px; color: #a7aece; font-size: 9px; }
.footer-built b { color: #b9c1e7; font-size: 8px; letter-spacing: .2em; text-transform: uppercase; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 18px; }
.footer-brand img { width: 205px; height: 58px; object-fit: contain; transform: scale(1.32); }
.footer-brand i { width: 1px; height: 26px; background: rgba(151,161,210,.5); }
.footer-brand span { color: #aab1d1; font-size: 7px; letter-spacing: .24em; text-transform: uppercase; }
.socials { display: flex; justify-content: flex-end; align-items: center; gap: 28px; color: #9fa7cf; }
.socials a { font-size: 18px; font-weight: 600; transition: color .2s, text-shadow .2s; }
.socials a:hover { color: white; text-shadow: 0 0 10px #8371ff; }
.footer-words { height: 50px; padding-left: 24px; border-left: 1px solid rgba(137,150,205,.32); color: #8c95c1; font-size: 7px; line-height: 1.45; letter-spacing: .2em; text-transform: uppercase; }

@media (max-width: 1180px) {
  .page-width, .header-inner { width: min(92vw, 1050px); }
  .header-inner { grid-template-columns: 210px 1fr auto; }
  .main-nav { gap: 24px; }
  .header-manifesto { display: none; }
  .pillars-grid { grid-template-columns: 250px repeat(3, minmax(0,1fr)); gap: 14px; }
  .pillar-card { padding: 17px 22px; }
  .footer-brand span { display: none; }
}

@media (max-width: 860px) {
  .page-width, .header-inner { width: min(91vw, 680px); }
  .site-header { position: fixed; background: rgba(3,6,16,.92); backdrop-filter: blur(12px); }
  .header-inner { display: flex; justify-content: space-between; }
  .brand { width: 195px; }
  .menu-toggle { display: grid; gap: 6px; width: 42px; height: 42px; place-content: center; border: 1px solid rgba(139,142,223,.35); border-radius: 50%; background: rgba(4,7,18,.5); }
  .menu-toggle span { width: 18px; height: 1px; background: #eceeff; transition: .25s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .main-nav { position: fixed; top: 61px; left: 0; right: 0; height: auto; padding: 22px 5vw 28px; display: grid; gap: 4px; background: rgba(3,6,16,.97); border-bottom: 1px solid rgba(137,151,220,.25); transform: translateY(-130%); transition: transform .3s ease; }
  .main-nav.open { transform: translateY(0); }
  .main-nav a { min-height: 42px; justify-items: start; }
  .main-nav a::after { left: 0; right: auto; width: 36px; bottom: 4px; }
  .hero { height: auto; min-height: 700px; background-size: auto 700px; background-position: 58% top; }
  .hero::after { display: none; }
  .hero::before { background: linear-gradient(180deg, rgba(2,4,10,.2), rgba(2,4,10,.08) 34%, rgba(2,4,10,.9) 61%, #030711 100%), linear-gradient(90deg, rgba(2,4,10,.66), transparent 80%); }
  .hero-content { padding-top: 360px; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(47px, 13vw, 72px); letter-spacing: .09em; }
  .hero h2 { max-width: 580px; font-size: 22px; }
  .hero-copy { font-size: 14px; }
  .hero-side { display: none; }
  .pillars { padding: 48px 0; }
  .pillars-grid { grid-template-columns: 1fr; gap: 14px; }
  .section-intro { padding-bottom: 12px; }
  .section-intro p br { display: none; }
  .pillar-card { height: 164px; }
  .projects { padding: 40px 0 46px; }
  .projects-heading { margin-bottom: 18px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card { height: 180px; }
  .site-footer { height: auto; min-height: 270px; padding: 32px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .footer-brand { justify-content: flex-start; }
  .socials { justify-content: flex-start; }
  .footer-words { justify-self: end; }
}

@media (max-width: 540px) {
  .page-width, .header-inner { width: 90vw; }
  .hero { min-height: 690px; background-size: auto 570px; background-position: 61% 0; }
  .hero-content { padding-top: 325px; }
  .eyebrow { font-size: 8px; letter-spacing: .3em; }
  .hero h1 { font-size: 45px; }
  .hero h2 { margin-top: 12px; font-size: 20px; line-height: 1.25; }
  .hero-copy { margin-top: 12px; font-size: 14px; }
  .desktop-only { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; margin-top: 20px; }
  .button { width: min(100%, 230px); }
  .hero-signoff { letter-spacing: .2em; font-size: 7px; }
  .section-intro h2 { font-size: 17px; }
  .project-card { height: 170px; }
  .projects-heading > a { font-size: 0; }
  .projects-heading > a span { font-size: 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-words { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}