:root{
      --max: 1200px;
      --pad: 16px;
      --bp-desktop: 960px;

      --r-xl: 28px;
      --r-lg: 20px;
      --r-md: 16px;

      --ease: cubic-bezier(.2,.8,.2,1);

      --shadow-xl: 0 28px 90px rgba(0,0,0,.55);
      --shadow-lg: 0 18px 60px rgba(0,0,0,.45);
      --shadow-md: 0 10px 30px rgba(0,0,0,.32);

      /* Default theme: dark */
      --bg: #070b14;
      --bg2:#0b1220;
      --surface: rgba(255,255,255,.08);
      --surface2: rgba(255,255,255,.10);
      --glass: rgba(255,255,255,.10);

      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);
      --muted2: rgba(255,255,255,.56);
      --line: rgba(255,255,255,.12);

      --teal:#19e6c7;
      --sky:#3dd7ff;
      --sand:#e7c28a;

      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    [data-theme="light"]{
      --bg: #f6f7fb;
      --bg2:#eef2fb;
      --surface: rgba(255,255,255,.86);
      --surface2: rgba(255,255,255,.94);
      --glass: rgba(255,255,255,.70);

      --text: rgba(10,16,32,.94);
      --muted: rgba(10,16,32,.72);
      --muted2: rgba(10,16,32,.56);
      --line: rgba(10,16,32,.10);

      --shadow-xl: 0 28px 90px rgba(12,18,35,.14);
      --shadow-lg: 0 18px 60px rgba(12,18,35,.12);
      --shadow-md: 0 10px 30px rgba(12,18,35,.10);
    }

    [data-theme="desert"]{
      --bg:#fbf3e8;
      --bg2:#f5e7d6;
      --surface: rgba(255,255,255,.84);
      --surface2: rgba(255,255,255,.92);
      --glass: rgba(255,255,255,.66);

      --text: rgba(34,24,14,.92);
      --muted: rgba(34,24,14,.70);
      --muted2: rgba(34,24,14,.56);
      --line: rgba(34,24,14,.12);

      --teal:#0fbda6;
      --sky:#39c8ef;
      --sand:#e8ba75;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: "Alef", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(900px 600px at 85% -10%, color-mix(in srgb, var(--sky) 18%, transparent), transparent 62%),
        radial-gradient(820px 520px at 12% 10%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
      overflow-x:hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }
    .container{ width:min(var(--max), calc(100% - (var(--pad) * 2))); margin:0 auto; }
    section{ scroll-margin-top: 92px; }

    /* ---------------- Topbar ---------------- */
    .topbar{
      position:fixed;
      inset-inline:0;
      top:0;
      z-index:50;
      padding: calc(12px + var(--safe-top)) 0 12px;
      border-bottom: 1px solid transparent;
      transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), backdrop-filter .2s var(--ease);
    }
    .topbar.scrolled{
      background: color-mix(in srgb, var(--surface2) 70%, transparent);
      backdrop-filter: blur(12px);
      border-bottom-color: var(--line);
      box-shadow: 0 12px 34px rgba(0,0,0,.18);
    }

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 0;
    }
    .brand-badge{
      width:42px;height:42px;
      border-radius:14px;
      border:1px solid var(--line);
      background:
        radial-gradient(18px 18px at 28% 36%, color-mix(in srgb, var(--teal) 88%, #fff 0%), color-mix(in srgb, var(--sky) 14%, transparent)),
        color-mix(in srgb, var(--surface) 88%, transparent);
      box-shadow: var(--shadow-md);
      position:relative;
      overflow:hidden;
      flex:0 0 auto;
    }
    .brand-badge::after{
      content:"";
      position:absolute; inset:-55%;
      background: conic-gradient(from 90deg, rgba(0,0,0,0), color-mix(in srgb, var(--teal) 24%, transparent), rgba(0,0,0,0));
      opacity:.55;
      animation: spin 12s linear infinite;
    }
    @keyframes spin { to{ transform: rotate(360deg);} }

    .brand-text{ min-width:0; }
    .brand-text b{
      display:block;
      font-size:14px;
      letter-spacing:.2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-text span{
      display:block;
      margin-top:2px;
      font-size:12px;
      color: var(--muted2);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    /* Desktop nav (hidden by default; shown >= bp) */
    .navlinks-desktop{
      display:none;
      align-items:center;
      gap:10px;
    }
    .navlinks-desktop a{
      font-size:13px;
      color: var(--muted);
      padding:8px 10px;
      border-radius: 12px;
      border:1px solid transparent;
      transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
    }
    .navlinks-desktop a:hover{
      color: var(--text);
      background: color-mix(in srgb, var(--surface2) 70%, transparent);
      border-color: var(--line);
    }

    .actions{
      display:flex;
      align-items:center;
      gap:10px;
      justify-content:flex-end;
    }

    .btn{
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 86%, transparent);
      color: var(--text);
      padding:10px 12px;
      border-radius: 14px;
      font-size:13px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:8px;
      box-shadow: var(--shadow-md);
      transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
      min-height:44px;
      white-space:nowrap;
      user-select:none;
    }
    .btn:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow-lg);
      border-color: color-mix(in srgb, var(--teal) 25%, var(--line));
      background: color-mix(in srgb, var(--surface2) 86%, transparent);
    }
    .btn-primary{
      border-color: color-mix(in srgb, var(--teal) 35%, var(--line));
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--teal) 18%, transparent),
        color-mix(in srgb, var(--sky) 14%, transparent)
      );
    }
    .icon-btn{ width:44px;height:44px; padding:0; justify-content:center; }

    .dots{
      width:18px;height:18px;
      background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--teal) 80%, transparent) 0 35%, transparent 36%),
        radial-gradient(circle at 70% 35%, color-mix(in srgb, var(--sky) 75%, transparent) 0 35%, transparent 36%),
        radial-gradient(circle at 45% 75%, color-mix(in srgb, var(--sand) 70%, transparent) 0 35%, transparent 36%);
      filter: saturate(1.1);
    }

    /* Desktop social (hidden by default; shown >= bp) */
    .social-desktop{
      display:none;
      gap:8px;
    }
    .social-desktop a{
      width:44px;height:44px;
      border-radius:14px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 86%, transparent);
      box-shadow: var(--shadow-md);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
    }
    .social-desktop a:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow-lg);
      border-color: color-mix(in srgb, var(--teal) 25%, var(--line));
    }
    .social-desktop svg{ width:18px;height:18px; fill: color-mix(in srgb, var(--text) 85%, transparent); }

    /* Mobile menu button: shown by default; hidden >= bp */
    .menu-btn{
      width:44px;height:44px;
      border-radius:14px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 86%, transparent);
      box-shadow: var(--shadow-md);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition: transform .16s var(--ease), box-shadow .16s var(--ease);
    }
    .menu-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-lg); }
    .burger{ width:18px;height:12px; position:relative; }
    .burger span{
      position:absolute; left:0; right:0;
      height:2px; border-radius:2px;
      background: color-mix(in srgb, var(--text) 85%, transparent);
    }
    .burger span:nth-child(1){ top:0; }
    .burger span:nth-child(2){ top:5px; opacity:.85; }
    .burger span:nth-child(3){ bottom:0; opacity:.7; }

    /* ---------------- Drawer ---------------- */
    .backdrop{
      position:fixed; inset:0;
      background: rgba(0,0,0,.45);
      opacity:0;
      pointer-events:none;
      transition: opacity .2s var(--ease);
      z-index:60;
    }
    .drawer{
      position:fixed;
      top:0; bottom:0;
      inset-inline-end:0;
      width: min(360px, 88vw);
      transform: translateX(110%);
      transition: transform .24s var(--ease);
      z-index:70;
      border-inline-start:1px solid var(--line);
      background: color-mix(in srgb, var(--surface2) 78%, transparent);
      backdrop-filter: blur(14px);
      box-shadow: -30px 0 90px rgba(0,0,0,.35);
      padding: calc(16px + var(--safe-top)) 14px calc(16px + var(--safe-bottom));
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .drawer.open{ transform: translateX(0); }
    .backdrop.open{ opacity:1; pointer-events:auto; }

    .drawer-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }
    .close-btn{
      width:44px;height:44px;
      border-radius:14px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 86%, transparent);
      box-shadow: var(--shadow-md);
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .x{ width:18px;height:18px; position:relative; }
    .x::before,.x::after{
      content:"";
      position:absolute; inset:0; margin:auto;
      width:18px;height:2px;border-radius:2px;
      background: color-mix(in srgb, var(--text) 85%, transparent);
    }
    .x::before{ transform: rotate(45deg); }
    .x::after{ transform: rotate(-45deg); }

    .drawer-nav{
      display:grid;
      gap:8px;
      padding-top: 6px;
    }
    .drawer-nav a{
      padding: 12px 12px;
      border-radius: 16px;
      border:1px solid transparent;
      background: color-mix(in srgb, var(--surface2) 70%, transparent);
      transition: transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
    }
    .drawer-nav a:hover{
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--teal) 22%, var(--line));
      background: color-mix(in srgb, var(--surface2) 82%, transparent);
    }

    .drawer-social{
      display:flex;
      gap:10px;
      margin-top: 4px;
    }
    .drawer-social a{ flex:1; justify-content:center; }

    .drawer-bottom{ margin-top:auto; display:grid; gap:10px; }

    /* ---------------- Hero ---------------- */
    .hero{
      min-height: 82vh;
      padding-top: 88px;
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }
    .hero-bg{
      position:absolute;
      inset:-2%;
      background: url("https://sites.kindix.me/bedaya-tech/wp-content/uploads/sites/94/2026/02/bdtech-bg.png") center right / cover no-repeat;
      transform: translate3d(0,0,0) scale(1.05);
      filter: saturate(1.10) contrast(1.05) brightness(1.02);
      z-index:-6;
      will-change: transform;
    }
    .hero-overlay{
      position:absolute; inset:0; z-index:-5;
      background:
        radial-gradient(900px 520px at 80% 45%, rgba(255,255,255,.08), transparent 70%),
        linear-gradient(90deg,
          color-mix(in srgb, var(--bg) 88%, transparent) 0%,
          color-mix(in srgb, var(--bg) 70%, transparent) 30%,
          rgba(0,0,0,0) 60%,
          rgba(0,0,0,.58) 100%);
    }
    [data-theme="light"] .hero-overlay,
    [data-theme="desert"] .hero-overlay{
      background:
        radial-gradient(900px 520px at 80% 45%, rgba(255,255,255,.18), transparent 70%),
        linear-gradient(90deg,
          color-mix(in srgb, var(--bg) 92%, transparent) 0%,
          color-mix(in srgb, var(--bg) 72%, transparent) 34%,
          rgba(255,255,255,0) 62%,
          rgba(0,0,0,.24) 100%);
    }

    .cactus-layer{
      position:absolute;
      inset:0;
      z-index:-4;
      pointer-events:none;
      opacity:.18;
      mix-blend-mode: screen;
    }
    [data-theme="light"] .cactus-layer,
    [data-theme="desert"] .cactus-layer{ mix-blend-mode: multiply; opacity:.22; }
    .cactus{
      position:absolute;
      inset-inline-end: 6%;
      bottom: 10%;
      width: min(420px, 70vw);
      filter: drop-shadow(0 18px 50px rgba(0,0,0,.55));
      animation: cactusFloat 6.5s ease-in-out infinite;
      transform-origin: 50% 70%;
    }
    @keyframes cactusFloat{
      0%,100%{ transform: translateY(0) rotate(-.4deg); }
      50%{ transform: translateY(-10px) rotate(.4deg); }
    }

    .grain{
      position:absolute; inset:0; z-index:-1; pointer-events:none;
      opacity:.10;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
    }

    .hero-inner{
      padding: 28px 0 22px;
      display:grid;
      gap: 16px;
      grid-template-columns: 1fr;
      align-items:start;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--surface2) 70%, transparent);
      color: var(--muted);
      font-size: 12.5px;
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(10px);
      width: fit-content;
    }
    .dot{
      width:8px;height:8px;border-radius:999px;
      background: var(--teal);
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--teal) 14%, transparent), 0 0 22px color-mix(in srgb, var(--teal) 18%, transparent);
    }
    h1{
      margin: 14px 0 10px;
      font-size: clamp(34px, 7vw, 64px);
      line-height: 1.03;
      letter-spacing: -1px;
    }
    .lead{
      margin: 0;
      color: var(--muted);
      font-size: 16.2px;
      line-height: 1.85;
      max-width: 70ch;
    }
    .hero-cta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top: 14px;
    }

    /* (3) HERO stats: default mobile = 1 col; desktop = 3 in one row */
    .stats{
      margin-top: 18px;
      display:grid;
      gap: 10px;
      grid-template-columns: 1fr; /* mobile */
    }
    .stat{
      border:1px solid var(--line);
      border-radius: var(--r-md);
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      box-shadow: var(--shadow-md);
      padding: 12px 14px;
      backdrop-filter: blur(10px);
    }
    .stat b{ display:block; font-size:15px; margin-bottom:2px; }
    .stat span{ display:block; font-size:12.8px; color: var(--muted2); line-height:1.55; }

    .hero-card{
      border:1px solid var(--line);
      border-radius: var(--r-xl);
      background:
        radial-gradient(520px 320px at 20% 10%, color-mix(in srgb, var(--sky) 16%, transparent), transparent 60%),
        radial-gradient(520px 320px at 78% 75%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 60%),
        color-mix(in srgb, var(--glass) 92%, transparent);
      box-shadow: var(--shadow-xl);
      overflow:hidden;
      backdrop-filter: blur(14px);
    }
    .hero-card-h{
      padding: 16px 16px 12px;
      border-bottom: 1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }
    .tag{
      font-size: 12px;
      color: var(--muted);
      padding: 7px 10px;
      border-radius: 999px;
      border:1px solid color-mix(in srgb, var(--teal) 22%, var(--line));
      background: color-mix(in srgb, var(--teal) 10%, transparent);
    }
    .pulse{
      width:10px;height:10px;border-radius:999px;
      background: color-mix(in srgb, var(--teal) 92%, #fff 0%);
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 30%, transparent);
      animation: pulse 2.2s ease-out infinite;
    }
    @keyframes pulse{
      0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 30%, transparent); }
      70%{ box-shadow: 0 0 0 18px rgba(0,0,0,0); }
      100%{ box-shadow: 0 0 0 0 rgba(0,0,0,0); }
    }
    .hero-card-b{ padding: 14px 16px 16px; }
    .grid2{ display:grid; gap: 10px; grid-template-columns: 1fr; }
    .mini{
      border:1px solid var(--line);
      border-radius: var(--r-lg);
      background: color-mix(in srgb, var(--surface2) 76%, transparent);
      box-shadow: var(--shadow-md);
      padding: 12px;
    }
    .mini h3{ margin:0 0 6px; font-size: 13.6px; }
    .mini p{ margin:0; font-size: 12.8px; color: var(--muted2); line-height: 1.65; }

    /* Mobile text centering */
    @media (max-width: 959px){
      .hero-inner{ text-align:center; }
      .pill{ margin-inline:auto; }
      .lead{ margin-inline:auto; }
      .hero-cta{ justify-content:center; }
    }

    /* ---------------- Partners marquee ---------------- */
    .partners{
      padding: 26px 0;
     /* border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--surface2) 55%, transparent);*/
    }
    .partners-head{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-bottom: 12px;
      text-align: center;
    }
    .partners-head b{ font-size: 13px; color: var(--muted); }
    .partners-head span{ font-size: 12px; color: var(--muted2); }

    .marquee{
      overflow:hidden;
      mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    }
    .track{
      display:flex;
      align-items:center;
      gap: 56px;
      width:max-content;
      animation: marquee 28s linear infinite;
    }
    @keyframes marquee{
      from{ transform: translateX(0); }
      to{ transform: translateX(-50%); }
    }
    .track:hover{ animation-play-state: paused; }
    .partner{ display:flex; align-items:center; justify-content:center; padding: 8px 0; }
    .partner img{
      height: 98px; width:auto;
      filter: grayscale(100%) opacity(.72);
      transition: filter .28s var(--ease), transform .28s var(--ease);
    }
    .partner img:hover{ filter: grayscale(0%) opacity(1); transform: translateY(-2px); }

    /* ---------------- Sections + cards ---------------- */
    .section{ padding: 64px 0; }
    .head{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-bottom: 18px;
    }
    .head h2{ margin:0; font-size: 26px; letter-spacing:-.3px; }
    .head p{ margin:0; color: var(--muted); line-height: 1.9; max-width: 80ch; font-size: 14.8px; }

    .cards{
      display:grid;
      gap: 12px;
      grid-template-columns: 1fr;
    }
    .card{
      border:1px solid var(--line);
      border-radius: var(--r-xl);
      background: color-mix(in srgb, var(--surface) 90%, transparent);
      box-shadow: var(--shadow-lg);
      padding: 16px;
      position:relative;
      overflow:hidden;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    }
    .card::after{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(520px 280px at 14% 0%, color-mix(in srgb, var(--sky) 12%, transparent), transparent 62%),
        radial-gradient(520px 280px at 86% 90%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 62%);
      opacity:.65;
      pointer-events:none;
    }
    .card:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow-xl);
      border-color: color-mix(in srgb, var(--teal) 22%, var(--line));
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size: 12px;
      color: var(--muted);
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface2) 75%, transparent);
      padding:7px 10px;
      border-radius:999px;
      margin-bottom: 10px;
      position:relative;
      z-index:1;
    }
    .card h3{ margin:0 0 8px; font-size: 18px; position:relative; z-index:1; }
    .card p{ margin:0; color: var(--muted); line-height: 1.9; font-size: 14.3px; position:relative; z-index:1; }
    .card ul{ margin: 12px 0 0; padding: 0 16px 0 0; color: var(--muted2); line-height:1.95; font-size: 13.7px; position:relative; z-index:1; }

    /* ---------------- Leadership ---------------- */
    .leadership{ padding: 72px 0 64px; }
    .panel{
      border:1px solid var(--line);
      border-radius: 40px;
      background: color-mix(in srgb, var(--surface2) 58%, transparent);
      box-shadow: var(--shadow-xl);
      padding: 18px;
      backdrop-filter: blur(14px);
    }
    .ceo{
      display:grid;
      gap:14px;
      grid-template-columns: 1fr;
      padding: 14px;
      border:1px solid color-mix(in srgb, var(--teal) 22%, var(--line));
      border-radius: 28px;
      background:
        radial-gradient(700px 420px at 10% 0%, color-mix(in srgb, var(--sky) 14%, transparent), transparent 60%),
        radial-gradient(700px 420px at 90% 100%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 60%),
        color-mix(in srgb, var(--surface) 90%, transparent);
    }
    .ceo-photo{
      width: 200px; height: 200px;
      border-radius: 26px;
      overflow:hidden;
      border:1px solid var(--line);
      box-shadow: 0 30px 70px rgba(0,0,0,.35);
      margin-inline:auto;
    }
    .ceo-photo img{ width:100%; height:100%; object-fit:cover; }
    .ceo h3{ margin:0 0 2px; font-size: 18px; }
    .ceo .role{ margin:0 0 10px; color: var(--muted2); font-size: 13.5px; line-height: 1.6; }
    .ceo .bio{ margin:0; color: var(--muted); line-height: 1.9; font-size: 14.7px; }
    .links{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; justify-content:center; }
    .divider{ height:1px; background: var(--line); opacity:.6; margin: 22px 0; }

    /* (2) Board: NO SCROLL. Responsive grid.
       Desktop: 5 columns in one row.
       Tablet: 3 columns.
       Mobile: 2 columns then 1. */
    .board-grid{
      display:grid;
      gap: 12px;
      grid-template-columns: 1fr; /* mobile base */
    }

    .member{
      border:1px solid var(--line);
      border-radius: 24px;
      background: color-mix(in srgb, var(--surface) 90%, transparent);
      box-shadow: var(--shadow-lg);
      padding: 14px;
      display:flex;
      gap:12px;
      align-items:flex-start;
      position:relative;
      overflow:hidden;
      min-width: 0;
    }
    .member::after{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(420px 240px at 10% 0%, color-mix(in srgb, var(--sky) 10%, transparent), transparent 62%),
        radial-gradient(420px 240px at 90% 100%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 62%);
      opacity:.65;
      pointer-events:none;
    }

    .avatar{
      width: 64px; height: 64px;
      border-radius: 999px;
      overflow:hidden;
      border:1px solid var(--line);
      flex:0 0 auto;
      position:relative;
      z-index:1;
    }
    .avatar img{ width:100%; height:100%; object-fit:cover; }
    .member .info{ position:relative; z-index:1; min-width:0; }
    .member b{ display:block; font-size: 15px; margin-bottom:2px; }
    .member span{ display:block; color: var(--muted2); font-size: 12.8px; line-height: 1.55; }
    .member p{ margin: 8px 0 0; color: var(--muted); font-size: 13.6px; line-height: 1.85; }

    .li-btn{
      position:absolute;
      inset-inline-end: 10px;
      top: 10px;
      width:38px;height:38px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface2) 80%, transparent);
      box-shadow: var(--shadow-md);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
      z-index:2;
    }
    .li-btn:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow-lg);
      border-color: color-mix(in srgb, var(--teal) 22%, var(--line));
    }
    .li-btn svg{ width:16px;height:16px; fill: color-mix(in srgb, var(--text) 88%, transparent); }

    /* ---------------- CTA ---------------- */
    .cta{ padding: 64px 0 24px; } /* reduced bottom to visually connect next section */
    .cta-box{
      position:relative;
      overflow:hidden;
      border:1px solid color-mix(in srgb, var(--teal) 18%, var(--line));
      border-radius: 40px;
      background:
        radial-gradient(720px 420px at 25% 18%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 60%),
        radial-gradient(680px 440px at 86% 74%, color-mix(in srgb, var(--sky) 14%, transparent), transparent 60%),
        color-mix(in srgb, var(--surface2) 86%, transparent);
      box-shadow: var(--shadow-xl);
      padding: 18px;
      display:grid;
      gap: 14px;
      isolation:isolate;
    }
    .cta-box::before{
      content:"";
      position:absolute; inset:-40%;
      background:
        radial-gradient(380px 260px at 20% 30%, color-mix(in srgb, var(--teal) 38%, transparent), transparent 62%),
        radial-gradient(420px 300px at 72% 26%, color-mix(in srgb, var(--sky) 34%, transparent), transparent 64%),
        radial-gradient(520px 360px at 65% 78%, color-mix(in srgb, var(--sand) 28%, transparent), transparent 66%),
        conic-gradient(from 220deg,
          rgba(0,0,0,0),
          color-mix(in srgb, var(--teal) 12%, transparent),
          rgba(0,0,0,0),
          color-mix(in srgb, var(--sky) 10%, transparent),
          rgba(0,0,0,0));
      opacity: .7;
      filter: blur(18px) saturate(1.1);
      transform: translate3d(0,0,0);
      animation: ctaAurora 12s var(--ease) infinite;
      z-index:-2;
      pointer-events:none;
    }
    @keyframes ctaAurora{
      0%   { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1.02); }
      50%  { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.06); }
      100% { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1.02); }
    }
    .cta-box::after{
      content:"";
      position:absolute; inset:0;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
      opacity:.10;
      mix-blend-mode: overlay;
      z-index:-1;
      pointer-events:none;
    }
    .cta-box h2{ margin:0; font-size: 24px; letter-spacing:-.2px; }
    .cta-box p{ margin:0; color: var(--muted); line-height: 1.9; font-size: 14.8px; }
    .cta-actions{ display:flex; flex-wrap:wrap; gap:10px; }

    /* (1) Strategic Partners moved BELOW CTA */
    .strategic{
      padding: 18px 0 64px;
    }
    .strategic-box{
      border: 1px solid var(--line);
      border-radius: 26px;
      background: color-mix(in srgb, var(--surface2) 55%, transparent);
      box-shadow: var(--shadow-lg);
      padding: 14px;
      backdrop-filter: blur(12px);
    }
    .strategic-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 12px;
      margin-bottom: 12px;
      flex-wrap:wrap;
    }
    .strategic-head b{
      font-size: 13.2px;
      color: var(--muted);
      letter-spacing:.2px;
    }
    .strategic-head span{
      font-size: 12.2px;
      color: var(--muted2);
    }
    .strategic-logos{
      display:grid;
      gap: 10px;
      grid-template-columns: repeat(2, minmax(0,1fr));
      align-items:center;
    }
    .strategic-logos a{
      display:flex;
      align-items:center;
      justify-content:center;
      height: 56px;
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
      background: #fff;/* color-mix(in srgb, var(--surface) 86%, transparent);*/
      overflow:hidden;
      transition: transform .16s var(--ease), border-color .16s var(--ease);
    }
    .strategic-logos a:hover{
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--teal) 18%, var(--line));
    }
    .strategic-logos img{
      max-height: 90px;
      width:auto;
      /*filter: grayscale(100%) opacity(.78);
      transition: filter .25s var(--ease);*/
    }
    .strategic-logos a:hover img{ filter: grayscale(0%) opacity(1); }

    /* ---------------- Footer ---------------- */
    footer{
      border-top:1px solid var(--line);
      background: color-mix(in srgb, var(--surface2) 55%, transparent);
      padding: 24px 0 calc(28px + var(--safe-bottom));
      color: var(--muted2);
    }
    .footer-grid{
      display:grid;
      gap: 14px;
      grid-template-columns: 1fr;
      align-items:start;
    }
    .footer-grid small{ display:block; line-height: 1.9; }
    .footer-social{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .footer-social a{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 10px 12px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 86%, transparent);
      box-shadow: var(--shadow-md);
      transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
      min-height:44px;
    }
    .footer-social a:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow-lg);
      border-color: color-mix(in srgb, var(--teal) 22%, var(--line));
    }
    .footer-social svg{ width:18px;height:18px; fill: color-mix(in srgb, var(--text) 85%, transparent); }

    .credit{ margin-top: 10px; font-size: 12.5px; color: var(--muted2); }
    .credit a{ border-bottom: 1px dashed color-mix(in srgb, var(--muted2) 70%, transparent); padding-bottom: 1px; }

    /* ---------------- Desktop breakpoint ---------------- */
    @media (min-width: 960px){
      :root{ --pad: 22px; }

      .navlinks-desktop{ display:flex; }
      .social-desktop{ display:flex; }
      .menu-btn{ display:none !important; }
      .drawer, .backdrop{ display:none !important; }

      .hero-inner{
        grid-template-columns: 1.1fr .9fr;
        align-items:center;
        padding: 44px 0 34px;
        gap: 18px;
        text-align: start;
      }

      /* (3) HERO stats in one row */
      .stats{ grid-template-columns: repeat(3, minmax(0,1fr)); }

      .grid2{ grid-template-columns: 1fr 1fr; }
      .cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }

      .ceo{
        grid-template-columns: 240px 1fr;
        align-items:center;
        padding: 18px;
      }
      .ceo-photo{ width: 220px; height: 220px; margin-inline:0; }
      .links{ justify-content:flex-start; }

      /* (2) Board: 5 in one row */
      .board-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); }
      .member{ flex-direction:column; gap:10px; }
      .avatar{ width:72px; height:72px; }
      .li-btn{ inset-inline-end: 12px; top: 12px; }

      .partners-head{ flex-direction:row; align-items:center; justify-content:space-between;text-align: center; }
      .partner img{ height: 96px; }

      .footer-grid{ grid-template-columns: 1.2fr 1fr; }

      /* Strategic logos 4 in a row on desktop */
      .strategic-logos{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }

    /* Tablet optimization for board */
    @media (min-width: 640px) and (max-width: 959px){
      .board-grid{ grid-template-columns: repeat(3, minmax(0,1fr));\\\ }
      .strategic-logos{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    @media (max-width: 639px){
      .board-grid{ grid-template-columns: 1fr; }
      #about .container{text-align: center;}
    }

    @media (prefers-reduced-motion: reduce){
      .brand-badge::after, .pulse, .track, .cactus, .cta-box::before{ animation:none !important; }
      .btn:hover, .card:hover, .partner img:hover, .li-btn:hover, .strategic-logos a:hover{ transform:none !important; }
    }