* { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: 'IBM Plex Sans', sans-serif; background: #0a0a0a; scroll-behavior: smooth; }
        .f-display { font-family: 'Rajdhani', sans-serif; letter-spacing: 0.01em; }
        .f-mono { font-family: 'Fira Code', 'IBM Plex Mono', monospace; }

        /* Brand-consistent selection + scrollbar — small chrome-level details a
           template rarely bothers with. */
        ::selection { background: #ffff00; color: #0a0a0a; }
        html { scrollbar-width: thin; scrollbar-color: #ffff00 #111; }
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-track { background: #111; }
        ::-webkit-scrollbar-thumb { background: #ffff00; border: 2px solid #111; }
        ::-webkit-scrollbar-thumb:hover { background: #e6e600; }

        /* Back to top button — squircle, not a perfect circle. Radius
           softens further on hover/press, like the corner is melting. */
        #back-to-top {
            position: fixed; bottom: calc(2rem + 66px); right: 2rem; z-index: 101;
            width: 50px; height: 50px; border-radius: 16px;
            background: #ffff00; color: #000;
            border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 20px rgba(255,255,0,0.3);
            opacity: 0; pointer-events: none;
            transform: translateY(12px);
            transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease;
        }
        #back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
        #back-to-top:hover { background: #e6e600; box-shadow: 0 0 30px rgba(255,255,0,0.5); transform: translateY(-3px); border-radius: 22px; }
        #back-to-top:active { transform: translateY(-1px) scale(0.94); border-radius: 12px; }

        /* Floating action buttons — same squircle language as back-to-top */
        .fab-btn {
            position: fixed; right: 2rem; z-index: 100;
            width: 50px; height: 50px; border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            text-decoration: none; border: none; cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease;
        }
        #fab-wa { bottom: 2rem; background: #25D366; box-shadow: 0 0 20px rgba(37,211,102,0.3); }
        .fab-btn:hover { transform: translateY(-3px); border-radius: 22px; }
        .fab-btn:active { transform: translateY(-1px) scale(0.94); border-radius: 12px; }
        #fab-wa:hover { box-shadow: 0 0 32px rgba(37,211,102,0.55); }

        /* FAB tooltips */
        .fab-tooltip {
            position: absolute; right: calc(100% + 12px); top: 50%;
            transform: translateY(-50%) translateX(8px);
            white-space: nowrap; background: rgba(12,12,12,0.93);
            border: 1px solid rgba(255,255,255,0.1); color: #fff;
            font-size: 11px; font-weight: 600; padding: 5px 11px;
            border-radius: 8px; opacity: 0; pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
            font-family: 'Fira Code', 'IBM Plex Mono', monospace; letter-spacing: 0.02em;
        }
        .fab-btn:hover .fab-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); }

        /* Yellow accent */
        .y { color: #ffff00; }
        .bg-y { background: #ffff00; }

        /* Grain texture overlay */
        body::before {
            content: '';
            position: fixed; inset: 0; z-index: 0; pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
            opacity: 0.4;
        }

        /* Restrained accent glow — used sparingly, not on every element */
        .glow-y-sm { box-shadow: 0 0 0 1px rgba(255,255,0,0.25); }

        /* Blueprint corner ticks — replaces gradient borders / soft shadows. Parent must already set position. */
        .bp-frame { border: 1px solid rgba(255,255,255,0.08); }
        .bp-frame::before, .bp-frame::after,
        .bp-frame > .bp-tick-tl, .bp-frame > .bp-tick-br { content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none; }
        .bp-frame::before { top: -1px; left: -1px; border-top: 2px solid #ffff00; border-left: 2px solid #ffff00; }
        .bp-frame::after { bottom: -1px; right: -1px; border-bottom: 2px solid #ffff00; border-right: 2px solid #ffff00; }

        /* Status dot — plain, no pulse ring */
        .status-dot { position: relative; }

        /* Float animation */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
        }
        .float { animation: float 4s ease-in-out infinite; }

        /* Slide up */
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .slide-up { animation: slideUp 0.7s ease forwards; }
        .slide-up-2 { animation: slideUp 0.7s 0.15s ease both; }
        .slide-up-3 { animation: slideUp 0.7s 0.3s ease both; }

        /* Blinking cursor */
        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
        .blink { animation: blink 1s step-end infinite; }

        /* Table row hover */
        tr:hover td { background: rgba(255,255,0,0.03); }

        /* Scroll indicator */
        @keyframes scrollDown {
            0% { transform: translateY(0); opacity: 1; }
            100% { transform: translateY(8px); opacity: 0; }
        }
        .scroll-dot { animation: scrollDown 1.5s ease-in-out infinite; }

        /* Step marker hover */
        .step-row { transition: border-color 0.3s ease; }
        .step-row:hover { border-color: rgba(255,255,0,0.35) !important; }
        .step-row:hover .step-num { color: #ffff00; -webkit-text-stroke: 0; }

        /* Portfolio card */
        .portfolio-card {
            transition: transform 0.3s ease, border-color 0.3s ease;
            text-decoration: none;
        }
        .portfolio-card:hover { transform: translateY(-6px); }

        /* CTA button — the one deliberate rounded shape in an otherwise
           square system (see DESIGN.md §5 Buttons). Radius grows slightly
           on hover, a corner-tick bracket (bp-frame echo) floats just
           outside the top-right corner, and a thin "build progress" bar
           sweeps the bottom edge on hover — a nod to the browser-loading-bar
           imagery already used in the portfolio mockups, not a generic
           shine-sweep. :active gives real tap feedback since hover never
           fires on touch. */
        .cta-btn {
            position: relative;
            border-radius: 10px;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease;
        }
        .cta-btn::before {
            content: '';
            position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
            border-radius: 0 0 10px 10px;
            background: rgba(0,0,0,0.28);
            transform: scaleX(0); transform-origin: left;
            transition: transform 0.45s cubic-bezier(.16,1,.3,1);
        }
        .cta-btn:not(.bg-y)::before { background: rgba(255,255,0,0.7); }
        .cta-btn:hover::before { transform: scaleX(1); }
        .cta-btn::after {
            content: '';
            position: absolute; top: -6px; right: -6px;
            width: 14px; height: 14px;
            border-top: 2px solid currentColor;
            border-right: 2px solid currentColor;
            opacity: 0.45;
            transform: scale(0.6);
            transform-origin: top right;
            transition: transform 0.25s ease, opacity 0.25s ease;
        }
        .cta-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(255,255,0,0.15);
            border-radius: 14px;
        }
        .cta-btn:hover::after { transform: scale(1); opacity: 0.85; }
        .cta-btn:active { transform: translateY(0) scale(0.97); border-radius: 8px; }
        .cta-btn-sm { border-radius: 8px; }
        .cta-btn-sm::before { border-radius: 0 0 8px 8px; }
        .cta-btn-sm::after { width: 10px; height: 10px; top: -4px; right: -4px; }
        .cta-btn-sm:hover { border-radius: 11px; }

        /* Input focus */
        .form-input {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.1);
            transition: border-color 0.2s, background 0.2s;
        }
        .form-input:focus {
            outline: none;
            border-color: #ffff00;
            background: rgba(255,255,0,0.04);
        }

        /* ── SweetAlert2 dark theme override ── */
        .swal2-popup {
            background: #111 !important;
            border: 1px solid rgba(255,255,255,0.08) !important;
            border-radius: 2px !important;
            font-family: 'IBM Plex Sans', sans-serif !important;
            color: #fff !important;
        }
        .swal2-title { color: #fff !important; font-weight: 700 !important; letter-spacing: 0.01em !important; font-family: 'Rajdhani', sans-serif !important; }
        .swal2-html-container { color: #a1a1aa !important; }
        .swal2-confirm {
            background: #ffff00 !important;
            color: #000 !important;
            font-weight: 700 !important;
            font-family: 'Fira Code', 'IBM Plex Mono', monospace !important;
            border-radius: 10px !important;
            padding: 12px 28px !important;
            font-size: 0.85rem !important;
            text-transform: uppercase !important;
            letter-spacing: 0.04em !important;
            box-shadow: none !important;
            transition: background 0.2s ease, transform 0.15s ease !important;
        }
        .swal2-confirm:hover { background: #e6e600 !important; }
        .swal2-confirm:active { transform: scale(0.97) !important; }
        .swal2-deny, .swal2-cancel {
            background: rgba(255,255,255,0.06) !important;
            color: #aaa !important;
            border-radius: 10px !important;
            font-family: 'Fira Code', 'IBM Plex Mono', monospace !important;
            transition: transform 0.15s ease !important;
        }
        .swal2-deny:active, .swal2-cancel:active { transform: scale(0.97) !important; }
        .swal2-loader { border-color: #ffff00 transparent #ffff00 transparent !important; }
        .swal2-icon.swal2-success { border-color: #22c55e !important; }
        .swal2-icon.swal2-success [class^=swal2-success-line] { background: #22c55e !important; }
        .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(34,197,94,0.3) !important; }
        .swal2-icon.swal2-error { border-color: #ef4444 !important; }
        .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background: #ef4444 !important; }

        /* Fluid hero heading — scales down for longer PT text */
        .hero-h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
        html.lang-pt .hero-h1 { font-size: clamp(1.75rem, 5vw, 3.25rem); }

        /* Hero headline — each line reveals on its own beat instead of the whole
           block moving as one unit. */
        .hero-h1 .hero-line {
            display: inline-block; opacity: 0; transform: translateY(60%);
            animation: heroLineIn 0.65s cubic-bezier(.16,1,.3,1) forwards;
        }
        .hero-h1 .hero-line:nth-of-type(1) { animation-delay: 0.05s; }
        .hero-h1 .hero-line:nth-of-type(2) { animation-delay: 0.18s; }
        .hero-h1 .hero-line:nth-of-type(3) { animation-delay: 0.31s; }
        @keyframes heroLineIn { to { opacity: 1; transform: translateY(0); } }
        @media (prefers-reduced-motion: reduce) {
            .hero-h1 .hero-line { opacity: 1; transform: none; animation: none; }
        }

        /* Logo mark — the cursor tail "clicks" on hover/tap, idles with a slow
           heartbeat, wiggles on hover, and the pixel trail twinkles continuously. */
        .logo-mark-link { -webkit-tap-highlight-color: transparent; }
        .logo-mark { overflow: visible; transform-origin: 50% 50%; }
        .logo-mark-cursor { transform-box: fill-box; transform-origin: 0% 0%; }
        .logo-mark-ping { transform-box: fill-box; transform-origin: 50% 50%; }

        @keyframes logoIdleClick {
            0%, 88%, 100% { transform: scale(1) translate(0, 0); }
            91% { transform: scale(0.8) translate(2px, 2px); }
            94% { transform: scale(1) translate(0, 0); }
        }
        @keyframes logoIdlePing {
            0%, 87% { opacity: 0; transform: scale(0.85); }
            91% { opacity: 0.5; transform: scale(0.85); }
            100% { opacity: 0; transform: scale(1.35); }
        }
        @keyframes logoClickPress {
            0% { transform: scale(1) translate(0, 0); }
            40% { transform: scale(0.7) translate(2.4px, 2.4px); }
            100% { transform: scale(1) translate(0, 0); }
        }
        @keyframes logoClickPing {
            0% { opacity: 0.9; transform: scale(0.75); }
            60% { opacity: 0.35; }
            100% { opacity: 0; transform: scale(1.6); }
        }
        @keyframes logoWiggle {
            0% { transform: rotate(0deg); }
            30% { transform: rotate(-6deg); }
            60% { transform: rotate(4deg); }
            100% { transform: rotate(0deg); }
        }
        @keyframes dotTwinkle {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.2; }
        }

        .logo-mark.is-idle .logo-mark-cursor { animation: logoIdleClick 5.5s ease-in-out infinite; }
        .logo-mark.is-idle .logo-mark-ping { animation: logoIdlePing 5.5s ease-in-out infinite; }
        .logo-mark.is-active .logo-mark-cursor { animation: logoClickPress 0.4s cubic-bezier(.16,1,.3,1) 1; }
        .logo-mark.is-active .logo-mark-ping { animation: logoClickPing 0.6s ease-out 1; }
        .logo-mark-link:hover .logo-mark { animation: logoWiggle 0.5s ease; }

        .logo-mark-dots rect { animation: dotTwinkle 3.2s ease-in-out infinite; }
        .logo-mark-dots rect:nth-child(2) { animation-delay: 0.4s; }
        .logo-mark-dots rect:nth-child(3) { animation-delay: 0.8s; }

        @media (prefers-reduced-motion: reduce) {
            .logo-mark-cursor, .logo-mark-ping, .logo-mark, .logo-mark-dots rect { animation: none !important; }
        }

        /* Lang toggle — hover/active handled by Tailwind utility classes on the element */
        #lang-toggle { cursor: pointer; }

        /* Custom cursor — a corner-tick reticle (matches bp-frame) trailing the real
           OS cursor, never replacing it. Fine-pointer devices only; skipped entirely
           under reduced-motion (native cursor is the reduced-motion fallback). */
        #cursor-fx { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 110; }
        html.has-cursor-fx #cursor-fx { display: block; }
        html.has-cursor-fx, html.has-cursor-fx * { cursor: none !important; }
        #cursor-fx .cf-dot, #cursor-fx .cf-ring, #cursor-fx .cf-ping {
            position: absolute; top: 0; left: 0; transform: translate(-50%, -50%);
        }
        #cursor-fx .cf-dot {
            width: 5px; height: 5px; border-radius: 50%; background: #ffff00;
            transition: opacity 0.15s ease;
        }
        #cursor-fx .cf-ring {
            width: 30px; height: 30px;
            transition: width 0.2s cubic-bezier(.16,1,.3,1), height 0.2s cubic-bezier(.16,1,.3,1);
        }
        #cursor-fx .cf-ring::before, #cursor-fx .cf-ring::after { content: ''; position: absolute; width: 8px; height: 8px; }
        #cursor-fx .cf-ring::before { top: 0; left: 0; border-top: 1.5px solid rgba(255,255,0,0.75); border-left: 1.5px solid rgba(255,255,0,0.75); }
        #cursor-fx .cf-ring::after { bottom: 0; right: 0; border-bottom: 1.5px solid rgba(255,255,0,0.75); border-right: 1.5px solid rgba(255,255,0,0.75); }
        #cursor-fx.is-target .cf-ring { width: 46px; height: 46px; }
        #cursor-fx.is-target .cf-dot { opacity: 0; }
        #cursor-fx .cf-ping { width: 30px; height: 30px; border: 1.5px solid #ffff00; opacity: 0; }
        @keyframes cursorFxPing {
            0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; }
            100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
        }
        #cursor-fx.is-clicking .cf-ping { animation: cursorFxPing 0.5s ease-out; }

        /* Touch tap-ripple — coarse-pointer counterpart to the desktop cursor reticle.
           Fires at the exact touch point on any tap, empty space or element alike. */
        .tap-ripple {
            position: fixed; top: 0; left: 0; width: 54px; height: 54px;
            margin: -27px 0 0 -27px; border-radius: 50%;
            border: 1.5px solid #ffff00; background: rgba(255,255,0,0.12);
            pointer-events: none; z-index: 120;
            transform: scale(0.3); opacity: 0.9;
            animation: tapRipple 0.55s cubic-bezier(.16,1,.3,1) forwards;
        }
        @keyframes tapRipple {
            0% { transform: scale(0.3); opacity: 0.85; }
            100% { transform: scale(1.4); opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .tap-ripple { display: none; }
        }

        /* Language loader overlay */
        #lang-loader {
            position: fixed; inset: 0; z-index: 9999;
            background: #0a0a0a;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
            opacity: 0; pointer-events: none;
            transition: opacity 0.2s ease;
        }
        #lang-loader.active { opacity: 1; pointer-events: all; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .lang-spinner {
            width: 40px; height: 40px;
            border: 2px solid rgba(255,255,0,0.15);
            border-top-color: #ffff00;
            animation: spin 0.7s linear infinite;
        }
        .lang-spinner-logo {
            opacity: 0.9;
        }

        /* ── Section-distinct backgrounds ──
           Each section gets one motif of its own, low-opacity, decorative-first-child
           (same convention as the hero grid / audit glow), so the page doesn't repeat
           one background treatment down the whole scroll. */

        /* Problem — audit scan line sweeping down, plus a faint diagonal hatch */
        .bg-scan {
            background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 14px);
        }
        .bg-scan .scan-line {
            position: absolute; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,0,0.35), transparent);
            animation: scanSweep 7s linear infinite;
        }
        @keyframes scanSweep {
            0% { top: -2%; opacity: 0; }
            8% { opacity: 1; }
            92% { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }

        /* Process — fine dot-grid (distinct from the hero's line-grid) */
        .bg-dots {
            background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
            background-size: 22px 22px;
        }

        /* Industries — ruler tick marks along both outer margins */
        .bg-ruler::before, .bg-ruler::after {
            content: ''; position: absolute; top: 0; bottom: 0; width: 17px;
            background-image: repeating-linear-gradient(to bottom, rgba(255,255,0,0.25) 0 1px, transparent 1px 16px);
            background-repeat: repeat-y;
        }
        .bg-ruler::before { left: 0; }
        .bg-ruler::after { right: 0; }

        /* Portfolio — coarser dot-grid, differentiated from Process by spacing/opacity */
        .bg-dots-lg {
            background-image: radial-gradient(rgba(255,255,0,0.07) 1.5px, transparent 1.5px);
            background-size: 34px 34px;
        }

        /* Audit CTA — sonar/radar rings pulsing outward, echoing "we scan your site" */
        .bg-radar { position: absolute; }
        .bg-radar span {
            position: absolute; border: 1px solid rgba(255,255,0,0.25); border-radius: 50%;
            width: 120px; height: 120px; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.6);
            opacity: 0; animation: radarPing 4.5s ease-out infinite;
        }
        .bg-radar span:nth-child(2) { animation-delay: 1.5s; }
        .bg-radar span:nth-child(3) { animation-delay: 3s; }
        @keyframes radarPing {
            0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
            15% { opacity: 0.5; }
            100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
        }

        /* Pricing — ledger rule lines, ties to the invoice/one-package framing */
        .bg-ledger {
            background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.045) 0 1px, transparent 1px 34px);
        }

        /* FAQ — the hero's line-grid, faded out toward the edges as a closing bookend */
        .bg-grid-fade {
            background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
        }

        @media (prefers-reduced-motion: reduce) {
            .bg-scan .scan-line, .bg-radar span { animation: none !important; opacity: 0 !important; }
        }

        /* Scroll reveal — visible by default always; JS (if it runs) adds .reveal-pre
           for a moment before intersection, then removes it. No JS / no observer
           support / reduced-motion = content simply stays visible, never gated. */
        .reveal { transition: opacity 0.6s cubic-bezier(.16,1,.3,1), transform 0.6s cubic-bezier(.16,1,.3,1); }
        .reveal.reveal-pre { opacity: 0; transform: translateY(16px); }
        @media (prefers-reduced-motion: reduce) {
            .reveal.reveal-pre { opacity: 1; transform: none; transition: none; }
        }

/* ── Marquee trust bar ── */
        @keyframes marquee {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }
        .marquee-track { animation: marquee 20s linear infinite; }
        .marquee-wrap:hover .marquee-track { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) {
            .marquee-track { animation: none; }
        }