/* The home page and the plans page (home.html, pricing.html).
   The other pages (login, privacy, feedback...) still use home.css.

   Brand: charcoal carries text and actions, amber carries attention, and
   WhatsApp green is the one thing you tap. Amber is never text on white: it
   fails contrast. Text that needs to read as amber uses #a85400.

   Motion is CSS only and stops for anyone whose phone asks for less motion
   (prefers-reduced-motion, at the end). */
body { margin: 0; background: #fffdf7; }
/* clip, not hidden: overflow: hidden would make .dd its own scroll container,
   and the scroll-driven reveal (view()) would then watch .dd, which never
   scrolls, and do nothing. hidden stays as the fallback for old Safari. */
.dd { background: #fffdf7; color: #23252b; font-family: "Hind", system-ui, sans-serif; font-size: 18px; line-height: 1.55; overflow-x: hidden; overflow-x: clip; }
.dd *, .dd *::before, .dd *::after { box-sizing: border-box; }
:where(.dd) a { color: inherit; text-decoration: none; }
/* Resets go in :where() so they weigh nothing: ".dd p" would outrank ".lede"
   or ".hero-email" and silently zero the spacing those rules ask for. */
:where(.dd) :where(h1, h2, h3) { font-family: "Baloo 2", system-ui, sans-serif; margin: 0; color: #23252b; }
:where(.dd) p { margin: 0; }
.dd code { font-family: ui-monospace, Menlo, monospace; font-size: .86em; padding: 1px 6px; border-radius: 6px; background: rgba(255,182,30,.18); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.eyebrow { display: inline-block; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 1.6px; text-transform: uppercase; color: #a85400; }
.eyebrow.on-dark { color: #ffc94d; }
.h2 { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -1.5px; margin-top: 10px; }
.sub { font-size: 20px; line-height: 1.55; color: #4a4e57; max-width: 660px; margin-top: 18px; }
.sec-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.sec-head .sub { margin-left: auto; margin-right: auto; }
.inline { font-weight: 600; color: #23252b; border-bottom: 2px solid #ffb61e; }
:focus-visible { outline: 3px solid #f59300; outline-offset: 3px; }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 4px 26px 0; border-radius: 999px; border: 0; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 19px; line-height: 1; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
.btn svg { width: 22px; height: 22px; flex: none; margin-top: -4px; }
.btn.full { width: 100%; }
.btn-wa { background: #25d366; color: #0b2e17; box-shadow: 0 6px 0 #179247; }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #179247; }
.btn-wa:active { transform: translateY(4px); box-shadow: 0 2px 0 #179247; }
.btn-ink { background: #23252b; color: #fffdf7; box-shadow: 0 6px 0 #000000; }
.btn-ink:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #000000; }
.btn-amber { background: #ffb61e; color: #23252b; box-shadow: 0 6px 0 #b87600; }
.btn-amber:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #b87600; }
.btn-ghost { border: 2px solid #23252b; color: #23252b; background: transparent; }
.btn-ghost:hover { background: #23252b; color: #fffdf7; }
.btn-sm { min-height: 46px; padding: 3px 18px 0; font-size: 16.5px; box-shadow: 0 4px 0 #179247; }
.text-link { font-weight: 600; font-size: 16px; color: #4a4e57; border-bottom: 1.5px solid #e3cf9f; padding-bottom: 1px; }
.text-link:hover { color: #23252b; border-color: #23252b; }

/* --------------------------------------------------------------------- nav */
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 46px; height: 46px; display: block; }
.word { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -1px; line-height: 1; padding-top: 6px; }
.word .dow { color: #f59300; }
.nav-links { display: flex; gap: 28px; font-weight: 500; font-size: 17.5px; color: #4a4e57; }
.nav-links a { position: relative; padding: 10px 0 6px; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; border-radius: 3px; background: #ffb61e; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-links a:hover::after, .nav-links a.here::after { transform: scaleX(1); }
.nav-links a.here { color: #23252b; font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-auth-wrap { display: flex; align-items: center; gap: 16px; }
.nav-login { font-weight: 600; font-size: 16.5px; color: #3d4048; padding: 10px 2px 6px; background: none; border: 0; cursor: pointer; font-family: inherit; }
.nav-login:hover { color: #23252b; }
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 14px; border: 2px solid #23252b; background: #fffdf7; align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: pointer; padding: 0; }
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #23252b; }
/* Log in / Open Drudow repeated inside the phone menu, for screens too narrow
   to show them beside the WhatsApp button (see max-width: 520px). */
.nav-links .menu-only { display: none; }

/* -------------------------------------------------------------------- hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: center; padding-top: 30px; padding-bottom: 70px; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 6px; border-radius: 999px; background: #fdf3d9; border: 1.5px solid #f1d084; font-weight: 600; font-size: 16px; color: #3d4048; }
.pill-dot { width: 10px; height: 10px; border-radius: 50%; background: #25d366; animation: ping 2s ease-out infinite; }
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70% { box-shadow: 0 0 0 11px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.hero h1 { font-size: 80px; line-height: .96; font-weight: 800; letter-spacing: -2.4px; margin-top: 24px; }
.hl { position: relative; white-space: nowrap; z-index: 0; display: inline-block; }
.hl::before { content: ""; position: absolute; left: -8px; right: -8px; bottom: 10px; height: 36%; background: #ffb61e; border-radius: 10px; z-index: -1; transform-origin: left center; animation: swipe 1.1s .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes swipe {
  from { transform: scaleX(0) rotate(-1deg); }
  to { transform: scaleX(1) rotate(-1deg); }
}
.spark { position: absolute; right: -34px; top: -6px; width: 34px; height: 34px; color: #1a9e4b; animation: spark 2.6s ease-in-out infinite; }
@keyframes spark {
  0%, 100% { opacity: .2; transform: scale(.8) rotate(0); }
  50% { opacity: 1; transform: scale(1.05) rotate(8deg); }
}
.lede { font-size: 21.5px; line-height: 1.55; color: #4a4e57; max-width: 560px; margin-top: 24px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; }
.proof { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 16.5px; color: #3d4048; font-weight: 500; }
.proof li { display: flex; align-items: center; gap: 8px; }
.proof svg { width: 20px; height: 20px; color: #1a9e4b; flex: none; margin-top: -3px; }
.hero-email { margin-top: 22px; font-size: 16px; color: #5f636e; }

.art { position: relative; display: flex; justify-content: center; }
.stage { position: relative; width: 540px; height: 650px; flex: none; }
.sun { position: absolute; left: 50%; top: 50%; width: 470px; height: 470px; margin: -235px 0 0 -235px; border-radius: 50%; background: #ffb61e; }
.ring { position: absolute; left: 50%; top: 50%; width: 568px; height: 568px; margin: -284px 0 0 -284px; border-radius: 50%; border: 2px dashed #e7b347; animation: spin 46s linear infinite; }
.ring::before { content: ""; position: absolute; top: 40px; left: 74px; width: 14px; height: 14px; border-radius: 50%; background: #23252b; }
.ring::after { content: ""; position: absolute; bottom: 60px; right: 52px; width: 10px; height: 10px; border-radius: 50%; background: #25d366; }
@keyframes spin {
  to { transform: rotate(360deg); }
}
.phone { position: absolute; left: 50%; top: 22px; width: 300px; height: 604px; margin-left: -150px; background: #16181c; border-radius: 46px; padding: 11px; z-index: 2; box-shadow: 0 46px 80px -34px rgba(35,37,43,.6), inset 0 0 0 2px #30333a; animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(-1deg); }
}
.screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #efe7dc; display: flex; flex-direction: column; }
.wa-head { display: flex; align-items: center; gap: 10px; padding: 30px 14px 11px; background: #075e54; color: #ffffff; }
.wa-head img { width: 38px; height: 38px; border-radius: 50%; display: block; background: #fdf3d9; }
.wa-name { font-weight: 600; font-size: 16.5px; line-height: 1.1; }
.wa-status { position: relative; height: 18px; width: 90px; font-size: 13px; color: #d4ece6; }
.wa-status span { position: absolute; left: 0; top: 1px; white-space: nowrap; }
.st-on { animation: st-on 14s infinite; }
.st-ty { opacity: 0; animation: st-ty 14s infinite; }
@keyframes st-on {
  0%, 10% { opacity: 1; } 11%, 20% { opacity: 0; } 21%, 45% { opacity: 1; } 46%, 56% { opacity: 0; } 57%, 100% { opacity: 1; }
}
@keyframes st-ty {
  0%, 10% { opacity: 0; } 11%, 20% { opacity: 1; } 21%, 45% { opacity: 0; } 46%, 56% { opacity: 1; } 57%, 100% { opacity: 0; }
}
.chat { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; line-height: 1.35; }
.day { align-self: center; font-size: 12px; padding: 3px 10px 1px; border-radius: 8px; background: #e1f2fb; color: #45535b; }
.b { max-width: 84%; padding: 8px 10px 5px; border-radius: 12px; background: #ffffff; box-shadow: 0 1px 1px rgba(0,0,0,.08); align-self: flex-start; transform-origin: bottom left; }
.b.me { align-self: flex-end; background: #d9fdd3; transform-origin: bottom right; }
.b b { font-weight: 600; }
.meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: 11px; color: #667781; margin-top: 2px; }
.meta svg { width: 16px; height: 11px; color: #53bdeb; }
.saved { display: flex; gap: 6px; align-items: flex-start; }
.saved svg { width: 18px; height: 18px; flex: none; color: #1a9e4b; margin-top: 1px; }
.idcard { width: 186px; height: 116px; border-radius: 8px; background: #f6efdd; border: 1px solid #e3d6b8; padding: 12px; display: flex; gap: 10px; }
.id-photo { width: 52px; height: 64px; border-radius: 6px; background: #e0cfa8; position: relative; overflow: hidden; }
.id-photo::before { content: ""; position: absolute; left: 15px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: #b99a60; }
.id-photo::after { content: ""; position: absolute; left: 6px; top: 36px; width: 40px; height: 34px; border-radius: 20px 20px 0 0; background: #b99a60; }
.id-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.id-lines i { display: block; height: 6px; border-radius: 3px; background: #cdbb93; }
.docb { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; background: #f2f5f6; }
.pdf { flex: none; width: 34px; height: 40px; border-radius: 6px; background: #c2312f; color: #ffffff; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 12px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; }
.docb-name { font-weight: 600; font-size: 14.5px; }
.docb-sub { font-size: 12px; color: #667781; }
.slot { position: relative; align-self: flex-start; }
.typing { position: absolute; left: 0; top: 0; display: flex; gap: 4px; padding: 12px 14px; background: #ffffff; border-radius: 12px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa3a8; animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; }
}
.m1 { animation: in-a 14s infinite; }
.m3 { animation: in-b 14s infinite; }
.m4 { animation: in-c 14s infinite; }
.m6 { animation: in-d 14s infinite; }
.ty1 { animation: ty-a 14s infinite; }
.ty2 { animation: ty-b 14s infinite; }
@keyframes in-a {
  0%, 3% { opacity: 0; transform: translateY(14px) scale(.94); } 6%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; }
}
@keyframes in-b {
  0%, 19% { opacity: 0; transform: translateY(14px) scale(.94); } 22%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; }
}
@keyframes in-c {
  0%, 37% { opacity: 0; transform: translateY(14px) scale(.94); } 40%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; }
}
@keyframes in-d {
  0%, 55% { opacity: 0; transform: translateY(14px) scale(.94); } 58%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; }
}
@keyframes ty-a {
  0%, 10% { opacity: 0; } 12%, 19% { opacity: 1; } 20%, 100% { opacity: 0; }
}
@keyframes ty-b {
  0%, 45% { opacity: 0; } 47%, 55% { opacity: 1; } 56%, 100% { opacity: 0; }
}
.drive { position: absolute; left: 388px; top: 108px; z-index: 3; width: 186px; padding: 12px 12px 10px; background: #ffffff; border-radius: 18px; border: 1.5px solid #ece3d0; box-shadow: 0 20px 40px -20px rgba(35,37,43,.5); animation: pop 14s infinite; }
@keyframes pop {
  0%, 30% { transform: scale(1) rotate(3deg); } 32% { transform: scale(1.1) rotate(3deg); } 35%, 48% { transform: scale(1) rotate(3deg); } 50% { transform: scale(1.08) rotate(3deg); } 53%, 100% { transform: scale(1) rotate(3deg); }
}
.drive-top { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; line-height: 1.2; }
.drive-top svg { width: 22px; height: 22px; flex: none; color: #f59300; }
.drive-row { margin-top: 8px; display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.2; color: #3d4048; padding: 7px 8px 5px; border-radius: 9px; background: #faf4e6; }
.drive-row svg { width: 16px; height: 16px; flex: none; margin-top: -2px; }
.drive-new { background: #fdf3d9; border: 1.5px solid #ffb61e; animation: in-e 14s infinite; }
@keyframes in-e {
  0%, 30% { opacity: 0; transform: translateY(6px); } 33%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; }
}
.fly { position: absolute; left: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 6px 10px 4px 6px; background: #ffffff; border-radius: 10px; box-shadow: 0 10px 22px -8px rgba(0,0,0,.4); font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; }
.fly .pdf { width: 22px; height: 26px; font-size: 8px; padding-bottom: 2px; border-radius: 4px; }
.fly-out { animation: fly-out 14s infinite; }
.fly-back { animation: fly-back 14s infinite; }
@keyframes fly-out {
  0%, 21% { opacity: 0; transform: translate(200px, 330px) scale(.6); }
  23% { opacity: 1; transform: translate(200px, 296px) scale(1); }
  31% { opacity: 1; transform: translate(410px, 196px) scale(.8); }
  33%, 100% { opacity: 0; transform: translate(420px, 190px) scale(.5); }
}
@keyframes fly-back {
  0%, 47% { opacity: 0; transform: translate(420px, 190px) scale(.5); }
  49% { opacity: 1; transform: translate(410px, 196px) scale(.8); }
  56% { opacity: 1; transform: translate(190px, 430px) scale(1); }
  58%, 100% { opacity: 0; transform: translate(190px, 440px) scale(.6); }
}
.peek { position: absolute; left: -36px; bottom: 0; width: 214px; height: auto; z-index: 3; animation: bob 4.2s ease-in-out infinite; filter: drop-shadow(0 18px 18px rgba(35,37,43,.22)); }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(2deg); }
}
.chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 9px 15px 6px; border-radius: 999px; background: #23252b; color: #fffdf7; font-weight: 600; font-size: 15px; box-shadow: 0 14px 26px -14px rgba(0,0,0,.6); white-space: nowrap; }
.chip-lang { left: 4px; top: 70px; animation: drift 7s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); } 50% { transform: translate(8px, -12px) rotate(-2deg); }
}

/* ------------------------------------------------------------------ ticker */
.ticker { background: #23252b; color: #fffdf7; overflow: hidden; padding: 18px 0 14px; transform: rotate(-1.2deg); margin: 0 -20px; }
.tick-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.tick-set { display: flex; align-items: center; gap: 34px; padding-right: 34px; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 26px; white-space: nowrap; }
.tick-set i { width: 12px; height: 12px; border-radius: 50%; background: #ffb61e; flex: none; margin-top: -4px; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------- follow one file */
.journey { padding: 120px 0 110px; }
.track { position: relative; height: 300px; margin-top: 56px; }
.line { position: absolute; left: 12%; right: 12%; top: 128px; height: 0; border-top: 3px dashed #e3cf9f; }
.node { position: absolute; top: 68px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; width: 180px; }
.n1 { left: 12%; } .n2 { left: 50%; } .n3 { left: 88%; }
.disc { width: 120px; height: 120px; border-radius: 36px; background: #ffffff; border: 2px solid #23252b; box-shadow: 0 8px 0 #23252b; display: flex; align-items: center; justify-content: center; }
.disc svg { width: 54px; height: 54px; }
.n1 .disc { color: #179247; }
.n3 .disc { color: #f59300; }
.n2 .disc { background: #ffb61e; border-radius: 50%; overflow: hidden; }
.n2 .disc img { width: 118px; height: 118px; display: block; }
.node-label { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 19px; text-align: center; }
.d1 { animation: j-n1 12s infinite; } .d2 { animation: j-n2 12s infinite; } .d3 { animation: j-n3 12s infinite; }
@keyframes j-n1 {
  0%, 2% { transform: scale(1); } 4% { transform: scale(1.08) rotate(-4deg); } 7%, 92% { transform: scale(1); } 95% { transform: scale(1.1) rotate(4deg); } 98%, 100% { transform: scale(1); }
}
@keyframes j-n2 {
  0%, 21% { transform: scale(1); } 24% { transform: scale(1.12) rotate(-5deg); } 27%, 67% { transform: scale(1); } 70% { transform: scale(1.12) rotate(5deg); } 73%, 100% { transform: scale(1); }
}
@keyframes j-n3 {
  0%, 46% { transform: scale(1); } 50% { transform: scale(1.12) rotate(4deg); } 53%, 72% { transform: scale(1); } 75% { transform: scale(1.08) rotate(-3deg); } 78%, 100% { transform: scale(1); }
}
.trav { position: absolute; top: 4px; left: 12%; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 14px 6px 8px; border-radius: 12px; background: #ffffff; border: 2px solid #23252b; font-weight: 600; font-size: 16px; white-space: nowrap; opacity: 0; transform: translateX(-50%); }
.trav .pdf { width: 26px; height: 30px; font-size: 9px; padding-bottom: 3px; border-radius: 5px; }
.trav .jpg { background: #2f6fdd; }
.trav.ask { padding-left: 14px; background: #d9fdd3; border-color: #179247; }
.t-doc { animation: j-doc 12s infinite; }
.t-ask { animation: j-ask 12s infinite; }
.t-back { animation: j-back 12s infinite; }
@keyframes j-doc {
  0% { left: 12%; opacity: 0; transform: translateX(-50%) translateY(50px) scale(.5); }
  4% { left: 12%; opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  20% { left: 50%; opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  24% { left: 50%; opacity: 1; transform: translateX(-50%) translateY(54px) scale(.6) rotate(-6deg); }
  28% { left: 50%; opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(0); }
  45% { left: 88%; opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  49%, 100% { left: 88%; opacity: 0; transform: translateX(-50%) translateY(56px) scale(.5); }
}
@keyframes j-ask {
  0%, 55% { left: 12%; opacity: 0; transform: translateX(-50%) translateY(50px) scale(.5); }
  58% { left: 12%; opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  67% { left: 50%; opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  70%, 100% { left: 50%; opacity: 0; transform: translateX(-50%) translateY(54px) scale(.5); }
}
@keyframes j-back {
  0%, 72% { left: 88%; opacity: 0; transform: translateX(-50%) translateY(56px) scale(.5); }
  75% { left: 88%; opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  91% { left: 12%; opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  95%, 100% { left: 12%; opacity: 0; transform: translateX(-50%) translateY(54px) scale(.5); }
}
.tag { position: absolute; left: 50%; top: 262px; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 7px 14px 5px; border-radius: 999px; background: #fdf3d9; border: 1.5px dashed #a85400; font-size: 15px; font-weight: 600; color: #3d4048; white-space: nowrap; transform: translateX(-50%); animation: j-tag 12s infinite; }
.tag svg { width: 18px; height: 18px; color: #a85400; flex: none; margin-top: -2px; }
@keyframes j-tag {
  0%, 24% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.8); }
  27%, 67% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  70% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1); }
  73%, 94% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  98%, 100% { opacity: 0; transform: translateX(-50%) translateY(0) scale(1); }
}
.steps3 { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.steps3 li { padding: 26px 26px 24px; border-radius: 24px; background: #fffdf7; border: 2px solid #ece3d0; }
.steps3 .num { width: 40px; height: 40px; border-radius: 50%; background: #23252b; color: #fffdf7; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; padding-top: 3px; }
.steps3 h3 { font-size: 26px; font-weight: 700; margin-top: 16px; line-height: 1.1; }
.steps3 p { font-size: 17.5px; color: #4a4e57; margin-top: 8px; }
.s1 { animation: s-1 12s infinite; } .s2 { animation: s-2 12s infinite; } .s3 { animation: s-3 12s infinite; }
@keyframes s-1 {
  0%, 19% { background: #ffffff; border-color: #ffb61e; transform: translateY(-6px); } 23%, 100% { background: #fffdf7; border-color: #ece3d0; transform: none; }
}
@keyframes s-2 {
  0%, 19% { background: #fffdf7; border-color: #ece3d0; transform: none; } 23%, 50% { background: #ffffff; border-color: #ffb61e; transform: translateY(-6px); } 54%, 100% { background: #fffdf7; border-color: #ece3d0; transform: none; }
}
@keyframes s-3 {
  0%, 54% { background: #fffdf7; border-color: #ece3d0; transform: none; } 58%, 95% { background: #ffffff; border-color: #ffb61e; transform: translateY(-6px); } 99%, 100% { background: #fffdf7; border-color: #ece3d0; transform: none; }
}

/* ---------------------------------------------------- ask the way you talk */
.ask { background: #fbf5e8; padding: 110px 0; border-top: 2px solid #f1e6cc; border-bottom: 2px solid #f1e6cc; }
.ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.voice { margin-top: 30px; display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 18px; background: #d9fdd3; box-shadow: 0 2px 0 #b7e2b1; }
.mic { width: 44px; height: 44px; border-radius: 50%; background: #179247; color: #ffffff; display: flex; align-items: center; justify-content: center; animation: ping 2s ease-out infinite; }
.mic svg { width: 22px; height: 22px; }
.vwave { display: flex; align-items: center; gap: 4px; height: 34px; }
.vwave i { width: 5px; height: 100%; border-radius: 3px; background: #23252b; animation: wave 1.1s ease-in-out infinite; }
.vwave i:nth-child(1) { animation-delay: -.9s; } .vwave i:nth-child(2) { animation-delay: -.2s; } .vwave i:nth-child(3) { animation-delay: -.6s; } .vwave i:nth-child(4) { animation-delay: -.1s; } .vwave i:nth-child(5) { animation-delay: -.75s; } .vwave i:nth-child(6) { animation-delay: -.35s; } .vwave i:nth-child(7) { animation-delay: -.5s; } .vwave i:nth-child(8) { animation-delay: -.05s; } .vwave i:nth-child(9) { animation-delay: -.8s; } .vwave i:nth-child(10) { animation-delay: -.3s; }
@keyframes wave {
  0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); }
}
.vtime { font-size: 14px; color: #3d4048; font-weight: 600; }
.ask-card { position: relative; padding: 34px 34px 32px; border-radius: 30px; background: #ffffff; border: 2px solid #23252b; box-shadow: 10px 10px 0 #ffb61e; }
.ask-label { font-size: 14px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #5f636e; }
.rot { position: relative; }
.rot-q { height: 116px; margin-top: 8px; }
.rot-a { height: 64px; margin-top: 10px; }
.rot-item { position: absolute; left: 0; right: 0; top: 0; animation: cyc5 12.5s infinite both; }
.rot-q .rot-item { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 42px; line-height: 1.05; letter-spacing: -.8px; }
.rot-item:nth-child(2) { animation-delay: -10s; } .rot-item:nth-child(3) { animation-delay: -7.5s; } .rot-item:nth-child(4) { animation-delay: -5s; } .rot-item:nth-child(5) { animation-delay: -2.5s; }
@keyframes cyc5 {
  0% { opacity: 0; transform: translateY(26px); } 3%, 17% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; transform: translateY(-26px); }
}
.q-mark { color: #f59300; }
.ans { display: inline-flex; align-items: center; gap: 12px; padding: 9px 16px 7px 9px; border-radius: 14px; background: #f2f5f6; font-weight: 600; font-size: 18px; }
.ans .pdf { width: 32px; height: 38px; }
.ask-arrow { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; color: #a85400; font-weight: 600; font-size: 15px; }
.ask-arrow svg { width: 26px; height: 26px; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); }
}

/* --------------------------------------------------------------- features */
.feats { padding: 120px 0 110px; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card { padding: 18px 18px 28px; border-radius: 28px; background: #ffffff; border: 2px solid #ece3d0; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card:hover { transform: translateY(-6px) rotate(-.6deg); border-color: #23252b; box-shadow: 0 10px 0 #23252b; }
.card h3 { font-size: 24px; font-weight: 700; line-height: 1.1; padding: 0 8px; }
.card p { font-size: 16.5px; color: #4a4e57; margin-top: 8px; padding: 0 8px; }
.ill { position: relative; height: 170px; border-radius: 20px; background: #fdf3d9; margin-bottom: 22px; overflow: hidden; }
.ill.green { background: #e3f7e6; }
.ill.ink { background: #23252b; }
.pg { position: absolute; top: 46px; left: 50%; width: 62px; height: 80px; margin-left: -31px; background: #ffffff; border: 2px solid #23252b; border-radius: 7px; }
.pg::before { content: ""; position: absolute; left: 10px; right: 10px; top: 13px; height: 32px; background: repeating-linear-gradient(#c9ced6 0 3px, transparent 3px 9px); }
.pg1 { animation: mg-1 5s ease-in-out infinite; } .pg3 { animation: mg-3 5s ease-in-out infinite; }
@keyframes mg-1 {
  0%, 12% { transform: translateX(-70px) rotate(-9deg); } 42%, 82% { transform: translate(-8px, -7px) rotate(-4deg); } 100% { transform: translateX(-70px) rotate(-9deg); }
}
@keyframes mg-3 {
  0%, 12% { transform: translateX(70px) rotate(9deg); } 42%, 82% { transform: translate(8px, 7px) rotate(4deg); } 100% { transform: translateX(70px) rotate(9deg); }
}
.badge { position: absolute; left: 50%; top: 30px; margin-left: 20px; padding: 4px 10px 2px; border-radius: 9px; background: #c2312f; color: #ffffff; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 15px; animation: badge 5s ease-in-out infinite; }
@keyframes badge {
  0%, 42% { opacity: 0; transform: scale(.4) rotate(-10deg); } 50%, 82% { opacity: 1; transform: scale(1) rotate(-6deg); } 90%, 100% { opacity: 0; transform: scale(.4) rotate(-10deg); }
}
.half { position: absolute; top: 46px; width: 34px; height: 80px; background: #ffffff; border: 2px solid #23252b; }
.half::before { content: ""; position: absolute; top: 13px; height: 32px; width: 18px; background: repeating-linear-gradient(#c9ced6 0 3px, transparent 3px 9px); }
.half-l { left: 50%; margin-left: -33px; border-radius: 7px 0 0 7px; border-right-style: dashed; animation: sp-l 5s ease-in-out infinite; }
.half-l::before { left: 9px; }
.half-r { left: 50%; margin-left: -1px; border-radius: 0 7px 7px 0; border-left: none; animation: sp-r 5s ease-in-out infinite; }
.half-r::before { left: 4px; }
@keyframes sp-l {
  0%, 22% { transform: none; } 42%, 74% { transform: translateX(-36px) rotate(-8deg); } 92%, 100% { transform: none; }
}
@keyframes sp-r {
  0%, 22% { transform: none; } 42%, 74% { transform: translateX(36px) rotate(8deg); } 92%, 100% { transform: none; }
}
.cut { position: absolute; left: 50%; top: 32px; margin-left: -11px; width: 22px; height: 22px; color: #23252b; animation: cut 5s ease-in-out infinite; }
@keyframes cut {
  0%, 6% { opacity: 0; transform: translateY(-10px); } 12%, 30% { opacity: 1; transform: translateY(60px); } 38%, 100% { opacity: 0; transform: translateY(80px); }
}
.bigwave { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; height: 74px; }
.bigwave i { width: 7px; height: 100%; border-radius: 4px; background: #179247; animation: wave 1.2s ease-in-out infinite; }
.bigwave i:nth-child(1) { animation-delay: -.2s; } .bigwave i:nth-child(2) { animation-delay: -.9s; } .bigwave i:nth-child(3) { animation-delay: -.4s; } .bigwave i:nth-child(4) { animation-delay: -1s; } .bigwave i:nth-child(5) { animation-delay: -.1s; } .bigwave i:nth-child(6) { animation-delay: -.7s; } .bigwave i:nth-child(7) { animation-delay: -.3s; } .bigwave i:nth-child(8) { animation-delay: -.85s; } .bigwave i:nth-child(9) { animation-delay: -.5s; } .bigwave i:nth-child(10) { animation-delay: -.15s; } .bigwave i:nth-child(11) { animation-delay: -.65s; } .bigwave i:nth-child(12) { animation-delay: -.95s; } .bigwave i:nth-child(13) { animation-delay: -.25s; } .bigwave i:nth-child(14) { animation-delay: -.55s; }
.note { position: absolute; left: 50%; top: 30px; width: 178px; height: 110px; margin-left: -89px; background: #ffffff; border: 2px solid #23252b; border-radius: 12px; padding: 16px 16px; }
.note i { display: block; height: 8px; border-radius: 4px; background: #23252b; margin-bottom: 11px; transform-origin: left center; animation: write 6s ease-in-out infinite both; }
.note i:nth-child(1) { width: 78%; } .note i:nth-child(2) { width: 96%; animation-delay: .5s; } .note i:nth-child(3) { width: 56%; animation-delay: 1s; } .note i:nth-child(4) { width: 84%; animation-delay: 1.5s; background: #f59300; }
@keyframes write {
  0% { transform: scaleX(0); } 14%, 80% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); }
}
.fold { position: absolute; top: 76px; width: 66px; height: 52px; background: #ffb61e; border: 2px solid #23252b; border-radius: 4px 10px 10px 10px; }
.fold::before { content: ""; position: absolute; left: -2px; top: -12px; width: 36px; height: 12px; background: #ffb61e; border: 2px solid #23252b; border-bottom: none; border-radius: 6px 6px 0 0; }
.fold span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 12.5px; font-weight: 600; }
.f-a { left: 10%; } .f-b { right: 10%; }
.hop { position: absolute; top: 48px; left: 22%; width: 32px; height: 40px; background: #ffffff; border: 2px solid #23252b; border-radius: 5px; z-index: 1; animation: hop 6s ease-in-out infinite; }
@keyframes hop {
  0%, 10% { left: 22%; top: 48px; } 24% { left: 46%; top: 6px; } 38%, 58% { left: 68%; top: 48px; } 72% { left: 46%; top: 6px; } 86%, 100% { left: 22%; top: 48px; }
}
.say { position: absolute; left: 50%; bottom: 10px; padding: 4px 12px 2px; border-radius: 999px; background: #23252b; color: #fffdf7; font-size: 13.5px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); }
.say-move { animation: say-1 6s infinite; } .say-undo { opacity: 0; animation: say-2 6s infinite; }
@keyframes say-1 {
  0%, 6% { opacity: 0; } 10%, 40% { opacity: 1; } 46%, 100% { opacity: 0; }
}
@keyframes say-2 {
  0%, 54% { opacity: 0; } 58%, 88% { opacity: 1; } 94%, 100% { opacity: 0; }
}
.lang-b { position: absolute; left: 50%; top: 50%; width: 206px; margin: -34px 0 0 -103px; height: 68px; }
.lang-b .rot-item { animation-name: cyc3; animation-duration: 7.5s; }
.lang-b .rot-item:nth-child(2) { animation-delay: -5s; } .lang-b .rot-item:nth-child(3) { animation-delay: -2.5s; }
@keyframes cyc3 {
  0% { opacity: 0; transform: translateY(20px) scale(.96); } 5%, 28% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-20px); }
}
.lb { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px 8px; border-radius: 14px 14px 14px 4px; background: #ffffff; font-size: 15px; font-weight: 600; color: #23252b; }
.lb svg { width: 20px; height: 20px; color: #1a9e4b; flex: none; margin-top: 1px; }
.bell { position: absolute; left: 50%; top: 24px; width: 60px; height: 60px; margin-left: -30px; color: #23252b; transform-origin: 50% 10%; animation: ring 3.2s ease-in-out infinite; }
@keyframes ring {
  0%, 52%, 100% { transform: rotate(0); } 58% { transform: rotate(16deg); } 64% { transform: rotate(-13deg); } 70% { transform: rotate(10deg); } 76% { transform: rotate(-7deg); } 82% { transform: rotate(3deg); } 88% { transform: rotate(0); }
}
.remind { position: absolute; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 8px; padding: 8px 14px 6px; border-radius: 12px; background: #ffffff; border: 2px solid #23252b; font-size: 15px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); animation: remind 3.2s ease-in-out infinite; }
.remind b { font-family: "Baloo 2", sans-serif; font-weight: 800; color: #a85400; }
@keyframes remind {
  0%, 50% { opacity: 0; transform: translateX(-50%) translateY(10px); } 58%, 92% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}
.rf { position: absolute; left: 14px; top: 18px; display: flex; align-items: center; gap: 8px; padding: 7px 10px 5px 7px; border-radius: 10px; background: #ffffff; font-size: 13px; font-weight: 600; white-space: nowrap; animation: press 5s ease-in-out infinite; }
.rf .pdf { width: 22px; height: 26px; font-size: 8px; padding-bottom: 2px; border-radius: 4px; }
@keyframes press {
  0%, 14% { box-shadow: 0 0 0 0 rgba(23,146,71,0); transform: none; } 22%, 34% { box-shadow: 0 0 0 6px rgba(23,146,71,.28); transform: scale(.97); } 40%, 100% { box-shadow: 0 0 0 0 rgba(23,146,71,0); transform: none; }
}
.rr { position: absolute; right: 14px; bottom: 16px; max-width: 80%; padding: 6px 8px 5px; border-radius: 10px; background: #d9fdd3; font-size: 14px; font-weight: 600; box-shadow: 0 1px 1px rgba(0,0,0,.08); animation: rr 5s ease-in-out infinite; }
.rr-q { padding: 4px 8px 2px; margin-bottom: 4px; border-radius: 6px; background: rgba(0,0,0,.05); border-left: 3px solid #179247; font-size: 12px; font-weight: 500; color: #3d4048; }
@keyframes rr {
  0%, 38% { opacity: 0; transform: translateY(12px); } 45%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; }
}

/* ------------------------------------------------------------ coming next */
.soon { padding: 0 0 120px; }
.soon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 50px; }
.soon-card { position: relative; padding: 18px 18px 28px; border-radius: 28px; background: #23252b; color: #fffdf7; }
.soon-card h3 { color: #fffdf7; font-size: 26px; font-weight: 700; line-height: 1.1; padding: 0 10px; }
.soon-card p { color: #c9ccd3; font-size: 17px; margin-top: 8px; padding: 0 10px; }
.soon-chip { position: absolute; right: 30px; top: 30px; z-index: 2; padding: 4px 12px 2px; border-radius: 999px; background: #ffb61e; color: #23252b; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .6px; }
.soon-ill { position: relative; height: 176px; border-radius: 20px; background: rgba(255,255,255,.05); margin-bottom: 22px; overflow: hidden; }
.screen-d { position: absolute; left: 50%; top: 26px; width: 196px; height: 112px; margin-left: -98px; border: 3px solid #ffb61e; border-radius: 12px; }
.screen-d::after { content: ""; position: absolute; left: 50%; bottom: -17px; width: 54px; height: 11px; margin-left: -27px; border-radius: 0 0 6px 6px; background: #ffb61e; }
.dfile { position: absolute; width: 30px; height: 36px; border-radius: 5px; background: #fffdf7; }
.dfile::before { content: ""; position: absolute; left: 6px; right: 6px; top: 9px; height: 12px; background: repeating-linear-gradient(#c9ced6 0 2px, transparent 2px 5px); }
.df1 { left: 16px; top: 16px; animation: df1 6s ease-in-out infinite; }
.df2 { left: 60px; top: 16px; animation: df2 6s ease-in-out infinite; }
.df3 { left: 104px; top: 16px; animation: df3 6s ease-in-out infinite; }
.df4 { left: 148px; top: 16px; background: #ffd47a; animation: df4 6s ease-in-out infinite; }
@keyframes df1 {
  0%, 12% { left: 12px; top: 58px; transform: rotate(-18deg); } 40%, 82% { left: 16px; top: 16px; transform: none; } 100% { left: 12px; top: 58px; transform: rotate(-18deg); }
}
@keyframes df2 {
  0%, 12% { left: 120px; top: 6px; transform: rotate(22deg); } 40%, 82% { left: 60px; top: 16px; transform: none; } 100% { left: 120px; top: 6px; transform: rotate(22deg); }
}
@keyframes df3 {
  0%, 12% { left: 66px; top: 62px; transform: rotate(12deg); } 40%, 82% { left: 104px; top: 16px; transform: none; } 100% { left: 66px; top: 62px; transform: rotate(12deg); }
}
@keyframes df4 {
  0%, 12% { left: 152px; top: 60px; transform: rotate(-10deg); } 40%, 82% { left: 148px; top: 16px; transform: none; } 100% { left: 152px; top: 60px; transform: rotate(-10deg); }
}
.vault2 { position: absolute; left: 50%; top: 33px; width: 110px; height: 110px; margin-left: -55px; border-radius: 32px; background: #ffb61e; color: #23252b; display: flex; align-items: center; justify-content: center; animation: breathe 3s ease-in-out infinite; }
.vault2 svg { width: 52px; height: 52px; }
@keyframes breathe {
  0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); }
}
.orbit { position: absolute; left: 50%; top: 88px; width: 196px; height: 196px; margin: -98px 0 0 -98px; border-radius: 50%; border: 1.5px dashed rgba(255,214,107,.45); animation: spin 12s linear infinite; }
.orbit i { position: absolute; width: 16px; height: 20px; border-radius: 4px; background: #fffdf7; }
.orbit i:nth-child(1) { left: 90px; top: -10px; } .orbit i:nth-child(2) { right: -8px; top: 88px; } .orbit i:nth-child(3) { left: 90px; bottom: -10px; } .orbit i:nth-child(4) { left: -8px; top: 88px; }
.aiq { position: absolute; left: 16px; top: 16px; padding: 7px 12px 5px; border-radius: 12px 12px 12px 4px; background: #d9fdd3; color: #23252b; font-size: 14px; font-weight: 600; animation: aiq 6s ease-in-out infinite; }
.ai-total { position: absolute; left: 18px; bottom: 18px; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 32px; line-height: 1; color: #ffd47a; animation: aiq 6s ease-in-out infinite; }
.ai-total span { display: block; margin-top: 6px; font-family: "Hind", sans-serif; font-weight: 500; font-size: 13px; color: #c9ccd3; }
@keyframes aiq {
  0%, 6% { opacity: 0; transform: translateY(8px); } 14%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; }
}
.bars { position: absolute; right: 20px; bottom: 18px; display: flex; align-items: flex-end; gap: 7px; height: 84px; }
.bars i { width: 16px; border-radius: 5px 5px 0 0; background: #ffb61e; transform-origin: bottom center; animation: bar 6s ease-in-out infinite both; }
.bars i:nth-child(1) { height: 42%; } .bars i:nth-child(2) { height: 66%; animation-delay: .15s; } .bars i:nth-child(3) { height: 52%; animation-delay: .3s; } .bars i:nth-child(4) { height: 88%; animation-delay: .45s; } .bars i:nth-child(5) { height: 72%; animation-delay: .6s; }
@keyframes bar {
  0%, 18% { transform: scaleY(0); } 38%, 86% { transform: scaleY(1); } 100% { transform: scaleY(0); }
}

/* ------------------------------------------------------------------ print */
.print { padding: 40px 0 120px; }
.print-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.counter { position: relative; height: 470px; border-radius: 32px; background: #23252b; overflow: hidden; }
.awning { position: absolute; left: 0; right: 0; top: 0; height: 56px; background: repeating-linear-gradient(90deg, #ffb61e 0 48px, #fffdf7 48px 96px); }
.awning::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; background: radial-gradient(circle at 24px 0, #ffb61e 0 23px, transparent 24px) 0 0 / 96px 14px, radial-gradient(circle at 72px 0, #fffdf7 0 23px, transparent 24px) 0 0 / 96px 14px; }
.sign { position: absolute; left: 50%; top: 86px; transform: translateX(-50%); padding: 6px 16px 3px; border-radius: 8px; border: 2px solid #ffb61e; color: #ffb61e; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 3px; white-space: nowrap; }
.poster { position: absolute; left: 40px; top: 150px; width: 168px; padding: 14px; border-radius: 16px; background: #ffffff; text-align: center; transform: rotate(-4deg); }
.qr { position: relative; width: 140px; height: 140px; border-radius: 10px; border: 5px solid #ffb61e; padding: 8px; overflow: hidden; }
.qr-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.qr-grid i { background: #23252b; border-radius: 2px; }
.qr-grid i.o { background: transparent; }
.laser { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #25d366; box-shadow: 0 0 12px 3px rgba(37,211,102,.7); animation: laser 2.2s ease-in-out infinite; }
@keyframes laser {
  0%, 100% { transform: translateY(6px); } 50% { transform: translateY(118px); }
}
.poster-t { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 15px; line-height: 1.1; margin-top: 8px; }
.monitor { position: absolute; right: 36px; top: 140px; width: 236px; height: 168px; border-radius: 14px; background: #3a3d45; padding: 9px; }
.monitor::after { content: ""; position: absolute; left: 50%; bottom: -26px; width: 70px; height: 26px; margin-left: -35px; background: #3a3d45; border-radius: 0 0 8px 8px; }
.mon-screen { width: 100%; height: 100%; border-radius: 8px; background: #fffdf7; padding: 10px 10px; overflow: hidden; }
.mon-head { font-size: 11.5px; font-weight: 600; color: #5f636e; letter-spacing: .6px; text-transform: uppercase; }
.job { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px 5px; border-radius: 9px; background: #ffffff; border: 1.5px solid #ece3d0; font-size: 13px; }
.job b { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 19px; line-height: 1; }
.job-new { border-color: #ffb61e; background: #fdf3d9; animation: job 8s infinite; }
@keyframes job {
  0%, 18% { opacity: 0; transform: translateX(40px); } 24%, 56% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; transform: translateX(-40px); }
}
.printer { position: absolute; left: 50%; bottom: 40px; width: 230px; margin-left: -60px; }
.pr-body { position: relative; z-index: 2; height: 70px; border-radius: 16px 16px 10px 10px; background: #fffdf7; border: 3px solid #ffb61e; }
.pr-body::before { content: ""; position: absolute; left: 30px; right: 30px; top: 18px; height: 6px; border-radius: 3px; background: #23252b; }
.pr-body::after { content: ""; position: absolute; right: 18px; top: 38px; width: 12px; height: 12px; border-radius: 50%; background: #25d366; animation: blink 1s steps(2) infinite; }
@keyframes blink {
  50% { opacity: .2; }
}
.paper { position: absolute; left: 50%; top: -6px; z-index: 1; width: 150px; height: 120px; margin-left: -75px; border-radius: 4px; background: #ffffff; padding: 12px 14px; animation: paper 8s ease-in-out infinite; }
.paper i { display: block; height: 6px; border-radius: 3px; background: #c9ced6; margin-bottom: 8px; }
@keyframes paper {
  0%, 36% { transform: translateY(80px); opacity: 0; } 40% { opacity: 1; } 56%, 80% { transform: translateY(-58px); opacity: 1; } 88%, 100% { transform: translateY(-70px); opacity: 0; }
}
.name-tag { position: absolute; left: 50%; top: -94px; z-index: 3; padding: 4px 10px 2px; border-radius: 8px; background: #23252b; color: #fffdf7; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 16px; white-space: nowrap; transform: translateX(-50%); animation: ntag 8s infinite; }
@keyframes ntag {
  0%, 56% { opacity: 0; transform: translateX(-50%) translateY(10px); } 60%, 82% { opacity: 1; transform: translateX(-50%); } 88%, 100% { opacity: 0; transform: translateX(-50%); }
}
.mini { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.mini li { display: flex; align-items: center; gap: 14px; font-size: 19px; font-weight: 600; }
.mini .num { width: 36px; height: 36px; flex: none; border-radius: 50%; background: #ffb61e; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; padding-top: 3px; }
.shop-cta { margin-top: 30px; padding: 18px 20px 16px; border-radius: 18px; border: 2px dashed #e3cf9f; font-size: 17px; color: #3d4048; }
.shop-cta a { font-weight: 600; color: #23252b; border-bottom: 2px solid #ffb61e; }

/* ---------------------------------------------------------------- privacy */
.privacy { background: #1c1e23; color: #fffdf7; padding: 120px 0; }
.privacy .h2 { color: #fffdf7; }
.privacy .sub { color: #c9ccd3; }
.privacy code { background: rgba(255,182,30,.16); color: #ffd47a; }
.privacy-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.checks { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 14px; font-size: 18px; color: #e8e9ec; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks svg { width: 22px; height: 22px; flex: none; color: #ffb61e; margin-top: 1px; }
.policy { display: inline-block; margin-top: 30px; font-weight: 600; color: #ffd47a; border-bottom: 2px solid #ffb61e; padding-bottom: 1px; }
.vault { position: relative; padding: 26px; border-radius: 32px; background: #26292f; border: 1.5px solid #353841; }
.vault-head { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #c9ccd3; font-weight: 600; margin-bottom: 16px; }
.vault-head svg { width: 20px; height: 20px; flex: none; color: #c9ccd3; margin-top: -2px; }
.tiles { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tile { position: relative; height: 96px; border-radius: 18px; background: #30333a; padding: 14px 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; color: #8b909a; font-weight: 600; font-size: 15px; }
.tile .lk { position: absolute; right: 12px; top: 12px; width: 18px; height: 18px; color: #6c717b; }
.tile-me { background: #ffb61e; color: #23252b; animation: glow 4s ease-in-out infinite; }
.tile-me .lk { color: #23252b; }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,182,30,0); } 50% { box-shadow: 0 0 0 10px rgba(255,182,30,.18), 0 0 40px 6px rgba(255,182,30,.35); }
}
.sweep { position: absolute; left: -10px; right: -10px; top: 0; height: 4px; border-radius: 4px; background: #ffd47a; box-shadow: 0 0 18px 4px rgba(255,212,122,.5); animation: sweep 4s ease-in-out infinite; }
@keyframes sweep {
  0%, 100% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translateY(318px); opacity: 1; } 60% { opacity: 0; }
}
.vault-foot { margin-top: 16px; font-size: 15px; color: #c9ccd3; }
.vault-foot b { color: #ffd47a; font-weight: 600; }

/* -------------------------------------------------------------------- faq */
.faq { padding: 110px 0 100px; }
.faq-list { max-width: 840px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 14px; }
.faq details { border-radius: 20px; background: #ffffff; border: 2px solid #ece3d0; padding: 0 24px; transition: border-color .2s ease; }
.faq details[open] { border-color: #23252b; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; padding: 6px 0 2px; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 21px; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #fdf3d9; transition: transform .25s ease, background .25s ease; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: #23252b; }
.plus::after { transform: rotate(90deg); }
.faq details[open] .plus { transform: rotate(45deg); background: #ffb61e; }
.faq details p { padding: 0 0 22px; font-size: 17.5px; color: #4a4e57; max-width: 700px; }

/* -------------------------------------------------------------------- cta */
.cta { position: relative; background: #ffffff; padding: 90px 0; overflow: hidden; border-top: 2px solid #f1e6cc; }
.cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 56px; }
.cta-art { position: relative; flex: none; width: 360px; height: 320px; display: flex; align-items: center; justify-content: center; }
.cta-art::before { content: ""; position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; background: #fdf3d9; }
.cta-ring { position: absolute; left: 50%; top: 50%; width: 384px; height: 384px; margin: -192px 0 0 -192px; border-radius: 50%; border: 2px dashed #e7b347; animation: spin 40s linear infinite; }
.cta-hippo { position: relative; width: 316px; height: auto; animation: bob 4.2s ease-in-out infinite; filter: drop-shadow(0 22px 22px rgba(35,37,43,.22)); }
.cta .cta-h { font-size: 66px; line-height: .98; font-weight: 800; letter-spacing: -1.8px; }
.cta p { font-size: 20px; margin-top: 16px; color: #4a4e57; }
.cta .actions { margin-top: 28px; }
.cta .cta-note { font-size: 15.5px; margin-top: 14px; color: #5f636e; }
.floaty { position: absolute; width: 64px; height: 80px; border-radius: 8px; border: 2px solid #ece3d0; animation: rise-doc 14s linear infinite; }
.floaty::before { content: ""; position: absolute; left: 11px; right: 11px; top: 14px; height: 30px; background: repeating-linear-gradient(#ece3d0 0 3px, transparent 3px 9px); }
.fl1 { left: 6%; animation-delay: 0s; } .fl2 { left: 22%; animation-delay: -5s; width: 48px; height: 60px; } .fl3 { left: 78%; animation-delay: -9s; } .fl4 { left: 92%; animation-delay: -2.5s; width: 44px; height: 56px; }
@keyframes rise-doc {
  0% { top: 110%; transform: rotate(-12deg); } 100% { top: -30%; transform: rotate(14deg); }
}

/* ----------------------------------------------------------------- footer */
.footer { padding: 64px 0 34px; background: #fffdf7; border-top: 1.5px solid #ece3d0; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-tag { font-size: 16px; color: #5f636e; margin-top: 10px; max-width: 280px; }
.foot-col h4 { margin: 4px 0 12px; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 17px; }
.foot-col a { display: block; padding: 5px 0; font-size: 16px; color: #4a4e57; }
.foot-col a:hover { color: #23252b; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 44px; padding-top: 22px; border-top: 1.5px solid #ece3d0; font-size: 14.5px; color: #5f636e; }

/* ================================================================ plans page */
.head { padding-top: 40px; padding-bottom: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.head h1 { font-size: 74px; line-height: .98; font-weight: 800; letter-spacing: -2.2px; margin-top: 12px; }
.head .sub { margin-left: auto; margin-right: auto; }
.notice { margin-top: 30px; display: inline-flex; align-items: center; gap: 14px; max-width: 760px; padding: 14px 22px 12px 14px; border-radius: 20px; background: #fdf3d9; border: 2px dashed #e7b347; text-align: left; font-size: 17.5px; color: #3d4048; }
.notice b { color: #23252b; font-weight: 600; }
.notice-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; background: #23252b; color: #ffb61e; display: flex; align-items: center; justify-content: center; animation: tilt 3s ease-in-out infinite; }
.notice-ico svg { width: 24px; height: 24px; }
@keyframes tilt {
  0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); }
}
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 64px; padding-bottom: 30px; }
.plan { position: relative; padding: 30px 28px 32px; border-radius: 30px; background: #ffffff; border: 2px solid #ece3d0; }
.plan h3 { font-size: 32px; font-weight: 800; line-height: 1; }
.plan-for { margin-top: 8px; font-size: 16.5px; color: #4a4e57; min-height: 52px; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 18px; }
.amt { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 60px; line-height: 1; letter-spacing: -1.5px; }
.amt.talk { font-size: 44px; letter-spacing: -1px; }
.per { font-size: 17px; color: #5f636e; font-weight: 500; }
.was { position: relative; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 28px; color: #5f636e; }
.was::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 3px; margin-top: -3px; border-radius: 2px; background: #c2312f; transform: rotate(-12deg); transform-origin: left center; animation: strike .7s 1s ease-out both; }
@keyframes strike {
  from { transform: rotate(-12deg) scaleX(0); } to { transform: rotate(-12deg) scaleX(1); }
}
.price-note { margin-top: 6px; font-size: 15px; color: #4a4e57; min-height: 24px; }
.plan .btn { margin-top: 22px; }
.list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; font-size: 16.5px; line-height: 1.4; }
.list li { display: flex; gap: 10px; align-items: flex-start; }
.list svg { width: 20px; height: 20px; flex: none; color: #179247; margin-top: 1px; }
.list .lead { font-weight: 600; }
.soon-tag { display: inline-block; margin-left: 6px; padding: 1px 8px 0; border-radius: 999px; background: #fdf3d9; border: 1.5px solid #e7b347; font-size: 12.5px; font-weight: 600; color: #7a3d00; vertical-align: 1px; white-space: nowrap; }
.list-title { margin-top: 26px; font-size: 13.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #5f636e; }
.pro-wrap { position: relative; }
.pro-hippo { position: absolute; right: 28px; top: -58px; z-index: 0; width: 92px; height: 92px; border-radius: 50%; animation: peek 4s ease-in-out infinite; }
@keyframes peek {
  0%, 100% { transform: translateY(8px) rotate(-6deg); } 50% { transform: translateY(-4px) rotate(4deg); }
}
.plan.pro { z-index: 1; border: 3px solid #23252b; box-shadow: 0 12px 0 #23252b; transform: translateY(-14px); background: #ffffff; }
.ribbon { position: absolute; left: 24px; top: -18px; padding: 6px 14px 3px; border-radius: 999px; background: #c2312f; color: #ffffff; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .4px; box-shadow: 0 6px 14px -6px rgba(194,49,47,.7); animation: wobble 2.6s ease-in-out infinite; }
@keyframes wobble {
  0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg) scale(1.04); }
}
.plan.pro .list svg { color: #a85400; }
.plan.ent { background: #23252b; border-color: #23252b; }
.plan.ent h3, .plan.ent .amt { color: #fffdf7; }
.plan.ent .plan-for, .plan.ent .price-note, .plan.ent .list { color: #d9dbe0; }
.plan.ent .list svg { color: #ffc94d; }
.plan.ent .list-title { color: #a9adb6; }
/* padding-top/bottom only: these elements are also .wrap, which owns the sides */
.compare { padding-top: 90px; padding-bottom: 30px; }
.tbl-box { margin-top: 44px; overflow-x: auto; border-radius: 24px; border: 2px solid #ece3d0; background: #ffffff; }
.dd table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 16.5px; }
.dd th, .dd td { padding: 15px 20px 13px; text-align: left; vertical-align: top; border-bottom: 1.5px solid #f1e9d8; }
.dd thead th { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 22px; background: #fbf5e8; }
.dd thead th.pro-col { background: #ffb61e; }
.dd tbody th { font-weight: 600; width: 28%; }
.dd tbody td.pro-col { background: #fffaf0; font-weight: 500; }
.dd tbody tr:last-child th, .dd tbody tr:last-child td { border-bottom: none; }
.yes, .no { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; }
.yes { background: #e3f7e6; color: #179247; }
.no { background: #f2f0eb; color: #8b909a; }
.yes svg, .no svg { width: 15px; height: 15px; }
.soon-t { color: #7a3d00; font-size: 13px; font-weight: 600; }
.biz { margin-top: 90px; background: #1c1e23; color: #fffdf7; padding: 110px 0; }
.biz .h2 { color: #fffdf7; }
.biz .sub { color: #c9ccd3; }
.biz-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 60px; align-items: center; }
.flow { position: relative; height: 360px; border-radius: 30px; background: #26292f; border: 1.5px solid #353841; overflow: hidden; }
.src { position: absolute; left: 26px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 8px 10px; border-radius: 14px; background: #30333a; font-weight: 600; font-size: 15.5px; color: #e8e9ec; }
.src span { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.src svg { width: 18px; height: 18px; }
.s-wa { top: 46px; } .s-wa span { background: #25d366; color: #0b2e17; }
.s-mail { top: 152px; } .s-mail span { background: #ffb61e; color: #23252b; }
.s-web { top: 258px; } .s-web span { background: #8fb3ff; color: #12204a; }
.hub { position: absolute; right: 40px; top: 50%; width: 150px; height: 150px; margin-top: -75px; border-radius: 50%; background: #ffb61e; display: flex; align-items: center; justify-content: center; animation: hub 3s ease-in-out infinite; }
.hub img { width: 146px; height: 146px; border-radius: 50%; display: block; }
@keyframes hub {
  0%, 100% { box-shadow: 0 0 0 10px rgba(255,182,30,.10); } 50% { box-shadow: 0 0 0 22px rgba(255,182,30,.06); }
}
.pkt { position: absolute; width: 22px; height: 28px; border-radius: 5px; background: #fffdf7; opacity: 0; }
.p1 { animation: p1 4.5s ease-in infinite; } .p2 { animation: p2 4.5s 1.5s ease-in infinite both; } .p3 { animation: p3 4.5s 3s ease-in infinite both; }
@keyframes p1 {
  0% { left: 190px; top: 56px; opacity: 0; } 8% { opacity: 1; } 70% { left: calc(100% - 128px); top: 166px; opacity: 1; } 80%, 100% { left: calc(100% - 128px); top: 166px; opacity: 0; }
}
@keyframes p2 {
  0% { left: 170px; top: 162px; opacity: 0; } 8% { opacity: 1; } 70% { left: calc(100% - 128px); top: 166px; opacity: 1; } 80%, 100% { left: calc(100% - 128px); top: 166px; opacity: 0; }
}
@keyframes p3 {
  0% { left: 186px; top: 268px; opacity: 0; } 8% { opacity: 1; } 70% { left: calc(100% - 128px); top: 166px; opacity: 1; } 80%, 100% { left: calc(100% - 128px); top: 166px; opacity: 0; }
}
.agent { position: absolute; right: 26px; bottom: 22px; padding: 7px 14px 5px; border-radius: 999px; background: #fffdf7; color: #23252b; font-size: 14px; font-weight: 600; white-space: nowrap; animation: agent 4.5s ease-in-out infinite; }
@keyframes agent {
  0%, 60% { opacity: 0; transform: translateY(8px); } 70%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; }
}
.biz-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.biz-tile { padding: 22px; border-radius: 22px; background: #26292f; border: 1.5px solid #353841; }
.biz-tile .ico { width: 44px; height: 44px; border-radius: 13px; background: rgba(255,182,30,.14); color: #ffc94d; display: flex; align-items: center; justify-content: center; }
.biz-tile .ico svg { width: 22px; height: 22px; }
.biz-tile h3 { color: #fffdf7; font-size: 22px; font-weight: 700; line-height: 1.15; margin-top: 14px; }
.biz-tile p { color: #c9ccd3; font-size: 16px; margin-top: 6px; }
.biz-cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.biz-cta span { color: #c9ccd3; font-size: 16px; }

/* ============================================================== gradients */
.grad .gt { background: linear-gradient(90deg, #179247 0%, #0b7a6a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad .top-band { background: radial-gradient(circle at 80% 36%, rgba(255,201,77,.42) 0%, rgba(255,201,77,0) 42%), radial-gradient(circle at 6% 92%, rgba(37,211,102,.12) 0%, rgba(37,211,102,0) 34%), linear-gradient(180deg, #fff1d1 0%, #fffdf7 100%); }
.grad .top-band.centered { background: radial-gradient(circle at 50% 0%, rgba(255,201,77,.40) 0%, rgba(255,201,77,0) 46%), radial-gradient(circle at 92% 70%, rgba(37,211,102,.10) 0%, rgba(37,211,102,0) 30%), linear-gradient(180deg, #fff1d1 0%, #fffdf7 100%); }
.grad .sun { background: radial-gradient(circle at 34% 28%, #ffe07a 0%, #ffb61e 46%, #f08a00 100%); }
.grad .hl::before { background: linear-gradient(90deg, #ffd34f 0%, #ffa31a 100%); }
.grad .btn-wa { background: linear-gradient(180deg, #45e585 0%, #1fc15c 100%); }
.grad .btn-amber { background: linear-gradient(180deg, #ffd65e 0%, #ffaa12 100%); }
.grad .ticker { background: linear-gradient(90deg, #23252b 0%, #3d2f12 50%, #23252b 100%); }
.grad .ask { background: linear-gradient(135deg, #fff0cc 0%, #fbf5e8 46%, #e5f7e9 100%); }
.grad .ask-card { box-shadow: 10px 10px 0 #ffb61e, 0 34px 60px -30px rgba(245,147,0,.5); }
.grad .ill { background: linear-gradient(150deg, #fff6dc 0%, #ffe2a0 100%); }
.grad .ill.green { background: linear-gradient(150deg, #effbf1 0%, #c4eecd 100%); }
.grad .ill.ink { background: linear-gradient(150deg, #353842 0%, #1a1c21 100%); }
.grad .n2 .disc { background: radial-gradient(circle at 35% 30%, #ffe07a 0%, #ffb61e 55%, #f08a00 100%); }
.grad .soon-card { background: linear-gradient(160deg, #31343d 0%, #1a1c21 100%); }
.grad .vault2 { background: linear-gradient(150deg, #ffd65e 0%, #ffa412 100%); }
.grad .counter { background: linear-gradient(165deg, #2e313a 0%, #16171b 100%); }
.grad .privacy { background: radial-gradient(circle at 88% 18%, rgba(255,182,30,.18) 0%, rgba(255,182,30,0) 38%), linear-gradient(165deg, #23262d 0%, #141519 100%); }
.grad .tile-me { background: linear-gradient(150deg, #ffd65e 0%, #ffa412 100%); }
.grad .cta { background: radial-gradient(circle at 30% 50%, rgba(255,201,77,.20) 0%, rgba(255,201,77,0) 36%), #ffffff; }
.grad .plan.pro { background: linear-gradient(180deg, #fff6dc 0%, #ffffff 38%); }
.grad .plan.ent { background: linear-gradient(165deg, #2e313a 0%, #17181c 100%); }
.grad .ribbon { background: linear-gradient(90deg, #d9363a 0%, #b02525 100%); }
.grad .amt.gt { background: linear-gradient(90deg, #23252b 0%, #a85400 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad thead th.pro-col { background: linear-gradient(180deg, #ffd65e 0%, #ffb61e 100%); }
.grad .biz { background: radial-gradient(circle at 10% 10%, rgba(255,182,30,.14) 0%, rgba(255,182,30,0) 34%), linear-gradient(165deg, #23262d 0%, #141519 100%); }
.grad .hub { background: radial-gradient(circle at 35% 30%, #ffe07a 0%, #ffb61e 55%, #f08a00 100%); }

/* ================================================== scroll reveal, reduced motion */
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
}
@keyframes rise {
  from { opacity: 0; translate: 0 46px; } to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dd *, .dd *::before, .dd *::after { animation: none !important; }
  .dd .typing, .dd .st-ty, .dd .say-undo, .dd .pkt, .dd .agent { display: none; }
  .dd .rot-item { opacity: 0; }
  .dd .rot-item:first-child { opacity: 1; }
}

/* ================================================ small laptops, tablets */
/* Six links, Log in and the WhatsApp button stop fitting on one line below
   about 1140px, so the links move into a menu there. */
@media (max-width: 1140px) {
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; position: absolute; left: 20px; right: 20px; top: 100%; z-index: 20; flex-direction: column; gap: 0; padding: 8px 18px; border-radius: 20px; background: #ffffff; border: 2px solid #23252b; box-shadow: 0 8px 0 #23252b; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0 11px; border-top: 1px solid #f1e9d8; }
  .nav-links a:first-child { border-top: none; }
  .nav-links a::after { display: none; }
  .nav-links { left: auto; right: 32px; width: 300px; }
}
/* Between one column and full width, the hero art (610px with the hippo and
   the Drive card) is wider than its column; scale it so the card isn't cut. */
@media (min-width: 981px) and (max-width: 1260px) {
  .stage { transform: scale(.85); transform-origin: top center; margin-bottom: -98px; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  .stage { transform: scale(.76); margin-bottom: -156px; }
}

/* ===================================================== tablets and phones */
@media (max-width: 980px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .nav-links { right: 20px; }
  .nav { padding-top: 14px; padding-bottom: 10px; }
  .head { padding-top: 24px; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 16px; padding-bottom: 40px; gap: 8px; }
  .hero h1 { font-size: 52px; letter-spacing: -1.4px; }
  .lede { font-size: 19px; }
  .spark { right: -28px; width: 26px; height: 26px; }
  .stage { transform: scale(.66); transform-origin: top center; margin-bottom: -221px; }
  .h2 { font-size: 40px; letter-spacing: -1px; }
  .sub { font-size: 18px; }
  .journey, .feats { padding: 80px 0 70px; }
  .track { height: 250px; margin-top: 36px; }
  .line { top: 98px; }
  .node { top: 60px; width: 110px; gap: 8px; }
  .disc { width: 76px; height: 76px; border-radius: 24px; box-shadow: 0 5px 0 #23252b; }
  .disc svg { width: 36px; height: 36px; }
  .n2 .disc img { width: 74px; height: 74px; }
  .node-label { font-size: 16px; }
  .trav { font-size: 13px; padding: 6px 10px 4px 6px; }
  .trav .pdf { width: 20px; height: 24px; font-size: 7px; }
  .tag { top: 206px; font-size: 13px; padding: 6px 11px 4px; }
  .steps3 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ask { padding: 72px 0; }
  .ask-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ask-card { padding: 24px 22px; box-shadow: 7px 7px 0 #ffb61e; }
  .rot-q { height: 96px; }
  .rot-q .rot-item { font-size: 32px; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; }
  .soon-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; }
  .soon { padding: 0 0 80px; }
  .print { padding: 10px 0 80px; }
  .print-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .counter { height: 430px; }
  .poster { left: 18px; width: 150px; }
  .qr { width: 120px; height: 120px; }
  .monitor { right: 16px; width: 186px; }
  .printer { margin-left: -80px; width: 200px; }
  .privacy { padding: 80px 0; }
  .privacy-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tile { height: 84px; font-size: 13.5px; padding: 12px; }
  .faq { padding: 80px 0 70px; }
  .faq summary { font-size: 19px; }
  .cta { padding: 64px 0; }
  .cta-inner { flex-direction: column; gap: 18px; text-align: center; }
  .cta-art { width: 260px; height: 236px; }
  .cta-art::before { width: 230px; height: 230px; margin: -115px 0 0 -115px; }
  .cta-ring { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
  .cta-hippo { width: 226px; }
  .cta .cta-h { font-size: 44px; }
  .cta .actions { justify-content: center; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .head h1 { font-size: 46px; letter-spacing: -1.2px; }
  .plans { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 56px; }
  .plan.pro { transform: none; }
  .plan-for { min-height: 0; }
  .pro-wrap { order: -1; }
  .compare { padding-top: 60px; padding-bottom: 20px; }
  .biz { margin-top: 60px; padding: 70px 0; }
  .biz-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .flow { height: 330px; }
  .src { left: 14px; font-size: 14px; }
  .s-wa { top: 36px; } .s-mail { top: 136px; } .s-web { top: 236px; }
  .hub { right: 18px; width: 110px; height: 110px; margin-top: -55px; }
  .hub img { width: 106px; height: 106px; }
  .biz-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 36px; }
}
@media (max-width: 520px) {
  /* The hero art is 610px across once the hippo and the Drive card that
     stick out of the stage are counted; shrink it to fit a phone. */
  .stage { transform: scale(.57); margin-bottom: -280px; }
  .nav .btn-sm span { display: none; }
  .nav .btn-sm { padding: 0 12px; }
  .nav-login { display: none; }
  .nav-links { left: 20px; width: auto; }
  .nav-links .menu-only { display: block; font-weight: 600; color: #23252b; }
  .nav-right { gap: 10px; }
  .hero h1 { font-size: 44px; }
  .head h1 { font-size: 40px; }
  .amt { font-size: 52px; }
  .proof { font-size: 15.5px; }
  .btn { font-size: 17.5px; }
  .tick-set { font-size: 21px; gap: 26px; padding-right: 26px; }
}
@media (max-width: 380px) {
  .stage { transform: scale(.52); margin-bottom: -312px; }
}