:root {
  --bg: #08090d;
  --bg-soft: #0d0f16;
  --surface: #11141d;
  --surface-2: #151924;
  --line: rgba(226, 231, 255, 0.13);
  --line-strong: rgba(226, 231, 255, 0.23);
  --text: #f1f3fb;
  --muted: #9ca3b7;
  --accent: #b9b8ff;
  --accent-2: #7c83ff;
  --pearl: #e7e9f8;
  --glow: rgba(126, 118, 255, 0.25);
  --max: 1220px;
  --radius-lg: 30px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 80% 10%, rgba(86, 79, 175, 0.08), transparent 32%),
    radial-gradient(circle at 12% 38%, rgba(98, 119, 255, 0.05), transparent 30%),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
::selection { background: rgba(185, 184, 255, 0.3); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200; transform: translateY(-150%);
  background: #fff; color: #000; padding: 10px 14px; border-radius: 8px;
}
.skip-link:focus { transform: translateY(0); }

.container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.section { position: relative; padding: 116px 0; }
.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.035em; }
h1 { font-size: clamp(3.35rem, 7vw, 6.8rem); line-height: 0.98; max-width: 880px; margin-bottom: 28px; }
h2 { font-size: clamp(2.35rem, 5vw, 4.7rem); line-height: 1.02; margin-bottom: 22px; }
h3 { font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.15; }
p { color: var(--muted); }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header.scrolled {
  background: rgba(8, 9, 13, 0.82);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}
