:root {
  --ink: #111018;
  --paper: #f2f4f8;
  --muted: #6e6a78;
  --line: rgba(17, 16, 24, 0.14);
  --blue: #244cff;
  --violet: #9357ff;
  --lime: #d7ff43;
  --coral: #ff6c58;
  --white: #fff;
  --max: 1240px;
  --radius: 28px;
  --shadow: 0 30px 80px rgba(17, 16, 24, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }

.skip-link { position: fixed; left: 12px; top: -60px; z-index: 99; background: var(--lime); padding: 12px 18px; border-radius: 99px; font-weight: 800; }
.skip-link:focus { top: 12px; }

.nav-shell { position: fixed; z-index: 50; top: 18px; left: 0; right: 0; padding: 0 22px; }
.nav {
  max-width: var(--max); margin: auto; min-height: 68px; padding: 10px 12px 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border: 1px solid rgba(255,255,255,.58); border-radius: 22px;
  background: rgba(242,244,248,.96); box-shadow: 0 14px 45px rgba(19,15,34,.09);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -.02em; font-size: 19px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); display: grid; place-items: center; color: var(--lime); font-size: 14px; transform: rotate(-5deg); }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 700; }
.nav-links a { transition: opacity .2s; }
.nav-links a:hover { opacity: .55; }
.nav-cta, .btn {
  border: 0; cursor: pointer; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 20px; border-radius: 14px; background: var(--ink); color: white; font-weight: 800; transition: transform .22s, box-shadow .22s, background .22s;
}
.nav-cta:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(17,16,24,.18); }
.btn.primary { background: var(--blue); }
.btn.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.light { background: var(--white); color: var(--ink); }
.btn.arrow::after { content: "↗"; font-size: 1.1em; }
.menu-btn { display: none; width: 46px; height: 46px; border: 0; border-radius: 14px; background: var(--ink); color: white; font-size: 20px; }

