*,
    *::before,
    *::after{
      box-sizing:border-box;
    }

    :root{
      --bg: #ffffff;
      --surface: #ffffff;
      --muted: #6b7280;
      --text: #111827;
      --border: rgba(15, 23, 42, .10);

      --p1: #6d28d9;   /* purple */
      --p2: #db2777;   /* pink */
      --p3: #2563eb;   /* blue */
      --p4: #06b6d4;   /* cyan */

      --shadow: 0 18px 55px rgba(2, 6, 23, .10);
      --shadow2: 0 10px 30px rgba(2, 6, 23, .08);
      --r: 18px;
    }

    html {
      scroll-behavior: smooth;
      max-width: 100%;
      overflow-x: hidden;
    }
    body{
      margin:0;
      background: var(--bg);
      color: var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      max-width: 100%;
      overflow-x: hidden;
    }
    a{
      color:inherit;
      text-decoration:none;
    }
    img,
    svg{
      display:block;
      max-width:100%;
    }
    button,
    input,
    select,
    textarea{
      font:inherit;
      color:inherit;
    }

    /* Lightweight Bootstrap subset for landing only */
    .container{
      width:min(100% - 2rem, 1200px);
      margin-inline:auto;
    }
    .row{
      --gx: 0;
      --gy: 0;
      display:flex;
      flex-wrap:wrap;
      margin-top:calc(var(--gy) * -1);
      margin-inline:calc(var(--gx) * -.5);
    }
    .row > *{
      width:100%;
      max-width:100%;
      margin-top:var(--gy);
      padding-inline:calc(var(--gx) * .5);
      flex:0 0 auto;
      min-width:0;
    }
    .g-2{ --gx:.5rem; --gy:.5rem; }
    .g-3{ --gx:1rem; --gy:1rem; }
    .g-4{ --gx:1.5rem; --gy:1.5rem; }
    .g-md-0{ --gx:0; --gy:0; }

    .col-6{ width:50%; }
    .col-12{ width:100%; }

    @media (min-width: 768px){
      .container{ width:min(100% - 2.5rem, 1200px); }
      .col-md-3{ width:25%; }
      .col-md-4{ width:33.333333%; }
      .col-md-6{ width:50%; }
      .d-md-block{ display:block !important; }
      .flex-md-row{ flex-direction:row !important; }
      .align-items-md-center{ align-items:center !important; }
      .p-md-4{ padding:1.5rem !important; }
      .g-md-0{ --gx:0; --gy:0; }
    }
    @media (min-width: 992px){
      .col-lg-2{ width:16.666667%; }
      .col-lg-4{ width:33.333333%; }
      .col-lg-6{ width:50%; }
      .col-lg-9{ width:75%; }
      .align-items-lg-center{ align-items:center !important; }
      .gap-lg-2{ gap:.5rem !important; }
      .ms-lg-2{ margin-inline-start:.5rem !important; }
    }

    .d-flex{ display:flex !important; }
    .d-none{ display:none !important; }
    .flex-column{ flex-direction:column !important; }
    .flex-wrap{ flex-wrap:wrap !important; }
    .justify-content-between{ justify-content:space-between !important; }
    .justify-content-center{ justify-content:center !important; }
    .align-items-center{ align-items:center !important; }
    .align-items-start{ align-items:flex-start !important; }
    .align-items-stretch{ align-items:stretch !important; }
    .gap-1{ gap:.25rem !important; }
    .gap-2{ gap:.5rem !important; }
    .gap-3{ gap:1rem !important; }
    .lh-sm{ line-height:1.25 !important; }
    .h-100{ height:100% !important; }
    .position-relative{ position:relative !important; }
    .text-center{ text-align:center !important; }
    .text-secondary{ color:var(--muted) !important; }
    .text-white{ color:#fff !important; }
    .opacity-75{ opacity:.75 !important; }
    .fw-bold{ font-weight:700 !important; }
    .small, small{ font-size:.875rem !important; }
    .m-0{ margin:0 !important; }
    .mb-0{ margin-bottom:0 !important; }
    .mb-2{ margin-bottom:.5rem !important; }
    .mb-3{ margin-bottom:1rem !important; }
    .mb-4{ margin-bottom:1.5rem !important; }
    .mt-3{ margin-top:1rem !important; }
    .mt-4{ margin-top:1.5rem !important; }
    .mt-5{ margin-top:3rem !important; }
    .ms-1{ margin-inline-start:.25rem !important; }
    .ms-2{ margin-inline-start:.5rem !important; }
    .ms-auto{ margin-inline-start:auto !important; }
    .my-3{
      margin-top:1rem !important;
      margin-bottom:1rem !important;
    }
    .p-3{ padding:1rem !important; }
    .p-4{ padding:1.5rem !important; }
    .px-3{
      padding-inline:1rem !important;
    }
    .px-4{
      padding-inline:1.5rem !important;
    }
    .py-2{
      padding-top:.5rem !important;
      padding-bottom:.5rem !important;
    }
    .rounded-pill{ border-radius:999px !important; }
    .border{ border:1px solid var(--border) !important; }
    .border-0{ border:0 !important; }
    .badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.35rem .6rem;
      border-radius:999px;
      font-size:.75rem;
      font-weight:700;
      line-height:1;
    }
    .text-bg-light{
      color:#374151 !important;
      background:#f8fafc !important;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      min-height:42px;
      padding:.65rem 1rem;
      border-radius:14px;
      border:1px solid transparent;
      background:#fff;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
      text-align:center;
      font-weight:600;
      line-height:1.2;
    }
    .btn:hover{ transform:translateY(-1px); }
    .btn-lg{
      min-height:50px;
      padding:.85rem 1.35rem;
      font-size:1rem;
    }
    .btn-sm{
      min-height:36px;
      padding:.45rem .85rem;
      font-size:.875rem;
    }
    .btn-outline-dark{
      border-color:rgba(15, 23, 42, .16);
      color:#111827 !important;
      background:#fff;
    }
    .btn-outline-light{
      border-color:rgba(255,255,255,.2);
      color:#fff !important;
      background:transparent;
    }
    .form-select{
      display:block;
      width:100%;
    }
    .navbar{
      position:relative;
      width:100%;
    }
    .navbar > .container{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
    }
    .navbar-brand{
      display:inline-flex;
      align-items:center;
      flex-shrink:0;
    }
    .navbar-nav{
      display:flex;
      flex-direction:column;
      padding-left:0;
      margin:0;
      list-style:none;
    }
    .nav-item{ list-style:none; }
    .navbar-collapse{
      width:100%;
    }


    /* Soft background blobs */
    .bg-blob{
      position: fixed;
      inset: auto;
      width: 780px;
      height: 780px;
      filter: blur(60px);
      opacity: .22;
      z-index: 0;
      pointer-events: none;
    }
    .blob-1{
      top: -320px; left: -260px;
      background: radial-gradient(circle at 30% 30%, var(--p1), transparent 55%),
                  radial-gradient(circle at 60% 60%, var(--p4), transparent 55%);
    }
    .blob-2{
      top: -280px; right: -280px;
      background: radial-gradient(circle at 40% 40%, var(--p2), transparent 55%),
                  radial-gradient(circle at 70% 70%, var(--p3), transparent 55%);
    }

    /* Navbar */
    .nav-wrap{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      overflow-x: hidden;
    }
    .brand-mark{
      width: 34px; height: 34px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--p1), var(--p2));
      display: grid;
      place-items: center;
      box-shadow: 0 14px 34px rgba(109, 40, 217, .22);
    }
    .brand-mark .landing-icon{ color:#fff; width:16px; height:16px; }
    .landing-icon{
      width: 1.05rem;
      height: 1.05rem;
      flex: 0 0 auto;
      vertical-align: middle;
      display: inline-block;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      min-height:44px;
      padding:.6rem .35rem;
      color: #374151 !important;
      font-weight: 500;
    }
    .nav-link:hover{ color: #111827 !important; }
    .landing-toggler{
      width: 64px;
      height: 50px;
      border-radius: 14px;
      border: 1px solid rgba(15, 23, 42, .16);
      background: rgba(255,255,255,.96);
      box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
      padding: 0;
    }
    .landing-toggler:focus{
      box-shadow: 0 0 0 4px rgba(109, 40, 217, .12);
    }
    .landing-toggler .navbar-toggler-icon{
      display:grid;
      place-items:center;
      width: 26px;
      height: 26px;
      margin:auto;
      color:#475569;
    }
    .landing-toggler .navbar-toggler-icon .landing-icon{
      width: 24px;
      height: 24px;
    }

    .btn-grad{
      border: 0;
      color: #fff !important;
      font-weight: 700;
      background: linear-gradient(135deg, var(--p1), var(--p2));
      box-shadow: 0 14px 28px rgba(109, 40, 217, .18);
    }
    .btn-grad:hover{ filter: brightness(1.04); }
    .landing-lang-form{
      margin:0;
    }
    .landing-lang-wrap{
      position:relative;
      min-width:136px;
    }
    .landing-lang-select{
      min-width: 136px;
      height: 42px;
      padding: .45rem 2.1rem .45rem .85rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.92);
      color: #374151;
      font-weight: 600;
      font-size: .96rem;
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
    }
    .landing-lang-caret{
      position:absolute;
      right:14px;
      top:50%;
      transform:translateY(-50%);
      color:#6b7280;
      font-size:.9rem;
      pointer-events:none;
    }
    .landing-nav-panel{
      flex-basis:100%;
    }

    /* Hero */
    .hero{
      position: relative;
      padding: 4.2rem 0 2.5rem;
      z-index: 1;
      overflow-x: hidden;
    }
    .hero h1{
      font-size: clamp(2.4rem, 4.2vw, 4.2rem);
      line-height: 1.06;
      letter-spacing: -0.03em;
      font-weight: 800;
    }
    .hero h1 .grad{
      background: linear-gradient(135deg, var(--p1), var(--p2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .hero p{
      color: var(--muted);
      font-size: 1.1rem;
      max-width: 58ch;
    }

    /* Cards */
    .cardx{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      box-shadow: var(--shadow2);
    }
    .mini{
      border-radius: 16px;
      padding: 1.1rem 1.1rem;
    }
    .icon-pill{
      width: 46px; height: 46px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(109,40,217,.12), rgba(219,39,119,.10));
      border: 1px solid rgba(109,40,217,.16);
      color: #4c1d95;
    }
    .icon-pill .landing-icon{
      width: 20px;
      height: 20px;
    }

    /* Illustration panel */
    .hero-panel{
      border-radius: 22px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(17,24,39,.03), rgba(17,24,39,.01));
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .hero-panel .topbar{
      height: 44px;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,.7);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 .9rem;
    }
    .dotset{ display:flex; gap:.35rem; }
    .dotset span{
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(17,24,39,.15);
    }
    .kbd{
      font-size: .82rem;
      color: rgba(17,24,39,.6);
      border: 1px solid var(--border);
      padding: .18rem .55rem;
      border-radius: 10px;
      background: rgba(255,255,255,.65);
    }
    .codebox{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: .92rem;
      background: #0b1220;
      color: rgba(255,255,255,.90);
      border-radius: 14px;
      padding: 1rem;
      max-width: 100%;
      overflow: auto;
      white-space: nowrap;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }
    .chip{
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .38rem .75rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.75);
      color: #111827;
      font-weight: 600;
      font-size: .9rem;
    }
    .chip .landing-icon{ color: var(--p1); }

    /* Sections */
    .section{
      position: relative;
      padding: 4.5rem 0;
      z-index: 1;
      overflow-x: hidden;
    }
    .section-title{
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: .4rem;
    }
    .section-sub{
      color: var(--muted);
      margin-bottom: 0;
    }
    .muted{ color: var(--muted); }

    .soft{
      background: linear-gradient(180deg, rgba(109,40,217,.04), rgba(219,39,119,.03));
      border-top: 1px solid rgba(109,40,217,.10);
      border-bottom: 1px solid rgba(109,40,217,.10);
    }

    .illus{
      border-radius: 22px;
      border: 1px solid var(--border);
      background: #fff;
      box-shadow: var(--shadow2);
      padding: 1.25rem;
      min-height: 320px;
      display: grid;
      place-items: center;
    }
    .illus svg{ width: 100%; height: auto; max-height: 320px; }

    /* Reveal on scroll */
    .reveal{
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.in{
      opacity: 1;
      transform: translateY(0);
    }

    /* Stats */
    .stat{
      text-align: center;
      padding: 1.25rem;
    }
    .stat .num{
      font-size: 2rem;
      font-weight: 900;
      letter-spacing: -0.02em;
    }
    .stat .lab{ color: var(--muted); }

    /* FAQ */
    .accordion-button{
      width:100%;
      display:flex;
      align-items:center;
      gap:.75rem;
      padding:1rem 1.25rem;
      border:0;
      background:#fff;
      color:inherit;
      text-align:left;
      font-weight: 700;
      cursor:pointer;
    }
    .accordion-button::after{
      content:"";
      width:.7rem;
      height:.7rem;
      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;
      transform:rotate(45deg);
      transition:transform .2s ease;
      margin-left:auto;
      flex:0 0 auto;
    }
    .accordion-button[aria-expanded="true"]::after{
      transform:rotate(225deg);
    }
    .landing-accordion-panel[hidden]{
      display:none !important;
    }
    .accordion-body{
      padding:0 1.25rem 1.25rem;
    }

    /* Footer */
    .footer{
      background: #0b1220;
      color: rgba(255,255,255,.78);
      padding: 3rem 0 2rem;
      position: relative;
      z-index: 1;
      overflow-x: hidden;
    }
    .footer a{ color: rgba(255,255,255,.78); text-decoration: none; }
    .footer a:hover{ color: #fff; }
    .footer .small a{
      display:inline-flex;
      align-items:center;
      min-height:44px;
    }
    .footer .hr{
      border-top: 1px solid rgba(255,255,255,.10);
      margin: 1.5rem 0;
    }
    .share-link{
      --brand-hover: rgba(255,255,255,.12);
      --brand-border: rgba(255,255,255,.16);
      --brand-color: rgba(255,255,255,.92);
      transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
    }
    .share-link .landing-icon{
      width:.95rem;
      height:.95rem;
      color:currentColor;
    }
    .share-link:hover{
      color:var(--brand-color) !important;
      border-color:var(--brand-border);
      background:var(--brand-hover);
      box-shadow:0 10px 22px rgba(2, 6, 23, .22);
      transform:translateY(-1px);
    }
    .share-link.linkedin{
      --brand-hover: rgba(10, 102, 194, .18);
      --brand-border: rgba(10, 102, 194, .38);
      --brand-color: #dbeafe;
    }
    .share-link.x{
      --brand-hover: rgba(255,255,255,.10);
      --brand-border: rgba(255,255,255,.28);
      --brand-color: #ffffff;
    }
    .share-link.facebook{
      --brand-hover: rgba(24, 119, 242, .18);
      --brand-border: rgba(24, 119, 242, .38);
      --brand-color: #dbeafe;
    }

    /* Floating button */
    .float-cta{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 80;
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--p1), var(--p2));
      box-shadow: 0 18px 40px rgba(109,40,217,.25);
      color: #fff;
      border: 0;
      text-decoration: none;
    }
    .float-cta:hover{ filter: brightness(1.05); color:#fff; }

    @media (max-width: 1199.98px){
      .bg-blob{
        display:none;
      }
      .nav-wrap .container{
        max-width:100%;
      }
      .nav-wrap .navbar{
        padding:0;
      }
      .nav-wrap .navbar > .container{
        align-items:center;
      }
      .nav-wrap .navbar-collapse{
        display:none;
        margin-top:.85rem;
        padding:1rem 0 .55rem;
        border-top:1px solid var(--border);
      }
      .landing-nav-panel.is-open{
        display:block;
      }
      .nav-wrap .navbar-nav{
        align-items:flex-start !important;
        gap:0 !important;
      }
      .nav-wrap .navbar-nav .nav-item{
        width:100%;
      }
      .nav-wrap .navbar-nav .nav-link{
        display:inline-block;
        padding:.55rem 0;
      }
      .nav-wrap .navbar-nav .nav-item.ms-lg-2{
        margin-top:.8rem;
        margin-left:0 !important;
      }
      .nav-wrap .navbar-nav .btn{
        display:inline-flex;
        justify-content:center;
        width:100%;
        min-height:44px;
      }
      .landing-lang-wrap{
        min-width:100%;
        width:100%;
      }
      .landing-lang-select{
        min-width:100%;
        max-width:none;
        width:100%;
      }
      .nav-wrap .landing-lang-form{
        display:block;
        width:100%;
      }
      .container,
      .hero-panel,
      .cardx,
      .illus,
      .accordion,
      .accordion-item{
        max-width:100%;
      }
      .hero-panel .p-4,
      #contact .cardx.p-4{
        padding:1rem !important;
      }
      .hero-panel .d-flex.justify-content-between,
      #contact .cardx .d-flex.justify-content-between{
        flex-wrap:wrap;
        align-items:flex-start !important;
        gap:.5rem;
      }
      .codebox{
        font-size:.84rem;
        white-space:pre-wrap;
        overflow-wrap:anywhere;
        word-break:break-word;
      }
      .float-cta{
        right:max(14px, env(safe-area-inset-right));
        bottom:max(14px, env(safe-area-inset-bottom));
      }
    }

    @media (min-width: 1200px){
      .landing-toggler{
        display:none;
      }
      .nav-wrap .navbar-collapse{
        display:flex !important;
        width:auto;
        flex-basis:auto;
        align-items:center;
      }
      .nav-wrap .navbar-nav{
        flex-direction:row;
        align-items:center;
      }
    }

    @media (max-width: 575.98px){
      .container,
      .hero-panel,
      .cardx,
      .illus,
      .accordion,
      .accordion-item{
        max-width:100%;
      }
      .landing-lang-wrap{
        min-width:120px;
      }
      .landing-lang-select{
        min-width:120px;
        max-width:120px;
        padding-right:1.9rem;
      }
      .hero-panel .p-4,
      #contact .cardx.p-4{
        padding:1rem !important;
      }
      .hero-panel .d-flex.justify-content-between,
      #contact .cardx .d-flex.justify-content-between{
        flex-wrap:wrap;
        align-items:flex-start !important;
        gap:.5rem;
      }
      .hero .chip,
      .footer .chip{
        max-width:100%;
      }
      .codebox{
        font-size:.82rem;
        white-space:pre-wrap;
        overflow-wrap:anywhere;
        word-break:break-word;
      }
      .float-cta{
        right:max(12px, env(safe-area-inset-right));
        bottom:max(12px, env(safe-area-inset-bottom));
        width:48px;
        height:48px;
        border-radius:16px;
      }
    }