:root {
      --primary: #087cb5;
      --secondary: #0a2335;
      --accent: #08a8b5;
      --hl: #ffb81c;
      --bg: #f4f5f9;
      --text: #333;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: 'Poppins', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }

    a { text-decoration: none; }

    header {
      background: var(--secondary);
      color: #fff;
      padding: 1rem 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }

    header h1 {
      margin: 0;
      font-size: 1.4rem;
      color: #fff;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap;
    }

    .nav-links a {
      color: #cfcde6;
      text-decoration: none;
      font-size: 0.84rem;
      font-weight: 600;
    }

    .nav-links a:hover { color: #fff; }

    .cta-btn {
      background: var(--accent);
      color: white !important;
      padding: 10px 20px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      transition: 0.3s;
      border: none;
      cursor: pointer;
      display: inline-block;
    }

    .cta-btn:hover {
      background: #087f91;
      transform: translateY(-2px);
    }

    footer {
      background: var(--secondary);
      color: white;
      text-align: center;
      padding: 3rem 1.5rem;
      margin-top: 4rem;
    }

    .site-header h1 a {
      display: flex;
      align-items: center;
      gap: .7rem;
      color: inherit;
    }

    .site-header h1 a:hover { color: #fff; }
    .site-header h1 img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
    .site-header .brand-name { color: #fff; font-size: 1.12rem; line-height: 1.15; }
    .site-header .brand-name small { display: block; color: #47d2d3; font-size: .7rem; font-weight: 400; }

    .portal-main,
    .page-main {
      width: min(1180px, 92%);
      min-height: calc(100vh - 170px);
      margin: 0 auto;
      padding: 3.5rem 0;
    }

    .portal-intro,
    .page-heading {
      max-width: 760px;
      margin: 0 auto 2.5rem;
      text-align: center;
    }

    .portal-intro h2,
    .page-heading h2 {
      margin: .25rem 0 .7rem;
      color: var(--secondary);
      font-size: clamp(2rem, 5vw, 3rem);
      line-height: 1.15;
    }

    .portal-intro p:not(.eyebrow),
    .page-heading p:not(.eyebrow) {
      color: #5d6070;
      margin: 0 auto;
      max-width: 680px;
    }

    .eyebrow {
      margin: 0;
      color: var(--accent);
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .portal-grid,
    .plans-grid,
    .support-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.25rem;
    }

    .portal-card,
    .plan-card,
    .support-grid article,
    .contact-card {
      border: 1px solid #e0e2ed;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 8px 25px rgba(26, 28, 51, .07);
    }

    .portal-card {
      display: flex;
      min-height: 250px;
      flex-direction: column;
      padding: 1.6rem;
      color: inherit;
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .portal-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 30px rgba(26, 28, 51, .12);
    }

    .portal-icon { font-size: 2rem; }
    .portal-card h3 { margin: 1rem 0 .35rem; color: var(--secondary); }
    .portal-card p { margin: 0 0 1rem; color: #626575; }
    .portal-link { margin-top: auto; color: var(--primary); font-weight: 700; }

    .plans-grid { align-items: stretch; }

    .plan-card {
      display: flex;
      flex-direction: column;
      padding: 1.6rem;
      color: #444;
    }

    .plan-card.featured { border: 2px solid var(--accent); }
    .plan-card h3 { margin: 0 0 .5rem; color: var(--primary); }
    .plan-card p { margin: .35rem 0; }
    .plan-price { margin: 1rem 0 !important; color: var(--secondary); font-size: 1.8rem; font-weight: 700; }
    .plan-price small { display: block; color: #666; font-size: .8rem; font-weight: 400; line-height: 1.45; }
    .plan-card ul { flex: 1; padding-left: 1.2rem; }
    .plan-card li { margin: .5rem 0; }

    .contact-card {
      max-width: 700px;
      margin: 0 auto 2rem;
      padding: 2rem;
      text-align: center;
    }

    .contact-card h3 { margin-top: 0; color: var(--secondary); }
    .support-grid article { padding: 1.3rem; }
    .support-grid h3 { margin-top: 0; color: var(--secondary); }
    .support-grid p { margin-bottom: 0; color: #606273; }

    .site-footer { margin-top: 0; }
    .site-footer p { margin: 0 0 .8rem; }
    .site-footer a { color: #62dfe0; font-weight: 700; }

    .academia-main { max-width: 1440px; }
    .academia-main .page-heading { margin-bottom: 1.5rem; }

    .home-hero,
    .home-highlights,
    .home-sections,
    .home-cta {
      width: min(1180px, 92%);
      margin: 0 auto;
    }

    .home-hero { padding: .35rem 0 1rem; }
    .home-cover {
      display: block;
      width: 100%;
      height: auto;
      max-height: 300px;
      border-radius: 18px;
      object-fit: cover;
      box-shadow: 0 12px 32px rgba(7, 37, 54, .18);
    }
    .home-hero-copy { max-width: 760px; margin: 1rem auto .6rem; text-align: center; }
    .home-hero-copy h2 {
      margin: .35rem 0 .8rem;
      color: var(--secondary);
      font-size: clamp(2rem, 5vw, 3.25rem);
      line-height: 1.15;
    }
    .home-hero-copy > p:not(.eyebrow) { max-width: 680px; margin: 0 auto 1.25rem; color: #5d6070; }
    .home-learning {
      width: 100%;
      margin: 0 auto;
      padding: .7rem 0 1rem;
    }
    .home-learning .page-heading { margin-bottom: 1rem; }
    #tw[data-home-tutorial] {
      width: 100%;
      max-width: none;
      margin: 0 auto;
    }
    .home-learning .page-heading h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); }
    #tw[data-home-tutorial] .tutorial-workspace {
      display: flex;
      min-height: 0;
      flex: 0 0 auto;
      flex-direction: column;
    }
    #tw[data-home-tutorial] .tw-wrap { display: flex; min-height: 0; flex: 0 0 auto; }
    #tw[data-home-tutorial] .tw-stage { width: 100%; height: min(68vw, 720px); min-height: 480px; flex: 1 1 auto; }
    #tw[data-home-tutorial] .stage-guidance { align-self: end; }
    /* Portada: el simulador ocupa la primera pantalla, pero queda dentro del flujo normal
       para que se pueda seguir bajando hacia el resto del contenido. */
    .home-learning {
      width: min(1440px, 96%);
      margin: 0 auto;
      padding: .35rem 0 1.5rem;
    }
    .home-learning .page-heading { margin: .35rem auto .6rem; }
    .home-learning .page-heading h2 { margin: .1rem 0; font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
    .home-learning .page-heading .eyebrow { font-size: .68rem; }
    #tw[data-home-tutorial] .tw-stage {
      height: calc(100vh - var(--academy-site-header-height, 74px) - 110px);
      height: calc(100dvh - var(--academy-site-header-height, 74px) - 110px);
      min-height: 440px;
      max-height: 860px;
    }
    body.home-tutorial-active #tw[data-home-tutorial] .tutorial-workspace:fullscreen,
    body.home-tutorial-active #tw[data-home-tutorial] .tutorial-workspace.is-maximized {
      position: fixed;
      z-index: 2000;
      inset: 0;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
    }
    .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; }
    .secondary-btn {
      display: inline-block;
      padding: 9px 18px;
      border: 1px solid #1294b8;
      border-radius: 8px;
      color: #0878a5;
      font-weight: 700;
    }
    .home-highlights {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      padding: 1rem 0 3rem;
    }
    .home-highlights article {
      padding: 1.2rem;
      border: 1px solid #dce8ec;
      border-radius: 14px;
      background: #fff;
    }
    .home-highlights article > span { color: var(--primary); font-size: 1.5rem; font-weight: 700; }
    .home-highlights h3 { margin: .35rem 0; color: var(--secondary); }
    .home-highlights p { margin: 0; color: #606878; font-size: .9rem; }
    .home-sections { padding: 1rem 0 3.5rem; }
    .home-sections .page-heading { margin-bottom: 1.7rem; }
    .home-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      margin-bottom: 3rem;
      padding: 2rem;
      border-radius: 18px;
      background: linear-gradient(120deg, #0a2b43, #075c7a);
      color: #fff;
    }
    .home-cta h2 { margin: .2rem 0; color: #fff; }
    .home-cta p:not(.eyebrow) { margin: .3rem 0 0; color: #d3eaf1; }
    .home-cta .eyebrow { color: #62dfe0; }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1rem;
    }
    .feature-card {
      padding: 1.35rem;
      border: 1px solid #dce8ec;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 7px 22px rgba(26, 42, 55, .05);
    }
    .feature-card > span { color: var(--primary); font-size: 1.7rem; }
    .feature-card h3 { margin: .3rem 0; color: var(--secondary); }
    .feature-card p { margin: 0; color: #606878; }
    .feature-note,
    .faq-cta,
    .contact-details {
      margin: 2rem auto 0;
      padding: 1.7rem;
      border: 1px solid #dce8ec;
      border-radius: 14px;
      background: #fff;
    }
    .feature-note h3,
    .faq-cta h3,
    .contact-details h3 { margin-top: 0; color: var(--secondary); }
    .feature-note .text-link { margin-left: 1rem; color: var(--primary); font-weight: 700; }
    .feature-comparison ul,
    .feature-note ul { display: grid; gap: .55rem; padding-left: 1.2rem; color: #b6c5d1; }
    .feature-comparison li::marker,
    .feature-note li::marker { color: #51dce8; }
    .feature-comparison .secondary-btn { margin-left: .5rem; }
    .contact-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
    .faq-list { display: grid; gap: .7rem; }
    .faq-list details {
      border: 1px solid #dce4ea;
      border-radius: 12px;
      background: #fff;
      padding: 1rem 1.2rem;
    }
    .faq-list summary { color: var(--secondary); font-weight: 700; cursor: pointer; }
    .faq-list details p { margin: .7rem 0 0; color: #596474; }
    .faq-cta { text-align: center; }
    .contact-details { max-width: 700px; }
    .contact-details p { margin: .4rem 0; }
    .contact-details a { color: var(--primary); font-weight: 600; }

    .learn-float {
      position: fixed;
      z-index: 120;
      right: 22px;
      bottom: 20px;
      width: min(290px, calc(100vw - 28px));
      border: 1px solid rgba(91, 210, 221, .7);
      border-radius: 14px;
      background: linear-gradient(135deg, #0d3852, #102238);
      box-shadow: 0 12px 32px rgba(4, 28, 43, .3);
      color: #fff;
    }
    .learn-float > a {
      display: flex;
      align-items: center;
      gap: .75rem;
      min-height: 70px;
      padding: 12px 42px 12px 14px;
      color: inherit;
    }
    .learn-float-icon {
      display: grid;
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 11px;
      background: rgba(66, 211, 206, .16);
      color: #6be5de;
      font-size: 1.25rem;
    }
    .learn-float-copy { display: flex; flex-direction: column; line-height: 1.35; }
    .learn-float-copy small { color: #7de2dc; font-size: .6rem; font-weight: 700; letter-spacing: .08em; }
    .learn-float-copy strong { font-size: .94rem; }
    .learn-float-arrow { margin-left: auto; color: #78e3da; font-size: 1.2rem; }
    .learn-float > button {
      position: absolute;
      top: 6px;
      right: 7px;
      width: 26px;
      height: 26px;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, .1);
      color: #e9f7fc;
      font-size: 1rem;
      cursor: pointer;
    }
    .learn-float > a:focus-visible,
    .learn-float > button:focus-visible { outline: 2px solid #8cf3e9; outline-offset: 3px; }
    body.academy-tutorial-active .learn-float { display: none; }
    body.home-tutorial-active .learn-float { display: none; }

    @media (max-width: 640px) {
      header.site-header { align-items: flex-start; flex-direction: column; gap: .8rem; }
      .site-header .nav-links { gap: 8px 12px; }
      .site-header .nav-links a { font-size: .78rem; }
      .portal-main,
      .page-main { padding: 2.3rem 0; }
      .contact-card { padding: 1.4rem; }
      .home-highlights { grid-template-columns: 1fr; }
      #tw[data-home-tutorial] .tw-stage { height: 72vh; min-height: 440px; }
      .home-cta { align-items: flex-start; flex-direction: column; padding: 1.4rem; }
      .home-cover { border-radius: 12px; }
      .feature-note .text-link { display: inline-block; margin: .8rem 0 0; }
      .learn-float { right: 12px; bottom: 12px; width: min(270px, calc(100vw - 24px)); }
    }

    :root {
      --primary: #19c7e8;
      --secondary: #f2f7fc;
      --accent: #19c7e8;
      --hl: #55e3f0;
      --bg: #07111c;
      --text: #edf4fa;
      --panel: #111d29;
      --panel-raised: #182532;
      --line: rgba(161, 185, 207, .2);
      color-scheme: dark;
    }

    body {
      background:
        radial-gradient(ellipse at 78% 8%, rgba(5, 145, 177, .13), transparent 36rem),
        #07111c;
      color: #edf4fa;
    }

    header.site-header {
      position: sticky;
      top: 0;
      gap: 1.5rem;
      padding: .8rem max(4%, calc((100vw - 1280px) / 2));
      background: rgba(5, 13, 22, .96);
      border-bottom: 1px solid rgba(158, 186, 211, .13);
      box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
      backdrop-filter: blur(16px);
    }

    .site-header h1 .brand-name { font-weight: 700; letter-spacing: -.03em; }
    .site-header .brand-name small { color: #79d9e7; }

    .site-header .nav-links {
      justify-content: flex-end;
      gap: .5rem 1.05rem;
    }

    .site-header .nav-links a {
      color: #bdcbd8;
      font-size: .78rem;
      transition: color .18s ease;
    }

    .site-header .nav-links a:hover,
    .site-header .nav-links a:focus-visible { color: #5ce4f1; }

    .site-header .nav-links .nav-contact {
      padding: .6rem 1rem;
      border-radius: 999px;
      background: linear-gradient(110deg, #0da9d4, #51e1e7);
      color: #04131c;
      font-size: .8rem;
      font-weight: 700;
    }

    .site-header .nav-links .nav-contact:hover,
    .site-header .nav-links .nav-contact:focus-visible { color: #04131c; }

    .portal-main,
    .page-main { min-height: calc(100vh - 170px); }

    .portal-intro h2,
    .page-heading h2,
    .home-hero-copy h2 {
      color: #f4f8fc;
      letter-spacing: -.045em;
    }

    .portal-intro p:not(.eyebrow),
    .page-heading p:not(.eyebrow),
    .home-hero-copy > p:not(.eyebrow) { color: #a9bac9; }

    .eyebrow,
    .home-cta .eyebrow { color: #51dce8; }

    .page-heading { max-width: 900px; }
    .page-heading h2 { font-size: clamp(2.25rem, 6.4vw, 4.6rem); }
    .page-heading p:not(.eyebrow) { font-size: 1.04rem; }

    .portal-card,
    .plan-card,
    .support-grid article,
    .contact-card,
    .feature-card,
    .feature-note,
    .faq-cta,
    .contact-details,
    .faq-list details,
    .home-highlights article {
      border: 1px solid rgba(166, 187, 207, .16);
      border-radius: 24px;
      background: linear-gradient(145deg, #182430, #111b26);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .17);
      color: #eaf2f8;
    }

    .portal-card { min-height: 270px; padding: 1.7rem; }
    .portal-card:hover { border-color: rgba(58, 207, 230, .5); }
    .portal-card h3,
    .plan-card h3,
    .support-grid h3,
    .contact-card h3,
    .feature-card h3,
    .feature-note h3,
    .faq-cta h3,
    .contact-details h3,
    .home-highlights h3 { color: #f1f7fc; }

    .portal-icon,
    .feature-card > span { color: #49dbea; font-size: 1.05rem; font-weight: 700; }
    .portal-card p,
    .feature-card p,
    .support-grid p,
    .home-highlights p { color: #a6b6c5; }
    .portal-link,
    .feature-note .text-link,
    .contact-details a { color: #56d9e8; }

    .cta-btn {
      border-radius: 999px;
      background: linear-gradient(110deg, #0aa9d4, #4bdee5);
      color: #06131c !important;
      box-shadow: 0 8px 24px rgba(20, 194, 221, .18);
    }

    .cta-btn:hover { background: linear-gradient(110deg, #31c9e6, #83edf0); }

    .secondary-btn {
      border: 1px solid rgba(91, 205, 222, .55);
      border-radius: 999px;
      color: #77e3ed;
    }

    .secondary-btn:hover { background: rgba(41, 185, 211, .1); }
    .plan-card { color: #cad5df; }
    .plan-card.featured { border-color: #28cbdf; }
    .plan-card h3 { color: #66dfeb; }
    .plan-price { color: #f4f8fc; }
    .plan-price small,
    .faq-list details p { color: #a6b6c5; }
    .faq-list details { padding: 1.1rem 1.35rem; }
    .faq-list summary { color: #f1f7fc; }
    .feature-note .text-link { margin-left: 1rem; }

    .site-footer {
      margin-top: 3rem;
      border-top: 1px solid rgba(158, 186, 211, .13);
      background: #050d16;
      color: #bdcbd8;
    }

    .site-footer a { color: #69dce8; }
    .home-hero { padding-top: .5rem; }
    .home-learning { padding-top: .4rem; }
    .home-cover {
      max-height: none;
      border: 1px solid rgba(150, 182, 207, .2);
      border-radius: 24px;
      box-shadow: 0 20px 48px rgba(0, 0, 0, .24);
    }
    .home-learning .page-heading h2 { color: #f2f7fc; }
    .home-learning .page-heading p:not(.eyebrow) { color: #a9bac9; }

    .home-hero-copy {
      max-width: 980px;
      margin: 2.8rem auto 2.2rem;
      padding: clamp(1.5rem, 5vw, 3.5rem);
      border: 1px solid rgba(144, 177, 204, .17);
      border-radius: 30px;
      background:
        radial-gradient(circle at 95% 10%, rgba(24, 199, 232, .17), transparent 24rem),
        linear-gradient(135deg, #172431, #0d1924);
      text-align: left;
    }

    .home-hero-copy h2 { max-width: 800px; font-size: clamp(2.3rem, 6vw, 4.8rem); }
    .home-hero-copy > p:not(.eyebrow) { max-width: 740px; margin-left: 0; }
    .hero-actions { justify-content: flex-start; }
    .home-highlights { padding: 0 0 3rem; }
    .home-highlights article { padding: 1.5rem; }
    .home-highlights article > span { color: #57ddea; font-size: .85rem; letter-spacing: .14em; }

    .home-platforms,
    .home-stories {
      width: min(1180px, 92%);
      margin: 0 auto;
    }

    .home-platforms { padding: 1rem 0 3.5rem; }
    .home-platforms .page-heading { margin-bottom: 1.6rem; }
    .platform-grid,
    .home-stories,
    .customer-links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }

    .platform-card,
    .story-card,
    .customer-feature {
      position: relative;
      overflow: hidden;
      padding: clamp(1.5rem, 3vw, 2.25rem);
      border: 1px solid rgba(166, 187, 207, .16);
      border-radius: 26px;
      background: linear-gradient(145deg, #182430, #101a25);
    }

    .platform-card-featured,
    .story-card-food {
      background:
        radial-gradient(circle at 100% 0, rgba(22, 190, 221, .16), transparent 20rem),
        linear-gradient(145deg, #172936, #101a25);
    }

    .platform-label {
      display: inline-flex;
      margin-bottom: 1.5rem;
      padding: .35rem .75rem;
      border: 1px solid rgba(84, 215, 232, .32);
      border-radius: 999px;
      color: #69dce8;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .platform-card h3,
    .story-card h2 { margin: 0 0 .65rem; color: #f1f7fc; font-size: clamp(1.35rem, 2.6vw, 2rem); }
    .platform-card p,
    .story-card p:not(.eyebrow) { color: #a6b6c5; }
    .platform-card .portal-link { display: inline-block; margin-top: .5rem; }
    .home-stories { padding-bottom: 3rem; }
    .story-card { display: flex; min-height: 250px; flex-direction: column; align-items: flex-start; justify-content: space-between; }
    .story-card .secondary-btn { margin-top: 1rem; }

    .home-cta {
      margin-bottom: 3rem;
      border: 1px solid rgba(72, 217, 234, .3);
      border-radius: 28px;
      background:
        radial-gradient(circle at 90% 10%, rgba(57, 220, 233, .22), transparent 23rem),
        linear-gradient(120deg, #123244, #0d2534);
    }

    .feature-card > span { font-size: .9rem; letter-spacing: .1em; }
    .feature-note,
    .faq-cta,
    .contact-details { color: #eaf2f8; }
    .feature-note p,
    .faq-cta p,
    .contact-details p { color: #a6b6c5; }
    .support-grid article { padding: 1.6rem; }
    .support-number { color: #5bdce9; font-size: .82rem; font-weight: 700; letter-spacing: .12em; }

    .customer-feature,
    .food-panel {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(190px, .6fr);
      align-items: center;
      gap: 2rem;
      margin: 0 auto 1.5rem;
      padding: clamp(1.5rem, 5vw, 3rem);
      background:
        radial-gradient(circle at 90% 10%, rgba(28, 197, 225, .2), transparent 23rem),
        linear-gradient(140deg, #182633, #0f1a24);
    }

    .customer-feature h3,
    .food-panel h3 { margin: .35rem 0 .7rem; color: #f3f8fc; font-size: clamp(1.55rem, 3vw, 2.3rem); }
    .customer-feature p:not(.eyebrow),
    .food-panel p:not(.eyebrow) { max-width: 640px; color: #a6b6c5; }
    .customer-feature-mark,
    .food-panel-badge {
      display: grid;
      min-height: 190px;
      place-content: center;
      border: 1px solid rgba(97, 211, 230, .22);
      border-radius: 24px;
      background: linear-gradient(140deg, #152b3b, #10202d);
      color: #eaf7fc;
      font-size: 3.8rem;
      font-weight: 700;
      letter-spacing: -.08em;
    }

    .food-panel-badge { text-align: center; letter-spacing: .02em; }
    .food-panel-badge span { color: #f1f7fc; font-size: 1.2rem; letter-spacing: .2em; }
    .food-panel-badge strong { color: #58ddeb; font-size: 2.8rem; }
    .customer-links { margin-top: 1rem; }
    .customer-links .portal-card { min-height: 230px; }
    .food-links,
    .support-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
    .food-links .text-link { color: #64dce8; font-weight: 700; }

    @media (max-width: 940px) {
      header.site-header { align-items: flex-start; flex-direction: column; }
      .site-header .nav-links { justify-content: flex-start; }
    }

    @media (max-width: 640px) {
      header.site-header { padding: .8rem 4%; }
      .site-header .nav-links { gap: .5rem .8rem; }
      .site-header .nav-links a { font-size: .72rem; }
      .site-header .nav-links .nav-contact { padding: .4rem .75rem; }
      .home-hero-copy { margin: 1.5rem auto; border-radius: 22px; text-align: left; }
      .home-cover { border-radius: 16px; }
      .hero-actions { justify-content: flex-start; }
      .platform-grid,
      .home-stories,
      .customer-links { grid-template-columns: 1fr; }
      .customer-feature,
      .food-panel { grid-template-columns: 1fr; }
      .customer-feature-mark,
      .food-panel-badge { min-height: 140px; }
      .home-highlights { gap: .75rem; }
      .support-actions { align-items: flex-start; flex-direction: column; }
      .feature-comparison .secondary-btn { margin: .7rem 0 0; }
    }

    .plan-builder {
      margin: 0 auto 3rem;
      padding: clamp(1.2rem, 3.5vw, 2.4rem);
      border: 1px solid rgba(91, 207, 227, .2);
      border-radius: 28px;
      background:
        radial-gradient(circle at 98% 0, rgba(28, 194, 223, .11), transparent 24rem),
        linear-gradient(145deg, #111f2b, #0c1721);
      box-shadow: 0 22px 55px rgba(0, 0, 0, .2);
    }

    .plan-builder-heading {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .plan-builder-heading h2 {
      margin: .2rem 0 .4rem;
      color: #f2f7fc;
      font-size: clamp(1.8rem, 4vw, 2.7rem);
      letter-spacing: -.04em;
    }

    .plan-builder-heading p:not(.eyebrow) { margin: 0; color: #a6b6c5; }
    .builder-step { color: #6bdce9; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
    .builder-device-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 .75rem; }

    .builder-add-device {
      display: flex;
      align-items: center;
      gap: .8rem;
      min-width: 210px;
      padding: .85rem 1rem;
      border: 1px solid rgba(84, 208, 229, .25);
      border-radius: 15px;
      background: rgba(36, 163, 188, .09);
      color: #ecf6fa;
      cursor: pointer;
      text-align: left;
      transition: background .18s ease, border-color .18s ease, transform .18s ease;
    }

    .builder-add-device:hover { transform: translateY(-2px); border-color: #42d1e4; background: rgba(36, 163, 188, .16); }
    .builder-add-device > span:first-child { color: #5edbea; font-size: 1.4rem; }
    .builder-add-device > span:last-child { display: grid; gap: .12rem; }
    .builder-add-device strong { font-size: .83rem; }
    .builder-add-device small { color: #8ea4b5; font-size: .7rem; }

    .builder-status,
    .admin-status {
      min-height: 1.5em;
      margin: .65rem 0;
      color: #9eb2c3;
      font-size: .8rem;
    }

    .builder-status.is-error,
    .admin-status.is-error { color: #ff9a9f; }
    .builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 330px); gap: 1rem; align-items: start; }
    .builder-workspace { min-width: 0; }

    .builder-empty {
      display: grid;
      min-height: 340px;
      align-content: center;
      justify-items: center;
      padding: 2rem;
      border: 1px dashed rgba(158, 183, 202, .27);
      border-radius: 22px;
      background: rgba(5, 14, 22, .3);
      text-align: center;
    }

    .builder-empty[hidden] { display: none; }
    .builder-empty > span { color: #58dce9; font-size: 2.8rem; }
    .builder-empty h3 { margin: .3rem 0; color: #f0f6fb; }
    .builder-empty p { max-width: 340px; margin: 0; color: #a1b2c0; }
    .builder-devices { display: grid; gap: 1rem; }

    .builder-device {
      min-width: 0;
      padding: 1.2rem;
      border: 1px solid rgba(158, 183, 202, .17);
      border-radius: 20px;
      background: linear-gradient(150deg, #192734, #111c27);
    }

    .builder-device-heading { display: flex; align-items: center; gap: .75rem; }
    .builder-device-number { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 13px; background: rgba(39, 188, 214, .13); color: #61dbea; font-size: .8rem; font-weight: 700; }
    .builder-device-heading .eyebrow { font-size: .64rem; }
    .builder-device-heading h3 { margin: .1rem 0 0; color: #f1f6fa; font-size: 1.1rem; }
    .builder-remove-device { width: 34px; height: 34px; margin-left: auto; border: 1px solid rgba(222, 135, 146, .25); border-radius: 10px; background: rgba(213, 70, 88, .08); color: #f197a0; font-size: 1.3rem; cursor: pointer; }
    .builder-remove-device:hover { background: rgba(213, 70, 88, .2); }
    .builder-device-description { margin: .8rem 0 .25rem; color: #9fb1c0; font-size: .82rem; }
    .builder-base-price { margin: .5rem 0 1rem; color: #63dce9; font-size: .82rem; font-weight: 700; }
    .builder-module-group + .builder-module-group { margin-top: 1.1rem; }
    .builder-module-group h4 { margin: 0 0 .55rem; color: #bdcbd6; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
    .builder-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }

    .builder-module {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      align-items: start;
      gap: .3rem .55rem;
      min-height: 78px;
      padding: .7rem;
      border: 1px solid rgba(158, 183, 202, .15);
      border-radius: 13px;
      background: rgba(4, 12, 19, .26);
      cursor: pointer;
    }

    .builder-module.is-selected { border-color: rgba(78, 212, 229, .53); background: rgba(18, 151, 178, .12); }
    .builder-module.is-required { border-style: dashed; }
    .builder-module input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .builder-module input:focus-visible + .builder-checkbox { outline: 2px solid #77edf3; outline-offset: 3px; }
    .builder-checkbox { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #6d8292; border-radius: 5px; color: #07111c; font-size: .7rem; }
    .builder-module.is-selected .builder-checkbox { border-color: #60dce9; background: #60dce9; }
    .builder-module-copy { display: grid; gap: .2rem; }
    .builder-module-copy strong { color: #e5edf3; font-size: .72rem; line-height: 1.35; }
    .builder-module-copy small { color: #8fa2b2; font-size: .65rem; line-height: 1.4; }
    .builder-price { grid-column: 2; color: #60dce9; font-size: .65rem; font-weight: 700; }
    .builder-no-modules { color: #a5b4c1; font-size: .82rem; }

    .builder-summary {
      position: sticky;
      top: 155px;
      overflow: hidden;
      border: 1px solid rgba(158, 183, 202, .17);
      border-radius: 20px;
      background: #101b25;
    }

    .builder-summary-title { padding: 1.1rem 1.2rem; border-bottom: 1px solid rgba(158, 183, 202, .14); background: rgba(4, 12, 19, .24); }
    .builder-summary-title h3 { margin: .1rem 0 0; color: #f1f6fa; font-size: 1.2rem; }
    .builder-summary-lines { display: grid; max-height: 360px; gap: .35rem; overflow-y: auto; padding: 1rem 1.2rem; }
    .builder-summary-lines p { margin: 0; color: #bbc9d4; font-size: .74rem; line-height: 1.5; }
    .builder-summary-lines p + p { padding-left: .65rem; color: #94a9b9; }
    .builder-summary-empty { color: #93a5b3 !important; }
    .builder-totals { display: grid; gap: .7rem; padding: 1rem 1.2rem 1.2rem; border-top: 1px solid rgba(158, 183, 202, .16); background: #09131d; }
    .builder-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
    .builder-totals > div span { color: #a2b3c1; font-size: .75rem; }
    .builder-totals > div strong { color: #5bdbe8; font-size: .95rem; text-align: right; }
    .builder-totals > div:first-child strong { color: #80e2b1; }
    .builder-quote-note { margin: 0; color: #ffcf7b; font-size: .72rem; }
    .builder-send { width: 100%; text-align: center; }
    .builder-send.is-disabled { pointer-events: none; opacity: .48; }
    .builder-totals > small { color: #7f94a4; font-size: .65rem; text-align: center; }
    .plan-extras .plan-card { gap: .35rem; }
    .plan-extras .plan-card .cta-btn,
    .plan-extras .plan-card .text-link { align-self: flex-start; margin-top: auto; }
    .plan-extras .plan-card .text-link { color: #62dce9; font-weight: 700; }

    .plan-presets-section { margin: 0 auto 2.5rem; }
    .section-heading { max-width: 780px; margin: 0 auto 1.5rem; text-align: center; }
    .section-heading h2 { margin: .2rem 0 .5rem; color: #f1f7fc; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.035em; }
    .section-heading > p:not(.eyebrow) { margin: 0; color: #a6b6c5; }
    .plan-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); align-items: stretch; gap: 1rem; }
    .plan-preset-card {
      display: flex;
      min-width: 0;
      flex-direction: column;
      padding: 1.35rem;
      border: 1px solid rgba(158, 183, 202, .17);
      border-radius: 22px;
      background: linear-gradient(150deg, #182633, #101b26);
      box-shadow: 0 15px 32px rgba(0, 0, 0, .15);
    }
    .plan-preset-card.plan-preset-featured { border-color: rgba(73, 211, 229, .55); background: radial-gradient(circle at 90% 0, rgba(25, 199, 232, .12), transparent 15rem), linear-gradient(150deg, #182633, #101b26); }
    .plan-preset-custom { border-color: rgba(73, 211, 229, .42); }
    .plan-preset-card h3 { margin: .35rem 0; color: #f2f7fc; font-size: 1.12rem; line-height: 1.35; }
    .plan-preset-card > p { margin: .25rem 0 .65rem; color: #a6b6c5; font-size: .8rem; }
    .preset-label { color: #63dce9; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .plan-preset-card ul { display: grid; gap: .35rem; margin: .45rem 0 .8rem; padding-left: 1.1rem; color: #c3d0da; font-size: .75rem; }
    .plan-preset-card li::marker { color: #51dce8; }
    .preset-totals { display: grid; gap: .45rem; margin: auto 0 .9rem; padding-top: .75rem; border-top: 1px solid rgba(158, 183, 202, .15); }
    .preset-totals p { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 0; }
    .preset-totals span { color: #9fb1c0; font-size: .72rem; }
    .preset-totals strong { color: #70e2ed; font-size: .84rem; text-align: right; }
    .preset-totals p:first-child strong { color: #80e2b1; }
    .preset-totals small,
    .preset-pricing-note,
    .preset-unavailable-note { color: #93a7b7; font-size: .68rem; line-height: 1.5; }
    .plan-preset-card .cta-btn,
    .plan-preset-card .secondary-btn { align-self: flex-start; margin-top: .35rem; font: inherit; }
    .plan-preset-card button:focus-visible,
    .plan-preset-card a:focus-visible { outline: 2px solid #8cf3e9; outline-offset: 3px; }
    .plan-preset-card .secondary-btn { color: #77e3ed; cursor: pointer; }
    .preset-pricing-note { margin: .85rem auto 0; text-align: center; }
    .builder-help { margin: -.35rem 0 .55rem; color: #94a8b8; font-size: .75rem; }

    .admin-main { max-width: 1240px; }
    .admin-login { display: grid; max-width: 480px; gap: 1rem; margin: 0 auto 3rem; padding: 1.5rem; border: 1px solid rgba(158, 183, 202, .18); border-radius: 20px; background: #111d28; }
    .admin-login[hidden],
    .admin-dashboard[hidden] { display: none; }
    .admin-login label,
    .admin-form label { display: grid; gap: .35rem; color: #c5d2dc; font-size: .78rem; font-weight: 600; }
    .admin-login input,
    .admin-form input:not([type="checkbox"]),
    .admin-form select,
    .admin-form textarea { width: 100%; padding: .7rem .8rem; border: 1px solid rgba(158, 183, 202, .23); border-radius: 10px; background: #0a141e; color: #eaf2f7; font: inherit; }
    .admin-login input:focus,
    .admin-form input:focus,
    .admin-form select:focus,
    .admin-form textarea:focus { outline: 2px solid rgba(66, 208, 228, .65); outline-offset: 1px; }
    .admin-login button { justify-self: start; }
    .admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(158, 183, 202, .17); border-radius: 16px; background: #101b25; }
    .admin-toolbar p:not(.eyebrow) { margin: .2rem 0 0; color: #d7e2eb; font-size: .82rem; }
    .admin-section { margin: 1.2rem 0 2rem; padding: clamp(1rem, 2.5vw, 1.7rem); border: 1px solid rgba(158, 183, 202, .17); border-radius: 20px; background: #101b25; }
    .admin-section-heading h3 { margin: .15rem 0 1rem; color: #f0f6fb; font-size: 1.4rem; }
    .admin-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
    .admin-group-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .admin-form .admin-check { display: flex; align-items: center; align-self: end; gap: .5rem; min-height: 42px; }
    .admin-form .admin-check input,
    .admin-option-list input { accent-color: #49d1e4; }
    .admin-form-actions { display: flex; align-items: end; flex-wrap: wrap; gap: .6rem; }
    .admin-fieldset { grid-column: 1 / -1; min-width: 0; padding: .8rem; border: 1px solid rgba(158, 183, 202, .2); border-radius: 12px; }
    .admin-fieldset:disabled { opacity: .45; }
    .admin-fieldset legend { padding: 0 .35rem; color: #a9bdcb; font-size: .75rem; font-weight: 700; }
    .admin-option-list { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
    .admin-option-list label { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 400; }
    .admin-option-list p { color: #95a9b8; font-size: .75rem; }
    .admin-table-wrap { overflow-x: auto; margin-top: 1.1rem; border: 1px solid rgba(158, 183, 202, .14); border-radius: 12px; }
    .admin-table { width: 100%; border-collapse: collapse; text-align: left; }
    .admin-table th,
    .admin-table td { padding: .65rem .75rem; border-bottom: 1px solid rgba(158, 183, 202, .12); color: #bac8d3; font-size: .72rem; white-space: nowrap; }
    .admin-table th { background: rgba(4, 12, 19, .3); color: #6edce8; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
    .admin-table td strong,
    .admin-table td small { display: block; }
    .admin-table td strong { color: #eef4f8; }
    .admin-table td small { margin-top: .15rem; color: #8398a8; }
    .admin-row-actions { display: flex; gap: .5rem; }
    .admin-row-actions button { padding: .3rem .5rem; border: 1px solid rgba(100, 201, 218, .3); border-radius: 7px; background: transparent; color: #6edce8; cursor: pointer; font: inherit; }
    .admin-row-actions button:last-child { border-color: rgba(223, 115, 130, .28); color: #ef929c; }

    @media (max-width: 900px) {
      .builder-layout { grid-template-columns: minmax(0, 1fr) minmax(240px, 290px); }
      .admin-form,
      .admin-group-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 680px) {
      .plan-builder-heading { align-items: flex-start; flex-direction: column; }
      .builder-layout { grid-template-columns: 1fr; }
      .builder-summary { position: static; }
      .builder-module-grid { grid-template-columns: 1fr; }
      .builder-add-device { width: 100%; }
      .admin-form,
      .admin-group-form { grid-template-columns: 1fr; }
      .admin-toolbar { align-items: flex-start; flex-direction: column; }
    }

    /* ===== Portada: descargas y contenido traído de Jimdo ===== */
    .home-downloads,
    .home-split,
    .home-solution,
    .home-videos,
    .home-clients {
      width: min(1180px, 92%);
      margin: 0 auto;
    }

    .home-downloads {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      padding: .5rem 0 2.5rem;
    }
    .download-card {
      --tone: #2fd0e6;
      --tone-soft: rgba(47, 208, 230, .18);
      display: flex;
      align-items: center;
      gap: 1rem;
      width: 100%;
      padding: 1.25rem 1.35rem;
      border: 1px solid var(--tone-soft);
      border-radius: 22px;
      background:
        radial-gradient(circle at 100% 0, var(--tone-soft), transparent 14rem),
        linear-gradient(145deg, #182430, #101a25);
      color: #f1f7fc;
      font: inherit;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
      transition: transform .18s ease, border-color .18s ease;
    }
    .download-card:hover { transform: translateY(-3px); border-color: var(--tone); }
    .download-card:focus-visible { outline: 2px solid var(--tone); outline-offset: 3px; }
    .download-demo { --tone: #2fb4ea; --tone-soft: rgba(47, 180, 234, .22); }
    .download-update { --tone: #3fd28a; --tone-soft: rgba(63, 210, 138, .2); }
    .download-web { --tone: #a98cff; --tone-soft: rgba(155, 123, 255, .22); }
    .download-icon {
      display: grid;
      width: 48px;
      height: 48px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 14px;
      background: var(--tone-soft);
      color: var(--tone);
      font-size: 1.35rem;
      font-weight: 700;
    }
    .download-copy { display: grid; gap: .1rem; }
    .download-copy strong { font-size: 1rem; line-height: 1.25; }
    .download-copy small { color: var(--tone); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .download-arrow { margin-left: auto; color: var(--tone); font-size: 1.3rem; }

    .sf-dialog {
      width: min(500px, 92vw);
      max-height: 90vh;
      padding: 1.8rem;
      border: 1px solid rgba(166, 187, 207, .2);
      border-radius: 22px;
      background: linear-gradient(145deg, #182430, #111b26);
      color: #eaf2f8;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    }
    .sf-dialog::backdrop { background: rgba(2, 8, 14, .75); }
    .sf-dialog h3 { margin: 0 0 .7rem; color: #5ddcea; font-size: 1.3rem; }
    .sf-dialog h3.sf-title-green { color: #4fdc96; }
    .sf-dialog h3.sf-title-violet { color: #b59cff; }
    .sf-dialog p { margin: 0 0 1rem; color: #b6c5d1; line-height: 1.55; }
    .sf-dialog p b { color: #f1f7fc; }
    .sf-dialog-note { margin-bottom: 1rem; padding: 1rem; border-left: 4px solid; border-radius: 10px; }
    .sf-dialog-note p { margin: 0; }
    .sf-note-wa { border-color: #25d366; background: rgba(37, 211, 102, .08); }
    .sf-note-wa p { margin-bottom: .7rem; }
    .sf-note-alert { border-color: #ef4d5f; background: rgba(239, 77, 95, .1); }
    .sf-note-alert p b { color: #ff9aa4; }
    .sf-wa-btn { display: inline-block; padding: .55rem 1rem; border-radius: 999px; background: #25d366; color: #05210f; font-size: .85rem; font-weight: 700; }
    .sf-check {
      display: flex;
      align-items: flex-start;
      gap: .7rem;
      padding: .8rem 1rem;
      border-radius: 12px;
      background: rgba(255, 255, 255, .05);
      font-size: .88rem;
      font-weight: 600;
      cursor: pointer;
    }
    .sf-check input { width: 18px; height: 18px; margin-top: .15rem; accent-color: #2fd0e6; }
    .sf-small { color: #8ea3b4 !important; font-size: .8rem; }
    .sf-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; margin-top: 1.3rem; }
    .sf-actions-stack { flex-direction: column; }
    .sf-actions-stack > * { text-align: center; }
    .sf-btn-cancel {
      padding: 10px 20px;
      border: 1px solid rgba(166, 187, 207, .3);
      border-radius: 999px;
      background: transparent;
      color: #c9d6e1;
      font: inherit;
      font-weight: 600;
      cursor: pointer;
    }
    .sf-btn-cancel:hover { background: rgba(255, 255, 255, .06); }
    .cta-btn.is-disabled { opacity: .45; pointer-events: none; }
    .cta-btn.sf-btn-green { background: linear-gradient(110deg, #22a865, #4fdc96); }
    .cta-btn.sf-btn-violet { background: linear-gradient(110deg, #6d4ae0, #a98cff); color: #fff !important; }

    .home-split {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
      align-items: center;
      gap: clamp(1.5rem, 4vw, 3.5rem);
      padding: 2rem 0 3.5rem;
    }
    .home-founder { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .home-split h2 { margin: .3rem 0 .8rem; color: #f4f8fc; font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.15; letter-spacing: -.04em; }
    .home-split p:not(.eyebrow) { color: #a9bac9; }
    .home-split p b { color: #f1f7fc; }
    .home-split-media { margin: 0; text-align: center; }
    .home-split-media img { width: 100%; max-width: 460px; height: auto; border-radius: 24px; }
    .home-founder .home-split-media img { border: 1px solid rgba(150, 182, 207, .2); box-shadow: 0 20px 48px rgba(0, 0, 0, .3); }
    .home-split-media figcaption { margin-top: .4rem; color: #69dce8; font-weight: 700; }
    .pain-list { display: grid; gap: .6rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
    .pain-list li {
      position: relative;
      padding: .8rem 1rem .8rem 2.8rem;
      border: 1px solid rgba(255, 184, 28, .25);
      border-radius: 14px;
      background: rgba(255, 184, 28, .06);
      color: #f1e3c4;
      font-weight: 600;
    }
    .pain-list li::before { content: "⚠"; position: absolute; left: 1rem; color: #ffb81c; }

    .home-solution { padding: 1rem 0 1.5rem; text-align: center; }
    .home-solution .page-heading { margin-bottom: 1.5rem; }
    .home-wide-img { width: 100%; max-width: 900px; height: auto; border: 1px solid rgba(150, 182, 207, .2); border-radius: 24px; box-shadow: 0 20px 48px rgba(0, 0, 0, .3); }
    .home-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 1.5rem; }

    .home-videos { padding: 2rem 0 3.5rem; }
    .home-videos .page-heading { margin-bottom: 1.7rem; }
    .video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
    .video-grid-vertical { grid-template-columns: repeat(2, minmax(0, 300px)) minmax(0, 1fr); align-items: center; margin-top: 1rem; }
    .video-card {
      margin: 0;
      overflow: hidden;
      border: 1px solid rgba(166, 187, 207, .16);
      border-radius: 22px;
      background: linear-gradient(145deg, #182430, #111b26);
    }
    .video-frame { position: relative; aspect-ratio: 16 / 9; background: #050d16; }
    .video-frame-vertical { aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid rgba(166, 187, 207, .16); border-radius: 22px; }
    .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .video-card figcaption { display: grid; gap: .2rem; padding: 1rem 1.2rem 1.2rem; color: #a6b6c5; font-size: .88rem; }
    .video-card figcaption strong { color: #f1f7fc; font-size: 1rem; }
    .social-card {
      padding: clamp(1.4rem, 3vw, 2.2rem);
      border: 1px solid rgba(166, 187, 207, .16);
      border-radius: 22px;
      background:
        radial-gradient(circle at 100% 0, rgba(22, 190, 221, .16), transparent 18rem),
        linear-gradient(145deg, #172936, #101a25);
    }
    .social-card h3 { margin: .3rem 0 .6rem; color: #f1f7fc; font-size: 1.5rem; }
    .social-card p:not(.eyebrow) { color: #a6b6c5; }

    .home-clients { padding: 1rem 0 3.5rem; }
    .home-clients .page-heading { margin-bottom: 1.7rem; }
    .quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
    .quote-grid blockquote {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0;
      padding: 1.6rem;
      border: 1px solid rgba(166, 187, 207, .16);
      border-radius: 22px;
      background: linear-gradient(145deg, #182430, #111b26);
    }
    .quote-grid blockquote p { margin: 0 0 1.2rem; color: #dce7f0; font-size: 1.02rem; }
    .quote-grid footer { display: grid; margin: 0; padding: 0; background: none; color: #8ea3b4; font-size: .82rem; text-align: left; }
    .quote-grid footer strong { color: #5ddcea; font-size: .95rem; }
    .chat-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
    .chat-gallery img { width: auto; max-width: 100%; height: 300px; object-fit: contain; border-radius: 18px; box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }
    .chat-strip { display: block; width: 100%; max-width: 812px; height: auto; margin: 1rem auto 0; border-radius: 14px; }

    @media (max-width: 940px) {
      .home-downloads,
      .quote-grid,
      .video-grid { grid-template-columns: 1fr; }
      .home-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .video-grid-vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .social-card { grid-column: 1 / -1; }
      .home-split,
      .home-founder { grid-template-columns: 1fr; }
      .home-founder .home-split-media { order: 2; }
    }

    @media (max-width: 640px) {
      .home-highlights { grid-template-columns: 1fr; }
      .chat-gallery img { height: auto; }
      #tw[data-home-tutorial] .tw-stage { min-height: 320px; }
    }