.header-inner { height: 78px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: .12em; }
.brand-mark {
  width: 22px; height: 22px; border: 1px solid rgba(231,233,248,.75); border-radius: 50%; position: relative;
  box-shadow: 0 0 18px rgba(185,184,255,.18);
}
.brand-mark::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--pearl); left: 7px; top: 7px;
  box-shadow: 0 0 12px var(--accent);
}
.brand-name { font-size: 0.92rem; }
.site-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.site-nav a { color: #b6bbca; font-size: .9rem; transition: color .2s; }
.site-nav a:hover, .site-nav a.active { color: #fff; }
.header-cta { margin-left: 6px; }
.menu-toggle { display: none; background: none; border: 0; color: #fff; width: 42px; height: 42px; }
.menu-toggle span:not(.sr-only) { display:block; width:22px; height:1px; background:#fff; margin:6px auto; transition:.25s; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 25px; border: 1px solid rgba(229,231,255,.3); border-radius: 999px;
  background: linear-gradient(135deg, #efefff, #aaa9ec); color: #101118; font-weight: 750;
  box-shadow: 0 12px 35px rgba(128,126,233,.18); transition: transform .22s, box-shadow .22s;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(128,126,233,.28); }
.button-small { min-height: 40px; padding: 0 18px; font-size: .84rem; }
.text-link { display: inline-flex; gap: 10px; align-items: center; color: #e4e5ee; font-weight: 650; }
.text-link span { color: var(--accent); transition: transform .2s; }
.text-link:hover span { transform: translate(3px, 3px); }

.hero { min-height: 100svh; display: flex; align-items: center; padding-top: 150px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: 40px; }
.hero-copy { position: relative; z-index: 2; }
.hero-lead { max-width: 760px; font-size: clamp(1.08rem, 1.7vw, 1.42rem); line-height: 1.55; color: #b8bdcd; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin: 38px 0 44px; }
.platforms { display: flex; flex-wrap: wrap; gap: 8px; }
.platforms span, .project-tags span {
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: #aeb3c4; font-size: .76rem;
  background: rgba(255,255,255,.02);
}
.hero-visual { position: relative; min-height: 610px; display: grid; place-items: center; }
.orb-shell { width: min(600px, 46vw); position: relative; place-self: start center; margin-top: -56px; animation: float 7s ease-in-out infinite; }
.orb-shell::before { content:none; }
.orb-shell img { display:block; width:100%; height:auto; background:transparent; filter:saturate(.86) contrast(1.03); }
.hero-formula {
  position: absolute; bottom: 18px; display: flex; align-items: center; gap: 12px; font-size: .72rem; letter-spacing:.12em; text-transform:uppercase;
}
.hero-formula i { display:block; width:24px; height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); }
.hero-glow { position:absolute; width:800px; height:800px; right:-300px; top:-180px; border-radius:50%; background:radial-gradient(circle, rgba(120,112,242,.1), transparent 65%); }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

.section-heading { max-width: 880px; margin-bottom: 54px; }
.section-heading > p:last-child { max-width: 720px; font-size: 1.08rem; }
.section-heading.centered { margin-left:auto; margin-right:auto; text-align:center; }
.section-heading.centered > p:last-child { margin-left:auto; margin-right:auto; }

.services { border-top: 1px solid var(--line); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.service-card { min-height: 330px; padding: 30px; background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); border-right:1px solid var(--line); }
.service-card:last-child { border-right:0; }
.service-card:hover { background: linear-gradient(160deg, rgba(185,184,255,.085), rgba(255,255,255,.012)); }
.card-index { display:block; color:var(--accent); font-size:.78rem; letter-spacing:.14em; margin-bottom:68px; }
.service-card h3 { margin-bottom:18px; }
.service-card p { margin:0; font-size:.94rem; }

.manifesto { background: linear-gradient(180deg, rgba(255,255,255,.018), transparent); border-block:1px solid var(--line); }
.manifesto-grid { display:grid; grid-template-columns:.35fr 1fr; gap:70px; align-items:start; }
.manifesto-copy { max-width:900px; }
.manifesto-copy > p { max-width:700px; font-size:1.12rem; }
blockquote { margin:42px 0 0; padding:0 0 0 28px; border-left:1px solid var(--accent); color:#e8e9f3; font-size:clamp(1.35rem,2.4vw,2.15rem); line-height:1.35; letter-spacing:-.025em; }

.approach { overflow:hidden; }
.attraction-system { position:relative; width:min(900px, 100%); min-height:680px; margin:20px auto 0; }
.system-orbits, .orbit { position:absolute; inset:0; }
.orbit { border:1px solid rgba(185,184,255,.18); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-12deg); }
.orbit-a { width:76%; height:40%; }
.orbit-b { width:58%; height:72%; transform:translate(-50%,-50%) rotate(52deg); }
.orbit-c { width:90%; height:68%; transform:translate(-50%,-50%) rotate(18deg); border-style:dashed; opacity:.55; }
.system-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:190px; height:190px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 38% 30%, #f6f7ff 0, #babce4 25%, #686a9c 59%, #161826 76%); box-shadow:0 0 70px rgba(139,136,235,.32), inset -28px -24px 40px rgba(0,0,0,.4); }
.system-core span { color:#12131a; font-weight:850; font-size:.78rem; letter-spacing:.15em; }
.system-node { position:absolute; width:210px; padding:16px; background:rgba(13,15,22,.84); border:1px solid var(--line); border-radius:14px; backdrop-filter:blur(12px); box-shadow:var(--shadow); }
.system-node b { display:block; margin-bottom:5px; font-size:.92rem; }
.system-node small { color:var(--muted); line-height:1.35; display:block; }
.node-1 { left:4%; top:18%; }
.node-2 { right:2%; top:20%; }
.node-3 { left:2%; bottom:18%; }
.node-4 { right:4%; bottom:18%; }
.node-5 { left:50%; top:4%; transform:translateX(-50%); }
.approach-note { max-width:780px; margin:0 auto; text-align:center; font-size:1.08rem; }

.projects { border-top:1px solid var(--line); }
.project-list { display:grid; gap:26px; }
.project-card { border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(145deg, rgba(255,255,255,.028), rgba(255,255,255,.007)); overflow:hidden; box-shadow:0 0 0 rgba(0,0,0,0); transition:border-color .3s, transform .3s, box-shadow .3s; }
.project-card:hover { border-color:var(--line-strong); transform:translateY(-2px); box-shadow:0 26px 70px rgba(0,0,0,.22); }
.project-head { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; padding:34px 34px 28px; border-bottom:1px solid var(--line); }
.project-code { margin:0 0 15px; color:var(--accent); font-size:.76rem; font-weight:750; letter-spacing:.15em; }
.project-head h3 { margin-bottom:12px; font-size:clamp(1.8rem,3.3vw,3.2rem); }
.project-summary { max-width:760px; margin:0; font-size:1.02rem; }
.project-tags { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:7px; max-width:360px; }
.project-body { display:grid; grid-template-columns:.9fr 1.1fr; min-height:560px; }
.project-content { padding:34px; display:flex; flex-direction:column; gap:28px; border-right:1px solid var(--line); }
.project-focus, .project-result { padding:22px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(255,255,255,.018); }
.project-focus span, .project-result span { display:block; color:var(--accent); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; }
.project-focus p, .project-result p { margin:0; color:#c5c9d7; }
.project-content h4 { margin:0 0 14px; font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; color:#d7d9e4; }
.project-content ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.project-content li { color:#aeb3c4; position:relative; padding-left:18px; }
.project-content li::before { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:var(--accent); left:0; top:.68em; box-shadow:0 0 10px var(--accent); }
.project-result { margin-top:auto; }
.result-accent { background:linear-gradient(135deg, rgba(185,184,255,.12), rgba(255,255,255,.018)); }
.result-accent strong { color:#fff; font-size:1.2em; }
.creative-carousel {
  min-width: 0;
  min-height: 560px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent;
}
.creative-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: transparent;
  outline: none;
  touch-action: pan-y;
}
.creative-viewport:focus-visible {
  border-color: rgba(185,184,255,.62);
  box-shadow: 0 0 0 3px rgba(185,184,255,.12);
}
.creative-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(2.5%);
  transition: opacity .32s ease, transform .32s ease, visibility .32s;
  background: transparent;
}
.creative-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  z-index: 1;
}
.creative-slide img,
.creative-slide video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}
.creative-controls {
  display: grid;
  grid-template-columns: 46px auto 1fr 46px;
  align-items: center;
  gap: 12px;
}
.carousel-button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  color: #eef0fa;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.carousel-button:hover {
  border-color: var(--line-strong);
  background: rgba(185,184,255,.08);
  transform: translateY(-1px);
}
.carousel-button:focus-visible,
.carousel-dots button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.carousel-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c6cad8;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.carousel-status i {
  width: 24px;
  height: 1px;
  background: var(--line-strong);
}
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #555b70;
  cursor: pointer;
  transition: width .2s, border-radius .2s, background .2s;
}
.carousel-dots button.is-active {
  width: 24px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(185,184,255,.36);
}

.process { border-top:1px solid var(--line); }
.process-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.process-list li { display:grid; grid-template-columns:100px .42fr 1fr; align-items:start; gap:30px; padding:30px 0; border-bottom:1px solid var(--line); }
.process-list > li > span { color:var(--accent); font-size:.75rem; letter-spacing:.15em; }
.process-list h3 { margin:0; }
.process-list p { margin:4px 0 0; max-width:620px; }

.about { background:linear-gradient(130deg, rgba(185,184,255,.045), rgba(255,255,255,.005)); border-block:1px solid var(--line); }
.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; }
.about-copy { max-width:710px; }
.about-copy .lead { color:#e4e6f1; font-size:1.35rem; }
.about-copy p { font-size:1.04rem; }

.principles-grid { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.principles-grid article { min-height:260px; padding:34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.principles-grid article:nth-child(2n){border-right:0}.principles-grid article:nth-child(n+3){border-bottom:0}
.principles-grid h3 { max-width:460px; }
.principles-grid p { max-width:520px; }

.faq { border-top:1px solid var(--line); }
.faq-grid { display:grid; grid-template-columns:.65fr 1fr; gap:70px; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { cursor:pointer; list-style:none; padding:25px 36px 25px 0; position:relative; font-weight:650; color:#e5e7f0; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:2px; font-size:1.35rem; color:var(--accent); font-weight:400; transition:transform .2s; }
details[open] summary::after { transform:rotate(45deg); }
details p { padding:0 0 25px; max-width:740px; }

.contact { overflow:hidden; text-align:center; border-top:1px solid var(--line); }
.contact-inner { position:relative; z-index:2; max-width:950px; }
.contact h2 { max-width:900px; margin-left:auto; margin-right:auto; }
.contact-inner > p:not(.eyebrow) { max-width:690px; margin:0 auto; font-size:1.1rem; }
.contact-actions { display:flex; justify-content:center; align-items:center; gap:28px; margin:38px 0 22px; }
.contact-meta { display:flex; justify-content:center; gap:22px; color:#747b90; font-size:.85rem; }
.contact-orb { position:absolute; width:650px; height:650px; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(128,126,233,.14), rgba(128,126,233,.03) 38%, transparent 70%); }

.site-footer { border-top:1px solid var(--line); padding:30px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:25px; color:#7f8699; font-size:.82rem; }
.footer-inner div { display:flex; align-items:baseline; gap:16px; }
.footer-inner strong { color:#e8e9f0; letter-spacing:.12em; }
.footer-inner p { margin:0; }
.footer-inner a:hover { color:#fff; }

.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
  .reveal { opacity:1; transform:none; }
}

@media (max-width: 1050px) {
  .site-nav { gap:16px; }
  .hero-grid { grid-template-columns:1fr .72fr; }
  .hero-visual { min-height:500px; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .service-card { border-bottom:1px solid var(--line); }
  .service-card:nth-child(2){border-right:0}.service-card:nth-child(n+3){border-bottom:0}
  .project-body { grid-template-columns:1fr; }
  .project-content { border-right:0; border-bottom:1px solid var(--line); }
  .creative-carousel { min-height:0; }
  .creative-viewport { aspect-ratio:1 / 1; }
}

@media (max-width: 820px) {
  .container { width:min(var(--max), calc(100% - 28px)); }
  .section { padding:86px 0; }
  .header-cta { display:none; }
  .menu-toggle { display:block; margin-left:auto; position:relative; z-index:104; }
  .site-header, .site-header.scrolled { background:#08090d; border-color:var(--line); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .brand { position:relative; z-index:103; }
  .site-nav { position:fixed; inset:0; z-index:101; padding:120px 28px 40px; background:#08090d; display:flex; flex-direction:column; align-items:flex-start; gap:24px; transform:translateX(100%); visibility:hidden; pointer-events:none; transition:transform .3s ease, visibility .3s; isolation:isolate; }
  .site-nav a { font-size:1.6rem; }
  .site-nav.open { transform:translateX(0); visibility:visible; pointer-events:auto; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform:translateY(-3.5px) rotate(-45deg); }
  .hero { min-height:auto; padding-top:128px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-visual { grid-row:1; min-height:390px; }
  .orb-shell { width:min(410px, 92vw); place-self:center; margin-top: 0; }
  .hero-copy { grid-row:2; }
  .hero-formula { bottom:0; }
  .manifesto-grid, .about-grid, .faq-grid { grid-template-columns:1fr; gap:30px; }
  .attraction-system { min-height:760px; }
  .system-node { width:190px; }
  .node-1 { left:0; top:17%; }.node-2{right:0;top:23%}.node-3{left:0;bottom:20%}.node-4{right:0;bottom:14%}.node-5{top:0}
  .project-head { flex-direction:column; }
  .project-tags { justify-content:flex-start; max-width:none; }
  .process-list li { grid-template-columns:60px 1fr; }
  .process-list li > div { grid-column:2; }
}

@media (max-width: 620px) {
  h1 { font-size:clamp(2.85rem, 15vw, 4.5rem); }
  h2 { font-size:clamp(2.15rem, 11vw, 3.5rem); }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { border-right:0; border-bottom:1px solid var(--line)!important; min-height:260px; }
  .service-card:last-child { border-bottom:0!important; }
  .card-index { margin-bottom:40px; }
  .attraction-system { min-height:920px; display:flex; flex-direction:column; align-items:stretch; padding-top:280px; gap:10px; }
  .system-orbits { height:280px; }
  .orbit-a { width:90%; height:44%; }.orbit-b{width:66%;height:75%}.orbit-c{width:96%;height:68%}
  .system-core { top:140px; width:140px; height:140px; }
  .system-node { position:static; width:auto; transform:none!important; }
  .project-head, .project-content { padding:24px; }
  .creative-carousel { padding:12px; gap:12px; }
  .creative-viewport { aspect-ratio:1 / 1; }
  .creative-controls { grid-template-columns:42px auto 1fr 42px; gap:9px; }
  .carousel-button { width:42px; height:42px; }
  .principles-grid { grid-template-columns:1fr; }
  .principles-grid article { border-right:0!important; border-bottom:1px solid var(--line)!important; min-height:auto; }
  .principles-grid article:last-child { border-bottom:0!important; }
  .contact-actions, .contact-meta, .footer-inner, .footer-inner div { flex-direction:column; }
  .footer-inner { align-items:flex-start; }
}