* { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; font-family: 'Poppins', sans-serif; background: #f3f1ee; color: #1a1a1a; -webkit-font-smoothing: antialiased; }
  a { color: #1a1a1a; text-decoration: none; }
  ::selection { background: #d10a6f; color: #fff; }
  @keyframes lgsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes lgsHeadTilt { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
  @keyframes lgsBodyPulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
  @keyframes bookIn { 0% { opacity: 0; transform: translateY(60px) scale(0.8) rotate(-3deg); } 60% { transform: translateY(-8px) scale(1.02) rotate(0.5deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } }
  @keyframes wdBuild { 0% { opacity:0; transform:translateY(10px) scale(0.9); } 12% { opacity:1; transform:none; } 80% { opacity:1; } 92%,100% { opacity:0; } }
  @keyframes wdGrow { 0%,6% { transform:scaleX(0); } 34%,92% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
  @keyframes wdBlink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
  @keyframes wdKnob { 0%,42%,100% { transform:translateX(0); } 56%,92% { transform:translateX(18px); } }
  @keyframes wdFillIn { 0%,42%,100% { opacity:0; } 56%,92% { opacity:1; } }
  @keyframes wdResize { 0%,16% { width:100%; } 46%,62% { width:44%; } 90%,100% { width:100%; } }
  @keyframes wdHue { 0%,100% { background:#d10a6f; } 25% { background:#d10a6f; } 50% { background:#17b89a; } 75% { background:#f5b400; } }
  @keyframes wdRing { 0%,18% { transform:translateX(0); } 27%,43% { transform:translateX(30px); } 52%,68% { transform:translateX(60px); } 77%,93% { transform:translateX(90px); } 100% { transform:translateX(0); } }
  @keyframes wdBounce { 0%,70%,100% { transform:translateY(0); opacity:0.45; } 35% { transform:translateY(-6px); opacity:1; } }
  @keyframes wdPop { 0%,52% { opacity:0; transform:scale(0.3); } 66% { opacity:1; transform:scale(1.18); } 78%,100% { opacity:1; transform:scale(1); } }
  @keyframes wdSlide { 0%,8% { left:2px; opacity:0; } 14% { opacity:1; } 20% { transform:translateY(-3px) scale(1.06); } 56% { left:calc(100% - 60px); transform:translateY(-3px) scale(1.06); } 64%,86% { left:calc(100% - 60px); transform:none; opacity:1; } 93%,100% { left:calc(100% - 60px); opacity:0; } }
  @keyframes wdSpin { to { transform:rotate(360deg); } }
  @keyframes wdBlob { 0%,100% { border-radius:42% 58% 60% 40% / 45% 45% 55% 55%; } 33% { border-radius:62% 38% 42% 58% / 58% 62% 38% 42%; } 66% { border-radius:44% 56% 58% 42% / 62% 40% 60% 38%; } }
  @keyframes wdFloat { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-8px) rotate(2deg); } }
  @keyframes wdVanish { 0%,40% { opacity:1; filter:blur(0); transform:translateY(0); } 58% { opacity:0.18; filter:blur(2px); transform:translateY(-5px); } 74%,100% { opacity:1; filter:blur(0); transform:translateY(0); } }
  @keyframes wdTickPop { 0%,56% { opacity:0; transform:scale(0.2) rotate(-20deg); } 70% { opacity:1; transform:scale(1.25) rotate(6deg); } 82%,100% { opacity:1; transform:scale(1) rotate(0); } }
  @keyframes wdWobble { 0%,100% { transform:rotate(-4deg); } 50% { transform:rotate(4deg); } }
  @keyframes wdSpark { 0%,100% { opacity:0; transform:scale(0.4) rotate(0); } 50% { opacity:1; transform:scale(1) rotate(90deg); } }
  @keyframes wdDrop { 0%,10% { opacity:0; transform:translateY(-14px) scale(0.8); } 22%,80% { opacity:1; transform:translateY(0) scale(1); } 92%,100% { opacity:0; transform:translateY(0) scale(1); } }
  @keyframes wdMorph { 0%,22% { width:104px; } 38%,58% { width:66px; } 74%,96% { width:34px; } 100% { width:104px; } }
  @keyframes wdStack { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
  @keyframes wdData { 0% { transform:translateX(-14px); opacity:0; } 20%,80% { opacity:1; } 50% { transform:translateX(14px); } 100% { transform:translateX(42px); opacity:0; } }
  @keyframes wdBrush { 0%,100% { transform:translate(-16px,6px) rotate(-30deg); } 50% { transform:translate(16px,-6px) rotate(-30deg); } }
  @keyframes wdPaint { 0% { clip-path:inset(0 100% 0 0); } 45%,100% { clip-path:inset(0 0 0 0); } }
  @keyframes wdCopyFly { 0%,12% { transform:translate(0,0) scale(1); opacity:0; } 22% { opacity:1; } 30% { transform:translate(0,-11px) scale(0.94); opacity:1; } 62% { transform:translate(124px,-11px) scale(0.94); opacity:1; } 72%,100% { transform:translate(124px,0) scale(1); opacity:0; } }
  @keyframes wdPasteFill { 0%,64% { opacity:0; } 74%,100% { opacity:1; } }
  @keyframes wdGrow2 { 0%,8% { transform:scaleY(0.25); } 40%,92% { transform:scaleY(1); } 100% { transform:scaleY(0.25); } }
  @keyframes wdHueSoft { 0%,100% { background:#ffd84d; } 33% { background:#ff7ab8; } 66% { background:#fff; } }
  @keyframes brDial { 0%,100% { width:24%; } 33% { width:62%; } 66% { width:88%; } }
  @keyframes brKnob { 0%,100% { left:24%; } 33% { left:62%; } 66% { left:88%; } }
  @keyframes brHue { 0%,33% { background:#5c34c3; } 34%,66% { background:#3b4ddb; } 67%,100% { background:#17b89a; } }
  @keyframes brCode { 0%,32% { opacity:1; } 33%,100% { opacity:0; } }
  @keyframes gaSug { 0%,14% { opacity:0; transform:translateY(5px); } 30%,88% { opacity:1; transform:none; } 100% { opacity:0; } }
  @keyframes gaOn { 0%,34% { opacity:0; } 50%,90% { opacity:1; } 100% { opacity:0; } }
  @keyframes gaKnob { 0%,34%,100% { transform:translateX(0); } 50%,90% { transform:translateX(18px); } }
  @keyframes gaCoin { 0%,8% { opacity:0; transform:translateY(-16px) scale(0.6); } 26%,86% { opacity:1; transform:none; } 100% { opacity:0; } }
  @keyframes gaBanner { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
  @keyframes gaPulse { 0% { transform:scale(0.55); opacity:0.85; } 100% { transform:scale(1.5); opacity:0; } }
  @keyframes brTick { 0%,12% { opacity:0; transform:scale(0.3); } 24% { opacity:1; transform:scale(1.3); } 32%,88% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(0.3); } }
  @keyframes brBar { 0%,8% { transform:scaleX(0); } 62%,88% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
  @keyframes brDraw { 0%,6% { stroke-dashoffset:210; } 46%,86% { stroke-dashoffset:0; } 100% { stroke-dashoffset:210; } }
  @keyframes brFill { 0%,52% { opacity:0; } 68%,90% { opacity:1; } 100% { opacity:0; } }
  @keyframes brCycle { 0%,22% { transform:translateY(0) scale(1.06); box-shadow:0 6px 14px -6px rgba(19,19,18,.4); } 34%,100% { transform:translateY(0) scale(1); box-shadow:none; } }
  @media (max-width: 1100px) { #ga-types { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } }
  @media (max-width: 700px) { #ga-types { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 14px !important; } }
  @media (max-width: 430px) { #ga-types { grid-template-columns: 1fr !important; } }
  .ga-type:hover { transform: translateY(-6px) !important; box-shadow: 0 26px 48px rgba(26,26,26,0.14) !important; }
  .sm-faq summary::-webkit-details-marker { display: none; }
  .sm-faq[open] .sm-faq-plus { transform: rotate(45deg); }
  @keyframes heroWin { 0% { opacity:0; transform:translateY(50px) scale(0.96); } 100% { opacity:1; transform:translateY(0) scale(1); } }
  @keyframes heroType { 0% { width:0; } 100% { width:var(--tw,60%); } }
  @keyframes heroBlock { 0% { opacity:0; transform:translateY(16px); } 100% { opacity:1; transform:translateY(0); } }
  @keyframes heroCaret { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
  @keyframes heroCursorMove { 0% { transform:translate(180px,120px); opacity:0; } 12% { opacity:1; } 40% { transform:translate(78px,26px); } 66% { transform:translate(150px,150px); } 100% { transform:translate(112px,206px); opacity:1; } }
  .hero-b { opacity:0; animation:heroBlock 0.55s cubic-bezier(0.16,1,0.3,1) forwards; }
  .wd-bcard:hover .wd-bframe { transform: translateY(-8px); box-shadow: 0 34px 60px rgba(26,26,26,0.18); }
  .wd-bcard:hover .wd-bshot { transform: translateY(calc(-100% + 300px)); }
  .wd-bcard:hover .wd-barrow { transform: rotate(45deg); }
  @media (max-width: 860px) {
    [data-hero] { height: 165vh !important; margin-bottom: 0 !important; }
    [data-hero-pin] { height: 88vh !important; }
    #about { padding-top: 4px !important; }
  }
  @media (max-width: 860px) { .sm-step { grid-template-columns: 64px 1fr !important; gap: 10px 16px !important; } .sm-step p { grid-column: 2 !important; } }
  .lgs-o { display: inline-block; width: 0.72em; height: 0.80em; vertical-align: baseline; margin: 0 -0.04em; overflow: visible; }
  .lgs-o svg { width: 100%; height: 100%; overflow: visible; }
  .lgs-head { transform-box: fill-box; transform-origin: 50% 100%; animation: lgsHeadTilt 2.8s ease-in-out infinite; }
  .lgs-body { transform-box: fill-box; transform-origin: 50% 50%; animation: lgsBodyPulse 2.8s ease-in-out infinite; }
  #pr-menu-btn { display: none; }
  @media (max-width: 1030px) {
    #pr-nav-links { display: none !important; }
    #pr-nav-cta { display: none !important; }
    #pr-menu-btn { display: flex !important; }
    #pr-nav { padding: 16px 20px !important; }
  }
  @media (max-width: 900px) { #pr-footer { grid-template-columns: 1fr 1fr !important; gap: 32px 40px !important; } .wd-hero-grid { grid-template-columns: 1fr !important; } }
  @media (max-width: 560px) {
    #pr-footer { grid-template-columns: 1fr !important; gap: 30px !important; }
  }
  @media (max-width: 860px) { .techy-mobile { display: block !important; } }
  @media (max-height: 620px) and (min-width: 861px) {
    [data-hero-copy] h1 { font-size: clamp(26px,3.2vw,40px) !important; }
    [data-hero-copy] p { margin-top: 12px !important; font-size: 14px !important; }
    [data-hero-copy] { padding: 20px !important; }
    [data-hero-copy] > div:last-child { margin-top: 16px !important; }
    [data-hero-copy] button { padding: 11px 20px !important; font-size: 13px !important; }
  }
  @media (max-width: 860px) {
    #pr-cm-form [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 10px !important; }
    #pr-cm-form input, #pr-cm-form textarea { font-size: 16px !important; width: 100% !important; padding: 10px 13px !important; }
    #pr-cm-form .pr-cm-step { gap: 10px !important; }
    #pr-cm-form label { gap: 4px !important; }
    #pr-cm-form label:has(input[name="phone"]) { display: none !important; }
    #pr-tile-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
    #pr-tile-grid .pr-tile > div:last-child { font-size: 9px !important; left: 4px !important; right: 4px !important; bottom: 4px !important; }
    #pr-tile-grid .pr-tile-check { width: 16px !important; height: 16px !important; top: 4px !important; right: 4px !important; }
    #pr-cm-card { max-height: 94vh !important; }
  }

/* keep the sliding copy inside its own box: without this its content
   overflows once the box shrinks to card size and reappears over the card */
[data-hero-copy] { overflow: hidden; }


@media (min-width: 861px) and (max-width: 1400px) {
  /* The hero section is a fixed multiple of viewport height, so on a
     tall tablet the card finishes long before the section does and
     leaves a large gap before the next block. */
  /* min-height only. NEVER set height here: the GSAP timeline runs
     start:'top top' to end:'bottom bottom' on this section, so its
     height is the scroll runway — shortening it compresses the whole
     hero animation. */
  [data-hero] { min-height: 86svh !important; }
}


/* hover states, from style-hover attributes */
.h-1:hover{color:#d10a6f}
.h-2:hover{color:#5c34c3}
.h-3:hover{background:#f3f1ee}
.h-4:hover{transform:translateY(-2px)}
.h-5:hover{background:#fff;color:#4a28a3}
.h-6:hover{background:#1a1a1a;color:#fff}
.h-7:hover{transform:rotate(0deg) translateY(-6px)}
.h-8:hover{background:rgba(92,52,195,0.05)}
.h-9:hover{background:#111;color:#fff}
.h-10:hover{background:#fff;color:#d10a6f}
.h-11:hover{background:#fff;color:#d10a6f;transform:translateY(-2px)}
.h-12:hover{background:rgba(255,255,255,0.35);transform:rotate(90deg)}
.h-13:hover{background:#e3ded7}
.h-14:hover{transform:translateY(-2px);background:#b00860}