:root {
  --ink: #171714;
  --paper: #f1f0e8;
  --red: #ff493d;
  --yellow: #ffd84a;
  --green: #62b46b;
  --blue: #476cff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); }
body { color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }

.stage {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(23,23,20,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,23,20,.035) 1px, transparent 1px),
    var(--paper);
  background-size: 52px 52px;
}

.grain { position:absolute; inset:0; opacity:.13; pointer-events:none; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }

.topbar { position:absolute; z-index:30; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:26px 42px; }
.logo { display:block; width:108px; height:43px; overflow:hidden; }
.logo img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.top-note { font-size:10px; font-weight:700; letter-spacing:.19em; }

.hero { position:absolute; z-index:12; width:min(720px, 74vw); left:clamp(28px,7vw,110px); top:50%; transform:translateY(-47%); }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 18px; font-size:11px; font-weight:800; letter-spacing:.21em; text-transform:uppercase; }
.eyebrow span { width:32px; height:2px; background:var(--red); }
h1 { margin:0; font-size:clamp(64px,9.4vw,148px); line-height:.79; letter-spacing:-.085em; font-weight:900; }
h1 strong { display:inline-block; color:var(--blue); font-weight:900; transform:translateX(clamp(12px,3vw,50px)); position:relative; }
h1 strong::after { content:""; position:absolute; left:3%; right:-4%; bottom:-10px; height:13px; background:var(--yellow); z-index:-1; transform:rotate(-2deg); }
.statement { width:min(470px,70vw); margin:38px 0 0; font-size:clamp(15px,1.3vw,19px); line-height:1.45; font-weight:500; }

.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.actions a { min-width:138px; display:flex; gap:8px; justify-content:flex-start; align-items:center; padding:13px 14px; border:1.5px solid var(--ink); border-radius:99px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; background:rgba(241,240,232,.72); backdrop-filter:blur(7px); transition:.25s ease; }
.actions a span { font-size:17px; }
.actions a > span { margin-left:auto; }
.contact-icon { width:17px; height:17px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.google-icon { fill:currentColor; stroke:none; }
.actions a:hover { color:white; background:var(--ink); transform:translateY(-3px); }

.ribbon { position:absolute; z-index:7; left:-22vw; width:150vw; height:46px; overflow:hidden; border-block:1.5px solid var(--ink); transform-origin:center; box-shadow:0 7px 0 rgba(23,23,20,.07); }
.ribbon-track { display:flex; width:max-content; height:100%; align-items:center; animation:marquee 16s linear infinite; }
.ribbon-track span { display:flex; align-items:center; gap:26px; white-space:nowrap; padding-right:26px; font-size:17px; font-weight:900; letter-spacing:-.04em; }
.ribbon-track i { font-style:normal; font-size:12px; }
.ribbon-red { background:var(--red); top:31%; transform:rotate(28deg); }
.ribbon-yellow { background:var(--yellow); bottom:19%; transform:rotate(-14deg); }
.ribbon-yellow .ribbon-track { animation-direction:reverse; animation-duration:22s; }
.ribbon-green { background:var(--green); bottom:6%; transform:rotate(7deg); height:39px; }
.ribbon-green .ribbon-track { animation-duration:27s; }
@keyframes marquee { to { transform:translateX(-50%); } }

.orb { position:absolute; z-index:1; border-radius:50%; animation:float 8s ease-in-out infinite; }
.orb-a { width:clamp(230px,29vw,450px); aspect-ratio:1; background:var(--blue); right:-8vw; top:-12vh; }
.orb-b { width:clamp(80px,10vw,160px); aspect-ratio:1; background:var(--yellow); right:17vw; bottom:17vh; animation-delay:-3s; }
@keyframes float { 50% { transform:translate(16px,22px) rotate(8deg); } }

.mesh { position:absolute; z-index:3; width:430px; height:330px; opacity:.72; background-image:linear-gradient(var(--ink) 1px,transparent 1px),linear-gradient(90deg,var(--ink) 1px,transparent 1px); background-size:18px 18px; mask-image:radial-gradient(ellipse,black 25%,transparent 72%); }
.mesh-a { right:2vw; top:22vh; transform:rotate(12deg) skewY(-8deg); animation:mesh 9s ease-in-out infinite; }
.mesh-b { left:-12vw; bottom:-12vh; transform:rotate(-17deg); opacity:.25; }
@keyframes mesh { 50% { transform:rotate(5deg) skewY(8deg) scale(1.08); } }

.service-cloud { position:absolute; z-index:11; right:clamp(24px,5vw,80px); top:36%; width:260px; height:280px; pointer-events:none; }
.service-cloud span { --delay:calc(var(--i) * -1.15s); position:absolute; padding:8px 12px; border:1px solid var(--ink); background:var(--paper); font-size:10px; font-weight:900; letter-spacing:.12em; animation:tag 7s var(--delay) ease-in-out infinite; }
.service-cloud span:nth-child(1){top:2%;left:36%}.service-cloud span:nth-child(2){top:24%;right:1%}.service-cloud span:nth-child(3){top:47%;left:18%}.service-cloud span:nth-child(4){top:68%;right:8%}.service-cloud span:nth-child(5){top:86%;left:3%}.service-cloud span:nth-child(6){top:18%;left:0}
.service-cloud span:nth-child(1){--i:0}.service-cloud span:nth-child(2){--i:1}.service-cloud span:nth-child(3){--i:2}.service-cloud span:nth-child(4){--i:3}.service-cloud span:nth-child(5){--i:4}.service-cloud span:nth-child(6){--i:5}
@keyframes tag { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-18px) rotate(3deg); } }

footer { position:absolute; z-index:30; left:42px; right:42px; bottom:23px; display:flex; justify-content:space-between; font-size:9px; font-weight:800; letter-spacing:.18em; }
.scroll-hint b { color:var(--red); font-size:14px; }

@media (max-width: 720px) {
  .stage { min-height:100svh; height:100svh; background-size:34px 34px; }
  .topbar { padding:22px; }
  .top-note { display:none; }
  .hero { left:22px; top:45%; width:calc(100vw - 44px); }
  h1 { font-size:clamp(59px,20vw,86px); line-height:.82; }
  h1 strong { transform:translateX(12px); }
  .statement { margin-top:30px; width:90%; }
  .actions { gap:7px; }
  .actions a { min-width:calc(50% - 4px); flex:1 1 calc(50% - 4px); padding:11px 12px; font-size:9px; }
  .logo { width:92px; height:37px; }
  .ribbon { height:37px; left:-70vw; width:240vw; }
  .ribbon-red { top:25%; }
  .ribbon-yellow { bottom:17%; }
  .ribbon-green { bottom:7%; height:31px; }
  .service-cloud { opacity:.55; right:-88px; top:41%; transform:scale(.72); }
  .mesh-a { right:-210px; top:20vh; }
  .orb-a { right:-34vw; top:-4vh; }
  footer { left:22px; right:22px; bottom:16px; }
}

@media (max-width: 380px) {
  h1 { font-size:56px; }
  .statement { font-size:14px; margin-top:24px; }
  .actions { margin-top:20px; }
}

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