/* Echo Impact – v4: pastel new-age */
@font-face { font-family: 'Outfit'; src: url(fonts/outfit-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(fonts/inter-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* naming kept from v1: --ink = page background, --bone = text */
  --ink: #F8F6FC;
  --ink-2: #FFFFFF;
  --bone: #1E1A2E;
  --mist: #6F6878;
  --hot: #8E7CF8;
  --hot-2: #A493FA;
  --pink: #E98AC4;
  --violet: #F4A27F;
  --sky: #7CC4F5;
  --sun: #FFD98A;
  --amz: #F5B45A;
  --grad: linear-gradient(100deg, #8E7CF8 0%, #E98AC4 52%, #F4A27F 100%);
  --glass: rgba(255, 255, 255, .62);
  --line: rgba(30, 26, 46, .1);
  --wrap: 1320px;
  --pad: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--bone); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; font: 400 17px/1.6 'Inter', system-ui, sans-serif; background: var(--ink); overflow-x: hidden; }
body.locked { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2 { font-family: 'Outfit', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em; line-height: .98; margin: 0; }
.mono { font: 400 12px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.dim { color: var(--mist); }
.hot { color: var(--hot); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* Buttons */
.btn { --bg: transparent; display: inline-flex; align-items: center; gap: .6em; padding: 15px 26px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--bone); font: 600 15px/1 'Outfit', sans-serif; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .35s var(--ease), background .3s, border-color .3s, color .3s; position: relative; overflow: hidden; }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-hot { --bg: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 10px 30px -10px rgba(142, 124, 248, .55); }
.btn-hot:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(233, 138, 196, .6); }

.btn-ghost { background: var(--glass); backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: rgba(30, 26, 46, .5); }
.btn-sm { padding: 11px 18px; font-size: 14px; }
.btn:focus-visible, .snd:focus-visible, a:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }

/* Loader */
#loader { position: fixed; inset: 0; z-index: 100; background: var(--ink); display: grid; place-items: center; transition: opacity .8s var(--ease), visibility .8s; }
#loader.done { opacity: 0; visibility: hidden; }
.ld { display: grid; justify-items: center; gap: 18px; }
.ld-mark { width: 92px; height: 92px; fill: none; stroke: var(--bone); stroke-width: 32; }
.ld-a { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: ldDraw 1.6s var(--ease) infinite; }
.ld-a2 { animation-delay: .12s; } .ld-a1 { animation-delay: .24s; }
@keyframes ldDraw { 0% { stroke-dashoffset: 1200; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1200; } }
.ld-num { color: var(--mist); }
.ld-bar { width: 160px; height: 1px; background: var(--line); }
.ld-bar i { display: block; height: 100%; width: 0; background: var(--hot); transition: width .3s; }

/* Enter */
#enter { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 55%, rgba(142, 124, 248, .12), transparent 70%), rgba(248, 246, 252, .94); backdrop-filter: blur(8px); padding: 24px; text-align: center; }
#enter[hidden] { display: none; }
#enter.out { opacity: 0; transition: opacity .7s var(--ease); pointer-events: none; }
.en { display: grid; justify-items: center; gap: 20px; max-width: 640px; }
.en-logo { width: 96px; height: auto; }
.en h2 { font-size: clamp(40px, 7vw, 76px); }
.en-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Cursor */
.cur { position: fixed; top: 0; left: 0; z-index: 80; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.has-cursor .cur { opacity: 1; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--hot); }
.cur-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(30, 26, 46, .55); display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), border-color .3s, background .3s, opacity .3s; }
.cur-ring span { font: 400 9px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cur-ring.big { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--bone); border-color: var(--bone); }
.cur-ring.big span { opacity: 1; }
.cur-ring.link { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--hot); }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }

/* Canvas + grain */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }
.no-gl #gl { display: none; }
.grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .045; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1s steps(4) infinite; }
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -1%); } }
#labels { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.pop { position: absolute; left: 0; top: 0; font: 600 13px/1 'Outfit', sans-serif; color: var(--bone); background: rgba(255, 255, 255, .82); border: 1px solid rgba(142, 124, 248, .5); padding: 6px 10px; border-radius: 999px; white-space: nowrap; transform: translate(-50%, -50%); }
.pop b { color: var(--hot); font-weight: 700; }

