/* TushGrid Technologies: shared styles for every page */
    :root {
      color-scheme: light;
      --bg: #FFFFFF;
      --bg-2: #F3F6FE;
      --surface: #FFFFFF;
      --surface-2: #F7F9FF;
      --line: #DFE6F3;
      --text: #0F1B3D;
      --muted: #4B5A75;
      --blue: #4D6BFF;
      --blue-deep: #2448D8;
      --amber: #F4A51C;
      --teal: #19B394;
      --skin-1: #8B5A3C;
      --skin-2: #6B4226;
    }
    html { scroll-behavior: smooth; overflow-x: clip; }
    body {
      font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
    }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: inherit; }
    h1, h2, h3, .display-font { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; letter-spacing: -0.03em; }
    .brand-name { font-family: 'Space Grotesk', 'Figtree', sans-serif; letter-spacing: -0.035em; }
    a { color: #2448D8; }
    a:hover { color: #16308F; }
    a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
    .text-muted-tg { color: var(--muted); }
    section { position: relative; scroll-margin-top: 72px; }

    /* ---------- Preloader ---------- */
    .preloader { position: fixed; inset: 0; background: var(--bg); z-index: 2000; display: flex; align-items: center; justify-content: center; transition: opacity .5s ease, visibility .5s ease; }
    body.loaded .preloader { opacity: 0; visibility: hidden; }
    .preloader .pre-mark { --mark-gap: var(--bg); }
    @keyframes preload { 0%,100% { transform: scale(1); } 50% { transform: scale(.55) rotate(45deg); } }

    /* ---------- Scroll progress ---------- */
    .progress-bar-top { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #2448D8, #7C3AED, #19B394, #F4A51C); z-index: 1100; }

    /* ---------- Navbar ---------- */
    .navbar { background: rgba(255,255,255,.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, padding .3s; padding-top: 18px; padding-bottom: 18px; }
    .navbar.scrolled { background: rgba(255,255,255,.94); box-shadow: 0 6px 24px rgba(15,27,61,.08); border-color: var(--line); padding-top: 10px; padding-bottom: 10px; }
    .navbar .nav-link:hover { color: var(--blue-deep); }
    .navbar .nav-link { color: var(--text); font-weight: 500; position: relative; }
    .navbar .nav-link::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; background: var(--blue-deep); transform: scaleX(0); transition: transform .25s; }
    .navbar .nav-link:hover::after { transform: scaleX(1); }
    .brand-name { font-weight: 700; font-size: 1.55rem; color: var(--text); }
    .brand-mark { flex: none; overflow: visible; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
    .navbar-brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); }
    footer { --mark-gap: #F3F6FE; }

    /* ---------- Buttons ---------- */
    .btn { border-radius: 12px; font-weight: 600; padding: .8rem 1.5rem; transition: transform .2s, box-shadow .2s, background .2s; }
    .btn:hover { transform: translateY(-2px); }
    .btn-tg { background: var(--blue-deep); color: #fff; border: none; box-shadow: 0 8px 24px rgba(36,72,216,.28); }
    .btn-tg:hover { background: var(--blue); color: #fff; box-shadow: 0 12px 30px rgba(77,107,255,.45); }
    .btn-amber { background: var(--amber); color: #1B2430; border: none; box-shadow: 0 8px 24px rgba(244,165,28,.25); }
    .btn-amber:hover { background: #FFC04D; color: #1B2430; }
    .btn-line { border: 1.5px solid var(--blue-deep); color: var(--blue-deep); background: #fff; }
    .btn-line:hover { border-color: var(--blue-deep); background: var(--blue-deep); color: #fff; }
    .btn-whatsapp { background: #1FA855; color: #fff; border: none; }
    .btn-whatsapp:hover { background: #22BF60; color: #fff; }

    /* ---------- Hero ---------- */
    .hero { min-height: 100vh; padding-top: 110px; padding-bottom: 60px; display: flex; align-items: center; overflow: hidden; background: radial-gradient(1100px 600px at 75% 30%, #E4EBFF 0%, #FFFFFF 62%); }
    #hero3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.78) 45%, rgba(255,255,255,.1) 100%); pointer-events: none; }
    .hero .container { position: relative; z-index: 2; }
    .hero h1 { font-weight: 800; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.035em; }
    .typed-wrap { color: var(--blue-deep); transition: color .3s; white-space: nowrap; }
    .caret { display: inline-block; width: 4px; height: .9em; background: var(--blue-deep); margin-left: 4px; vertical-align: -0.08em; animation: caret 1s steps(1) infinite; }
    @keyframes caret { 50% { opacity: 0; } }
    .hero .lead { color: var(--muted); font-size: 1.2rem; max-width: 33em; }
    .contact-chips a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
    .contact-chips a:hover { color: var(--blue-deep); }
    .wizard { width: 100%; max-width: 470px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 30px 50px rgba(36,72,216,.18)); }
    @media (max-width: 991.98px) {
      .hero::after { background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 60%, rgba(255,255,255,.92) 100%); }
      .wizard { max-width: 330px; }
    }

    /* ---------- Character animation kit ---------- */
    .anim { transform-box: view-box; }
    @media (prefers-reduced-motion: no-preference) {
      .breathe { animation: breathe 3.6s ease-in-out infinite; }
      .blink { animation: blink 4.5s ease-in-out infinite; }
      .nod { animation: nod 2.4s ease-in-out infinite; }
      .tilt { animation: tilt 4s ease-in-out infinite; }
      .sway { animation: sway 5s ease-in-out infinite; }
      .typeL { animation: typeL .34s ease-in-out infinite; }
      .typeR { animation: typeR .34s ease-in-out infinite .17s; }
      .cast { animation: cast 3.2s cubic-bezier(.45,.05,.3,1) infinite; }
      .wave { animation: wave 1.1s ease-in-out infinite; }
      .scribble { animation: scribble 1.6s ease-in-out infinite; }
      .hover { animation: hover 4s ease-in-out infinite; }
      .hover-2 { animation: hover 5s ease-in-out infinite .8s; }
      .hover-3 { animation: hover 4.4s ease-in-out infinite 1.6s; }
      .flame { animation: flame .18s ease-in-out infinite alternate; }
      .glow { animation: glow 1.6s ease-in-out infinite; }
      .glow-soft { animation: glowSoft 3s ease-in-out infinite; }
      .rise { animation: rise 2.6s ease-out infinite; opacity: 0; }
      .steam { animation: steam 2.4s ease-out infinite; opacity: 0; }
      .drawline { stroke-dasharray: 130; animation: drawLine 3.2s ease-in-out infinite; }
      .trace { stroke-dasharray: 8 10; animation: trace 1.6s linear infinite; }
      .twinkle { animation: twinkle 2.2s ease-in-out infinite; }
      .puff { animation: puff 1.6s ease-out infinite; }
      .spin-slow { animation: spin 14s linear infinite; }
    }
    @keyframes breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.012,1.03); } }
    @keyframes blink { 0%,93%,100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }
    @keyframes nod { 0%,100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
    @keyframes tilt { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
    @keyframes sway { 0%,100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.3deg); } }
    @keyframes typeL { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
    @keyframes typeR { 0%,100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
    @keyframes cast { 0%,100% { transform: rotate(8deg); } 35%,62% { transform: rotate(-24deg); } 70% { transform: rotate(-18deg); } }
    @keyframes wave { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(18deg); } }
    @keyframes scribble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-5deg); } }
    @keyframes hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    @keyframes flame { from { transform: scaleY(.85); } to { transform: scaleY(1.35); } }
    @keyframes glow { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } }
    @keyframes glowSoft { 0%,100% { opacity: .15; } 50% { opacity: .32; } }
    @keyframes rise { 0% { transform: translate(0,0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx, 0px), -110px) scale(1.1); opacity: 0; } }
    @keyframes steam { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-24px); opacity: 0; } }
    @keyframes drawLine { 0% { stroke-dashoffset: 130; } 60%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -130; } }
    @keyframes trace { to { stroke-dashoffset: -36; } }
    @keyframes twinkle { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
    @keyframes puff { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.6) translateY(6px); opacity: 0; } }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ---------- Marquee ---------- */
    .marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
    .marquee-track { display: flex; width: max-content; gap: 3rem; padding: 1.1rem 0; }
    @media (prefers-reduced-motion: no-preference) { .marquee-track { animation: marquee 32s linear infinite; } }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    .marquee-item { display: inline-flex; align-items: center; gap: .8rem; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 1.35rem; color: #16308F; white-space: nowrap; }
    .marquee-item:nth-child(5n+2) i { background: #7C3AED; } .marquee-item:nth-child(5n+3) i { background: #19B394; } .marquee-item:nth-child(5n+4) i { background: #F4A51C; } .marquee-item:nth-child(5n+5) i { background: #E5462F; }
    .marquee-item i { width: 10px; height: 10px; border-radius: 3px; background: var(--blue); display: inline-block; transform: rotate(45deg); }
    @keyframes marquee { to { transform: translateX(-50%); } }

    /* ---------- Section basics ---------- */
    .section-pad { padding: 110px 0; }
    .section-title { font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.02; }
    .grid-bg { background-image: linear-gradient(rgba(36,72,216,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(36,72,216,.05) 1px, transparent 1px); background-size: 40px 40px; }

    /* ---------- Service cards (3D tilt) ---------- */
    .tilt-wrap { perspective: 1000px; height: 100%; }
    .skill-card { background: var(--surface); box-shadow: 0 10px 30px rgba(15,27,61,.06); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; height: 100%; transform-style: preserve-3d; transition: transform .15s ease-out, border-color .3s, box-shadow .3s; will-change: transform; }
    .skill-card:hover { border-color: var(--accent); box-shadow: 0 24px 50px rgba(36,72,216,.16), 0 0 0 1px rgba(77,107,255,.25); }
    .skill-card svg { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
    .skill-card .hover, .skill-card .hover-2, .skill-card .hover-3 { animation-duration: 5s; }
    .skill-card .body { transform: translateZ(30px); }
    .skill-card h3 { font-size: 1.35rem; font-weight: 600; }
    .tint-blue { background: #E4EBFF; } .tint-violet { background: #EFE8FE; } .tint-teal { background: #DDF4EE; } .tint-coral { background: #FFE8E3; } .tint-amber { background: #FFF1D6; }
    .skill-card { --accent: #2448D8; }
    .skill-card::before { content: ""; display: block; height: 4px; background: var(--accent); }
    .skill-card:hover h3 { color: var(--accent); }
    .skill-card h3 { transition: color .2s; }

    /* ---------- Wizards (process) ---------- */
    .crew-card { background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: 0 10px 30px rgba(15,27,61,.06); border: 1px solid var(--line); border-radius: 24px; padding: 28px; height: 100%; }
    .crew-card svg { width: 100%; height: auto; display: block; }
    .step-tag { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.15rem; }

    /* ---------- Tush Inventory laptop ---------- */
    .tush-section { background: radial-gradient(900px 500px at 70% 50%, rgba(77,107,255,.16), transparent 70%), var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .laptop { perspective: 1800px; max-width: 640px; margin: 0 auto; padding: 0 5%; }
    .laptop-lid { background: #0A0F1A; border: 2px solid #3A4656; border-radius: 16px 16px 4px 4px; padding: 12px; transform-origin: 50% 100%; transform-style: preserve-3d; box-shadow: 0 30px 70px rgba(15,27,61,.25); }
    .laptop-lid img { border-radius: 6px; display: block; width: 100%; height: auto; }
    .laptop-base { height: 16px; background: linear-gradient(180deg, #A9B5C6, #6B7789); border-radius: 0 0 18px 18px; margin: 0 -5%; position: relative; }
    .laptop-base::before { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 6px; background: #5A6577; border-radius: 0 0 8px 8px; }
    .laptop-shadow { height: 30px; margin: 0 4%; background: radial-gradient(closest-side, rgba(15,27,61,.22), transparent); }
    .feature-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .feature-row:last-child { border-bottom: none; }
    .feature-row .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(36,72,216,.1); display: flex; align-items: center; justify-content: center; }

    /* ---------- Why ---------- */
    .why-card { background: var(--surface); box-shadow: 0 10px 30px rgba(15,27,61,.06); border: 1px solid var(--line); border-radius: 20px; padding: 28px; height: 100%; transition: transform .3s, border-color .3s; }
    .why-card:hover { transform: translateY(-6px); border-color: rgba(124,58,237,.4); }
    .why-ic { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }

    /* ---------- Contact ---------- */
    .cta { border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px rgba(36,72,216,.2); }
    .cta-main { background: linear-gradient(135deg, #1A36B8 0%, #2448D8 45%, #3B5BEF 100%); position: relative; overflow: hidden; }
    .cta-main::before, .cta-main::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
    .cta-main::before { width: 260px; height: 260px; right: -60px; top: -80px; background: rgba(124,58,237,.35); }
    .cta-main::after { width: 160px; height: 160px; left: 40%; bottom: -90px; background: rgba(25,179,148,.3); }
    .cta-side { background: #16308F; color: #fff; }
    .cta-side a { color: #fff; text-decoration: none; }
    .cta-side a:hover { color: var(--amber); }
    .check { display: inline-flex; align-items: center; gap: 8px; color: #E3E9FF; }

    /* ---------- Footer ---------- */
    footer { background: var(--bg-2); border-top: 1px solid var(--line); }
    footer h4 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.15rem; font-weight: 600; margin-bottom: 1rem; }
    footer ul a { color: var(--muted); text-decoration: none; display: inline-block; padding: 4px 0; }
    footer ul a:hover { color: var(--text); }

    /* ---------- Floating buttons ---------- */
    .wa-float { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(15,27,61,.25); z-index: 1030; }
    .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; }
    @media (prefers-reduced-motion: no-preference) { .wa-float::before { animation: ring 2s ease-out infinite; } }
    @keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
    .to-top { position: fixed; right: 27px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--blue-deep); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 1030; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
    .to-top.show { opacity: 1; visibility: visible; }



    /* ---------- About ---------- */
    .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    @media (max-width: 575.98px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
    .value-chip { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 18px rgba(15,27,61,.05); transition: transform .25s; }
    .value-chip:hover { transform: translateY(-4px); }
    .value-chip span { width: 12px; height: 12px; border-radius: 4px; transform: rotate(45deg); flex: none; }
    .vma-card { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: 22px; padding: 30px; height: 100%; box-shadow: 0 12px 34px rgba(15,27,61,.07); transition: transform .3s, box-shadow .3s; }
    .vma-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(15,27,61,.12); }
    .vma-card h3 { color: var(--accent); }
    .vma-ic { width: 84px; height: 84px; }
    .aim-list { padding-left: 1.1rem; } .aim-list li { margin-bottom: .4rem; } .aim-list li::marker { color: var(--accent); }
    @media (prefers-reduced-motion: no-preference) {
      .look { animation: look 4s ease-in-out infinite; }
      .dart { animation: dart 3s cubic-bezier(.5,0,.2,1) infinite; }
      .flag { animation: flagWave .9s ease-in-out infinite; }
      .scan { animation: scan 2.8s ease-in-out infinite; }
      .shackle { animation: shackle 4s ease-in-out infinite; }
    }
    @keyframes look { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-7px); } 60% { transform: translateX(7px); } }
    @keyframes dart { 0%,10% { transform: translate(30px,-30px); opacity: 0; } 40% { transform: translate(0,0); opacity: 1; } 45% { transform: translate(-2px,2px); } 90% { transform: translate(0,0); opacity: 1; } 100% { opacity: 0; } }
    @keyframes flagWave { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.75) skewY(4deg); } }
    @keyframes scan { 0% { transform: translateY(0); } 50% { transform: translateY(250px); } 100% { transform: translateY(0); } }
    @keyframes shackle { 0%,55%,100% { transform: translateY(0); } 65%,80% { transform: translateY(-10px); } }

    /* ---------- Security ---------- */
    .security-section { background: radial-gradient(800px 500px at 80% 40%, rgba(124,58,237,.35), transparent 70%), linear-gradient(135deg, #0F1B3D 0%, #16308F 100%); color: #fff; overflow: hidden; }
    .shield-art { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; overflow: visible; }
    .sec-item { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 16px; height: 100%; transition: background .25s, transform .25s; }
    .sec-item:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); }
    .sec-item strong { display: block; margin-bottom: 2px; }
    .sec-item span:not(.sec-ic) { color: #D6DEFA; font-size: .95rem; }
    .sec-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }

    /* ---------- Industries ---------- */
    .ind-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 14px; text-align: center; font-weight: 600; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: transform .25s, box-shadow .25s; }
    .ind-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 16px 34px rgba(15,27,61,.1); }
    .ind-card span { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }

    /* ---------- FAQ ---------- */
    .faq .accordion-item { border: 1px solid var(--line); border-radius: 16px !important; overflow: hidden; margin-bottom: 12px; background: var(--surface); }
    .faq .accordion-button { font-weight: 600; font-size: 1.05rem; color: var(--text); background: var(--surface); box-shadow: none; padding: 1.1rem 1.25rem; }
    .faq .accordion-button:not(.collapsed) { color: var(--blue-deep); background: #F3F6FE; }
    .faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(36,72,216,.25); }
    .faq .accordion-body { color: var(--muted); }

    .reg-badge { display: inline-flex; align-items: center; gap: 10px; background: #DDF4EE; color: #0F1B3D; border: 1px solid #B7E6DA; border-radius: 999px; padding: 8px 16px; font-size: .95rem; }


    /* ---------- Tush Rider ---------- */
    .rider-section { background: #FFFFFF; }
    .rider-stage { position: relative; max-width: 460px; margin: 0 auto; padding: 20px 40px; }
    .rider-blob { position: absolute; inset: 8% 4%; border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%; background: linear-gradient(135deg, #DDF4EE, #E4EBFF); }
    .rider-phone { position: relative; display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(11,31,58,.25)); }
    .rider-float { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: 8px; box-shadow: 0 12px 28px rgba(15,27,61,.12); white-space: nowrap; }
    .rider-float span { width: 10px; height: 10px; border-radius: 50%; }
    .rf-1 { left: 0; top: 22%; } .rf-2 { right: 0; bottom: 30%; }
    .rider-part { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; height: 100%; }
    .rider-part b { display: block; margin-bottom: 4px; color: #0E9457; }
    .rider-part span { color: var(--muted); font-size: .95rem; }
    .rider-list { list-style: none; padding: 0; }
    .rider-list li { position: relative; padding-left: 30px; margin-bottom: 10px; }
    .rider-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 6px; background: #18B26B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat; }
    @media (prefers-reduced-motion: no-preference) {
      .rf-1 { animation: hover 4s ease-in-out infinite; } .rf-2 { animation: hover 5s ease-in-out infinite .6s; }
      .route-draw { stroke-dasharray: 290 400; animation: routeDraw 7s linear infinite; }
      .eta-bar { transform-box: fill-box; transform-origin: left; animation: etaBar 7s linear infinite; }
    }
    @keyframes routeDraw { 0% { stroke-dashoffset: 0; } 80%,100% { stroke-dashoffset: -290; } }
    @keyframes etaBar { 0% { transform: scaleX(.05); } 80%,100% { transform: scaleX(1); } }
    @media (max-width: 575.98px) { .rider-stage { padding: 20px 10px; } .rf-1 { left: -4px; } .rf-2 { right: -4px; } }


    /* ---------- Project form ---------- */
    .project-form { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 4vw, 36px); box-shadow: 0 20px 50px rgba(15,27,61,.08); }
    .project-form .form-label { font-weight: 600; color: var(--text); }
    .project-form .opt { color: var(--muted); font-weight: 400; }
    .project-form .form-control { border-radius: 12px; border: 1.5px solid var(--line); padding: .75rem .9rem; color: var(--text); }
    .project-form .form-control:focus { border-color: var(--blue-deep); box-shadow: 0 0 0 3px rgba(36,72,216,.18); }
    .service-pills { display: flex; flex-wrap: wrap; gap: 8px; }
    .pill-opt { border: 1.5px solid var(--line); border-radius: 999px; padding: .5rem .95rem; font-weight: 500; cursor: pointer; user-select: none; transition: background .2s, border-color .2s, color .2s; background: #fff; }
    .pill-opt:hover { border-color: var(--blue-deep); }
    .btn-check:checked + .pill-opt { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
    .btn-check:focus-visible + .pill-opt { outline: 3px solid var(--amber); outline-offset: 2px; }
    .form-error { background: #FFE8E3; color: #9B2C1C; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-weight: 500; }
    .form-points { list-style: none; padding: 0; margin: 0; }
    .form-points li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-weight: 500; }
    .form-points span { width: 32px; height: 32px; border-radius: 10px; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }


/* code editor on the screen */
.editor { position: absolute; inset: 0; display: flex; flex-direction: column; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: clamp(7px, 1.35vw, 13px); line-height: 1.6; color: #C9D1D9; }
.editor .tabs { display: flex; align-items: center; gap: 6px; background: #161B22; padding: .5em .8em; border-bottom: 1px solid #21262D; flex: none; }
.editor .dot { width: .8em; height: .8em; border-radius: 50%; }
.editor .tab { margin-left: .8em; background: #0D1117; color: #E6EDF3; padding: .25em .9em; border-radius: 6px 6px 0 0; font-size: .9em; }
.editor .body { flex: 1; display: flex; padding: .8em 0; overflow: hidden; }
.editor .ln { color: #484F58; text-align: right; padding: 0 .9em 0 .6em; user-select: none; white-space: pre; }
.editor pre { margin: 0; flex: 1; white-space: pre; overflow: hidden; font: inherit; color: inherit; }
.editor .status { flex: none; background: #2448D8; color: #fff; font-size: .8em; padding: .2em .9em; display: flex; justify-content: space-between; }
.tk-k { color: #FF7B72; } .tk-f { color: #D2A8FF; } .tk-s { color: #A5D6FF; } .tk-c { color: #8B949E; font-style: italic; } .tk-n { color: #79C0FF; } .tk-t { color: #7EE787; } .tk-a { color: #FFA657; }
.editor .cur { display: inline-block; width: .55em; height: 1.15em; background: #E6EDF3; vertical-align: -0.2em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

    @media (max-width: 575.98px) { .lap3d { padding: 0 7%; } .lap3d .rig { --ry: 0deg; --rx: -22deg; margin-bottom: 38%; } .lap3d .keys { gap: 1.5px; padding: 2px; } .lap3d .spk { background-size: 3px 3px; } }
    /* ---------- Watch us build ---------- */
    .build-section { position: relative; overflow: hidden; background: #070C1D url("../images/photos/website-developer.webp") center right / cover no-repeat; color: #fff; }
    .build-section::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 40px 40px; }
    .build-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .build-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,12,29,.95) 0%, rgba(7,12,29,.8) 45%, rgba(7,12,29,.55) 100%); }
    .build-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 10px 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .bc-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
    .bc-row:last-child { border-bottom: none; }
    .bc-row strong { display: block; color: #fff; }
    .bc-row span:not(.bc-ic) { color: #D6DEFA; font-size: .95rem; }
    .bc-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
    .build-langs { display: flex; flex-direction: column; gap: 10px; }
    .build-langs span { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #D6DEFA; font-weight: 600; transition: background .3s, border-color .3s, color .3s, transform .3s; width: fit-content; }
    .build-langs span.on { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; transform: translateX(6px); }
    .build-langs i { width: 10px; height: 10px; border-radius: 50%; }
    .build-section .lap3d .shadow { background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }


    /* ---------- Photo slots ---------- */
    .photo-slot { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: #DCE4FB; box-shadow: 0 18px 40px rgba(15,27,61,.14); transform-style: preserve-3d; transition: transform .2s ease-out, box-shadow .3s; cursor: zoom-in; }
    .photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
    .photo-slot:hover img { transform: scale(1.05); }
    .photo-slot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; color: #fff; font-weight: 600; background: linear-gradient(transparent, rgba(7,12,29,.78)); transform: translateZ(30px); }
    .photo-empty { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px; color: #2448D8; background: repeating-linear-gradient(135deg, #E4EBFF 0 14px, #EDF1FF 14px 28px); border: 2px dashed #9DB0F5; border-radius: inherit; }
    .photo-empty code { color: #4B5A75; font-size: .8rem; background: #fff; padding: 3px 8px; border-radius: 6px; word-break: break-all; }
    .photo-slot.is-empty { cursor: default; box-shadow: none; }
    .photo-slot.is-empty .photo-empty { display: flex; }
    .photo-slot.is-empty figcaption { color: #0F1B3D; background: none; padding-bottom: 12px; }
    .about-photo { aspect-ratio: 16 / 10; margin-bottom: 16px; }
    .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 18px; perspective: 1200px; }
    .gallery-grid .g-big { grid-column: span 2; grid-row: span 2; }
    .gallery-grid .g-wide { grid-column: span 2; }
    @media (max-width: 991.98px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; } }
    @media (max-width: 575.98px) { .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; } .gallery-grid .g-big, .gallery-grid .g-wide { grid-column: auto; grid-row: auto; } }
    .photo-modal { background: #070C1D; border: none; border-radius: 18px; overflow: hidden; position: relative; }
    .photo-modal img { width: 100%; max-height: 80vh; object-fit: contain; display: block; }
    .photo-modal p { color: #D6DEFA; padding: 12px 18px; }
    .photo-modal .btn-close { position: absolute; top: 12px; right: 12px; z-index: 2; background-color: rgba(0,0,0,.5); border-radius: 50%; padding: 10px; opacity: 1; }


    .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
    .form-sent { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(28px, 5vw, 48px); text-align: center; box-shadow: 0 20px 50px rgba(15,27,61,.08); }
    .form-sent:focus { outline: none; }
    .sent-check { width: 96px; height: 96px; }
    .sent-check .ring { stroke-dasharray: 227; stroke-dashoffset: 227; transform: rotate(-90deg); transform-origin: 40px 40px; }
    .sent-check .tick { stroke-dasharray: 60; stroke-dashoffset: 60; }
    .form-sent:not([hidden]) .ring { animation: drawRing .7s ease-out forwards; }
    .form-sent:not([hidden]) .tick { animation: drawTick .45s ease-out .55s forwards; }
    @keyframes drawRing { to { stroke-dashoffset: 0; } }
    @keyframes drawTick { to { stroke-dashoffset: 0; } }

    /* ---------- Hero laptop ---------- */
    .hero-visual { position: relative; max-width: 600px; margin: 0 auto; }
    .hero-visual .lap3d { max-width: 620px; }
    .hero-badge { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px 10px 10px; box-shadow: 0 16px 34px rgba(15,27,61,.14); z-index: 3; }
    .hero-badge strong { display: block; font-size: .92rem; line-height: 1.2; }
    .hero-badge small { color: var(--muted); font-size: .78rem; }
    .hb-ic { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
    .hb-1 { left: -12%; top: -6%; } .hb-2 { right: -8%; top: 46%; } .hb-3 { left: -10%; top: 74%; }
    @media (prefers-reduced-motion: no-preference) {
      .hb-1 { animation: hover 4.5s ease-in-out infinite; } .hb-2 { animation: hover 5.5s ease-in-out infinite .7s; } .hb-3 { animation: hover 5s ease-in-out infinite 1.4s; }
    }
    @media (max-width: 575.98px) { .hero-badge { padding: 7px 10px 7px 7px; } .hero-badge small { display: none; } .hb-1 { left: 0; top: -6%; } .hb-2 { right: 0; top: 48%; } .hb-3 { left: 0; bottom: 0; } }


    /* ---------- Process laptops ---------- */
    .crew-card svg .p-seq, .crew-card svg .p-type, .crew-card svg .p-fill, .crew-card svg .p-pop { transform-box: fill-box; }
    .p-cursor { transform: translate(214px, 120px); }
    @media (prefers-reduced-motion: no-preference) {
      .p-seq { animation: pSeq 4.2s ease-out infinite both; }
      .p-type { transform-origin: left center; animation: pType 4.2s ease-out infinite both; }
      .p-fill { transform-origin: left center; animation: pFill 4.2s ease-in-out infinite both; }
      .p-pop { transform-origin: center; animation: pPop 4.2s ease-out infinite both; }
      .p-cursor { animation: pCursor 4.2s ease-in-out infinite; }
      .caret-blink { animation: caret 1s steps(1) infinite; }
    }
    @keyframes pSeq { 0%,4% { opacity: 0; transform: translateY(8px); } 14%,86% { opacity: 1; transform: none; } 100% { opacity: 0; } }
    @keyframes pType { 0% { transform: scaleX(0); } 12%,86% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
    @keyframes pFill { 0%,8% { transform: scaleX(0); } 55%,100% { transform: scaleX(1); } }
    @keyframes pPop { 0%,55% { transform: scale(0); opacity: 0; } 64% { transform: scale(1.15); opacity: 1; } 70%,92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
    @keyframes pCursor { 0% { transform: translate(214px, 120px); } 30% { transform: translate(120px, 70px); } 60% { transform: translate(200px, 74px); } 100% { transform: translate(214px, 120px); } }


    /* ---------- Photos placed through the page ---------- */
    .crew-photo { aspect-ratio: 16 / 10; border-radius: 16px; box-shadow: 0 10px 24px rgba(15,27,61,.12); }
    .why-photo { aspect-ratio: 3 / 4; position: sticky; top: 100px; }
    .why-photo img { object-position: 72% 30%; }
    .ind-photo { aspect-ratio: 4 / 3; }
    .form-photo { aspect-ratio: 16 / 9; margin-top: 28px; }
    @media (max-width: 991.98px) { .why-photo { position: relative; top: auto; aspect-ratio: 16 / 10; } .why-photo img { object-position: center 30%; } }
    .lap3d .screen .screen-alt { position: absolute; inset: 0; opacity: 0; }
    @media (prefers-reduced-motion: no-preference) {
      .lap3d.open .screen .screen-alt { animation: screenSwap 10s ease-in-out 2s infinite; }
    }
    @keyframes screenSwap { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }


    /* ---------- Monitor (real photo with live screen) ---------- */
    .monitor { position: relative; display: block; max-width: 640px; margin: 0 auto; }
    .monitor::after { content: ""; position: absolute; left: 10%; right: 22%; bottom: -1.5%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(15,27,61,.28), transparent); filter: blur(8px); z-index: 0; }
    .monitor .mon-img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
    .monitor .mon-screen { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; overflow: hidden; background: #0D1117; z-index: 2; opacity: 0; transition: opacity 1.1s ease; }
    .monitor.open .mon-screen { opacity: 1; }
    .monitor .mon-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 34%, transparent 34.3%); pointer-events: none; }
    .monitor .mon-screen .editor { font-size: 44px; }
    .monitor .mon-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
    .monitor .mon-screen > .screen-alt { opacity: 0; }
    @media (prefers-reduced-motion: no-preference) { .monitor.open .mon-screen > .screen-alt { animation: screenSwap 10s ease-in-out 2s infinite; } }
    .hero-visual .monitor { max-width: 660px; }



    /* ---------- Stats strip ---------- */
    .stats-strip { padding: 40px 0 10px; }
    .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px 20px; height: 100%; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 10px 30px rgba(15,27,61,.06); }
    .stat-num { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.2rem); line-height: 1; letter-spacing: -.04em; color: var(--blue-deep); }
    .stat-num.is-placeholder { font-size: 1.1rem; letter-spacing: .04em; color: var(--muted); border: 2px dashed #9DB0F5; border-radius: 10px; padding: 10px 12px; width: fit-content; }
    .stat-label { color: var(--muted); font-weight: 500; }
    .stats-strip .col:nth-child(2) .stat-num:not(.is-placeholder) { color: #7C3AED; }
    .stats-strip .col:nth-child(3) .stat-num:not(.is-placeholder) { color: #0B7A66; }
    .stats-strip .col:nth-child(4) .stat-num:not(.is-placeholder) { color: #C26A00; }
    /* ---------- Founder ---------- */
    .founder-section { background: var(--bg-2); border-top: 1px solid var(--line); }
    .founder-photo { aspect-ratio: 4 / 5; max-width: 440px; margin: 0 auto; border-radius: 28px; }
    .founder-role { font-weight: 600; color: var(--muted); font-size: 1.1rem; }
    .founder-bio.is-placeholder { border: 2px dashed #9DB0F5; border-radius: 14px; padding: 14px 16px; }
    .founder-quote { margin: 0; padding: 4px 0 4px 20px; border-left: 4px solid #F4A51C; font-size: 1.2rem; font-weight: 500; line-height: 1.5; color: var(--text); }
    .founder-chip { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: .4rem .9rem; font-weight: 500; font-size: .95rem; }
    @media (prefers-color-scheme: dark) {
      :where(:root:not([data-theme="light"])) .stat { box-shadow: 0 10px 30px rgba(0,0,0,.3); }
      :where(:root:not([data-theme="light"])) .stats-strip .col:nth-child(2) .stat-num:not(.is-placeholder) { color: #B79CFF; }
      :where(:root:not([data-theme="light"])) .stats-strip .col:nth-child(3) .stat-num:not(.is-placeholder) { color: #3FD0AE; }
      :where(:root:not([data-theme="light"])) .stats-strip .col:nth-child(4) .stat-num:not(.is-placeholder) { color: #FFC04D; }
    }
    /* Dark theme chosen with the switch */
      :where(:root[data-theme="dark"]) .stat { box-shadow: 0 10px 30px rgba(0,0,0,.3); }
      :where(:root[data-theme="dark"]) .stats-strip .col:nth-child(2) .stat-num:not(.is-placeholder) { color: #B79CFF; }
      :where(:root[data-theme="dark"]) .stats-strip .col:nth-child(3) .stat-num:not(.is-placeholder) { color: #3FD0AE; }
      :where(:root[data-theme="dark"]) .stats-strip .col:nth-child(4) .stat-num:not(.is-placeholder) { color: #FFC04D; }



    /* ---------- Logo lock-up ---------- */
    .brand-text { display: flex; flex-direction: column; line-height: 1; }
    .brand-text .brand-name { line-height: 1; }
    .brand-sub { font-family: 'Figtree', system-ui, sans-serif; font-size: .6rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: 4px; padding-left: 1px; }
    @media (max-width: 380px) { .brand-sub { letter-spacing: .2em; } }

    /* ---------- Menu dropdowns ---------- */
    .navbar .nav-link.dropdown-toggle::after { content: ""; position: static; display: inline-block; left: auto; right: auto; bottom: auto; background: transparent; width: 7px; height: 7px; border: 0; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-3px) rotate(45deg); margin-left: .5em; vertical-align: middle; transition: transform .2s; }
    .navbar .nav-link.dropdown-toggle:hover::after { transform: translateY(-3px) rotate(45deg); }
    .navbar .nav-link.dropdown-toggle.show::after { transform: translateY(1px) rotate(225deg); }
    .navbar .nav-link.active, .navbar .nav-link.show { color: var(--blue-deep); }
    .tg-menu { --bs-dropdown-link-active-bg: transparent; border: 1px solid var(--line); border-radius: 16px; padding: 8px; min-width: 280px; background: var(--surface); box-shadow: 0 18px 40px rgba(15,27,61,.14); }
    .tg-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
    .tg-menu .dropdown-item { border-radius: 10px; padding: 10px 12px; white-space: normal; color: var(--text); }
    .tg-menu .dropdown-item strong { display: block; font-weight: 600; }
    .tg-menu .dropdown-item small { display: block; color: var(--muted); font-size: .85rem; line-height: 1.35; }
    .tg-menu .dropdown-item:hover, .tg-menu .dropdown-item:focus { background: var(--bg-2); color: var(--text); }
    .tg-menu .dropdown-item.active { background: rgba(77,107,255,.12); color: var(--text); }
    @media (min-width: 1200px) and (hover: hover) {
      .navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; }
      .navbar .nav-item.dropdown:hover > .nav-link.dropdown-toggle::after { transform: translateY(1px) rotate(225deg); }
    }
    @media (max-width: 1199.98px) {
      .navbar-collapse { max-height: calc(100vh - 90px); overflow-y: auto; }
      .navbar-collapse.show, .navbar-collapse.collapsing { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; margin-top: 12px; padding: 8px 16px 16px; box-shadow: 0 20px 40px rgba(15,27,61,.16); }
      .navbar-collapse .nav-link { padding-top: .65rem; padding-bottom: .65rem; }
      .navbar-collapse .tg-menu { border: 0; box-shadow: none; background: transparent; padding: 0 0 6px 12px; min-width: 0; }
      .navbar-collapse .tg-menu::before { display: none; }
    }
    /* ---------- Theme switch ---------- */
    .nav-tools { gap: 8px; }
    .theme-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s, transform .2s; }
    .theme-btn:hover { border-color: var(--blue-deep); transform: translateY(-1px); }
    .theme-btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
    .theme-btn .ic-moon { display: none; }
    :root[data-bs-theme="dark"] .theme-btn .ic-sun { display: none; }
    :root[data-bs-theme="dark"] .theme-btn .ic-moon { display: block; }
    .theme-menu { min-width: 220px; }
    .theme-menu .dropdown-item { display: flex; align-items: center; gap: 10px; }
    .theme-menu .tick { margin-left: auto; opacity: 0; color: var(--blue-deep); }
    .theme-menu .dropdown-item.active .tick { opacity: 1; }
    .theme-anim, .theme-anim body, .theme-anim section, .theme-anim .navbar, .theme-anim .card, .theme-anim [class*="-card"], .theme-anim .stat, .theme-anim footer { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }
    /* ---------- Sub-pages ---------- */
    .page-head { padding: 118px 0 0; background: var(--bg-2); }
    .page-head .breadcrumb { --bs-breadcrumb-divider-color: var(--muted); --bs-breadcrumb-item-active-color: var(--muted); margin: 0; font-weight: 500; }
    .subpage .founder-section { border-top: 0; padding-top: 48px; }
    .subpage .photo-slot { cursor: default; }
    #vision { scroll-margin-top: 110px; }


    /* ---------- Monitor power-on intro ---------- */
    .monitor { container-type: inline-size; }
    .mon-press { position: absolute; left: 77.95%; top: 79.43%; width: 0; height: 0; z-index: 5; pointer-events: none; }
    .mon-finger { position: absolute; width: 11cqw; height: auto; max-width: none; left: -4.04cqw; top: -.24cqw; transform-origin: 4.04cqw .24cqw; transform: rotate(-12deg) translateY(60cqw); opacity: 0; filter: drop-shadow(-.4cqw 1.4cqw 1.4cqw rgba(15,27,61,.22)); }
    .mon-ripple { position: absolute; left: -1.4cqw; top: -1.4cqw; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; border: .3cqw solid rgba(77,107,255,.8); opacity: 0; }
    .mon-led { position: absolute; left: 80.05%; top: 79.59%; width: .9cqw; height: .9cqw; margin: -.45cqw 0 0 -.45cqw; border-radius: 50%; background: #E8EEFF; opacity: 0; z-index: 4; box-shadow: 0 0 .6cqw .25cqw rgba(110,140,255,.9), 0 0 2cqw .6cqw rgba(77,107,255,.45); transition: opacity .25s ease; }
    .monitor.pressing .mon-finger { animation: fingerPress 2.3s cubic-bezier(.45,.05,.25,1) forwards; }
    .monitor.pressing .mon-ripple { animation: pressRipple .7s ease-out 1.15s forwards; }
    .monitor.powered .mon-led { opacity: 1; }
    @keyframes fingerPress {
      0% { transform: rotate(-12deg) translateY(60cqw); opacity: 0; }
      12% { opacity: 1; }
      44% { transform: rotate(-12deg) translateY(.4cqw); }
      50% { transform: rotate(-12deg) translateY(-.5cqw) scale(.985); }
      58% { transform: rotate(-12deg) translateY(.2cqw); }
      90% { opacity: 1; }
      100% { transform: rotate(-12deg) translateY(60cqw); opacity: 0; }
    }
    @keyframes pressRipple { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.4); } }
    .monitor.has-boot.open .mon-screen { opacity: 0; transition: none; }
    .monitor.has-boot.powered .mon-screen { opacity: 1; }
    .monitor.has-boot .mon-screen .editor { visibility: hidden; }
    .monitor.has-boot.booted .mon-screen .editor { visibility: visible; }
    .boot { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 42%, #1A2E6B 0%, #0E1730 58%, #090F20 100%); opacity: 0; }
    .monitor.powered .boot { opacity: 1; animation: crtOn .6s ease-out both; }
    .monitor.booted .boot { opacity: 0; transition: opacity .6s ease; animation: none; }
    @keyframes crtOn { 0% { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(3.5); } 35% { clip-path: inset(49.2% 0 49.2% 0); filter: brightness(2.2); } 100% { clip-path: inset(0 0 0 0); filter: brightness(1); } }
    .boot-mark { width: 290px; height: 290px; opacity: 0; transform: scale(.6); overflow: visible; }
    .boot-name { font-family: 'Space Grotesk', 'Figtree', sans-serif; font-weight: 700; font-size: 132px; letter-spacing: -.045em; line-height: .95; color: #FFFFFF; margin-top: 14px; opacity: 0; transform: translateY(24px); }
    .boot-sub { font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 34px; letter-spacing: .42em; text-transform: uppercase; color: #A9B5C6; margin-top: 10px; padding-left: .42em; opacity: 0; }
    .boot-bar { width: 520px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.12); margin-top: 56px; overflow: hidden; opacity: 0; }
    .boot-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #4D6BFF, #7C3AED, #F4A51C); }
    .boot-msg { font-family: 'Figtree', sans-serif; font-size: 26px; color: #8C9BB3; margin-top: 18px; opacity: 0; }
    .monitor.powered .boot-mark { animation: bootIn .9s cubic-bezier(.2,.8,.2,1) .35s forwards; }
    .monitor.powered .boot-name { animation: bootUp .7s cubic-bezier(.2,.8,.2,1) .75s forwards; }
    .monitor.powered .boot-sub { animation: bootUp .7s ease .95s forwards; }
    .monitor.powered .boot-bar, .monitor.powered .boot-msg { animation: bootUp .5s ease 1.1s forwards; }
    .monitor.powered .boot-bar i { animation: bootFill 1.5s cubic-bezier(.6,.1,.3,1) 1.25s forwards; }
    @keyframes bootIn { to { opacity: 1; transform: scale(1); } }
    @keyframes bootUp { to { opacity: 1; transform: none; } }
    @keyframes bootFill { to { width: 100%; } }
    @media (prefers-reduced-motion: reduce) { .mon-finger, .mon-ripple { display: none; } }

    /* ================= DARK MODE (follows the visitor's device setting) ================= */
    @media (prefers-color-scheme: dark) {
      :root:where(:not([data-theme="light"])) {
        color-scheme: dark;
        --bg: #0B1220; --bg-2: #0F1828; --surface: #131D30; --surface-2: #18243B;
        --line: #24324B; --text: #EAF0F7; --muted: #A9B5C6; --blue-deep: #8BA2F5;
      }
      :where(:root:not([data-theme="light"])) a { color: #8BA2F5; }
      :where(:root:not([data-theme="light"])) a:hover { color: #B8C7FA; }
      :where(:root:not([data-theme="light"])) .navbar { background: rgba(11,18,32,.72); }
      :where(:root:not([data-theme="light"])) .navbar.scrolled { background: rgba(11,18,32,.94); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
      :where(:root:not([data-theme="light"])) .brand-mark ellipse, :where(:root:not([data-theme="light"])) .brand-mark path[stroke="#0F1B3D"] { stroke: #B8C7FA; }
      :where(:root:not([data-theme="light"])) .brand-mark rect { fill: #6F8BFF; }
      :where(:root:not([data-theme="light"])) .navbar, :where(:root:not([data-theme="light"])) .preloader { --mark-gap: #0B1220; }
      :where(:root:not([data-theme="light"])) footer { --mark-gap: #0F1828; }
      :where(:root:not([data-theme="light"])) .btn-tg { background: #2E54E6; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
      :where(:root:not([data-theme="light"])) .btn-tg:hover { background: #4D6BFF; }
      :where(:root:not([data-theme="light"])) .btn-line { color: #DCE4FF; border-color: #6F8BFF; background: transparent; }
      :where(:root:not([data-theme="light"])) .btn-line:hover { background: #2E54E6; border-color: #2E54E6; color: #fff; }
      :where(:root:not([data-theme="light"])) .hero { background: radial-gradient(1100px 600px at 75% 30%, #15275A 0%, #0B1220 62%); }
      :where(:root:not([data-theme="light"])) .hero::after { background: linear-gradient(90deg, rgba(11,18,32,.95) 0%, rgba(11,18,32,.7) 45%, rgba(11,18,32,.1) 100%); }
      :where(:root:not([data-theme="light"])) .marquee-item { color: #C9D3E0; }
      :where(:root:not([data-theme="light"])) .grid-bg { background-image: linear-gradient(rgba(139,162,245,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(139,162,245,.05) 1px, transparent 1px); }
      :where(:root:not([data-theme="light"])) .skill-card, :where(:root:not([data-theme="light"])) .crew-card, :where(:root:not([data-theme="light"])) .why-card, :where(:root:not([data-theme="light"])) .vma-card, :where(:root:not([data-theme="light"])) .value-chip, :where(:root:not([data-theme="light"])) .ind-card, :where(:root:not([data-theme="light"])) .project-form, :where(:root:not([data-theme="light"])) .form-sent { box-shadow: 0 10px 30px rgba(0,0,0,.3); }
      :where(:root:not([data-theme="light"])) .skill-card svg { filter: brightness(.86); }
      :where(:root:not([data-theme="light"])) .vma-card h3 { color: var(--text); }
      :where(:root:not([data-theme="light"])) .why-ic svg, :where(:root:not([data-theme="light"])) .feature-row .ic svg, :where(:root:not([data-theme="light"])) .vma-ic { filter: brightness(1.45); }
      :where(:root:not([data-theme="light"])) .rider-section { background: var(--bg); }
      :where(:root:not([data-theme="light"])) .rider-blob { background: linear-gradient(135deg, #10302A, #17244A); }
      :where(:root:not([data-theme="light"])) .rider-float { background: var(--surface); }
      :where(:root:not([data-theme="light"])) .rider-part b { color: #3FD0AE; }
      :where(:root:not([data-theme="light"])) .tush-section { background: radial-gradient(900px 500px at 70% 50%, rgba(77,107,255,.18), transparent 70%), var(--bg-2); }
      :where(:root:not([data-theme="light"])) .project-form .form-control { background: var(--surface-2); color: var(--text); }
      :where(:root:not([data-theme="light"])) .project-form .form-control::placeholder { color: #7D8A9C; }
      :where(:root:not([data-theme="light"])) .pill-opt { background: var(--surface-2); }
      :where(:root:not([data-theme="light"])) .btn-check:checked + .pill-opt { background: #2E54E6; border-color: #2E54E6; }
      :where(:root:not([data-theme="light"])) .form-error { background: #3A1A16; color: #FFB4A6; }
      :where(:root:not([data-theme="light"])) .faq .accordion-button:not(.collapsed) { background: #18243B; color: #B8C7FA; }
      :where(:root:not([data-theme="light"])) .photo-slot { background: #18243B; box-shadow: 0 18px 40px rgba(0,0,0,.4); }
      :where(:root:not([data-theme="light"])) .photo-slot.is-empty figcaption { color: var(--text); }
      :where(:root:not([data-theme="light"])) .monitor::after { background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }
      :where(:root:not([data-theme="light"])) .to-top { background: #2E54E6; }
      :where(:root:not([data-theme="light"])) .reg-badge { background: #10302A; color: #CFF5EA; border-color: #1E5246; }
    }
    /* Dark theme chosen with the switch */
      :root:where([data-theme="dark"]) {
        color-scheme: dark;
        --bg: #0B1220; --bg-2: #0F1828; --surface: #131D30; --surface-2: #18243B;
        --line: #24324B; --text: #EAF0F7; --muted: #A9B5C6; --blue-deep: #8BA2F5;
      }
      :where(:root[data-theme="dark"]) a { color: #8BA2F5; }
      :where(:root[data-theme="dark"]) a:hover { color: #B8C7FA; }
      :where(:root[data-theme="dark"]) .navbar { background: rgba(11,18,32,.72); }
      :where(:root[data-theme="dark"]) .navbar.scrolled { background: rgba(11,18,32,.94); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
      :where(:root[data-theme="dark"]) .brand-mark ellipse, :where(:root[data-theme="dark"]) .brand-mark path[stroke="#0F1B3D"] { stroke: #B8C7FA; }
      :where(:root[data-theme="dark"]) .brand-mark rect { fill: #6F8BFF; }
      :where(:root[data-theme="dark"]) .navbar, :where(:root[data-theme="dark"]) .preloader { --mark-gap: #0B1220; }
      :where(:root[data-theme="dark"]) footer { --mark-gap: #0F1828; }
      :where(:root[data-theme="dark"]) .btn-tg { background: #2E54E6; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
      :where(:root[data-theme="dark"]) .btn-tg:hover { background: #4D6BFF; }
      :where(:root[data-theme="dark"]) .btn-line { color: #DCE4FF; border-color: #6F8BFF; background: transparent; }
      :where(:root[data-theme="dark"]) .btn-line:hover { background: #2E54E6; border-color: #2E54E6; color: #fff; }
      :where(:root[data-theme="dark"]) .hero { background: radial-gradient(1100px 600px at 75% 30%, #15275A 0%, #0B1220 62%); }
      :where(:root[data-theme="dark"]) .hero::after { background: linear-gradient(90deg, rgba(11,18,32,.95) 0%, rgba(11,18,32,.7) 45%, rgba(11,18,32,.1) 100%); }
      :where(:root[data-theme="dark"]) .marquee-item { color: #C9D3E0; }
      :where(:root[data-theme="dark"]) .grid-bg { background-image: linear-gradient(rgba(139,162,245,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(139,162,245,.05) 1px, transparent 1px); }
      :where(:root[data-theme="dark"]) .skill-card, :where(:root[data-theme="dark"]) .crew-card, :where(:root[data-theme="dark"]) .why-card, :where(:root[data-theme="dark"]) .vma-card, :where(:root[data-theme="dark"]) .value-chip, :where(:root[data-theme="dark"]) .ind-card, :where(:root[data-theme="dark"]) .project-form, :where(:root[data-theme="dark"]) .form-sent { box-shadow: 0 10px 30px rgba(0,0,0,.3); }
      :where(:root[data-theme="dark"]) .skill-card svg { filter: brightness(.86); }
      :where(:root[data-theme="dark"]) .vma-card h3 { color: var(--text); }
      :where(:root[data-theme="dark"]) .why-ic svg, :where(:root[data-theme="dark"]) .feature-row .ic svg, :where(:root[data-theme="dark"]) .vma-ic { filter: brightness(1.45); }
      :where(:root[data-theme="dark"]) .rider-section { background: var(--bg); }
      :where(:root[data-theme="dark"]) .rider-blob { background: linear-gradient(135deg, #10302A, #17244A); }
      :where(:root[data-theme="dark"]) .rider-float { background: var(--surface); }
      :where(:root[data-theme="dark"]) .rider-part b { color: #3FD0AE; }
      :where(:root[data-theme="dark"]) .tush-section { background: radial-gradient(900px 500px at 70% 50%, rgba(77,107,255,.18), transparent 70%), var(--bg-2); }
      :where(:root[data-theme="dark"]) .project-form .form-control { background: var(--surface-2); color: var(--text); }
      :where(:root[data-theme="dark"]) .project-form .form-control::placeholder { color: #7D8A9C; }
      :where(:root[data-theme="dark"]) .pill-opt { background: var(--surface-2); }
      :where(:root[data-theme="dark"]) .btn-check:checked + .pill-opt { background: #2E54E6; border-color: #2E54E6; }
      :where(:root[data-theme="dark"]) .form-error { background: #3A1A16; color: #FFB4A6; }
      :where(:root[data-theme="dark"]) .faq .accordion-button:not(.collapsed) { background: #18243B; color: #B8C7FA; }
      :where(:root[data-theme="dark"]) .photo-slot { background: #18243B; box-shadow: 0 18px 40px rgba(0,0,0,.4); }
      :where(:root[data-theme="dark"]) .photo-slot.is-empty figcaption { color: var(--text); }
      :where(:root[data-theme="dark"]) .monitor::after { background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }
      :where(:root[data-theme="dark"]) .to-top { background: #2E54E6; }
      :where(:root[data-theme="dark"]) .reg-badge { background: #10302A; color: #CFF5EA; border-color: #1E5246; }


    /* Reveal fallback: visible unless JS animation takes over */
    .reveal { will-change: transform, opacity; }