.hero { min-height: 820px; position: relative; overflow: hidden; padding: 180px 24px 78px; }
.hero::before { content:""; position:absolute; width:700px; height:700px; border-radius:50%; right:-180px; top:-180px; background:radial-gradient(circle at 35% 35%,rgba(215,255,67,.95),rgba(147,87,255,.72) 42%,rgba(36,76,255,.12) 72%,transparent 73%); filter:blur(2px); animation: drift 10s ease-in-out infinite; }
.hero::after { content:""; position:absolute; width:300px; height:300px; left:-110px; bottom:70px; border-radius:38% 62% 60% 40%; background:var(--coral); opacity:.18; animation: drift 12s ease-in-out infinite reverse; }
@keyframes drift { 50% { transform: translate(22px,35px) rotate(12deg) scale(1.04); } }
.hero-inner { max-width: var(--max); margin:auto; position:relative; z-index:2; }
.hero-object { position:absolute; z-index:3; padding:10px 14px; border-radius:12px; font-size:12px; font-weight:950; letter-spacing:.06em; box-shadow:0 18px 34px rgba(17,16,24,.16); pointer-events:none; animation:heroFly 1.1s cubic-bezier(.2,.8,.2,1) both, objectFloat 5s ease-in-out 1.1s infinite; }
.object-one { right:4%; top:4%; background:var(--coral); color:white; transform:rotate(8deg); }
.object-two { right:22%; top:48%; background:var(--lime); animation-delay:.2s,1.3s; }
.object-three { right:7%; top:65%; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--lime); font-size:24px; animation-delay:.38s,1.48s; }
@keyframes heroFly { from { opacity:0; translate:120px -50px; rotate:24deg; scale:.6; } to { opacity:1; translate:0 0; rotate:0deg; scale:1; } }
@keyframes objectFloat { 50% { translate:0 -12px; rotate:4deg; } }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:12px; text-transform:uppercase; letter-spacing:.16em; font-weight:900; }
.eyebrow::before { content:""; width:9px; height:9px; background:var(--blue); border-radius:50%; box-shadow:0 0 0 6px rgba(36,76,255,.12); }
.hero h1 { max-width: 1030px; margin: 30px 0 32px; font-size: clamp(58px, 5.5vw, 70px); line-height: .94; letter-spacing: -.03em; font-weight: 900; }
.hero h1 .accent { color:var(--blue); font-style:italic; font-family: Georgia, serif; font-weight:400; letter-spacing:-.035em; }
.hero-bottom { max-width: 1030px; display:grid; grid-template-columns:1fr .72fr; gap:70px; align-items:end; }
.hero-copy { font-size:clamp(19px,2vw,26px); line-height:1.38; letter-spacing:-.025em; margin:0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.micro-proof { margin-top:70px; padding-top:24px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.ticker { overflow:hidden; background:var(--ink); color:white; transform:rotate(-1.2deg); margin:-34px 0 80px; position:relative; z-index:4; }
.ticker-track { display:flex; width:max-content; animation:ticker 28s linear infinite; }
.ticker span { padding:19px 28px; font-size:14px; font-weight:900; text-transform:uppercase; letter-spacing:.14em; white-space:nowrap; }
.ticker i { color:var(--lime); font-style:normal; }
@keyframes ticker { to { transform:translateX(-50%); } }

.section { padding:110px 24px; }
.section-inner { max-width:var(--max); margin:auto; }
.section-head { display:grid; grid-template-columns:.62fr 1.38fr; gap:64px; margin-bottom:62px; align-items:start; }
.section-kicker { font-size:12px; text-transform:uppercase; letter-spacing:.16em; font-weight:900; color:var(--blue); padding-top:10px; }
.section-title { font-size:clamp(42px,6vw,82px); line-height:.98; letter-spacing:-.03em; margin:0; max-width:900px; }
.section-copy { max-width:680px; color:var(--muted); font-size:18px; line-height:1.65; margin:24px 0 0; }

.services { background:#fff; }
.service-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.service-card { min-height:320px; padding:30px; border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; background:var(--paper); transition:transform .3s, box-shadow .3s; }
.service-card:hover { transform:translateY(-7px) rotate(-.3deg); box-shadow:var(--shadow); }
.service-card { grid-column:span 6; }
.service-card.blue { background:var(--blue); color:white; border-color:transparent; }
.service-card.lime { background:var(--lime); border-color:transparent; }
.service-card.dark { background:var(--ink); color:white; border-color:transparent; }
.service-card .num { font-size:12px; font-weight:900; letter-spacing:.12em; opacity:.7; }
.service-card h3 { font-size:clamp(28px,4vw,52px); margin:0 0 15px; line-height:.95; letter-spacing:-.03em; max-width:600px; }
.service-card p { max-width:540px; margin:0; line-height:1.55; opacity:.76; }
.service-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; }
.service-tags span { border:1px solid currentColor; padding:7px 10px; border-radius:999px; font-size:11px; font-weight:800; opacity:.68; }
.service-card .orb { position:absolute; width:180px; height:180px; right:-45px; top:-50px; border-radius:50%; background:var(--coral); opacity:.72; }
.card-cta { display:inline-block; margin-top:24px; font-size:13px; font-weight:900; letter-spacing:.02em; }
.service-card:focus-visible,.project-link:focus-visible { outline:4px solid var(--coral); outline-offset:4px; }

.playground { background:#ece8ff; overflow:hidden; }
.showcase { background:var(--ink); color:white; border-radius:36px; overflow:hidden; box-shadow:0 40px 90px rgba(46,32,105,.25); }
.showcase-stage { position:relative; min-height:610px; }
.showcase-slide { position:absolute; inset:0; display:grid; grid-template-columns:.78fr 1.22fr; opacity:0; pointer-events:none; visibility:hidden; }
.showcase-slide.active { opacity:1; pointer-events:auto; visibility:visible; }
.slide-copy { padding:54px 30px 54px 54px; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:3; }
.slide-number { color:var(--lime); font-size:11px; letter-spacing:.16em; font-weight:900; }
.slide-copy h3 { font-size:clamp(52px,7vw,92px); line-height:.89; letter-spacing:-.03em; margin:35px 0 25px; opacity:0; transform:translateX(-70px); }
.slide-copy p { color:rgba(255,255,255,.62); font-size:17px; line-height:1.55; max-width:380px; opacity:0; transform:translateY(25px); }
.showcase-slide.active .slide-copy h3 { animation:slideCopyIn .7s .12s cubic-bezier(.2,.8,.2,1) forwards; }
.showcase-slide.active .slide-copy p { animation:slideCopyIn .65s .3s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes slideCopyIn { to { opacity:1; transform:none; } }
.kinetic-canvas { margin:22px; border-radius:24px; min-height:566px; position:relative; overflow:hidden; }
.scene-attention { background:var(--coral); }
.kinetic-word { position:absolute; font-size:clamp(78px,11vw,165px); font-weight:950; line-height:.82; letter-spacing:-.035em; color:var(--ink); }
.word-a { left:5%; top:17%; transform:translateX(130%); }
.word-b { right:7%; bottom:18%; color:white; transform:translateX(-130%); }
.active .word-a { animation:wordFlyA .8s .12s cubic-bezier(.15,.82,.2,1) forwards, wordHoverA 3.2s 1.2s ease-in-out infinite; }
.active .word-b { animation:wordFlyB .8s .26s cubic-bezier(.15,.82,.2,1) forwards, wordHoverB 3.5s 1.35s ease-in-out infinite; }
@keyframes wordFlyA { to { transform:translateX(0) rotate(-3deg); } }
@keyframes wordFlyB { to { transform:translateX(0) rotate(2deg); } }
@keyframes wordHoverA { 0%,100% { translate:0 0; rotate:-3deg; } 50% { translate:10px -13px; rotate:-1deg; } }
@keyframes wordHoverB { 0%,100% { translate:0 0; rotate:2deg; } 50% { translate:-12px 12px; rotate:0deg; } }
.kinetic-dot { position:absolute; border-radius:50%; background:var(--lime); }
.dot-a { width:80px;height:80px;right:8%;top:8%; animation:objectFloat 3.8s ease-in-out infinite; }
.dot-b { width:26px;height:26px;left:16%;bottom:10%; background:var(--blue); }
.kinetic-ring { position:absolute; width:180px;height:180px; border:28px solid var(--violet); border-radius:50%; right:25%; top:34%; transform:scale(0); }
.active .kinetic-ring { animation:ringPop .65s .55s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes ringPop { to { transform:scale(1) rotate(25deg); } }
.scene-interaction { background:#624dff; display:grid; place-items:center; }
.pulse-button { width:180px;height:180px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--lime);color:var(--ink);font-weight:950;font-size:20px;position:relative;z-index:3;box-shadow:0 0 0 0 rgba(215,255,67,.5); }
.active .pulse-button { animation:pulseIn .7s cubic-bezier(.2,1.4,.3,1) forwards, pulseGlow 2.4s 1s ease-out infinite; }
@keyframes pulseIn { from { transform:scale(0) rotate(-30deg); } to { transform:scale(1) rotate(0); } }
@keyframes pulseGlow { 70% { box-shadow:0 0 0 38px rgba(215,255,67,0); } 100% { box-shadow:0 0 0 0 rgba(215,255,67,0); } }
.orbit-label { position:absolute; padding:10px 15px; border:1px solid rgba(255,255,255,.45);border-radius:99px;font-size:11px;font-weight:900;opacity:0; }
.label-a { left:12%;top:18%; }.label-b{right:12%;top:24%}.label-c{right:16%;bottom:14%}
.active .orbit-label { animation:orbitIn .6s .42s forwards; }.active .label-b{animation-delay:.56s}.active .label-c{animation-delay:.7s}
@keyframes orbitIn { from { opacity:0; transform:translateY(30px) rotate(12deg); } to { opacity:1; transform:none; } }
.orbit-line { position:absolute;width:72%;height:72%;border:1px dashed rgba(255,255,255,.42);border-radius:50%;animation:slowSpin 18s linear infinite; }
@keyframes slowSpin { to { rotate:360deg; } }
.scene-system { background:#eef1f7; }
.scene-system svg { position:absolute; inset:0; width:100%; height:100%; }
.scene-system path { fill:none; stroke:var(--blue); stroke-width:5; stroke-linecap:round; stroke-dasharray:800; stroke-dashoffset:800; }
.active .scene-system path { animation:drawPath 1.4s .15s ease forwards; }
@keyframes drawPath { to { stroke-dashoffset:0; } }
.system-node { position:absolute; z-index:2; display:grid;place-items:center;border-radius:50%;background:var(--ink);color:white;font-weight:950;font-size:11px;transform:scale(0);box-shadow:0 18px 35px rgba(17,16,24,.18); }
.node-1{width:84px;height:84px;left:6%;top:37%}.node-2{width:112px;height:112px;left:28%;top:50%}.node-3{width:94px;height:94px;right:27%;top:22%;background:var(--blue)}.node-4{width:120px;height:120px;right:5%;top:35%;background:var(--lime);color:var(--ink)}
.active .system-node { animation:nodePop .55s .2s cubic-bezier(.2,1.5,.4,1) forwards, nodeFloat 3.1s 1.35s ease-in-out infinite; }.active .node-2{animation-delay:.45s,1.55s}.active .node-3{animation-delay:.7s,1.75s}.active .node-4{animation-delay:.95s,1.95s}
@keyframes nodePop { to { transform:scale(1); } }
@keyframes nodeFloat { 0%,100% { translate:0 0; } 50% { translate:0 -14px; } }
.showcase-controls { min-height:88px; padding:15px 20px 15px 30px; border-top:1px solid rgba(255,255,255,.12); display:flex;align-items:center;justify-content:space-between;gap:20px; }
.slide-tabs { display:flex;gap:8px; }
.slide-tab,.sound-toggle,.pause-toggle,.replay-toggle { border:0;cursor:pointer;color:rgba(255,255,255,.54);background:transparent;border-radius:12px;font-weight:800;transition:background .2s,color .2s,transform .2s; }
.slide-tab { padding:12px 14px; }.slide-tab span{color:var(--lime);margin-right:5px}.slide-tab.active{background:rgba(255,255,255,.1);color:white}
.showcase-actions { display:flex;gap:8px;align-items:center; }.sound-toggle{padding:12px}.pause-toggle,.replay-toggle{width:42px;height:42px;background:rgba(255,255,255,.1);color:white;font-size:16px}.replay-toggle:hover{transform:rotate(-35deg);background:var(--lime);color:var(--ink)}.sound-toggle[aria-pressed="true"]{color:var(--lime)}
.live-badge { display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:99px;background:rgba(215,255,67,.1);color:var(--lime);font-size:10px;text-transform:uppercase;letter-spacing:.11em;font-weight:900; }
.live-badge i { width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(215,255,67,.5);animation:livePulse 1.7s ease-out infinite; }
@keyframes livePulse { 70% { box-shadow:0 0 0 7px rgba(215,255,67,0); } }
.showcase-progress { height:4px;background:rgba(255,255,255,.08); }.showcase-progress i{display:block;height:100%;width:0;background:var(--lime)}.showcase.running .showcase-progress i{animation:showProgress 7s linear forwards}@keyframes showProgress{to{width:100%}}

.work { background:var(--ink); color:white; overflow:hidden; }
.work .section-kicker { color:var(--lime); }
.work .section-copy { color:rgba(255,255,255,.58); }
.project-list { display:grid; gap:30px; }
.project { display:grid; grid-template-columns:.85fr 1.15fr; min-height:500px; border:1px solid rgba(255,255,255,.16); border-radius:32px; overflow:hidden; background:#181722; }
.project:nth-child(even) { grid-template-columns:1.15fr .85fr; }
.project:nth-child(even) .project-info { order:2; }
.project-info { padding:48px; display:flex; flex-direction:column; justify-content:space-between; }
.project-index { color:var(--lime); font-size:12px; letter-spacing:.16em; font-weight:900; }
.project h3 { font-size:clamp(38px,5vw,68px); line-height:.96; letter-spacing:-.03em; margin:0 0 20px; }
.project p { color:rgba(255,255,255,.62); line-height:1.6; max-width:480px; }
.project-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:28px; }
.project-meta span { border:1px solid rgba(255,255,255,.22); border-radius:99px; padding:8px 12px; font-size:11px; font-weight:800; }
.project-visual { padding:38px; position:relative; display:grid; place-items:center; min-height:400px; overflow:hidden; }
.visual-estate { background:#c9f19d; }
.visual-insure { background:#5147db; }
.visual-electric { background:#ffcf3f; }
.browser { width:92%; border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.25); background:white; overflow:hidden; transform:rotate(-3deg); transition:transform .4s; }
.project:hover .browser { transform:rotate(0) scale(1.035); }
.browser-top { height:32px; background:#ececf0; display:flex; gap:6px; align-items:center; padding:0 12px; }
.browser-top i { width:7px; height:7px; border-radius:50%; background:#b8b7be; }
.mock-page { min-height:280px; padding:26px; color:#17151e; }
.mock-logo { font-weight:950; font-size:13px; }
.mock-head { font-size:clamp(28px,4vw,50px); line-height:.93; font-weight:950; letter-spacing:-.03em; margin:55px 0 15px; max-width:350px; }
.mock-line { height:7px; border-radius:5px; width:65%; background:rgba(20,18,28,.17); margin:8px 0; }
.mock-button { display:inline-block; margin-top:24px; padding:10px 16px; border-radius:8px; background:#17151e; color:white; font-size:10px; font-weight:800; }
.project-link { background:none; color:white; border:0; padding:0; display:inline-flex; gap:10px; align-items:center; cursor:pointer; font-weight:850; text-align:left; }

.method { background:var(--lime); }
.method-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(17,16,24,.24); }
.step { padding:34px 28px 34px 0; border-right:1px solid rgba(17,16,24,.24); }
.step + .step { padding-left:28px; }
.step:last-child { border-right:0; }
.step strong { font-size:13px; }
.step h3 { font-size:30px; line-height:1; letter-spacing:-.02em; margin:34px 0 14px; }
.step p { line-height:1.55; opacity:.7; }

.ugc-teaser { background:var(--violet); color:white; overflow:hidden; position:relative; }
.ugc-teaser::after { content:"UGC"; position:absolute; right:-40px; bottom:-95px; font-size:340px; line-height:1; font-weight:950; letter-spacing:-.03em; color:rgba(255,255,255,.08); }
.ugc-wrap { position:relative; z-index:2; display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:center; }
.ugc-teaser h2 { font-size:clamp(54px,8vw,110px); line-height:.9; letter-spacing:-.03em; margin:20px 0 35px; }
.ugc-teaser p { color:rgba(255,255,255,.7); max-width:680px; font-size:20px; line-height:1.55; }
.phone-stack { height:520px; position:relative; }
.phone { position:absolute; width:220px; aspect-ratio:9/17.7; border:8px solid #15131d; border-radius:38px; overflow:hidden; box-shadow:0 30px 60px rgba(20,10,40,.35); background:var(--coral); }
.phone.one { left:10px; top:50px; transform:rotate(-8deg); }
.phone.two { right:0; top:0; transform:rotate(8deg); background:var(--blue); }
.phone-content { height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:26px 18px; color:white; font-weight:900; }
.phone-play { width:58px; height:58px; display:grid; place-items:center; margin:auto; background:rgba(255,255,255,.3); border-radius:50%; }

.faq-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:80px; }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q { width:100%; border:0; background:none; padding:25px 0; display:flex; justify-content:space-between; gap:25px; text-align:left; font-weight:850; font-size:18px; cursor:pointer; }
.faq-q span:last-child { color:var(--blue); font-size:22px; transition:transform .3s; }
.faq-a { max-height:0; overflow:hidden; color:var(--muted); line-height:1.65; transition:max-height .35s ease; }
.faq-a p { margin:0; padding:0 44px 25px 0; }
.faq-item.open .faq-a { max-height:240px; }
.faq-item.open .faq-q span:last-child { transform:rotate(45deg); }

.contact { background:var(--blue); color:white; }
.contact-wrap { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.contact h2 { font-size:clamp(52px,7vw,96px); line-height:.92; letter-spacing:-.03em; margin:0 0 30px; }
.contact p { color:rgba(255,255,255,.68); font-size:18px; line-height:1.6; }
.contact-form { background:white; color:var(--ink); border-radius:30px; padding:34px; box-shadow:0 35px 70px rgba(13,16,70,.3); }
.field { display:grid; gap:8px; margin-bottom:16px; }
.field label { font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.field input,.field textarea,.field select { width:100%; border:1px solid var(--line); background:var(--paper); border-radius:12px; padding:14px 15px; outline:0; transition:border .2s, box-shadow .2s; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,76,255,.12); }
.field textarea { min-height:100px; resize:vertical; }
.form-note { font-size:11px; color:var(--muted); line-height:1.45; margin-top:13px; }
.form-status { min-height:24px; margin-top:12px; font-size:13px; font-weight:800; color:var(--blue); }
.form-note a { text-decoration:underline; }
.contact-direct { display:grid; gap:9px; margin-top:32px; padding-top:26px; border-top:1px solid rgba(255,255,255,.3); }
.contact-direct span { font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:900; color:rgba(255,255,255,.6); }
.contact-direct a { font-size:clamp(20px,3vw,30px); font-weight:900; letter-spacing:-.03em; }
.contact-direct button { width:max-content; border:1px solid rgba(255,255,255,.4); color:white; background:transparent; border-radius:99px; padding:9px 13px; cursor:pointer; font-size:12px; font-weight:800; }

.footer { background:var(--ink); color:white; padding:70px 24px 28px; }
.footer-inner { max-width:var(--max); margin:auto; }
.footer-top { display:grid; grid-template-columns:1.3fr .7fr .7fr; gap:60px; padding-bottom:80px; }
.footer-brand { font-size:clamp(38px,5vw,68px); letter-spacing:-.03em; font-weight:950; line-height:.92; }
.footer h4 { color:rgba(255,255,255,.45); font-size:11px; text-transform:uppercase; letter-spacing:.14em; margin:0 0 20px; }
.footer-links { display:grid; gap:12px; }
.footer-links a { color:rgba(255,255,255,.78); font-size:14px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.13); padding-top:22px; display:flex; justify-content:space-between; gap:20px; color:rgba(255,255,255,.42); font-size:11px; }
.consent-settings { border:0; padding:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.consent-settings:hover,.consent-settings:focus-visible { color:white; text-decoration:underline; text-underline-offset:3px; }

.consent-layer { position:fixed; z-index:200; inset:0; display:flex; align-items:flex-end; padding:22px; background:rgba(17,16,24,.48); }
.consent-layer[hidden] { display:none; }
.consent-panel { width:min(1120px,100%); margin:0 auto; padding:28px; display:grid; grid-template-columns:1.25fr .75fr; gap:36px; align-items:end; color:white; background:rgba(24,23,34,.98); border:1px solid rgba(255,255,255,.16); border-radius:26px; box-shadow:0 28px 80px rgba(0,0,0,.4); }
.consent-kicker { display:block; margin-bottom:9px; color:var(--lime); font-size:10px; font-weight:950; letter-spacing:.15em; text-transform:uppercase; }
.consent-panel h2 { margin:0 0 10px; font-size:clamp(25px,3.1vw,42px); line-height:1; letter-spacing:-.025em; }
.consent-panel p { max-width:720px; margin:0; color:rgba(255,255,255,.68); font-size:14px; line-height:1.55; }
.consent-panel a { color:white; text-decoration:underline; text-underline-offset:3px; }
.consent-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.consent-button { min-height:52px; border:1px solid rgba(255,255,255,.75); border-radius:14px; padding:13px 16px; color:white; background:transparent; font:inherit; font-size:13px; font-weight:900; cursor:pointer; transition:transform .2s,background .2s,color .2s; }
.consent-button:hover,.consent-button:focus-visible { transform:translateY(-2px); outline:3px solid rgba(215,255,67,.3); outline-offset:2px; }
.consent-reject { border-color:white; background:white; color:var(--ink); }
.consent-accept { border-color:var(--lime); background:var(--lime); color:var(--ink); }

.subhero { padding:190px 24px 100px; min-height:640px; position:relative; overflow:hidden; }
.subhero-inner { max-width:var(--max); margin:auto; position:relative; z-index:2; }
.subhero h1 { font-size:clamp(58px,8vw,110px); max-width:1100px; letter-spacing:-.035em; line-height:.9; margin:30px 0; }
.subhero p { max-width:700px; font-size:22px; line-height:1.55; color:var(--muted); }
.subhero.purple { color:white; background:var(--violet); }
.subhero.purple p { color:rgba(255,255,255,.7); }
.ugc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ugc-card { min-height:380px; padding:28px; border-radius:28px; display:flex; flex-direction:column; justify-content:space-between; background:#fff; border:1px solid var(--line); }
.ugc-card:nth-child(2) { background:var(--coral); color:white; border:0; transform:translateY(28px); }
.ugc-card:nth-child(3) { background:var(--ink); color:white; border:0; }
.ugc-card h3 { font-size:34px; letter-spacing:-.03em; margin:0 0 12px; }
.ugc-card p { line-height:1.55; opacity:.7; }
.ugc-icon { width:70px; height:70px; border-radius:22px; display:grid; place-items:center; background:var(--lime); color:var(--ink); font-size:28px; transform:rotate(-6deg); }
.deliverables { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.deliverable { padding:28px; min-height:190px; border:1px solid var(--line); border-radius:24px; }
.deliverable h3 { font-size:24px; letter-spacing:-.03em; }

.content-hero { padding:175px 24px 95px; background:var(--ink); color:white; position:relative; overflow:hidden; }
.content-hero::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; right:-100px; top:-170px; background:var(--lime); opacity:.72; }
.content-hero.violet { background:var(--violet); }
.content-hero.blue { background:var(--blue); }
.content-hero.coral { background:var(--coral); }
.content-hero.light { background:#ece8ff; color:var(--ink); }
.content-hero-inner { max-width:var(--max); margin:auto; position:relative; z-index:2; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:34px; font-size:12px; font-weight:800; color:rgba(255,255,255,.6); }
.content-hero.light .breadcrumbs { color:var(--muted); }
.breadcrumbs a:hover { color:var(--lime); }
.content-hero h1 { max-width:1050px; margin:20px 0 30px; font-size:clamp(56px,8vw,108px); line-height:.9; letter-spacing:-.035em; }
.content-hero p { max-width:760px; margin:0; font-size:clamp(19px,2.2vw,25px); line-height:1.5; color:rgba(255,255,255,.7); }
.content-hero.light p { color:var(--muted); }
.content-section { padding:100px 24px; }
.content-section.white { background:white; }
.content-inner { max-width:var(--max); margin:auto; }
.content-intro { display:grid; grid-template-columns:.65fr 1.35fr; gap:72px; align-items:start; }
.content-intro h2 { margin:0; font-size:clamp(40px,6vw,76px); line-height:.98; letter-spacing:-.03em; }
.prose { max-width:780px; }
.prose h2 { font-size:clamp(34px,5vw,58px); line-height:1; letter-spacing:-.03em; margin:70px 0 22px; }
.prose h3 { font-size:25px; letter-spacing:-.03em; margin:38px 0 12px; }
.prose p,.prose li { color:#514d59; line-height:1.75; font-size:17px; }
.prose a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:60px; }
.feature { min-height:250px; padding:28px; border:1px solid var(--line); border-radius:24px; background:white; }
.feature:nth-child(2) { background:var(--lime); border-color:transparent; }
.feature:nth-child(3) { background:#ece8ff; }
.feature small { font-weight:900; letter-spacing:.13em; color:var(--blue); }
.feature h3 { font-size:28px; line-height:1; letter-spacing:-.025em; margin:55px 0 14px; }
.feature p { margin:0; color:var(--muted); line-height:1.6; }
.service-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:48px; }
.service-list article { padding:25px; border-radius:20px; background:var(--paper); border:1px solid var(--line); }
.service-list h3 { margin:0 0 10px; font-size:23px; letter-spacing:-.03em; }
.service-list p { margin:0; color:var(--muted); line-height:1.6; }
.web-packages-teaser { background:#e9edff; }
.package-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:58px; align-items:stretch; }
.package-grid-compact { margin-top:0; }
.package-card { min-height:360px; padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:white; display:flex; flex-direction:column; color:var(--ink); transition:transform .25s,box-shadow .25s; }
.package-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.package-card.featured { background:var(--ink); color:white; transform:translateY(-14px); }
.package-card.featured:hover { transform:translateY(-20px); }
.package-label { width:max-content; padding:8px 10px; border-radius:999px; background:var(--lime); color:var(--ink); font-size:11px; font-weight:950; letter-spacing:.12em; }
.package-card h3 { margin:42px 0 16px; font-size:clamp(30px,3.6vw,46px); line-height:.98; letter-spacing:-.03em; }
.package-card p { margin:0; color:var(--muted); line-height:1.6; }
.package-card.featured p { color:rgba(255,255,255,.68); }
.package-card ul { margin:25px 0 0; padding:0; list-style:none; display:grid; gap:12px; }
.package-card li { position:relative; padding-left:23px; line-height:1.45; }
.package-card li::before { content:"✦"; position:absolute; left:0; color:var(--blue); }
.package-card.featured li::before { color:var(--lime); }
.package-link { margin-top:auto; padding-top:30px; font-weight:900; }
.package-card small { display:block; margin-top:22px; color:var(--muted); line-height:1.5; }
.package-card.featured small { color:rgba(255,255,255,.55); }
.package-teaser-footer { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:45px; }
.package-teaser-footer p { max-width:680px; margin:0; color:var(--muted); line-height:1.6; }
.package-detail { margin-top:25px; padding-top:22px; border-top:1px solid var(--line); }
.package-card.featured .package-detail { border-color:rgba(255,255,255,.18); }
.package-detail strong { display:block; margin-bottom:7px; }
.seo-band { margin-top:70px; padding:42px; border-radius:var(--radius); background:var(--lime); display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; }
.seo-band h2 { margin:0; font-size:clamp(38px,5vw,62px); line-height:.98; letter-spacing:-.03em; }
.seo-band p { margin:0; line-height:1.7; }
.page-cta { margin-top:70px; padding:46px; border-radius:30px; color:white; background:var(--blue); display:flex; align-items:center; justify-content:space-between; gap:30px; }
.page-cta h2 { max-width:720px; margin:0; font-size:clamp(35px,5vw,62px); line-height:.98; letter-spacing:-.03em; }
.case-note { display:inline-flex; margin-top:28px; padding:10px 14px; border-radius:99px; background:rgba(215,255,67,.13); color:var(--lime); font-size:12px; font-weight:900; }
.case-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:55px; }
.case-flow article { min-height:240px; border-radius:25px; padding:28px; background:white; border:1px solid var(--line); }
.case-flow span { color:var(--blue); font-weight:950; }
.case-flow h3 { font-size:28px; letter-spacing:-.025em; margin:50px 0 13px; }
.case-flow p { color:var(--muted); line-height:1.6; }
.article-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.article-meta span { padding:8px 11px; border-radius:99px; background:rgba(255,255,255,.1); font-size:11px; font-weight:850; }

.legal { padding:170px 24px 100px; }
.legal-inner { max-width:900px; margin:auto; }
.legal h1 { font-size:clamp(54px,8vw,96px); letter-spacing:-.03em; margin:0 0 60px; }
.legal h2 { font-size:28px; letter-spacing:-.03em; margin:44px 0 16px; }
.legal p,.legal li { color:#4f4b58; line-height:1.7; }
.legal .placeholder { background:#fff1ad; border:1px solid #d9c64a; padding:14px 16px; border-radius:12px; color:#3b3505; font-weight:700; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
.toast { position:fixed; z-index:80; left:50%; bottom:22px; transform:translate(-50%,120px); padding:14px 20px; border-radius:14px; background:var(--lime); color:var(--ink); font-weight:850; box-shadow:var(--shadow); transition:transform .35s; }
.toast.show { transform:translate(-50%,0); }

@media (max-width: 900px) {
  .nav-links { display:none; position:absolute; top:78px; left:22px; right:22px; padding:24px; background:var(--paper); border-radius:22px; box-shadow:var(--shadow); flex-direction:column; align-items:flex-start; }
  .nav-links.open { display:flex; }
  .nav-cta { display:none; }
  .menu-btn { display:block; }
  .hero { min-height:auto; padding-top:155px; }
  .hero-bottom,.section-head,.ugc-wrap,.contact-wrap,.faq-grid { grid-template-columns:1fr; gap:35px; }
  .micro-proof { align-items:flex-start; flex-direction:column; }
  .service-card,.service-card:nth-child(n) { grid-column:span 12; }
  .hero-object { display:none; }
  .showcase-slide { grid-template-columns:1fr; }
  .showcase-stage { min-height:850px; }
  .slide-copy { padding:45px 34px 20px; }
  .kinetic-canvas { min-height:460px; }
  .project,.project:nth-child(even) { grid-template-columns:1fr; }
  .project:nth-child(even) .project-info { order:0; }
  .method-grid { grid-template-columns:1fr 1fr; }
  .step:nth-child(2) { border-right:0; }
  .step:nth-child(n+3) { border-top:1px solid rgba(17,16,24,.24); }
  .phone-stack { max-width:500px; }
  .ugc-grid { grid-template-columns:1fr; }
  .ugc-card:nth-child(2) { transform:none; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
  .content-intro { grid-template-columns:1fr; gap:30px; }
  .feature-grid,.case-flow,.package-grid { grid-template-columns:1fr; }
  .package-card.featured,.package-card.featured:hover { transform:none; }
  .package-teaser-footer,.seo-band { align-items:flex-start; grid-template-columns:1fr; flex-direction:column; gap:28px; }
  .page-cta { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 600px) {
  .nav-shell { top:10px; padding:0 10px; }
  .nav { min-height:60px; }
  .section { padding:82px 18px; }
  .hero { padding:135px 18px 80px; }
  .hero h1 { font-size:58px; }
  .hero::before { width:420px; height:420px; right:-230px; }
  .section-title { font-size:46px; }
  .service-card { min-height:290px; padding:24px; }
  .showcase { border-radius:25px; }
  .showcase-stage { min-height:720px; }
  .slide-copy { padding:36px 24px 14px; }
  .slide-copy h3 { font-size:54px; }
  .kinetic-canvas { min-height:390px; margin:12px; }
  .kinetic-word { font-size:72px; }
  .showcase-controls { padding:14px; align-items:flex-start; }
  .slide-tabs { gap:2px; }.slide-tab { padding:10px 8px; font-size:0; }.slide-tab span { font-size:12px; margin:0; }
  .live-badge { display:none; }.sound-toggle { font-size:0; width:38px;height:38px;padding:0; }.sound-icon{font-size:14px}.pause-toggle,.replay-toggle{width:38px;height:38px}
  .project-info { padding:30px 24px; min-height:360px; }
  .project-visual { padding:24px; min-height:330px; }
  .method-grid { grid-template-columns:1fr; }
  .step,.step + .step { padding:26px 0; border-right:0; border-top:1px solid rgba(17,16,24,.24); }
  .phone-stack { height:430px; }
  .phone { width:180px; }
  .deliverables { grid-template-columns:1fr; }
  .content-hero { padding:140px 18px 75px; }
  .content-hero h1 { font-size:58px; }
  .content-section { padding:78px 18px; }
  .service-list { grid-template-columns:1fr; }
  .page-cta { padding:28px; }
  .contact-form { padding:24px; }
  .footer-top { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
  .consent-layer { padding:10px; }
  .consent-panel { padding:22px; grid-template-columns:1fr; gap:20px; border-radius:21px; }
  .consent-actions { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}