/* Header */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 18px 0; transition: background .4s, padding .4s; }
.hdr.solid { background: rgba(248, 246, 252, .72); backdrop-filter: blur(12px); padding: 12px 0; border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-mark { width: 30px; height: 30px; fill: none; stroke: var(--bone); stroke-width: 34; }
.logo-word { height: 26px; width: auto; }
.nav { display: flex; gap: 30px; }
.nav a { text-decoration: none; font: 500 15px/1 'Outfit', sans-serif; color: rgba(30, 26, 46, .75); transition: color .25s; }
.nav a:hover { color: var(--bone); }
.hdr-r { display: flex; align-items: center; gap: 12px; }
.snd { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--bone); }
.snd .bars { display: flex; align-items: center; gap: 3px; height: 18px; }
.snd .bars i { width: 2px; height: 4px; background: currentColor; border-radius: 1px; transition: height .15s; }
.snd[aria-pressed="true"] { border-color: rgba(142, 124, 248, .6); color: var(--hot); }

/* Hero */
.hero { position: relative; z-index: 2; height: 260vh; }
.hero-pin { position: sticky; top: 0; height: 100vh; min-height: 640px; display: flex; align-items: center; overflow: hidden; }
.hero-in { position: relative; }
.hero-txt { max-width: 640px; padding-top: 70px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--mist); margin: 0 0 26px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 0 rgba(142, 124, 248, .6); animation: pd 2.1s infinite; }
@keyframes pd { 70% { box-shadow: 0 0 0 10px rgba(142, 124, 248, 0); } 100% { box-shadow: 0 0 0 0 rgba(142, 124, 248, 0); } }
.hero h1 { font-size: clamp(48px, 5.9vw, 92px); }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .ln > span { display: inline-block; }
.lead { font-size: clamp(16px, 1.3vw, 19px); color: rgba(30, 26, 46, .78); max-width: 520px; margin: 26px 0 32px; }
.lead strong { color: var(--bone); font-weight: 600; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.meter { display: flex; gap: 0; margin-top: 40px; border-top: 1px solid var(--line); max-width: 520px; }
.meter .m { flex: 1; padding: 14px 16px 0 0; display: grid; gap: 6px; }
.meter .m + .m { padding-left: 16px; border-left: 1px solid var(--line); }
.meter .mono { color: var(--mist); display: flex; align-items: center; gap: 7px; font-size: 11px; }
.meter b { font: 700 clamp(22px, 2.2vw, 30px)/1 'Outfit', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.meter .m.hit b { color: var(--hot); }
.sw { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sw-shop { background: var(--hot); } .sw-amz { background: var(--amz); }
.sim { color: var(--mist); font-size: 10.5px; margin-top: 18px; }
.sim .hint { color: rgba(30, 26, 46, .6); }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; color: var(--mist); font-size: 10px; }
.scroll-cue i { width: 1px; height: 36px; background: linear-gradient(var(--hot), transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Following placeholder sections */
.next, .contact { position: relative; z-index: 2; padding: clamp(100px, 16vh, 180px) 0; background: linear-gradient(180deg, transparent, var(--ink) 18%); }
.next h2, .contact h2 { font-size: clamp(40px, 6vw, 88px); max-width: 900px; }
.kicker { color: var(--hot); margin: 0 0 22px; }
.contact { text-align: center; border-top: 1px solid var(--line); background: transparent; }
.contact h2, .contact .lead { margin-left: auto; margin-right: auto; }
.contact .btn { margin-bottom: 16px; }
.ftr { position: relative; z-index: 2; background: transparent; border-top: 1px solid var(--line); padding: 24px 0; }
.ftr-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--mist); }
.ftr nav { display: flex; gap: 22px; }
.ftr a { font-size: 14px; color: var(--mist); text-decoration: none; }
.ftr a:hover { color: var(--bone); }

/* Mobile: stage on top, text below */
@media (max-width: 900px) {
  .nav { display: none; }
  .logo-word { height: 20px; }
  .hdr .cta { padding: 10px 14px; }
  .hero { height: 200vh; }
  .hero-pin { align-items: flex-end; padding-bottom: 28px; }
  .hero-txt { padding-top: 0; }
  .hero h1 { font-size: clamp(44px, 13vw, 64px); }
  .lead { margin: 14px 0 18px; font-size: 15px; line-height: 1.5; }
  .eyebrow { margin-bottom: 14px; font-size: 10.5px; }
  .hero-btns .btn { padding: 13px 18px; font-size: 14px; }
  .sim { display: none; }
  .meter { margin-top: 22px; }
  .meter .m { padding-right: 10px; } .meter .m + .m { padding-left: 10px; }
  .sim .hint { display: none; }
  .scroll-cue { display: none; }
  .hero-pin::before { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(248, 246, 252, .85) 40%); pointer-events: none; }
  .hero-in { z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .hero { height: auto; } .hero-pin { position: relative; }
}
.no-gl .hero-pin { background: url(img/mark-bone.svg) no-repeat right 8% center / min(46vh, 40vw); }
@media (max-width: 900px) { .no-gl .hero-pin { background-position: center 18%; background-size: 50vw; } }

/* ===== Full page sections (v2) ===== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-lg { padding: 19px 34px; font-size: 17px; }
.sec { position: relative; z-index: 2; background: transparent; padding: clamp(96px, 14vh, 160px) 0; border-top: 1px solid var(--line); }
.sec h2, .box-sec h2 { font-size: clamp(36px, 4.6vw, 68px); }
.sec-head { max-width: 760px; margin-bottom: clamp(40px, 6vh, 64px); }
.sec h3 { font: 600 21px/1.2 'Outfit', sans-serif; margin: 0 0 10px; letter-spacing: -.01em; }
.sec p { color: rgba(30, 26, 46, .74); }

/* 02 box */
.box-sec { position: relative; z-index: 2; height: 320vh; background: transparent; border-top: 1px solid var(--line); }
.box-pin { position: sticky; top: 0; height: 100vh; min-height: 640px; display: flex; align-items: center; overflow: hidden; }
.box-pin::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 50% at 72% 55%, rgba(142, 124, 248, var(--glow, 0)), transparent 70%); pointer-events: none; }
.box-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; position: relative; }
.box-txt { position: relative; }
.box-h { margin: 0; }
.box-h-b { position: absolute; top: 34px; left: 0; opacity: 0; }
.pains { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 0; max-width: 520px; border-top: 1px solid var(--line); }
.pains li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pains b { font: 600 18px/1.3 'Outfit', sans-serif; }
.pains b::before { content: "✕"; color: var(--hot); margin-right: 10px; font-size: 14px; }
.pains span { color: var(--mist); font-size: 15px; }
.box-sol { position: absolute; left: 0; right: 0; top: 150px; opacity: 0; max-width: 520px; }
.box-stage { position: relative; height: min(70vh, 560px); display: grid; place-items: center; perspective: 1400px; }
.cube { --s: min(26vw, 280px); width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(var(--ry, -38deg)); margin-top: 18%; }
.f { position: absolute; inset: 0; border: 1.5px solid rgba(30, 26, 46, .9); background: linear-gradient(160deg, #EDCB98, #DDB27A); transform-style: preserve-3d; display: grid; place-items: center; }
.f span { font: 600 15px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(30, 26, 46, .55); }
.f-front { transform: translateZ(calc(var(--s) / 2)); }
.f-back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.f-left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.f-right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.tape { position: absolute; left: 50%; top: 0; width: 22%; height: 34%; transform: translateX(-50%); background: repeating-linear-gradient(45deg, rgba(142, 124, 248, .9) 0 8px, rgba(142, 124, 248, .65) 8px 16px); transform-origin: top; }
.flap { position: absolute; left: 0; width: var(--s); height: calc(var(--s) / 2); top: 0; border: 1.5px solid rgba(30, 26, 46, .9); background: linear-gradient(180deg, #F0D2A6, #E2BA84); transform-origin: top center; backface-visibility: visible; }
.flap-1 { transform: translateZ(calc(var(--s) / 2)) rotateX(var(--fa, -90deg)); }
.flap-2 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)) rotateX(var(--fb, -90deg)); }
.flap-3 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)) rotateX(var(--fc, -90deg)); height: calc(var(--s) / 2 - 2px); }
.flap-4 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)) rotateX(var(--fd, -90deg)); height: calc(var(--s) / 2 - 2px); }
.prod { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; background: var(--bone); color: var(--ink); display: grid; place-items: center; align-content: center; gap: 8px; transform: translateY(var(--py, 0px)) rotateY(calc(var(--ry, -38deg) * -1)) rotateX(24deg); box-shadow: 0 0 0 1.5px var(--bone), 0 0 calc(var(--pg, 0) * 80px) rgba(142, 124, 248, calc(var(--pg, 0) * .7)); }
.prod svg { width: 46%; fill: none; stroke: var(--ink); stroke-width: 34; }
.prod b { font: 700 12px/1 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.out { position: absolute; left: 50%; top: 42%; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .9); border: 1px solid var(--line); font: 600 14px/1 'Outfit', sans-serif; display: flex; align-items: center; gap: 8px; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.out-a { border-color: rgba(242, 181, 68, .5); } .out-s { border-color: rgba(142, 124, 248, .6); }

/* 03 services */
.svc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { background: var(--glass); backdrop-filter: blur(14px); padding: 34px 30px 38px; position: relative; transition: background .4s; }
.card:hover { background: #fff; }
.card .no { color: var(--hot); display: block; margin-bottom: 40px; }
.card::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--hot); transition: width .6s var(--ease); }
.card:hover::after { width: 100%; }
.card p { margin: 0; font-size: 15.5px; }
.extra { color: var(--mist); margin-top: 22px; }

