:root {
  --violet: #8F5ADE;
  --violet-bright: #BE66FF;
  --yellow: #FFFF00;
  --slate: #48525C;
  --gray: #808080;
  --ink: #2f353c;
  --muted: #68717a;
  --paper: #f5f5f4;
  --white: #ffffff;
  --dark: #171225;
  --dark-2: #21173b;
  --line: rgba(72,82,92,.18);
  --shell: min(1160px, calc(100vw - 56px));
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-snap-type:y proximity; scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width:0; height:0; display:none; }
body {
  margin:0;
  font-family:"Montserrat", Arial, sans-serif;
  background:var(--dark);
  color:var(--ink);
  overflow-x:hidden;
  font-weight:400;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

.site-header {
  position:fixed; inset:0 0 auto; height:76px; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 max(28px, calc((100vw - 1160px)/2));
  transition:background .3s ease, border-color .3s ease, color .3s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled { background:rgba(23,18,37,.92); border-color:rgba(255,255,255,.08); }
.site-header.light-theme { color:var(--slate); background:rgba(255,255,255,.94); border-color:rgba(72,82,92,.12); }
.site-header.dark-theme { color:#fff; }
.brand { position:relative; width:180px; height:42px; display:flex; align-items:center; }
.brand-logo { position:absolute; left:0; width:168px; transition:opacity .2s ease; }
.brand-logo--official { width:176px; }
.brand-logo--black { opacity:0; }
.site-header.light-theme .brand-logo--white { opacity:0; }
.site-header.light-theme .brand-logo--black { opacity:1; }
.nav { display:flex; gap:28px; font-size:13px; font-weight:600; }
.nav a { opacity:.78; }
.nav a:hover { opacity:1; }
.menu-toggle { display:none; border:0; background:none; color:inherit; font-size:24px; }

.panel {
  min-height:100svh; position:relative; display:flex; align-items:center;
  scroll-snap-align:start; padding:112px 0 76px; overflow:hidden;
}
.panel--dark { color:#fff; background:var(--dark); }
.panel--light { background:var(--white); }
.panel--mpr { color:#fff; background:linear-gradient(135deg,#21163b 0%,#2a1851 55%,#15101f 100%); }
.shell { width:var(--shell); margin-inline:auto; position:relative; z-index:2; }
.eyebrow {
  margin:0 0 18px; text-transform:uppercase; letter-spacing:.13em;
  font-size:11px; font-weight:700; opacity:.62;
}

.hero { padding-top:104px; }
.hero-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; }
.hero-copy { max-width:760px; }
.hero h1 {
  margin:0; font-size:clamp(3rem,5.5vw,5.4rem); line-height:1.02;
  letter-spacing:-.045em; font-weight:700;
}
.hero h1 span, .hero h1 em { font-weight:400; }
.hero h1 em { font-style:italic; }
.gradient-word {
  display:inline-block;
  font-weight:700;
  color:transparent;
  /* Give the glyphs a little breathing room so the final letter is never
     clipped by the inline box when background-clip:text is active. */
  padding:0 .06em 0 .015em;
  margin-left:-.015em;
  margin-right:-.06em;
  overflow:visible;
  background-image:linear-gradient(105deg,#FFFF00 0%,#FFFF00 20%,#BE66FF 54%,#8F5ADE 80%,#FFFF00 100%);
  background-size:220% 220%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:heroGradientFlow 6s ease-in-out infinite;
}
.gradient-word--delay { animation-delay:-2.4s; }
.lead {
  max-width:670px; font-size:clamp(1rem,1.45vw,1.2rem); line-height:1.65;
  color:rgba(255,255,255,.74); margin:28px 0 16px;
}
.service-strip { color:rgba(255,255,255,.56); font-size:13px; letter-spacing:.02em; }
.service-strip i { color:var(--violet-bright); font-style:normal; margin:0 8px; }
.actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:30px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 20px; border-radius:5px;
  font-weight:700; font-size:13px; transition:transform .2s ease, background .2s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn--primary { background:var(--violet-bright); color:#fff; }
.btn--primary:hover { background:var(--violet); }
.btn--ghost { color:#fff; border:1px solid rgba(255,255,255,.24); }
.text-link { font-size:13px; color:rgba(255,255,255,.68); display:inline-flex; align-items:center; gap:9px; }

.hero-grid-bg {
  position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 0 66%,rgba(190,102,255,.05) 66% 67%,transparent 67% 100%);
}
.orb { position:absolute; pointer-events:none; }
.orb--one { width:460px; height:460px; right:-180px; top:-110px; background:rgba(143,90,222,.12); transform:rotate(35deg); }
.orb--two { display:none; }
.tech-visual { width:min(380px,33vw); aspect-ratio:1; position:relative; justify-self:end; }
.brand-frame { position:absolute; inset:8%; border:1px solid rgba(255,255,255,.22); }
.brand-frame::before { content:""; position:absolute; width:46%; height:46%; right:-1px; top:-1px; border-top:5px solid var(--yellow); border-right:5px solid var(--violet-bright); }
.brand-frame::after { content:""; position:absolute; width:54%; height:54%; left:-1px; bottom:-1px; border-left:1px solid rgba(255,255,255,.4); border-bottom:1px solid rgba(255,255,255,.4); }
.brand-frame-label { position:absolute; top:-27px; left:0; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.tech-core { position:absolute; width:38%; left:50%; top:50%; transform:translate(-50%,-50%); }
.brand-frame-line { position:absolute; height:1px; background:rgba(255,255,255,.16); transform-origin:left center; }
.brand-frame-line--one { width:42%; left:8%; top:22%; transform:rotate(28deg); }
.brand-frame-line--two { width:34%; right:8%; bottom:22%; transform:rotate(-32deg); }
/* Section navigation: geometric, label-driven, no arrow glyphs */
.section-nav {
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; z-index:6;
}
.section-nav a {
  position:relative; min-width:96px; padding:10px 14px 9px;
  border:1px solid currentColor; border-radius:2px;
  font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  text-align:center; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  overflow:hidden;
}
.section-nav a::before {
  content:""; position:absolute; top:-1px; width:22px; height:3px; background:var(--yellow);
}
.section-nav__prev::before { left:-1px; }
.section-nav__next::before { right:-1px; background:var(--violet-bright); }
.section-nav--dark { color:rgba(255,255,255,.68); }
.section-nav--dark a { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.025); }
.section-nav--dark a:hover { color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); transform:translateY(-2px); }
.section-nav--light { color:var(--slate); }
.section-nav--light a { border-color:rgba(72,82,92,.22); background:rgba(255,255,255,.72); }
.section-nav--light a:hover { color:var(--violet); border-color:rgba(143,90,222,.5); background:#fff; transform:translateY(-2px); }
.section-nav--contact { bottom:72px; }

.section-heading { display:grid; grid-template-columns:1.08fr .92fr; gap:74px; align-items:end; margin-bottom:50px; }
.section-heading h2, .about h2, .contact h2 {
  margin:0; font-size:clamp(2.25rem,4vw,4rem); line-height:1.03; letter-spacing:-.035em;
  color:var(--slate); font-weight:700;
}
.section-heading > p { color:var(--muted); font-size:16px; line-height:1.7; margin:0; }
.section-heading--inverse h2, .contact h2 { color:#fff; }
.section-heading--inverse > p { color:rgba(255,255,255,.68); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.service-card { min-height:300px; padding:30px 28px 30px 0; position:relative; }
.service-card + .service-card { border-left:1px solid var(--line); padding-left:28px; }
.service-card h3 { font-size:23px; line-height:1.15; letter-spacing:-.025em; margin:22px 0 18px; max-width:280px; color:var(--slate); }
.service-card p { color:var(--muted); line-height:1.72; font-size:14px; }
.section-cta { display:inline-flex; align-items:center; justify-content:center; margin-top:30px; padding:14px 18px; border-radius:4px; background:var(--violet); color:var(--white); font-weight:700; font-size:13px; transition:background .2s ease, transform .2s ease; }
.section-cta:hover { background:var(--violet-bright); transform:translateY(-1px); }

.mpr-grid { position:absolute; inset:0; background:linear-gradient(145deg,transparent 0 72%,rgba(190,102,255,.08) 72% 73%,transparent 73%); }
.mpr-flow { display:grid; grid-template-columns:1fr 44px 1fr 44px 1fr; align-items:stretch; margin-top:12px; }
.mpr-step { border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.025); border-radius:6px; padding:26px; min-height:260px; display:flex; flex-direction:column; justify-content:space-between; }
.mpr-letter { width:52px; height:52px; display:grid; place-items:center; font-size:24px; font-weight:700; color:#fff; background:var(--violet); }
.mpr-step span { display:block; font-size:22px; font-weight:700; margin-bottom:12px; }
.mpr-step p { margin:0; color:rgba(255,255,255,.66); line-height:1.68; font-size:14px; }
.flow-line { align-self:center; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.12),var(--violet-bright)); }
.mpr-tagline { text-align:center; color:rgba(255,255,255,.72); margin:30px 0 0; font-weight:600; font-size:14px; }

.about-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:92px;
  align-items:stretch;
}
.about-brand-panel {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-brand-logo {
  display:block;
  width:min(285px, 82%);
  height:auto;
  margin:0 auto;
}

.about-copy { padding-top:0; min-width:0; align-self:center; }
.about-copy p { max-width:700px; color:var(--muted); line-height:1.76; font-size:15px; }
.about-copy .about-lead { color:var(--slate); font-size:20px; line-height:1.6; font-weight:500; }
blockquote { margin:40px 0 0; padding:20px 0 20px 24px; border-left:3px solid var(--violet); font-size:clamp(1.35rem,2.3vw,2.2rem); line-height:1.3; letter-spacing:-.025em; font-weight:600; color:var(--slate); }

.contact { flex-direction:column; justify-content:center; align-items:stretch; }
.contact-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:end; }
.contact h2 { max-width:680px; }
.contact-links { border-top:1px solid rgba(255,255,255,.16); }
.contact-links a { display:block; padding:21px 0; border-bottom:1px solid rgba(255,255,255,.16); }
.contact-links span { display:block; color:rgba(255,255,255,.46); font-size:10px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:7px; }
.contact-links strong { font-size:16px; font-weight:600; }
.contact-glow { position:absolute; width:430px; height:430px; left:-180px; bottom:-180px; background:rgba(143,90,222,.08); transform:rotate(30deg); }
.site-footer { position:absolute; left:50%; transform:translateX(-50%); bottom:22px; display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,.4); font-size:11px; }
.site-footer img { width:122px; opacity:.82; }

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








/* Final responsive safeguards */
.hero-copy, .section-heading > *, .service-card, .mpr-step, .about-copy, .contact-layout > *, .contact-links { min-width:0; }
.contact-links strong { overflow-wrap:anywhere; }
.section-heading h2, .contact h2, blockquote { overflow-wrap:break-word; }

@keyframes heroGradientFlow {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}

@media (max-width:900px) {
  :root { --shell:min(100% - 36px,1160px); }
  .site-header { padding:0 18px; height:70px; }
  .brand { width:154px; }
  .brand-logo { width:148px; }
  .brand-logo--official { width:154px; }
  
  .menu-toggle { display:block; }
  .nav { position:absolute; top:70px; left:18px; right:18px; background:rgba(23,18,37,.98); color:#fff; border:1px solid rgba(255,255,255,.1); padding:18px; display:none; flex-direction:column; gap:18px; }
  .nav.open { display:flex; }
  .hero-layout, .section-heading, .about-layout, .contact-layout { grid-template-columns:1fr; gap:36px; }
  .hero h1 { font-size:clamp(2.9rem,12vw,5rem); }
  .tech-visual { position:absolute; width:250px; right:-105px; top:130px; opacity:.25; }
  .services-grid { grid-template-columns:1fr; }
  .service-card, .service-card + .service-card { min-height:auto; padding:26px 0; border-left:0; border-bottom:1px solid var(--line); }
  .service-card:last-child { border-bottom:0; }
  .service-card h3 { margin:22px 0 12px; }
  .mpr-flow { grid-template-columns:1fr; gap:12px; }
  .flow-line { width:1px; height:22px; justify-self:center; background:linear-gradient(var(--violet-bright),var(--violet)); }
  .mpr-step { min-height:220px; }
  .about-copy { padding-top:0; }
  .site-footer { position:relative; left:auto; transform:none; bottom:auto; margin-top:54px; gap:20px; }
  .section-nav--contact { position:relative; left:auto; bottom:auto; transform:none; width:var(--shell); margin:34px auto 0; justify-content:center; }
  .panel { min-height:auto; padding:104px 0 84px; }
  .hero { min-height:100svh; }
}


@media (max-width:640px) {
  :root { --shell:min(100% - 28px,1160px); }
  .site-header { height:64px; padding:0 14px; }
  .brand { width:142px; height:38px; }
  .brand-logo { width:138px; }
  .brand-logo--official { width:144px; }
  .nav { top:64px; left:14px; right:14px; }
  .panel { padding:92px 0 86px; }
  .hero { padding-top:88px; }
  .hero h1 { font-size:clamp(2.55rem,13.5vw,4.1rem); line-height:1.01; letter-spacing:-.04em; }
  .lead { margin-top:22px; }
  .service-strip { line-height:1.8; }
  .actions { align-items:stretch; gap:12px; margin-top:24px; }
  .btn { width:100%; min-height:46px; padding:0 16px; }
  .text-link { justify-content:center; min-height:42px; }
  .tech-visual { width:205px; right:-96px; top:120px; }
  .section-heading { gap:20px; margin-bottom:30px; }
  .section-heading h2, .contact h2 { font-size:clamp(2rem,11vw,3.1rem); }
  .section-heading > p { font-size:14px; }
  .service-card h3 { font-size:21px; margin-top:8px; }
  .section-cta { width:100%; text-align:center; line-height:1.4; }
  .mpr-step { min-height:0; padding:22px; }
  .mpr-letter { width:46px; height:46px; font-size:21px; margin-bottom:30px; }
  .about-layout { gap:30px; }
  .about-brand-panel { min-height:210px; }
  .about-brand-logo { width:min(260px, 75vw); }
  .about-copy .about-lead { font-size:18px; }
  blockquote { margin-top:28px; padding:16px 0 16px 18px; font-size:clamp(1.25rem,7vw,1.8rem); }
  .contact-layout { gap:36px; }
  .contact-links strong { font-size:14px; }
  .section-nav { bottom:14px; width:calc(100% - 28px); justify-content:center; }
  .section-nav a { min-width:92px; padding-inline:11px; }
  .site-footer { margin-top:78px; flex-direction:column; align-items:flex-start; }
}

@media (max-height:720px) and (min-width:901px) {
  .panel { padding-top:94px; padding-bottom:64px; }
  .hero h1 { font-size:clamp(2.8rem,5vw,4.5rem); }
  .service-card { min-height:250px; }
  .mpr-step { min-height:230px; }
  .section-heading { margin-bottom:34px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}