*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { margin: 0; background-color: #FFFFFF; background-image: url('grain-orange.png'); background-repeat: repeat; background-size: 150px 150px; background-attachment: fixed; color: #332E2A; font-family: Archivo, system-ui, sans-serif; }
img, svg { display: block; }
a { color: #FF6E2E; text-decoration: none; }
a:hover { color: #332E2A; }
mark { background: #FF9455; color: #FFFFFF; padding: 0.04em 0.16em 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
::selection { background: #FFB584; color: #332E2A; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes drawLine { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes writeOn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -0.2em 0 0); } }
@keyframes wipeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes orbDrift { 0% { transform: translate(0, 0); } 33% { transform: translate(2px, -7px); } 66% { transform: translate(-2px, 3px); } 100% { transform: translate(0, 0); } }
@keyframes blobMorph {
  0%   { border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%; }
  33%  { border-radius: 44% 56% 60% 40% / 45% 58% 42% 55%; }
  66%  { border-radius: 52% 48% 40% 60% / 60% 42% 58% 40%; }
  100% { border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%; }
}

/* ---- shell ---- */
.pad { padding-left: clamp(20px, 5vw, 88px); padding-right: clamp(20px, 5vw, 88px); }
.header { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px clamp(20px, 3vw, 34px); padding-top: clamp(12px, 2.2vw, 26px); padding-bottom: clamp(12px, 2.2vw, 26px); background-color: rgba(255,255,255,0.93); background-image: url('grain-orange.png'); background-repeat: repeat; background-size: 150px 150px; backdrop-filter: blur(14px); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.055em; line-height: 1; color: #332E2A; }
.wordmark:hover { color: #FF6E2E; }
.dot { display: inline-block; width: 0.26em; height: 0.26em; background-color: #FF8A57; background-image: linear-gradient(135deg, #FFB584 0%, #FF6E2E 100%), url('grain-dark.png'); background-size: 100% 100%, 14px 14px; background-repeat: no-repeat, repeat; background-blend-mode: normal, multiply; mask-image: url('grain-dark.png'), radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 52%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0) 100%); -webkit-mask-image: url('grain-dark.png'), radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 52%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0) 100%); mask-size: 11px 11px, 100% 100%; -webkit-mask-size: 11px 11px, 100% 100%; mask-repeat: repeat, no-repeat; mask-composite: add; -webkit-mask-composite: source-over; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(18px, 2.4vw, 30px); }
.nav-btn { font-family: 'Bricolage Grotesque', Archivo, sans-serif; font-weight: 600; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: -0.01em; white-space: nowrap; padding: 11px 22px; line-height: 1.25; color: #FFFFFF; background: #FF9455; transition: background 0.3s, transform 0.3s, color 0.3s; }
.nav-btn:hover { color: #FFFFFF; background-color: #332E2A; background-image: url('noise-dark.png'); background-size: 150px 150px; background-blend-mode: screen; }
.nav-btn:active { background-color: #FF6E2E; background-image: none; }
.t1 { transform: rotate(-1.8deg); } .t1:hover { transform: rotate(-3deg) translateY(-2px); }
.t2 { transform: rotate(1.7deg); }  .t2:hover { transform: rotate(2.8deg) translateY(-2px); }
.t3 { transform: rotate(-0.9deg); } .t3:hover { transform: rotate(-2.2deg) translateY(-2px); }

/* ---- grain bands ---- */
.band { position: relative; overflow: clip; --et: rgba(0,0,0,0); --eb: rgba(0,0,0,0); }
.band > * { position: relative; z-index: 1; }
.band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url('noise-dark.png'); background-repeat: repeat; background-size: 190px 190px; mix-blend-mode: screen; opacity: 0.24; }
.band.dark::before { opacity: 0.34; }
.band::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to bottom, var(--et) 0, var(--et) 130px, rgba(0,0,0,0) 130px), linear-gradient(to top, var(--eb) 0, var(--eb) 130px, rgba(0,0,0,0) 130px);
  mask-image: url('noise-dark.png'), url('noise-dark.png'), linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,0) 130px), linear-gradient(to top, rgba(0,0,0,1) 0, rgba(0,0,0,0) 130px);
  -webkit-mask-image: url('noise-dark.png'), url('noise-dark.png'), linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,0) 130px), linear-gradient(to top, rgba(0,0,0,1) 0, rgba(0,0,0,0) 130px);
  mask-size: 190px 190px, 190px 190px, 100% 100%, 100% 100%; -webkit-mask-size: 190px 190px, 190px 190px, 100% 100%, 100% 100%;
  mask-repeat: repeat, repeat; mask-composite: intersect, intersect; -webkit-mask-composite: source-in; }

/* ---- rows ---- */
.row { display: flex; flex-wrap: wrap; align-items: baseline; border-top: 1px solid rgba(30,23,18,0.16); color: #332E2A; transition: color 0.3s, border-color 0.3s, padding-left 0.35s; }
.row:hover { color: #FF6E2E; border-color: #FF9455; }
.svc-row { gap: 10px clamp(24px, 4vw, 64px); padding: clamp(24px, 3vw, 40px) 0; }
.svc-row:hover { padding-left: 16px; }
.prod-row { gap: 8px clamp(24px, 4vw, 64px); padding: clamp(20px, 2.6vw, 32px) 0; }
.prod-row:hover { padding-left: 14px; }
.tool-row { gap: 6px clamp(20px, 3vw, 44px); padding: clamp(16px, 2vw, 24px) 0; border-color: rgba(30,23,18,0.14); }
.tool-row:hover { padding-left: 12px; }
.num { font-family: Bungee, Archivo, sans-serif; font-weight: 400; letter-spacing: 0; color: #FF9455; }
.chip { display: inline-block; background: #FFDCC5; box-shadow: inset 0 0 0 5px #FF9455; padding: 0.1em 0.22em 0.16em; }

/* ---- blob buttons ---- */
.blob { padding: 22px 42px; font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; animation: blobMorph 17s ease-in-out infinite; transition: background 0.35s, color 0.35s, transform 0.35s; }
.blob-white { background: #FFFFFF; color: #FF6E2E; border-radius: 48% 52% 58% 42% / 50% 50% 50% 50%; }
.blob-white:hover { background: #332E2A; color: #FFFFFF; transform: rotate(-2deg) scale(1.04); }
.blob-white.alt { border-radius: 54% 46% 50% 50% / 46% 54% 46% 54%; animation-direction: reverse; animation-duration: 18s; }
.blob-white.alt:hover { transform: rotate(2deg) scale(1.04); }
.blob-orange { justify-self: start; margin-top: 6px; padding: 16px 30px; background: #FF9455; color: #FFFFFF; white-space: nowrap; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 56% 44% 48% 52% / 54% 46% 54% 46%; animation: blobMorph 16s ease-in-out infinite; transition: background 0.35s, transform 0.35s; }
.blob-orange:hover { background: #FF6E2E; color: #FFFFFF; transform: rotate(-2deg) scale(1.04); }
.blob-orange.alt { border-radius: 46% 54% 56% 44% / 48% 52% 48% 52%; animation-duration: 19s; animation-direction: reverse; }
.blob-orange.alt:hover { transform: rotate(2deg) scale(1.04); }

.call-link { display: block; color: #FFFFFF; transition: color 0.3s, transform 0.3s; }
.call-link:hover { color: #FFB584; transform: rotate(-1.5deg); }
.call-link.r:hover { transform: rotate(1.5deg); }
.quiet { flex: 0 1 auto; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: #8A6350; transition: color 0.3s; }
.quiet:hover { color: #332E2A; }

/* ---- footer ---- */
.footer { position: relative; overflow: clip; z-index: 1; padding: clamp(56px, 8vw, 110px) clamp(20px, 5vw, 88px) clamp(44px, 5vw, 64px); background: radial-gradient(120% 90% at 50% 118%, rgba(255,138,87,0.42) 0%, rgba(255,138,87,0.12) 42%, rgba(51,46,42,0) 72%), #332E2A; color: #FFFFFF; text-align: center; }
.footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url('noise-dark.png'); background-repeat: repeat; background-size: 190px 190px; mix-blend-mode: screen; opacity: 0.34; }
.footer > * { position: relative; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(24px, 3.4vw, 44px); margin-top: clamp(32px, 4vw, 52px); font-family: 'Bricolage Grotesque', Archivo, sans-serif; font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.015em; }
.footer-nav a { color: #FFFFFF; transition: color 0.3s, transform 0.3s; display: inline-block; }
.footer-nav a:hover { color: #FF9455; }
.footer-nav a:nth-child(2n):hover { transform: rotate(2deg); }
.footer-nav a:nth-child(2n+1):hover { transform: rotate(-2deg); }
.mi { font-family: Knewave, cursive; font-size: 17px; line-height: 1; color: #DEFF63; display: inline-block; transform: translateY(-1px); transition: color 0.3s; }
.mi:hover { color: #EEFFA8; }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.2,0.8,0.2,1), transform 0.8s cubic-bezier(0.2,0.8,0.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

.cta:hover { background: #FF6E2E !important; color: #FFFFFF; transform: rotate(-2deg) scale(1.04); }

.melt-card { position: relative; background: #FFDCC5; transform: rotate(-0.7deg); }
.melt-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url('noise-dark.png'); background-repeat: repeat; background-size: 170px 170px; mix-blend-mode: multiply; opacity: 0.16; }
.melt-card::after { content: ''; position: absolute; inset: -1px; pointer-events: none; z-index: 0; background-image: linear-gradient(to bottom, #FFFFFF 0, #FFFFFF 52px, rgba(255,255,255,0) 52px), linear-gradient(to top, #FFFFFF 0, #FFFFFF 52px, rgba(255,255,255,0) 52px), linear-gradient(to right, #FFFFFF 0, #FFFFFF 52px, rgba(255,255,255,0) 52px), linear-gradient(to left, #FFFFFF 0, #FFFFFF 52px, rgba(255,255,255,0) 52px); mask-image: url('noise-dark.png'), linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,0) 52px), linear-gradient(to top, rgba(0,0,0,1) 0, rgba(0,0,0,0) 52px), linear-gradient(to right, rgba(0,0,0,1) 0, rgba(0,0,0,0) 52px), linear-gradient(to left, rgba(0,0,0,1) 0, rgba(0,0,0,0) 52px); -webkit-mask-image: url('noise-dark.png'), linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,0) 52px), linear-gradient(to top, rgba(0,0,0,1) 0, rgba(0,0,0,0) 52px), linear-gradient(to right, rgba(0,0,0,1) 0, rgba(0,0,0,0) 52px), linear-gradient(to left, rgba(0,0,0,1) 0, rgba(0,0,0,0) 52px); mask-size: 170px 170px, 100% 100%, 100% 100%, 100% 100%, 100% 100%; -webkit-mask-size: 170px 170px, 100% 100%, 100% 100%, 100% 100%, 100% 100%; mask-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat; mask-composite: intersect, add, add, add; -webkit-mask-composite: source-in; }

/* ---- AR badge ---- */
.ar-badge { position: relative; overflow: hidden; flex: 0 0 auto; border-radius: 50%; width: 1.05em; height: 1.05em; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(120% 110% at 30% 4%, #453E38 0%, #332E2A 56%, #241F1C 100%); }
.ar-badge .b1 { position: absolute; inset: 0; background-image: radial-gradient(90% 80% at 74% 88%, rgba(255,122,61,0.85) 0%, rgba(255,122,61,0.3) 46%, rgba(255,122,61,0) 78%); mix-blend-mode: screen; opacity: 0.62; }
.ar-badge .b2 { position: absolute; inset: 0; background-image: url('grain-orange.png'); background-size: 9px 9px; mix-blend-mode: screen; opacity: 0.5; }
.ar-badge .bg { position: relative; font-family: 'Passion One', Archivo, sans-serif; font-weight: 900; font-size: 0.92em; letter-spacing: -0.04em; line-height: 0.78; color: #FFFFFF; transform: translateY(0.02em); }
.ar-badge .bp { position: absolute; right: 12%; bottom: 27%; width: 11%; height: 16%; border-radius: 46% 54% 42% 58% / 38% 40% 60% 62%; background-image: linear-gradient(135deg, #FFB584, #FF6E2E); }

/* ---- warm grain glow inside dark bands ---- */
.glow-warm { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(58% 82% at 88% 108%, rgba(255,122,61,0.85) 0%, rgba(255,122,61,0.26) 44%, rgba(255,122,61,0) 74%); mix-blend-mode: screen; opacity: 0.55; }
.glow-grain { position: absolute; inset: 0; pointer-events: none; background-image: url('grain-orange.png'); background-repeat: repeat; background-size: 150px 150px; mix-blend-mode: screen; opacity: 0.4; }
.glow-soft { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(52% 62% at 86% 62%, rgba(255,122,61,0.7) 0%, rgba(255,122,61,0.2) 46%, rgba(255,122,61,0) 74%); mix-blend-mode: screen; opacity: 0.5; }

/* small badge (header): contained glyph so it reads under 40px */
.wordmark .ar-badge { width: 1.3em; height: 1.3em; }
.wordmark .ar-badge .b1 { opacity: 0.5; }
.wordmark .ar-badge .b2 { background-size: 6px 6px; opacity: 0.38; }
.wordmark .ar-badge .bg { font-size: 0.63em; letter-spacing: -0.03em; }
.wordmark .ar-badge .bp { right: 20%; bottom: 31%; width: 8%; height: 11.5%; }

.wordmark .nm { color: rgba(51,46,42,0.38); transition: color 0.3s; }
.wordmark:hover .nm { color: rgba(0,0,0,0); background-image: url('grain-dark.png'), linear-gradient(150deg, #FF9455 0%, #FF6E2E 100%); background-size: 26px 26px, 100% 100%; background-repeat: repeat, no-repeat; background-blend-mode: multiply, normal; -webkit-background-clip: text; background-clip: text; }

.note-card { position: relative; overflow: hidden; background: #332E2A; color: #FFFFFF; transform: rotate(-1.2deg); }
.note-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url('noise-dark.png'); background-repeat: repeat; background-size: 150px 150px; mix-blend-mode: screen; opacity: 0.4; }
.note-blob { position: absolute; right: -14px; bottom: -14px; width: 42px; height: 42px; border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%; background-image: linear-gradient(135deg, #FFB584, #FF6E2E); }

/* Hamburger Menu Styles */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-right: -8px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 3px;
  background: #FF9455;
  transition: 0.3s;
  border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }
  
  .nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background: #FFFFFF;
    width: 100%;
    padding: 20px;
    gap: 10px;
    z-index: 50;
  }
  
  .nav.active {
    display: flex;
  }
  
  .nav-btn {
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 769px) {
  .hamburger {
    display: none !important;
  }
}