/* 04 channels */
.chan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chan-c { border: 1px solid var(--line); border-radius: 22px; padding: 34px; background: linear-gradient(160deg, rgba(255, 255, 255, .03), transparent); }
.chan-amz { border-color: rgba(242, 181, 68, .35); } .chan-shop { border-color: rgba(142, 124, 248, .45); }
.chan-c .mono { display: flex; align-items: center; gap: 9px; color: var(--bone); margin: 0 0 18px; }
.chan-c ul { margin: 0; padding: 0; list-style: none; }
.chan-c li { padding: 13px 0 13px 28px; border-top: 1px solid var(--line); position: relative; font-size: 17px; color: rgba(30, 26, 46, .86); }
.chan-c li::before { content: "→"; position: absolute; left: 0; color: var(--hot); }
.chan-amz li::before { color: var(--amz); }
.dim { color: var(--mist); }

/* 05 steps */
.ab-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }
.ab-head { position: sticky; top: 120px; }
.ab-head .btn { margin-top: 10px; }
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 22px; padding: 26px 0; opacity: .35; transition: opacity .5s; }
.steps li.on { opacity: 1; }
.steps .no { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; position: relative; transition: border-color .4s, color .4s, background .4s; }
.steps li.on .no { border-color: transparent; color: #fff; background: var(--grad); }
.steps p { margin: 0; }

/* 06 numbers */
.num-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.num { padding: 40px 28px 40px 0; display: grid; gap: 10px; }
.num + .num { padding-left: 28px; border-left: 1px solid var(--line); }
.num b { font: 700 clamp(48px, 6.4vw, 104px)/.9 'Outfit', sans-serif; letter-spacing: -.03em; color: var(--bone); font-variant-numeric: tabular-nums; }
.num > span { color: var(--mist); font-size: 16px; }
.logos { margin-top: 44px; }
.logo-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 14px; }
.logo-row i { height: 64px; border-radius: 14px; border: 1px dashed rgba(30, 26, 46, .18); }

