:root {
  --bg: #060a16;
  --bg-soft: #0a1128;
  --navy-deep: #071335;
  --blue-bright: #2f6bff;
  --cyan: #22d3ee;
  --cyan-soft: #7fe9ff;
  --ink: #eef3ff;
  --ink-dim: #93a2c4;
  --line: rgba(148, 168, 220, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: "Inter", sans-serif; }
a { color: inherit; text-decoration: none; }

.about-grid { position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(47, 107, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 107, 255, .04) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom, black, transparent 86%); }
.about-glow { position: fixed; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(30px); }
.about-glow-one { width: 680px; height: 680px; top: -300px; right: -260px; background: radial-gradient(circle, rgba(13, 79, 209, .29), transparent 67%); }
.about-glow-two { width: 540px; height: 540px; top: 50%; left: -330px; background: radial-gradient(circle, rgba(34, 211, 238, .12), transparent 68%); }

main { position: relative; z-index: 2; padding-top: 84px; }
.about-hero { display: grid; width: min(1080px, calc(100% - 64px)); min-height: calc(100vh - 84px); margin: 0 auto; padding: 80px 0; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(44px, 6vw, 80px); }
.hero-copy { animation: hero-copy-in 1s cubic-bezier(.16, 1, .3, 1) both; }
.about-label { display: inline-flex; margin-bottom: 24px; align-items: center; gap: 10px; color: var(--cyan-soft); font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: .14em; }
.about-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 13px var(--cyan); animation: dot-pulse 1.8s ease-in-out infinite; }
.hero-copy h1 { max-width: 780px; font: 600 clamp(48px, 6.4vw, 88px)/1 "Space Grotesk", sans-serif; letter-spacing: -.048em; }
.hero-copy h1 span { display: block; background: linear-gradient(100deg, var(--cyan), var(--blue-bright), var(--cyan-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy > p { max-width: 650px; margin-top: 28px; color: var(--ink-dim); font-size: 17px; line-height: 1.75; }

.hero-system { position: relative; width: min(42vw, 500px); aspect-ratio: 1; margin: auto; animation: system-in 1.2s .15s cubic-bezier(.16, 1, .3, 1) both; }
.hero-system::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, .2), rgba(47, 107, 255, .08) 45%, transparent 70%); filter: blur(12px); animation: core-breathe 3.8s ease-in-out infinite; }
.system-orbit { position: absolute; border: 1px solid rgba(126, 233, 255, .27); border-radius: 50%; }
.system-orbit::after { content: ""; position: absolute; width: 8px; height: 8px; top: 12%; left: 20%; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.system-orbit-one { inset: 8%; animation: orbit 13s linear infinite; }
.system-orbit-two { inset: 22%; border-style: dashed; animation: orbit-reverse 9s linear infinite; }
.system-core { position: absolute; inset: 35%; display: grid; place-items: center; border: 1px solid rgba(126, 233, 255, .3); border-radius: 28%; background: linear-gradient(145deg, rgba(47, 107, 255, .2), rgba(6, 10, 22, .92)); box-shadow: 0 0 55px rgba(34, 211, 238, .14); animation: core-float 4.4s ease-in-out infinite; }
.system-core span { position: absolute; inset: -18%; border: 1px solid rgba(34, 211, 238, .12); border-radius: 32%; }
.system-core img { width: 54%; filter: drop-shadow(0 0 18px rgba(34, 211, 238, .5)); }
.system-tag { position: absolute; padding: 8px 11px; border: 1px solid rgba(126, 233, 255, .18); border-radius: 8px; background: rgba(7, 19, 53, .8); color: var(--cyan-soft); font: 500 9px/1 "JetBrains Mono", monospace; letter-spacing: .1em; backdrop-filter: blur(10px); }
.tag-strategy { top: 14%; left: 3%; }
.tag-design { top: 24%; right: 0; }
.tag-build { bottom: 19%; left: 2%; }
.tag-growth { right: 7%; bottom: 10%; }

.about-story { position: relative; width: min(960px, calc(100% - 64px)); margin: 0 auto; padding: 40px 0 130px; }
.story-intro { display: grid; padding: 90px 0; grid-template-columns: 170px 1fr; gap: 45px; border-top: 1px solid var(--line); }
.section-number, .card-index { color: var(--cyan-soft); font: 500 10px/1.4 "JetBrains Mono", monospace; letter-spacing: .12em; }
.story-intro > div { display: grid; gap: 25px; }
.story-intro p, .content-panel > p, .content-card p, .statement-panel p { color: var(--ink-dim); font-size: 16px; line-height: 1.82; }
.story-intro .lead { color: var(--ink); font: 500 clamp(25px, 3vw, 39px)/1.35 "Space Grotesk", sans-serif; letter-spacing: -.025em; }

.content-panel { padding: clamp(30px, 5vw, 60px); border: 1px solid rgba(126, 233, 255, .14); border-radius: 25px; background: radial-gradient(circle at 100% 0, rgba(34, 211, 238, .1), transparent 36%), linear-gradient(145deg, rgba(12, 25, 58, .9), rgba(7, 13, 31, .94)); box-shadow: 0 28px 75px rgba(0, 0, 0, .22); }
.panel-heading { display: grid; margin-bottom: 28px; grid-template-columns: 62px 1fr; align-items: start; gap: 20px; }
.panel-heading > span { color: rgba(126, 233, 255, .32); font: 600 15px/1 "JetBrains Mono", monospace; }
.panel-heading h2, .content-card h2 { font: 600 clamp(28px, 3.5vw, 46px)/1.12 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.content-panel > p { max-width: 950px; margin-left: 82px; }
.service-pills { display: flex; margin: 35px 0 0 82px; flex-wrap: wrap; gap: 9px; }
.service-pills span { padding: 9px 12px; border: 1px solid rgba(34, 211, 238, .17); border-radius: 999px; color: var(--cyan-soft); font: 500 10px/1 "JetBrains Mono", monospace; }

.content-grid { display: grid; margin-top: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.content-card { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 255, 255, .025); transition: transform .35s ease, border-color .35s ease, background .35s ease; }
.content-card:hover { transform: translateY(-6px); border-color: rgba(34, 211, 238, .25); background: rgba(34, 211, 238, .035); }
.content-card h2 { margin: 25px 0 20px; font-size: clamp(27px, 3vw, 39px); }

.statement-panel { display: grid; margin: 90px 0; padding: 60px 0; grid-template-columns: 170px 1fr; gap: 45px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statement-panel p { color: var(--ink); font: 500 clamp(25px, 3.2vw, 42px)/1.38 "Space Grotesk", sans-serif; letter-spacing: -.025em; }

.closing-statement { display: grid; margin-top: 90px; padding: clamp(38px, 7vw, 80px); justify-items: center; border: 1px solid rgba(126, 233, 255, .16); border-radius: 28px; background: radial-gradient(circle at 50% -20%, rgba(47, 107, 255, .25), transparent 52%), rgba(8, 17, 40, .86); text-align: center; }
.closing-statement img { width: 58px; margin-bottom: 28px; filter: drop-shadow(0 0 20px rgba(34, 211, 238, .45)); }
.closing-statement p { max-width: 930px; font: 500 clamp(27px, 3.7vw, 48px)/1.3 "Space Grotesk", sans-serif; letter-spacing: -.03em; }
.closing-statement a { display: inline-flex; margin-top: 34px; padding: 13px 22px; align-items: center; gap: 12px; border-radius: 999px; background: linear-gradient(135deg, var(--blue-bright), var(--cyan)); color: #04101f; font-size: 14px; font-weight: 700; box-shadow: 0 14px 35px -13px rgba(34, 211, 238, .75); transition: transform .25s ease; }
.closing-statement a:hover { transform: translateY(-3px); }

.reveal-left, .reveal-up { opacity: 0; filter: blur(6px); transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1), filter .9s ease; transition-delay: var(--delay, 0s); }
.reveal-left { transform: translateX(-70px); }
.reveal-up { transform: translateY(-65px); }
.about-visible { opacity: 1; transform: none; filter: none; }

@keyframes hero-copy-in { from { opacity: 0; transform: translateX(-65px); filter: blur(9px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes system-in { from { opacity: 0; transform: translateY(-55px) scale(.92); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dot-pulse { 50% { opacity: .45; transform: scale(.7); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes core-breathe { 50% { opacity: .65; transform: scale(1.12); } }
@keyframes core-float { 50% { transform: translateY(-10px) rotate(2deg); } }

@media (max-width: 980px) {
  .about-hero { width: min(100% - 36px, 760px); min-height: auto; padding: 80px 0 100px; grid-template-columns: 1fr; }
  .hero-system { width: min(78vw, 470px); }
  .about-story { width: min(100% - 36px, 760px); }
  .story-intro, .statement-panel { grid-template-columns: 1fr; gap: 30px; }
  .content-panel > p, .service-pills { margin-left: 0; }
}

@media (max-width: 680px) {
  main { padding-top: 72px; }
  .about-grid { background-size: 48px 48px; }
  .about-hero, .about-story { width: calc(100% - 28px); }
  .about-hero { padding: 58px 0 75px; gap: 44px; }
  .hero-copy h1 { font-size: clamp(39px, 12vw, 58px); overflow-wrap: anywhere; }
  .hero-copy > p { font-size: 15px; }
  .hero-system { width: min(91vw, 390px); }
  .about-story { padding-bottom: 85px; }
  .story-intro { padding: 70px 0; }
  .content-grid { grid-template-columns: 1fr; }
  .panel-heading { grid-template-columns: 1fr; gap: 13px; }
  .content-panel { border-radius: 20px; }
  .statement-panel { margin: 70px 0; }
  .closing-statement { margin-top: 70px; border-radius: 21px; }
  .system-tag { font-size: 8px; }
}

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