/* ==========================================================
   MAKE IT SO — creative marketing agency
   Electric blue + LCARS-console colours, warp-speed motion
   ========================================================== */

:root {
  --ink: #050817;
  --navy: #07103a;
  --blue: #0b3bff;
  --blue-2: #0726c9;
  --orange: #ff6a1f;
  --gold: #ffb800;
  --lav: #b9a4ff;
  --pink: #ff5fa8;
  --mint: #36f1b6;
  --cyan: #4de4ff;
  --cream: #fff6ea;
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--orange); color: var(--navy); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; color: var(--navy); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 16px; }
.wrap { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.shell { padding: 16px; display: grid; gap: 16px; }

/* ---------- ambient background (dark sections) ---------- */
.cosmos { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at 20% 0%, #10175a 0%, var(--ink) 60%); }
.cosmos::before {
  content: ""; position: absolute; inset: 0; opacity: .7;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 120px, #bdf, transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, #fff, transparent),
    radial-gradient(1px 1px at 230px 190px, #fdf, transparent),
    radial-gradient(1.2px 1.2px at 60px 220px, #fff, transparent);
  background-size: 260px 260px;
  animation: twinkle 5s ease-in-out infinite alternate;
}
.nebula { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; animation: drift 24s ease-in-out infinite alternate; }
.n1 { width: 46vw; height: 46vw; left: -12vw; top: 20vh; background: #5b2df0; }
.n2 { width: 40vw; height: 40vw; right: -10vw; top: 55vh; background: #ff3d8b; animation-delay: -8s; opacity: .32; }
.n3 { width: 34vw; height: 34vw; left: 35vw; bottom: -14vw; background: #00b8ff; animation-delay: -15s; opacity: .3; }

@keyframes twinkle { from { opacity: .35; transform: translateY(0); } to { opacity: .9; transform: translateY(-10px); } }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vw, -6vh, 0) scale(1.18); } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  border: 0; border-radius: 18px; cursor: pointer;
  padding: 10px 10px 10px 24px;
  font: 700 1rem/1 var(--font-display);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-lg { font-size: 1.15rem; padding: 10px 10px 10px 28px; }
.btn-sm { padding: 12px 20px; font-size: .95rem; }
.btn-orange { background: var(--orange); color: var(--navy); box-shadow: 0 10px 30px -8px rgba(255, 106, 31, .7); }
.btn-orange:hover { background: #ff8546; box-shadow: 0 16px 36px -8px rgba(255, 106, 31, .85); }
.btn-white { background: #fff; color: var(--blue-2); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: #10195c; }
.chip { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #fff; color: var(--orange); font-size: 1.3rem; transition: transform .3s var(--ease); }
.btn-dark .chip { color: var(--navy); }
.btn:hover .chip { transform: translateX(4px) rotate(-8deg); }
.link-arrow { display: inline-block; margin-left: 26px; font-weight: 700; border-bottom: 2px solid rgba(255, 255, 255, .5); padding-bottom: 2px; transition: border-color .2s; }
.link-arrow:hover { border-color: #fff; }

/* ---------- panel + hero ---------- */
.panel { position: relative; overflow: hidden; isolation: isolate; border-radius: 40px; }
.hero { background: linear-gradient(160deg, #1a4dff 0%, var(--blue) 42%, var(--blue-2) 100%); }
.blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; animation: drift 18s ease-in-out infinite alternate; pointer-events: none; }
.b1 { width: 520px; height: 520px; right: -140px; top: -160px; background: #ff5fa8; opacity: .55; }
.b2 { width: 480px; height: 480px; left: -160px; bottom: -180px; background: #00d4ff; opacity: .45; animation-delay: -6s; }
.b3 { width: 380px; height: 380px; left: 42%; top: 30%; background: #8a4dff; opacity: .5; animation-delay: -11s; }
.warp { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.nav { display: flex; align-items: center; gap: 28px; padding: 26px clamp(22px, 4vw, 48px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 1.5rem/1 var(--font-display); letter-spacing: -.05em; }
.brand em { font-style: normal; color: var(--orange); }
.nav-links { display: flex; gap: 34px; margin-inline: auto; font-weight: 500; }
.nav-links a { opacity: .9; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); }
.menu-btn { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .16); cursor: pointer; position: relative; }

/* language switcher */
.lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(5, 8, 23, .3); backdrop-filter: blur(8px); flex: none; }
.lang button { border: 0; background: transparent; color: #fff; font: 700 .76rem/1 var(--font-display); letter-spacing: .06em; padding: 9px 12px; border-radius: 99px; cursor: pointer; transition: background .2s, color .2s; }
.lang button:hover { background: rgba(255, 255, 255, .18); }
.lang button[aria-pressed="true"] { background: #fff; color: var(--blue-2); }
.lang-footer { background: rgba(255, 255, 255, .08); }
.lang-footer button[aria-pressed="true"] { color: var(--navy); }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-btn span:first-child { top: 18px; }
.menu-btn span:last-child { top: 26px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }

.hero-inner { padding: 8px clamp(22px, 4vw, 48px) 0; }
.logline { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: rgba(5, 8, 23, .28); padding: 9px 16px; border-radius: 99px; backdrop-filter: blur(8px); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(54, 241, 182, .7); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(54, 241, 182, 0); } 100% { box-shadow: 0 0 0 0 rgba(54, 241, 182, 0); } }

.hero-title { margin: 20px 0 0; font: 800 clamp(3.4rem, 8.6vw, 8rem)/.9 var(--font-display); letter-spacing: -.06em; word-spacing: .08em; }
.hero-title span { display: block; }
.hero-title b { color: var(--orange); }

.hero-lower { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; align-items: stretch; margin-top: 26px; }
.hero-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding-bottom: 44px; }
.hero-cta-group { display: grid; gap: 28px; }
.lead { max-width: 480px; font-size: 1.12rem; line-height: 1.65; color: rgba(255, 255, 255, .92); }
.stats { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.stats dt { font: 800 clamp(2.2rem, 4vw, 3.2rem)/1 var(--font-display); letter-spacing: -.05em; }
.stats dd { margin-top: 6px; font-size: .85rem; line-height: 1.35; color: rgba(255, 255, 255, .8); }

/* ---------- hero stage: mascot + chat ---------- */
.hero-stage { position: relative; min-height: 470px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px), 0); transition: transform .3s ease-out; }
.orbit { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .38); pointer-events: none; animation: spin 46s linear infinite; }
.orbit::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; top: 12%; left: 8%; background: var(--gold); box-shadow: 0 0 22px var(--gold); }
.o1 { width: 470px; height: 470px; left: 4%; bottom: 20px; }
.o2 { width: 320px; height: 320px; left: 14%; bottom: 96px; animation-duration: 30s; animation-direction: reverse; border-style: solid; border-color: rgba(255, 255, 255, .18); }
.o2::after { background: var(--pink); box-shadow: 0 0 22px var(--pink); top: auto; bottom: 10%; left: auto; right: 12%; width: 12px; height: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

.mascot { position: relative; z-index: 1; width: min(380px, 46vw); height: auto; margin-right: -26px; flex: none; animation: float 5s ease-in-out infinite; filter: drop-shadow(0 26px 30px rgba(3, 12, 90, .45)); }
@keyframes float { 50% { transform: translateY(-14px) rotate(-1deg); } }
.mascot .eye { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
.mascot .steam { stroke-linecap: round; stroke-dasharray: 90; stroke-dashoffset: 90; opacity: 0; animation: steam 3s ease-in-out infinite; }
.mascot .s2 { animation-delay: 1.2s; }
@keyframes steam { 0% { stroke-dashoffset: 90; opacity: 0; } 30% { opacity: .85; } 100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-24px); } }
.mascot .spark { transform-box: fill-box; transform-origin: center; animation: twinkle-star 3.2s ease-in-out infinite; }
@keyframes twinkle-star { 50% { transform: rotate(20deg) scale(1.18); } }

/* the robot's screen face: one mood shows at a time (the chat script swaps them) */
.mascot .mood { opacity: 0; transition: opacity .25s ease; }
.mascot[data-mood="smug"] .m-smug,
.mascot[data-mood="hmm"] .m-hmm,
.mascot[data-mood="think"] .m-think,
.mascot[data-mood="engage"] .m-engage { opacity: 1; }
.mascot:hover .mood { opacity: 0; }
.mascot:hover .m-engage { opacity: 1; }
.mascot .dot { animation: pulse-dot 1s ease-in-out infinite; }
.mascot .d2 { animation-delay: .15s; }
.mascot .d3 { animation-delay: .3s; }
@keyframes pulse-dot { 50% { opacity: .25; } }

.chat { position: relative; z-index: 2; width: min(330px, 100%); flex: none; background: #090e2b; border-radius: 32px; padding: 22px; box-shadow: 0 30px 60px -20px rgba(2, 8, 70, .7); border: 1px solid rgba(255, 255, 255, .08); transition: box-shadow .5s; }
.chat.engaged { box-shadow: 0 30px 70px -18px rgba(2, 8, 70, .8), 0 0 0 2px rgba(54, 241, 182, .5), 0 0 40px rgba(54, 241, 182, .25); }
.chat header { display: flex; align-items: center; gap: 12px; }
.chat header div { display: grid; }
.chat header strong { font: 700 1.05rem/1.2 var(--font-display); }
.chat header small { color: rgba(255, 255, 255, .55); font-size: .78rem; }
.online { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.avatar { margin-left: auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; color: #fff; background: conic-gradient(from 200deg, var(--orange), var(--pink), var(--blue), var(--orange)); animation: spin 8s linear infinite; }
.messages { display: grid; gap: 10px; margin: 22px 0 16px; min-height: 236px; align-content: end; }
.msg { max-width: 88%; padding: 11px 15px; font-size: .86rem; line-height: 1.4; border-radius: 18px; }
.msg.them { background: #20264a; color: #dde2ff; border-bottom-left-radius: 5px; justify-self: start; }
.msg.us { background: var(--blue); color: #fff; border-bottom-right-radius: 5px; justify-self: end; text-align: right; }
.msg.hot { background: var(--orange); color: var(--navy); font-weight: 700; }
.js .msg { display: none; }
.js .msg.in, .js .msg.typing { display: block; animation: pop .45s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.94); } }
.msg.typing { display: flex; gap: 5px; padding: 15px 16px; }
.msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .5; animation: dots 1s infinite; }
.msg.typing i:nth-child(2) { animation-delay: .15s; }
.msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 40% { transform: translateY(-5px); opacity: 1; } }
.composer { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 99px; padding: 8px 8px 8px 18px; min-height: 52px; font-size: .88rem; color: #fff; }
.composer .typed:empty::before { content: attr(data-placeholder); color: rgba(255, 255, 255, .45); }
.typed.on::after { content: "▍"; color: var(--gold); animation: blink-caret .8s steps(1) infinite; }
@keyframes blink-caret { 50% { opacity: 0; } }
.replay { margin-left: auto; width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; font-size: 1.1rem; transition: transform .4s var(--ease), background .2s; }
.replay:hover { transform: rotate(180deg); background: rgba(255, 255, 255, .25); }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; padding: 14px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; gap: 14px; width: max-content; animation: marquee 44s linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
.pill { flex: none; padding: 13px 26px; border-radius: 99px; font: 700 1.05rem/1 var(--font-display); color: var(--navy); }
.p1 { background: var(--orange); } .p2 { background: var(--lav); } .p3 { background: var(--mint); }
.p4 { background: var(--gold); } .p5 { background: var(--cyan); } .p6 { background: var(--pink); }
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }

/* ---------- sections ---------- */
.section { padding: clamp(70px, 10vw, 130px) 0; border-radius: 40px; }
.section.light { background: var(--cream); color: var(--navy); }
.head { max-width: 900px; margin-bottom: 52px; }
.head h2, .cta h2 { font: 800 clamp(2.6rem, 6.4vw, 5.4rem)/.96 var(--font-display); letter-spacing: -.055em; word-spacing: .06em; }
.head h2 span { background: linear-gradient(100deg, var(--gold), var(--orange) 45%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.light .head h2 span { background: linear-gradient(100deg, var(--blue), #8a4dff 60%, var(--pink)); -webkit-background-clip: text; background-clip: text; }
.sub { margin-top: 22px; max-width: 540px; font-size: 1.08rem; color: rgba(255, 255, 255, .72); }
.light .sub { color: rgba(7, 16, 58, .7); }
.kicker { margin: 16px 0 18px; font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.light .kicker { color: var(--blue); }
.kicker.dark { color: var(--navy); }

.lcars { display: flex; gap: 6px; height: 16px; }
.lcars i { display: block; height: 100%; border-radius: 99px; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.lcars i:nth-child(1) { width: 70px; background: var(--orange); border-radius: 99px 6px 6px 99px; }
.lcars i:nth-child(2) { width: 34px; background: var(--lav); border-radius: 6px; transition-delay: .1s; }
.lcars i:nth-child(3) { width: 150px; background: var(--cyan); border-radius: 6px 99px 99px 6px; transition-delay: .2s; }
.js .reveal:not(.in) .lcars i { transform: scaleX(0); }
.lcars i, .reveal.in .lcars i { transform: scaleX(1); }

/* ---------- departments (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.svc { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; min-height: 320px; padding: 28px; border-radius: 34px; color: var(--navy); transition: transform .4s var(--ease), box-shadow .4s; }
.svc:hover { transform: translateY(-8px) rotate(-.5deg); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .6); }
.svc::after { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -70px; border-radius: 50%; background: rgba(255, 255, 255, .28); transition: transform .6s var(--ease); }
.svc:hover::after { transform: scale(1.5); }
.svc .num { font: 700 .85rem/1 var(--font-display); letter-spacing: .12em; opacity: .7; position: relative; z-index: 1; }
.svc .ico { position: absolute; right: 26px; top: 26px; z-index: 1; width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.svc:hover .ico { transform: rotate(-12deg) scale(1.15); }
.svc > div { position: relative; z-index: 1; }
.svc h3 { font: 800 clamp(1.6rem, 2.4vw, 2.1rem)/1.05 var(--font-display); letter-spacing: -.04em; margin-bottom: 12px; }
.svc p { font-size: .97rem; line-height: 1.5; max-width: 340px; opacity: .85; }
.svc ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.svc li { font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 99px; border: 1.5px solid currentColor; opacity: .8; }
.svc-more { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font: 800 .88rem/1 var(--font-display); }
.svc-more b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--navy); background: rgba(255, 255, 255, .82); transition: transform .3s var(--ease); }
.svc:hover .svc-more b, .svc:focus-visible .svc-more b { transform: translateX(5px); }
.c-orange { background: var(--orange); } .c-lav { background: var(--lav); } .c-mint { background: var(--mint); }
.c-blue { background: var(--blue); color: #fff; } .c-pink { background: var(--pink); } .c-gold { background: var(--gold); }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; }

/* ---------- service detail pages ---------- */
.service-route { min-height: 100vh; }
.service-header, .service-footer { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.service-header { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.service-header .brand { flex: none; }
.service-nav { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 30px); color: rgba(255, 255, 255, .82); font-size: .9rem; font-weight: 700; }
.service-links { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 30px); }
.service-links a { transition: color .2s; }
.service-links a:hover { color: #fff; }
.service-nav .lang { margin-left: 4px; }
.service-nav .btn { flex: none; }
.service-page { --service-color: var(--orange); --detail-ink: var(--navy); }
.detail-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 16px; padding: clamp(44px, 7vw, 78px) 0; border-radius: 40px; color: var(--detail-ink); background: linear-gradient(130deg, color-mix(in srgb, var(--service-color) 78%, #fff), var(--service-color) 55%, color-mix(in srgb, var(--service-color) 84%, #fff)); }
.detail-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .4; background-image: radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 90px 120px, #fff, transparent), radial-gradient(1.5px 1.5px at 160px 60px, #fff, transparent), radial-gradient(1px 1px at 230px 190px, #fff, transparent); background-size: 260px 260px; }
.detail-orbit { position: absolute; z-index: -1; width: 510px; height: 510px; top: -120px; right: -70px; border: 1px solid rgba(7, 16, 58, .2); border-radius: 50%; box-shadow: 0 0 0 50px rgba(7, 16, 58, .035), 0 0 0 100px rgba(7, 16, 58, .035), 0 0 0 150px rgba(7, 16, 58, .035); }
.detail-wrap { width: min(1120px, calc(100% - 56px)); margin-inline: auto; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); align-items: center; gap: clamp(38px, 7vw, 96px); }
.detail-back { display: inline-block; margin-bottom: 24px; font: 800 .78rem/1.2 var(--font-display); opacity: .75; }
.detail-back:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.detail-kicker, .detail-overline { color: color-mix(in srgb, var(--service-color) 72%, #08113a); font: 800 .75rem/1.4 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.detail-kicker { margin: 8px 0 20px; }
.detail-copy h1 { font: 800 clamp(3.5rem, 7vw, 6.4rem)/.9 var(--font-display); letter-spacing: -.075em; }
.detail-copy h1 span { color: #fff; }
.detail-intro { max-width: 620px; margin-top: 24px; font-size: 1.08rem; line-height: 1.6; font-weight: 500; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.detail-tags li { padding: 6px 12px; border: 1.5px solid currentColor; border-radius: 99px; font-size: .77rem; font-weight: 800; }
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.detail-actions .btn { padding-left: 18px; color: var(--navy); }
.detail-actions .chip { width: 34px; height: 34px; border-radius: 11px; color: var(--navy); background: var(--service-color); }
.detail-contact { font-weight: 800; border-bottom: 2px solid currentColor; }
[data-service-id="web-landing-pages"] .detail-copy h1 span { color: #dce5ff; }
[data-service-id="web-landing-pages"] .detail-kicker, [data-service-id="web-landing-pages"] .detail-overline { color: #fff; }
.service-scan { position: relative; padding: 20px; border: 1px solid rgba(77, 228, 255, .55); border-radius: 27px; color: #fff; background: rgba(5, 8, 23, .94); box-shadow: 0 30px 80px rgba(7, 16, 58, .35), 0 0 36px color-mix(in srgb, var(--service-color) 18%, transparent); transform: rotate(1.5deg); }
.service-scan-head { display: flex; justify-content: space-between; gap: 12px; font: 800 .64rem/1.4 var(--font-display); letter-spacing: .12em; color: rgba(255, 255, 255, .7); }
.scan-live { white-space: nowrap; color: var(--mint); }
.service-scan-screen { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 275px; overflow: hidden; margin-top: 16px; padding: 22px; border-radius: 19px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--service-color) 22%, #101943), #0a102d 70%); }
.scan-orbits, .scan-orbits i { position: absolute; width: 190px; height: 190px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 50%; transform: rotateX(67deg) rotate(-24deg); }
.scan-orbits i:nth-child(2) { transform: rotateX(67deg) rotate(25deg) scale(1.36); }
.scan-orbits i:nth-child(3) { transform: rotateX(67deg) rotate(-55deg) scale(.72); }
.scan-emblem { z-index: 1; display: grid; place-items: center; width: 94px; height: 94px; margin-bottom: 16px; border-radius: 50%; color: var(--navy); background: radial-gradient(circle at 30% 26%, #fff, var(--service-color) 62%, color-mix(in srgb, var(--service-color) 45%, #8534f4)); box-shadow: 0 0 48px color-mix(in srgb, var(--service-color) 58%, transparent); font: 800 2.5rem/1 var(--font-display); }
.scan-mark { color: var(--cyan); font: 800 .58rem/1.4 var(--font-display); letter-spacing: .15em; }
.service-scan-screen > strong { z-index: 1; margin-top: 7px; text-align: center; font: 700 1.02rem/1.2 var(--font-display); }
.scan-bars { display: flex; align-items: end; gap: 6px; height: 34px; margin-top: 18px; }
.scan-bars i { display: block; width: 13px; height: 34%; border-radius: 4px 4px 1px 1px; background: var(--service-color); opacity: .82; }
.scan-bars i:nth-child(2) { height: 72%; } .scan-bars i:nth-child(3) { height: 48%; } .scan-bars i:nth-child(4) { height: 92%; }
.scan-bars i:nth-child(5) { height: 60%; } .scan-bars i:nth-child(6) { height: 82%; } .scan-bars i:nth-child(7) { height: 42%; }
.service-scan > p { margin: 14px 4px 2px; color: rgba(255, 255, 255, .68); font-size: .82rem; }
.detail-section { width: min(1120px, calc(100% - 56px)); margin: auto; padding: clamp(76px, 10vw, 120px) 0; }
.detail-section-head { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 50px; margin-bottom: 34px; }
.detail-section-head h2 { margin-top: 12px; font: 800 clamp(2.7rem, 5vw, 4.8rem)/.96 var(--font-display); letter-spacing: -.065em; }
.detail-section-head > p { max-width: 470px; color: rgba(255, 255, 255, .68); }
.service-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.service-feature { min-height: 220px; padding: 25px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 25px; background: rgba(255, 255, 255, .055); }
.service-feature-num { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 24px; border-radius: 14px; color: var(--navy); background: var(--service-color); font: 800 .8rem/1 var(--font-display); }
.service-feature h3 { margin-bottom: 9px; font: 800 1.3rem/1.12 var(--font-display); letter-spacing: -.035em; }
.service-feature p { color: rgba(255, 255, 255, .66); font-size: .9rem; }
.service-example { display: grid; grid-template-columns: 1fr 1fr; width: min(1120px, calc(100% - 56px)); min-height: 390px; margin: 0 auto 70px; overflow: hidden; border-radius: 34px; color: var(--navy); background: var(--cream); }
.example-copy { align-self: center; padding: clamp(28px, 5vw, 60px); }
.example-label { color: color-mix(in srgb, var(--service-color) 70%, #08113a); font: 800 .73rem/1.4 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.example-copy h2 { margin-top: 12px; font: 800 clamp(2.5rem, 5vw, 4.2rem)/.96 var(--font-display); letter-spacing: -.06em; }
.example-copy > p:not(.example-label) { max-width: 470px; margin-top: 18px; color: rgba(7, 16, 58, .75); }
.example-deliverables { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; font-size: .83rem; font-weight: 800; }
.example-deliverables span { color: color-mix(in srgb, var(--service-color) 70%, #08113a); }
.example-project-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 25px; padding: 12px 16px; border-radius: 99px; color: var(--navy); background: var(--service-color); font-size: .82rem; font-weight: 800; transition: transform .2s, filter .2s; }
.example-project-link:hover { transform: translateY(-2px); filter: brightness(1.06); }
.example-project-link:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.example-art { position: relative; display: grid; place-items: center; min-height: 350px; overflow: hidden; background: radial-gradient(circle at 54% 42%, color-mix(in srgb, var(--service-color) 82%, #fff), var(--service-color) 42%, color-mix(in srgb, var(--service-color) 68%, #713bff)); }
.example-art-photo { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; mix-blend-mode: multiply; }
.example-art::before, .example-art::after { content: ""; position: absolute; z-index: 1; width: 80%; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .48); border-radius: 50%; }
.example-art::before { background: linear-gradient(135deg, color-mix(in srgb, var(--service-color) 28%, transparent), rgba(4, 10, 33, .14)); }
.example-art::after { width: 116%; }
.example-planet { z-index: 2; display: grid; place-items: center; width: clamp(130px, 18vw, 205px); aspect-ratio: 1; border: 8px solid rgba(255, 255, 255, .72); border-radius: 38%; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--service-color) 75%, #fff), color-mix(in srgb, var(--service-color) 75%, #641bd2)); box-shadow: 0 25px 55px rgba(7, 16, 58, .32); font: 800 clamp(3.4rem, 8vw, 6rem)/1 var(--font-display); transform: rotate(-8deg); }
.example-star { position: absolute; z-index: 2; color: #fff; font-size: 2rem; }
.star-a { top: 16%; right: 22%; color: var(--gold); } .star-b { bottom: 18%; left: 19%; }
.example-art-caption { position: absolute; z-index: 2; bottom: 22px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.38); border-radius: 99px; color: #fff; background: rgba(5,8,23,.44); font: 700 .7rem/1.2 var(--font-display); letter-spacing: .06em; }
.example-art-caption i { color: var(--gold); font-style: normal; }
.service-related { width: min(1120px, calc(100% - 56px)); margin: 0 auto; padding: 12px 0 72px; }
.service-related-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.service-related-links a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 99px; color: rgba(255,255,255,.86); font-size: .81rem; font-weight: 700; transition: background .2s, transform .2s; }
.service-related-links a:hover { transform: translateY(-3px); background: rgba(255,255,255,.08); }
.service-related-links i { width: 9px; height: 9px; border-radius: 50%; background: var(--related-color); box-shadow: 0 0 12px var(--related-color); }
.service-related-links span { color: var(--related-color); }
.service-footer { padding-top: 68px; }
.service-footer .foot-top { gap: 20px 26px; }
.service-footer .foot-top nav { gap: 8px 22px; }
.service-footer .foot-top .btn { white-space: nowrap; }
.service-footer .foot-bottom { gap: 10px 24px; }

/* ---------- studio information pages ---------- */
.studio-route { --studio-lavender: #b9a4ff; }
.studio-page { width: min(1240px, calc(100% - 32px)); margin: 0 auto; }
.studio-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr); align-items: center; gap: clamp(32px, 7vw, 90px); min-height: 490px; overflow: hidden; isolation: isolate; padding: clamp(38px, 7vw, 82px) clamp(24px, 6vw, 76px); border-radius: 40px; background: linear-gradient(145deg, #143fe0, #09175e 75%, #080d2b); }
.studio-hero::before { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(ellipse at 96% 8%, rgba(255, 95, 168, .42), transparent 38%), radial-gradient(ellipse at 4% 100%, rgba(0, 212, 255, .27), transparent 43%); }
.studio-hero-copy { position: relative; z-index: 1; max-width: 720px; }
.studio-hero .detail-back { margin-bottom: 34px; color: rgba(255, 255, 255, .75); }
.studio-kicker { color: var(--gold); font: 800 .75rem/1.4 var(--font-display); letter-spacing: .15em; text-transform: uppercase; }
.studio-hero h1 { margin-top: 14px; font: 800 clamp(3.4rem, 7vw, 6.7rem)/.88 var(--font-display); letter-spacing: -.075em; }
.studio-hero h1 span { color: var(--lav); }
.studio-intro { max-width: 660px; margin-top: 23px; color: rgba(255, 255, 255, .83); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.65; }
.studio-hero .detail-tags li { border-color: rgba(255, 255, 255, .4); }
.studio-hero-orbit { position: absolute; right: 1%; top: 6%; width: min(40vw, 470px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255, 255, 255, .025), 0 0 0 86px rgba(255, 255, 255, .025); }
.studio-hero-orbit::before, .studio-hero-orbit::after { position: absolute; content: ""; border: 1px dashed rgba(255, 255, 255, .3); border-radius: 50%; inset: 14%; transform: rotateX(62deg) rotate(-28deg); }
.studio-hero-orbit::after { inset: 29%; transform: rotateX(62deg) rotate(34deg); }
.studio-hero-orbit i, .studio-hero-orbit span { position: absolute; z-index: 1; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 20px var(--gold); top: 19%; left: 16%; }
.studio-hero-orbit i:nth-child(2) { top: auto; left: auto; right: 16%; bottom: 16%; width: 10px; height: 10px; background: var(--pink); box-shadow: 0 0 20px var(--pink); }
.studio-hero-orbit span { display: grid; place-items: center; top: 43%; left: 42%; width: 76px; height: 76px; color: var(--navy); background: var(--orange); border-radius: 25px; font-size: 2.3rem; box-shadow: 0 0 50px rgba(255, 106, 31, .46); transform: rotate(-12deg); }
.studio-signal { position: relative; z-index: 1; display: grid; gap: 20px; align-content: center; min-height: 240px; padding: 25px; border: 1px solid rgba(77, 228, 255, .55); border-radius: 26px; color: #fff; background: rgba(5, 8, 23, .8); box-shadow: 0 24px 70px rgba(3, 8, 40, .35), 0 0 35px rgba(77, 228, 255, .12); transform: rotate(2deg); }
.studio-signal-label, .studio-signal-status { color: rgba(255, 255, 255, .6); font: 800 .66rem/1.4 var(--font-display); letter-spacing: .13em; }
.studio-signal strong { font: 800 clamp(1.4rem, 2.5vw, 2.2rem)/1 var(--font-display); letter-spacing: -.04em; }
.studio-signal-status { color: var(--mint); }
.studio-signal-line { display: flex; gap: 7px; align-items: end; height: 38px; }
.studio-signal-line i { width: 14%; height: 38%; border-radius: 4px; background: var(--orange); }
.studio-signal-line i:nth-child(2) { height: 75%; background: var(--lav); }
.studio-signal-line i:nth-child(3) { height: 54%; background: var(--cyan); }
.studio-signal-line i:nth-child(4) { height: 96%; background: var(--mint); }
.studio-signal-line i:nth-child(5) { height: 63%; background: var(--gold); }
.studio-section { width: min(1120px, calc(100% - 40px)); margin: auto; padding: clamp(68px, 9vw, 112px) 0; }
.studio-section-head { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: clamp(24px, 5vw, 60px); margin-bottom: 34px; }
.studio-section-head h2, .studio-aside h2, .studio-cta h2 { margin-top: 12px; font: 800 clamp(2.5rem, 5vw, 4.3rem)/.96 var(--font-display); letter-spacing: -.065em; }
.studio-section-head > p { color: rgba(255, 255, 255, .68); }
.studio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.studio-card { min-height: 230px; padding: 26px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 25px; background: rgba(255, 255, 255, .055); }
.studio-card-num { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 24px; border-radius: 14px; color: var(--navy); background: var(--orange); font: 800 .8rem/1 var(--font-display); }
.studio-card h3 { margin-bottom: 9px; font: 800 1.3rem/1.12 var(--font-display); letter-spacing: -.035em; }
.studio-card p, .studio-faq-item > p { color: rgba(255, 255, 255, .68); font-size: .92rem; line-height: 1.65; }
.studio-steps { grid-template-columns: repeat(2, 1fr); }
.studio-steps .studio-card { min-height: 200px; }
.studio-steps .studio-card:nth-child(3n + 2) .studio-card-num { background: var(--lav); }
.studio-steps .studio-card:nth-child(3n) .studio-card-num { background: var(--cyan); }
.studio-faq { display: grid; gap: 10px; max-width: 920px; margin-inline: auto; }
.studio-faq-item { padding: 0 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; background: rgba(255, 255, 255, .045); }
.studio-faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 19px 0; font: 700 1.08rem/1.4 var(--font-display); cursor: pointer; list-style: none; }
.studio-faq-item summary::-webkit-details-marker { display: none; }
.studio-faq-item summary span { color: var(--orange); font: 700 1.6rem/1 var(--font-display); transition: transform .2s; }
.studio-faq-item[open] summary span { transform: rotate(45deg); }
.studio-faq-item > p { max-width: 760px; padding: 0 35px 21px 0; }
.studio-aside { display: grid; grid-template-columns: auto minmax(220px, .8fr) 1fr; align-items: center; gap: 24px; width: min(1120px, calc(100% - 40px)); margin: 0 auto 75px; padding: clamp(24px, 4vw, 42px); border-radius: 26px; color: var(--navy); background: var(--cream); }
.studio-aside-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: var(--navy); background: var(--gold); font-size: 1.7rem; }
.studio-aside .studio-kicker { color: #7b4c00; }
.studio-aside h2 { margin-top: 8px; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.studio-aside > p { color: rgba(7, 16, 58, .75); }
.studio-cta { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin: 0 0 24px; padding: clamp(30px, 6vw, 64px); border-radius: 34px; color: var(--navy); background: linear-gradient(120deg, #ffb800, #ff6a1f 68%, #ff5fa8); }
.studio-cta .studio-kicker { color: rgba(7, 16, 58, .7); }
.studio-cta h2 { margin: 8px 0; font-size: clamp(2.4rem, 5vw, 4rem); }
.studio-cta > div > p:last-child { max-width: 650px; color: rgba(7, 16, 58, .78); }
.studio-cta .btn { flex: none; padding-left: 20px; background: var(--navy); color: #fff; }
.studio-cta .chip { width: 38px; height: 38px; }
.service-missing { min-height: 70vh; display: grid; align-content: center; gap: 16px; }

/* ---------- mission detail pages ---------- */
.mission { color: var(--navy); }
.mission:focus-visible { outline-color: var(--orange); outline-offset: 6px; border-radius: 34px; }
.mission-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--blue-2); font-size: .82rem; font-weight: 800; }
.mission-more b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(11, 59, 255, .1); transition: transform .25s var(--ease); }
.mission:hover .mission-more b, .mission:focus-visible .mission-more b { transform: translate(3px, -3px); }
.mission-route .detail-hero { background: linear-gradient(130deg, color-mix(in srgb, var(--service-color) 80%, #fff), var(--service-color) 58%, color-mix(in srgb, var(--service-color) 80%, #fff)); }
.mission-page { --detail-ink: var(--navy); }
.mission-route .detail-copy h1 span { color: color-mix(in srgb, var(--service-color) 72%, #08113a); }
.mission-route .detail-kicker, .mission-route .detail-overline { color: color-mix(in srgb, var(--service-color) 70%, #08113a); }
.mission-route .mission-concept { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 11px; border: 1px solid rgba(7, 16, 58, .2); border-radius: 99px; font-size: .72rem; font-weight: 800; }
.mission-route .mission-concept::before { content: "✦"; color: color-mix(in srgb, var(--service-color) 72%, #08113a); }
.mission-brief { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(28px, 6vw, 76px); align-items: start; }
.mission-brief h2 { margin-top: 12px; font: 800 clamp(2.5rem, 5vw, 4.4rem)/.96 var(--font-display); letter-spacing: -.065em; }
.mission-brief-copy { color: rgba(255, 255, 255, .72); font-size: 1.06rem; }
.mission-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.mission-plan article { min-height: 205px; padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(255,255,255,.06); }
.mission-plan span { display: block; margin-bottom: 22px; color: var(--service-color); font: 800 .72rem/1 var(--font-display); letter-spacing: .14em; }
.mission-plan h3 { margin-bottom: 10px; font: 800 1.25rem/1.12 var(--font-display); letter-spacing: -.03em; }
.mission-plan p { color: rgba(255,255,255,.68); font-size: .9rem; }
.mission-plan-heading { margin-top: clamp(54px, 8vw, 92px); }
.mission-note { width: min(1120px, calc(100% - 56px)); margin: 0 auto 72px; padding: 22px 26px; border-left: 4px solid var(--service-color); border-radius: 0 18px 18px 0; color: rgba(255,255,255,.72); background: rgba(255,255,255,.055); font-size: .88rem; }
.mission-note strong { color: #fff; }
.mission-cta { width: min(1120px, calc(100% - 56px)); margin: 0 auto; padding: 42px 0 20px; border-top: 1px solid rgba(255,255,255,.12); }
.mission-cta .btn { margin-top: 14px; }
.mission-cta .chip { width: 34px; height: 34px; border-radius: 11px; color: var(--navy); }
.mission-route .service-related { padding-bottom: 36px; }

/* ---------- mission log ---------- */
.missions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mission { display: grid; gap: 20px; }
.visual { position: relative; overflow: hidden; aspect-ratio: 4 / 4.4; border-radius: 34px; display: grid; place-items: center; transition: transform .5s var(--ease); }
.mission:hover .visual { transform: scale(.98) rotate(-1deg); }
.m1 .visual { background: linear-gradient(140deg, #ff8a3d, #ff3d7f); }
.m2 .visual { background: linear-gradient(140deg, #6a4dff, #0b3bff); }
.m3 .visual { background: linear-gradient(140deg, #36f1b6, #00b8ff); }
.visual .big { position: relative; z-index: 2; font: 800 clamp(3.4rem, 7vw, 6rem)/1 var(--font-display); letter-spacing: -.06em; color: #fff; }
.m3 .visual .big { color: var(--navy); }
.orb { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; right: -14%; bottom: -14%; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .8), rgba(255, 255, 255, .12) 60%); transition: transform .8s var(--ease); }
.mission:hover .orb { transform: scale(1.18) translate(-6%, -6%); }
.ring { position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; left: -50%; top: -60%; border: 2px solid rgba(255, 255, 255, .35); animation: spin 60s linear infinite; }
.meta .tag { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.meta h3 { font: 800 2rem/1.1 var(--font-display); letter-spacing: -.045em; margin: 8px 0 8px; }
.meta p { font-size: .97rem; color: rgba(7, 16, 58, .72); max-width: 380px; }
.mission-link { min-width: 0; color: inherit; border-radius: 28px; }
.mission-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.mission-link .meta { transition: transform .35s var(--ease); }
.mission-link:hover .meta { transform: translateY(-3px); }
.mission-link .meta h3::after { content: "↗"; display: inline-block; margin-left: 9px; color: var(--blue); font-size: 1rem; vertical-align: .2em; transition: transform .25s var(--ease); }
.mission-link:hover .meta h3::after { transform: translate(3px, -3px); }
.mission-link .visual.photo-art { aspect-ratio: 4 / 3; min-height: 250px; border-radius: 28px; box-shadow: 0 18px 34px -22px rgba(7, 16, 58, .45); }
.mission-link .photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mission-link:hover .photo { transform: scale(1.035); }
.mission-link .visual.photo-art::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(5, 8, 23, .32)); pointer-events: none; }

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 3px; background: linear-gradient(90deg, var(--orange), var(--lav), var(--cyan), var(--mint)); border-radius: 3px; opacity: .55; }
.step { position: relative; padding: 78px 26px 30px; border-radius: 30px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); transition: transform .4s var(--ease), background .3s; }
.step:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .1); }
.step .n { position: absolute; left: 22px; top: 8px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 800 .95rem/1 var(--font-display); color: var(--navy); background: var(--orange); box-shadow: 0 0 0 6px var(--ink); }
.step:nth-child(2) .n { background: var(--lav); } .step:nth-child(3) .n { background: var(--cyan); } .step:nth-child(4) .n { background: var(--mint); }
.step h3 { font: 800 1.6rem/1.1 var(--font-display); letter-spacing: -.04em; margin-bottom: 10px; }
.step p { color: rgba(255, 255, 255, .72); font-size: .96rem; }

/* ---------- contact ---------- */
.cta { background: linear-gradient(135deg, #ff7a2a 0%, var(--orange) 40%, #ff3d7f 100%); color: var(--navy); padding: clamp(50px, 8vw, 100px) clamp(24px, 5vw, 70px); }
.cta-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.cta h2 { font-size: clamp(3.4rem, 9vw, 8rem); line-height: .88; }
.cta h2 b { color: #fff; }
.cta-copy > p:not(.kicker) { margin-top: 36px; max-width: 420px; font-size: 1.1rem; font-weight: 500; }
.mail { display: inline-block; margin-top: 22px; font: 800 clamp(1.3rem, 2.4vw, 1.9rem)/1.2 var(--font-display); letter-spacing: -.03em; border-bottom: 3px solid var(--navy); }
.mail:hover { color: #fff; border-color: #fff; }
.form { background: #fff; color: var(--navy); border-radius: 34px; padding: 32px; display: grid; gap: 8px; box-shadow: 0 40px 70px -30px rgba(80, 10, 40, .55); }
.form label { font-size: .82rem; font-weight: 700; margin-top: 8px; }
.form input, .form textarea { width: 100%; border: 2px solid #e6e8f5; border-radius: 16px; padding: 14px 16px; background: #f7f8ff; color: var(--navy); outline: none; transition: border-color .2s, box-shadow .2s; resize: vertical; }
.form input:focus, .form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(11, 59, 255, .15); }
.form input:user-invalid, .form textarea:user-invalid { border-color: #e0245e; }
.form .btn { margin-top: 18px; justify-self: start; }
.form-note { min-height: 1.4em; font-size: .88rem; color: #1a7a55; font-weight: 500; }

/* ---------- footer ---------- */
.footer { padding: 70px 0 34px; overflow: hidden; }
.foot-top { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.foot-top nav { display: flex; flex-wrap: wrap; gap: 8px 30px; font-weight: 500; }
.foot-top nav a { opacity: .75; transition: opacity .2s, color .2s; }
.foot-top nav a:hover { opacity: 1; color: var(--gold); }
.giant { margin: 26px 0 14px; font: 800 clamp(3.4rem, 17vw, 15rem)/.85 var(--font-display); letter-spacing: -.035em; word-spacing: .05em; white-space: nowrap; background: linear-gradient(100deg, var(--blue) 0%, #8a4dff 30%, var(--pink) 60%, var(--orange) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: sheen 9s ease-in-out infinite alternate; user-select: none; }
@keyframes sheen { to { background-position: 100% 0; } }
.business-details { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 18px; color: rgba(255, 255, 255, .72); font-size: .9rem; font-style: normal; }
.business-details a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.business-details a:hover { color: #fff; text-decoration-color: currentColor; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 8px 30px; justify-content: space-between; font-size: .85rem; color: rgba(255, 255, 255, .55); border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; }

/* ---------- dock (sticky mini nav) ---------- */
.dock { position: fixed; z-index: 50; left: 50%; top: 18px; display: flex; align-items: center; gap: 22px; padding: 8px 8px 8px 12px; border-radius: 22px; background: rgba(9, 14, 43, .78); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(16px); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); transform: translate(-50%, -140%); transition: transform .5s var(--ease); }
.dock.show { transform: translate(-50%, 0); }
.dock nav { display: flex; gap: 22px; font-size: .92rem; font-weight: 500; }
.dock nav a { opacity: .8; }
.dock nav a:hover { opacity: 1; color: var(--gold); }
.dock-logo { display: grid; }

/* ---------- warp flash + reveal ---------- */
.flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, #fff 0%, #9fe8ff 30%, rgba(11, 59, 255, 0) 70%); }
.flash.go { animation: flash .95s ease-out; }
@keyframes flash { 0% { opacity: 0; } 35% { opacity: .85; } 100% { opacity: 0; } }

.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .svc.reveal.in:hover { transition-delay: 0s; transform: translateY(-8px) rotate(-.5deg); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-lower { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 0; }
  .hero-stage { justify-content: center; min-height: 520px; }
  .s3, .s4, .s5 { grid-column: span 6; }
  .missions { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps::before { display: none; }
  .cta-grid { grid-template-columns: 1fr; }
  .dock nav { display: none; }
  .detail-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 36px; }
  .studio-hero { grid-template-columns: 1fr; gap: 30px; }
  .studio-hero-orbit { display: none; }
  .studio-signal { width: min(100%, 440px); }
  .studio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .shell { padding: 10px; gap: 10px; }
  .panel, .section { border-radius: 28px; }
  .wrap { width: min(1240px, calc(100% - 32px)); }
  .nav { padding: 18px 18px 8px; flex-wrap: wrap; gap: 14px; }
  .nav-cta { display: none; }
  .lang { margin-left: auto; }
  .menu-btn { display: block; margin-left: 0; }
  .nav-links { display: none; width: 100%; order: 3; flex-direction: column; gap: 4px; margin: 0; padding: 12px; border-radius: 22px; background: rgba(5, 8, 23, .35); backdrop-filter: blur(12px); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 10px; font-size: 1.05rem; }
  .hero-inner { padding: 8px 18px 0; }
  .logline { font-size: .66rem; letter-spacing: .1em; padding: 8px 14px; flex-wrap: wrap; row-gap: 2px; }
  .stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; }
  .stats dt { font-size: 2.2rem; }
  .stats dd { font-size: .76rem; }
  .link-arrow { display: block; margin: 20px 0 0; width: fit-content; }
  .hero-stage { flex-direction: column; align-items: center; min-height: 0; gap: 0; padding-top: 10px; }
  .mascot { width: min(330px, 84vw); margin: 0 0 -30px; }
  .chat { width: 100%; }
  .o1 { width: 380px; height: 380px; left: 50%; margin-left: -190px; bottom: auto; top: 0; }
  .o2 { display: none; }
  .messages { min-height: 0; }
  .bento { grid-template-columns: 1fr; }
  .s3, .s4, .s5 { grid-column: auto; }
  .svc { min-height: 280px; }
  .missions, .steps { grid-template-columns: 1fr; }
  .visual { aspect-ratio: 4 / 3.2; }
  .form { padding: 24px 20px; }
  .cta { padding: 44px 20px; }
  .dock { top: 10px; }
  .service-header, .service-footer { width: min(1240px, calc(100% - 32px)); }
  .service-header { min-height: 80px; flex-wrap: wrap; gap: 10px; padding: 12px 0; }
  .service-nav { gap: 10px; }
  .service-nav .nav-cta { display: none; }
  .service-nav .lang { margin-left: 0; }
  .service-nav .menu-btn { display: block; margin-left: 0; }
  .service-links { display: none; position: absolute; z-index: 60; top: calc(100% + 12px); right: 0; width: min(280px, calc(100vw - 32px)); align-items: stretch; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(5,8,23,.96); box-shadow: 0 20px 40px rgba(0,0,0,.4); backdrop-filter: blur(14px); }
  .service-links.open { display: flex; }
  .service-links a { padding: 11px 12px; border-radius: 12px; }
  .service-links a:hover { background: rgba(255,255,255,.08); }
  .detail-hero { margin: 0 10px; border-radius: 28px; }
  .detail-grid { grid-template-columns: 1fr; gap: 36px; }
  .service-scan { width: min(100%, 440px); }
  .detail-section-head { grid-template-columns: 1fr; gap: 18px; }
  .mission-brief { grid-template-columns: 1fr; gap: 18px; }
  .mission-plan { grid-template-columns: 1fr; }
  .mission-plan article { min-height: 0; }
  .mission-note, .mission-cta { width: min(100% - 32px, 1120px); }
  .service-features { grid-template-columns: 1fr; }
  .service-feature { min-height: 0; }
  .service-example { grid-template-columns: 1fr; }
  .example-art { min-height: 300px; }
  .service-related, .detail-section, .service-example { width: min(100% - 32px, 1120px); }
  .service-footer { padding-top: 48px; }
  .service-footer .giant { font-size: clamp(3rem, 16vw, 6rem); }
  .studio-page { width: calc(100% - 20px); }
  .studio-hero { min-height: 0; padding: 34px 22px; border-radius: 28px; }
  .studio-hero h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .studio-hero-orbit { right: -20%; top: 4%; width: 75vw; opacity: .55; }
  .studio-section { width: calc(100% - 28px); padding: 64px 0; }
  .studio-section-head { grid-template-columns: 1fr; gap: 16px; }
  .studio-grid, .studio-steps { grid-template-columns: 1fr; }
  .studio-card, .studio-steps .studio-card { min-height: 0; }
  .studio-card-num { margin-bottom: 18px; }
  .studio-aside { grid-template-columns: auto 1fr; width: calc(100% - 28px); margin-bottom: 42px; }
  .studio-aside > p { grid-column: 1 / -1; }
  .studio-cta { flex-direction: column; align-items: flex-start; margin: 0 0 12px; border-radius: 26px; }
}

/* ---------- preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 78% 8%, rgba(181, 139, 255, .7), transparent 70%), radial-gradient(ellipse 50% 50% at 8% 95%, rgba(0, 212, 255, .45), transparent 70%), linear-gradient(160deg, #1a4dff 0%, var(--blue) 45%, var(--blue-2) 100%); transition: opacity .8s ease, transform .8s ease, visibility 0s .8s; }
.js .preloader { display: grid; animation: pre-failsafe .01s 8s forwards; }
.js.preloader-seen .preloader { display: none; }
.preloader.done { opacity: 0; transform: scale(1.06); visibility: hidden; pointer-events: none; }
@keyframes pre-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.pre-orbit { position: absolute; left: 50%; top: 46%; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .3); transform: translate(-50%, -50%); animation: spin 40s linear infinite; pointer-events: none; }
.pre-orbit::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; top: 10%; left: 10%; background: var(--gold); box-shadow: 0 0 20px var(--gold); }
.po1 { width: min(78vw, 560px); height: min(78vw, 560px); }
.po2 { width: min(54vw, 380px); height: min(54vw, 380px); border-style: solid; border-color: rgba(255, 255, 255, .16); animation-direction: reverse; animation-duration: 26s; }
.po2::after { background: var(--pink); box-shadow: 0 0 20px var(--pink); top: auto; left: auto; bottom: 8%; right: 12%; }
.pre-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; width: min(340px, 78vw); }
.pre-bot { width: min(250px, 58vw); height: auto; animation: float 3.4s ease-in-out infinite; filter: drop-shadow(0 22px 26px rgba(3, 12, 90, .5)); }
.pre-bot .spark { transform-box: fill-box; transform-origin: center; animation: twinkle-star 1.6s ease-in-out infinite; }
.pre-bot .mood { opacity: 0; transition: opacity .25s ease; }
.pre-bot[data-mood="think"] .m-think, .pre-bot[data-mood="engage"] .m-engage { opacity: 1; }
.pre-bot .dot { animation: pulse-dot .9s ease-in-out infinite; }
.pre-bot .d2 { animation-delay: .15s; }
.pre-bot .d3 { animation-delay: .3s; }
.pre-word { font: 800 1.9rem/1 var(--font-display); letter-spacing: -.05em; margin-top: 6px; }
.pre-word em { font-style: normal; color: var(--orange); }
.pre-track { width: 100%; height: 12px; border-radius: 99px; background: rgba(5, 8, 23, .35); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pre-fill { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--orange), var(--lav) 55%, var(--cyan)); box-shadow: 0 0 16px rgba(77, 228, 255, .6); }
.pre-pct { font: 700 .8rem/1 "Courier New", monospace; letter-spacing: .2em; opacity: .85; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .track { animation: none; }
  .mascot .steam { opacity: .6; stroke-dashoffset: 0; }
}