/* 07 about */
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; }
.about-txt .lead { margin-top: 0; }
.sister { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sister li { border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 4px; }
.sister b { font: 600 17px/1.2 'Outfit', sans-serif; }
.sister span { color: var(--mist); font-size: 14px; }

/* 08 faq */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font: 600 18px/1.35 'Outfit', sans-serif; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font-size: 26px; font-weight: 300; color: var(--hot); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; max-width: 640px; }

/* 09 contact tweaks */
.contact .kicker { margin-bottom: 18px; }
.contact h2 { font-size: clamp(40px, 5.6vw, 84px); }

/* modals */
.modal { position: fixed; inset: 0; z-index: 95; background: rgba(248, 246, 252, .8); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-in { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: 22px; padding: 40px; max-width: 560px; width: 100%; max-height: 86vh; overflow: auto; }
.modal-in h2 { font-size: 32px; margin-bottom: 18px; }
.modal-in p { color: rgba(30, 26, 46, .8); font-size: 15.5px; }
.modal-x { position: absolute; right: 16px; top: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--bone); font-size: 22px; cursor: pointer; }

@media (max-width: 900px) {
  .box-sec { height: auto; }
  .box-pin { position: relative; height: auto; min-height: 0; padding: 90px 0 70px; }
  .box-in { grid-template-columns: 1fr; gap: 10px; }
  .box-stage { order: -1; height: 320px; }
  .cube { --s: 150px; }
  .box-h-b { position: static; opacity: 1; margin-top: 10px; display: none; }
  .box-sol { position: static; opacity: 1; margin-top: 22px; }
  .svc { grid-template-columns: 1fr; }
  .chan-grid, .ab-wrap, .about-grid, .faq-wrap { grid-template-columns: 1fr; gap: 28px; }
  .ab-head { position: static; }
  .num-grid { grid-template-columns: 1fr; }
  .num + .num { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .num { padding: 26px 0; }
  .logo-row { grid-template-columns: repeat(3, 1fr); }
  .sister { grid-template-columns: 1fr; }
  .chan-c { padding: 24px; }
  .modal-in { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .box-sec { height: auto; } .box-pin { position: relative; }
  .box-sol { position: static; opacity: 1; } .steps li { opacity: 1; }
}

/* ===== v3 light / new-age layer ===== */
html, body { background: var(--ink); }
.hot { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker { color: var(--hot); }
/* Aura: slow drifting color fields behind everything */
.aura { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--ink); }
.aura i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; animation: drift 26s ease-in-out infinite alternate; }
.aura i:nth-child(1) { width: 52vw; height: 52vw; left: -12vw; top: -14vw; background: #FFD3C4; }
.aura i:nth-child(2) { width: 46vw; height: 46vw; right: -10vw; top: 10vh; background: #D9CFFF; animation-duration: 32s; }
.aura i:nth-child(3) { width: 40vw; height: 40vw; left: 30vw; bottom: -18vw; background: #C9F2E3; animation-duration: 38s; }
.aura i:nth-child(4) { width: 30vw; height: 30vw; right: 18vw; bottom: 10vh; background: #CFEFFF; opacity: .45; animation-duration: 29s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 4vh) scale(1.08); } 100% { transform: translate(-4vw, -3vh) scale(.95); } }
/* dotted grid that gives the light page structure */
.aura::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(30, 26, 46, .12) 1px, transparent 1.2px); background-size: 28px 28px; mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%); }

.hdr.solid { background: rgba(248, 246, 252, .72); }
.snd { background: var(--glass); backdrop-filter: blur(10px); }
.snd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.snd .x { display: none; }
.snd[aria-pressed="false"] .x { display: inline; }
.snd[aria-pressed="false"] .w { display: none; }
.cur-ring { border-color: rgba(30, 26, 46, .45); }
.cur-ring.big { background: var(--bone); border-color: var(--bone); }
.cur-ring span { color: #fff; }
.pop { background: rgba(255, 255, 255, .9); color: var(--bone); border-color: rgba(233, 138, 196, .35); box-shadow: 0 8px 24px -10px rgba(244, 162, 127, .4); }
.pop b { color: var(--hot); }
.meter .m.hit b { color: var(--pink); }
.eyebrow { color: var(--bone); background: var(--glass); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .8); padding: 8px 14px; border-radius: 999px; display: inline-flex; box-shadow: 0 6px 20px -12px rgba(30, 26, 46, .3); }
.scroll-cue i { background: linear-gradient(var(--pink), transparent); }

/* Typewriter */
.tw .ch { visibility: hidden; }
.tw .ch.on { visibility: visible; }
.tw .w { white-space: nowrap; }
.caret { display: inline-block; width: .08em; height: .82em; margin-left: .04em; vertical-align: -.04em; background: var(--pink); border-radius: 2px; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Chips & glass surfaces */
.chan-c { background: var(--glass); backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, .9); box-shadow: 0 30px 60px -40px rgba(30, 26, 46, .35); }
.chan-amz { box-shadow: inset 0 3px 0 var(--amz), 0 30px 60px -40px rgba(30, 26, 46, .35); }
.chan-shop { box-shadow: inset 0 3px 0 var(--hot), 0 30px 60px -40px rgba(30, 26, 46, .35); }
.sister li { background: var(--glass); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .9); }
.svc { background: rgba(30, 26, 46, .08); border-radius: 24px; overflow: hidden; border: 0; }
.card .no { font-size: 13px; }
.card::after { background: var(--grad); height: 3px; }
.num b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-row i { border-color: rgba(30, 26, 46, .18); background: rgba(255, 255, 255, .4); }
.faq summary::after { color: var(--pink); }
.modal-in { background: #fff; box-shadow: 0 40px 80px -30px rgba(30, 26, 46, .4); }
.out { background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px -14px rgba(30, 26, 46, .35); }
.f { border-color: rgba(30, 26, 46, .85); }
.f span { color: rgba(30, 26, 46, .6); }
.flap { border-color: rgba(30, 26, 46, .85); }
.prod { background: #fff; box-shadow: 0 0 0 1.5px var(--bone), 0 0 calc(var(--pg, 0) * 90px) rgba(233, 138, 196, calc(var(--pg, 0) * .55)); }
.box-pin::before { background: radial-gradient(40% 50% at 72% 55%, rgba(233, 138, 196, var(--glow, 0)), transparent 70%); }
.contact::before { content: ""; position: absolute; left: 50%; bottom: -30%; width: 70vw; height: 60vw; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(233, 138, 196, .22), rgba(244, 162, 127, .12) 60%, transparent); pointer-events: none; z-index: -1; }
.contact { overflow: hidden; }
/* Marquee band between hero and box: new-age kinetic type */
.band { position: relative; z-index: 2; overflow: hidden; padding: 22px 0; background: var(--bone); color: #fff; transform: rotate(-1.5deg); margin: 0 -2vw; }
.band-in { display: flex; gap: 48px; width: max-content; animation: band 28s linear infinite; font: 700 clamp(22px, 2.6vw, 34px)/1 'Outfit', sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.band-in span { display: inline-flex; align-items: center; gap: 48px; }
.band-in svg { width: .9em; height: .9em; fill: none; stroke: url(#bandGrad); stroke-width: 40; }
@keyframes band { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band-in { animation: none; } .aura i { animation: none; } }

/* ---------- v4: pastel new-age layer ---------- */
:root { --grad: linear-gradient(100deg, #8E7CF8 0%, #E98AC4 50%, #F4A27F 100%); --mint: #8EE3C8; }

.aura i { opacity: .75; filter: blur(90px); }
.aura i:nth-child(1) { background: #FFD6C7; }
.aura i:nth-child(2) { background: #D6CCFF; }
.aura i:nth-child(3) { background: #C6F1E2; }
.aura i:nth-child(4) { background: #CFE6FF; opacity: .7; }
/* fine film grain over the mesh gradient */
.aura::before { content: ""; position: absolute; inset: -50%; opacity: .07; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.aura::after { background-image: radial-gradient(rgba(30, 26, 46, .09) 1px, transparent 1.2px); }
/* primary buttons: calm ink with an iridescent glow */
.btn-hot { isolation: isolate; --bg: #1E1A2E; background: #1E1A2E; color: #fff; border-color: transparent; position: relative; box-shadow: 0 12px 30px -12px rgba(142, 124, 248, .7), 0 0 0 1px rgba(255, 255, 255, .25) inset; }
.btn-hot::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--grad); z-index: -1; opacity: 0; filter: blur(10px); transition: opacity .4s var(--ease); }
.btn-hot:hover { box-shadow: 0 16px 40px -12px rgba(233, 138, 196, .8), 0 0 0 1px rgba(255, 255, 255, .3) inset; }
.btn-hot:hover::before { opacity: .9; }
.caret { background: var(--violet); }
.band { background: #1E1A2E; }
.hdr.solid { background: rgba(248, 246, 252, .7); backdrop-filter: blur(16px) saturate(1.4); }
.card::after { background: var(--grad); }
.pains b::before { color: #E98AC4; }

/* 02 box: real 3D canvas */
.box-stage { perspective: none; }
.box-gl { position: absolute; inset: -6% -12% -2% -12%; width: 124%; height: 108%; display: block; }
.box-pin::before { background: radial-gradient(38% 48% at 72% 48%, rgba(214, 204, 255, calc(var(--glow, 0) * .9)), rgba(255, 214, 199, calc(var(--glow, 0) * .35)) 50%, transparent 72%); }
.out { z-index: 2; top: 30%; background: rgba(255, 255, 255, .78); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .9); padding: 11px 16px; font-size: 15px; box-shadow: 0 14px 34px -16px rgba(30, 26, 46, .4); }
.out-a .sw, .out-s .sw { width: 9px; height: 9px; border-radius: 50%; }
.out-a { border-color: rgba(245, 180, 90, .6); } .out-s { border-color: rgba(142, 124, 248, .55); } .out-c { border-color: rgba(233, 138, 196, .55); }
@media (max-width: 900px) {
  .box-stage { height: 400px; }
  .box-gl { inset: -4% -6% 0 -6%; width: 112%; height: 104%; }
  .out { font-size: 13px; padding: 9px 12px; top: 34%; }
}
@media (max-width: 900px) { .box-pin::before { background: radial-gradient(60% 30% at 50% 22%, rgba(214, 204, 255, calc(var(--glow, 0) * .8)), transparent 75%); } }
/* client wordmarks (same brands as DigitalRoar) */
.cmarq { overflow: hidden; margin-top: 14px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cmarq-in { display: flex; width: max-content; animation: band 40s linear infinite; }
.cmarq.rev .cmarq-in { animation-direction: reverse; animation-duration: 48s; }
.cmarq span { font: 600 clamp(26px, 3.4vw, 52px)/1.15 'Outfit', sans-serif; letter-spacing: -.02em; padding-inline: .55em; white-space: nowrap; color: var(--bone); opacity: .82; transition: opacity .3s; }
.cmarq.rev span { color: transparent; -webkit-text-stroke: 1.2px rgba(30, 26, 46, .45); opacity: 1; }
.cmarq span::after { content: ""; display: inline-block; width: .32em; height: .32em; margin-left: 1.1em; border-radius: 50%; background: var(--grad); vertical-align: middle; }
.cmarq span:hover { opacity: 1; }
.cmarq:hover .cmarq-in { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cmarq-in { animation: none; } }

/* ---------- v5: more colour movement + echo patterns ---------- */
.aura i { opacity: .9; filter: blur(70px); animation-duration: 18s; }
.aura i:nth-child(1) { background: #FFC9B5; }
.aura i:nth-child(2) { background: #C7B8FF; animation-duration: 22s; }
.aura i:nth-child(3) { background: #B4EEDA; animation-duration: 26s; }
.aura i:nth-child(4) { background: #FFC1DC; opacity: .85; animation-duration: 20s; }
.aura i:nth-child(5) { width: 34vw; height: 34vw; left: 8vw; top: 46vh; background: #BBDDFF; animation-duration: 24s; animation-direction: alternate-reverse; }
/* slow holographic ring that drifts behind everything */
.aura .holo { position: absolute; width: 120vmax; height: 120vmax; left: 50%; top: 50%; margin: -60vmax 0 0 -60vmax; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(199, 184, 255, .0), rgba(199, 184, 255, .55), rgba(255, 193, 220, .5), rgba(255, 201, 181, .45), rgba(180, 238, 218, .5), rgba(187, 221, 255, .5), rgba(199, 184, 255, .0));
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 60%, #000 66%, transparent 74%); mask: radial-gradient(closest-side, transparent 58%, #000 60%, #000 66%, transparent 74%);
  filter: blur(30px); opacity: .8; animation: holo 40s linear infinite; }
@keyframes holo { to { transform: rotate(1turn); } }
/* echo-arc pattern: the logo's three arcs as large line ornaments in alternating sections */
.sec::before { content: ""; position: absolute; width: clamp(320px, 42vw, 640px); aspect-ratio: 1; pointer-events: none; z-index: -1; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-200 -200 400 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238E7CF8'/%3E%3Cstop offset='.5' stop-color='%23E98AC4'/%3E%3Cstop offset='1' stop-color='%23F4A27F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='1.6'%3E%3Cpath d='M0 -180 A180 180 0 1 0 180 0'/%3E%3Cpath d='M0 -150 A150 150 0 1 0 150 0' stroke-dasharray='2 6'/%3E%3Cpath d='M0 -116 A116 116 0 1 0 116 0'/%3E%3Cpath d='M0 -84 A84 84 0 1 0 84 0' stroke-dasharray='2 6'/%3E%3Cpath d='M0 -51 A51 51 0 1 0 51 0'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: holo 90s linear infinite; }
.sec:nth-of-type(odd)::before { right: -12vw; top: 6%; }
.sec:nth-of-type(even)::before { left: -14vw; bottom: 4%; animation-direction: reverse; }
.sec { overflow: clip; }
/* fine diagonal hairlines over the colour field */
.aura::after { background-image: radial-gradient(rgba(30, 26, 46, .1) 1px, transparent 1.2px), repeating-linear-gradient(115deg, rgba(255, 255, 255, .0) 0 46px, rgba(255, 255, 255, .35) 46px 47px); background-size: 28px 28px, auto; }
@media (prefers-reduced-motion: reduce) { .aura .holo, .sec::before { animation: none; } }

/* ---------- v6: pastel all the way, no white page ---------- */
.aura { background:
  radial-gradient(55% 45% at 8% 6%, #FFD5C4 0%, transparent 62%),
  radial-gradient(50% 50% at 94% 16%, #D3C7FF 0%, transparent 62%),
  radial-gradient(55% 55% at 74% 92%, #C2F0DF 0%, transparent 62%),
  radial-gradient(45% 50% at 16% 84%, #FFCFE4 0%, transparent 62%),
  radial-gradient(40% 40% at 50% 50%, #DCEBFF 0%, transparent 70%),
  linear-gradient(135deg, #EEE8FF 0%, #FCEBF3 45%, #FFF0E8 70%, #E7F7F1 100%); }
html { background: #F1ECFB; } body { background: transparent !important; }
.hdr.solid { background: rgba(243, 237, 252, .72); }
/* modern hairline grid, fading out to the edges */
.aura .holo::after { content: none; }
.aura::after { background-image:
  linear-gradient(rgba(30, 26, 46, .055) 1px, transparent 1px),
  linear-gradient(90deg, rgba(30, 26, 46, .055) 1px, transparent 1px),
  radial-gradient(rgba(30, 26, 46, .14) 1.2px, transparent 1.6px);
  background-size: 96px 96px, 96px 96px, 96px 96px; background-position: 0 0, 0 0, -48px -48px;
  mask-image: radial-gradient(90% 80% at 50% 45%, #000 35%, transparent 85%); }
/* glossy pastel orbs that drift slowly */
.orb { position: absolute; border-radius: 50%; text-decoration: none; animation: orb 16s ease-in-out infinite alternate; box-shadow: inset -12px -16px 30px rgba(30, 26, 46, .12), inset 10px 12px 24px rgba(255, 255, 255, .9), 0 30px 60px -24px rgba(142, 124, 248, .45); }
.o1 { width: 120px; height: 120px; left: 6vw; top: 22vh; background: radial-gradient(circle at 32% 28%, #fff 0, #E8E1FF 22%, #B9AAFF 62%, #8E7CF8 100%); }
.o2 { width: 70px; height: 70px; right: 9vw; top: 62vh; background: radial-gradient(circle at 32% 28%, #fff 0, #FFE3EF 22%, #F6A9CF 62%, #E98AC4 100%); animation-duration: 12s; }
.o3 { width: 46px; height: 46px; left: 44vw; top: 84vh; background: radial-gradient(circle at 32% 28%, #fff 0, #FFEDE3 22%, #FFC3A6 62%, #F4A27F 100%); animation-duration: 10s; }
.o4 { width: 90px; height: 90px; right: 30vw; top: 8vh; background: radial-gradient(circle at 32% 28%, #fff 0, #E2FAF1 22%, #A6E9D2 62%, #6FD6B8 100%); animation-duration: 19s; opacity: .9; }
@keyframes orb { 0% { transform: translate(0, 0); } 100% { transform: translate(2vw, -4vh); } }
/* four-point sparkles */
.spk { position: absolute; width: 22px; height: 22px; text-decoration: none; background: linear-gradient(135deg, #8E7CF8, #E98AC4); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: spk 3.6s ease-in-out infinite; }
.k1 { left: 18vw; top: 12vh; } .k2 { right: 16vw; top: 40vh; width: 14px; height: 14px; animation-delay: -1s; }
.k3 { left: 30vw; bottom: 14vh; width: 16px; height: 16px; animation-delay: -2s; background: linear-gradient(135deg, #F4A27F, #E98AC4); }
.k4 { right: 6vw; bottom: 26vh; animation-delay: -.5s; background: linear-gradient(135deg, #6FD6B8, #8E7CF8); }
.k5 { left: 4vw; top: 56vh; width: 12px; height: 12px; animation-delay: -2.6s; }
@keyframes spk { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
/* cards and panels read as frosted glass on the colour */
.svc { background: rgba(255, 255, 255, .25); }
.card { background: rgba(255, 255, 255, .55) !important; backdrop-filter: blur(16px); }
.faq details { background: rgba(255, 255, 255, .45); border-radius: 16px; padding-inline: 18px; margin-bottom: 8px; border: 1px solid rgba(255, 255, 255, .7); }
@media (max-width: 900px) { .o1 { width: 70px; height: 70px; left: -16px; } .o4 { width: 54px; height: 54px; } .o2 { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .orb, .spk { animation: none; } }
/* keep the orbs on the edges, never behind text */
.o1 { width: 110px; height: 110px; left: -38px; top: 40vh; }
.o2 { width: 64px; height: 64px; right: -14px; top: 74vh; }
.o3 { width: 40px; height: 40px; left: auto; right: 3vw; top: 30vh; }
.o4 { width: 78px; height: 78px; right: auto; left: 2vw; top: 86vh; }