/* Helios Hydrogen — shared stylesheet (exported from the design canvas) */

    :root{
      --navy-900:#0A1826; --navy-800:#0F2338; --navy-700:#163356;
      --blue-700:#164A82; --blue-600:#1C7FC2; --blue-500:#2A9AD9; --blue-300:#8ED2EF; --blue-100:#E7F3FA;
      --green-700:#2E5A1E; --green-600:#4C9A2A; --green-500:#6CB33F; --green-300:#B3DE8F; --green-100:#EEF6E6;
      --gold-500:#C79A45; --gold-100:#F5EEDD;
      --whatsapp:#25D366;
      --ink:#10161B; --ink-2:#4B5760; --ink-3:#77828B;
      --paper:#F7F8F5; --paper-alt:#EFF2EC; --line:#DDE3DC; --white:#FFFFFF;
    }
    *{box-sizing:border-box;}
    body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);}
    h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;margin:0;}
    p{margin:0;}
    a{color:var(--blue-600);text-decoration:none;}
    a:hover{color:var(--blue-700);}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:3px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;cursor:pointer;}
    .btn-primary{background:var(--blue-600);color:var(--white);}
    .btn-primary:hover{background:var(--blue-700);color:var(--white);}
    .btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,0.4);}
    .btn-ghost:hover{border-color:#fff;color:#fff;}
    .eyebrow{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--green-600);}
    .navlink{font-size:14px;font-weight:600;color:rgba(255,255,255,0.82);cursor:pointer;}
    .navlink:hover{color:#fff;}
    .langpill{padding:5px 10px;border-radius:16px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;}
  


    :root{
      --navy-900:#0A1826; --navy-800:#0F2338;
      --blue-700:#164A82; --blue-600:#1C7FC2; --blue-300:#8ED2EF; --blue-100:#E7F3FA;
      --green-700:#2E5A1E; --green-600:#4C9A2A; --green-300:#B3DE8F; --green-100:#EEF6E6;
      --gold-500:#C79A45; --gold-100:#F5EEDD;
      --whatsapp:#25D366;
      --ink:#10161B; --ink-2:#4B5760;
      --paper:#F7F8F5; --line:#DDE3DC;
    }
    *{box-sizing:border-box;}
    body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);}
    h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;margin:0;}
    p{margin:0;}
    a{color:var(--blue-600);text-decoration:none;}
    a:hover{color:var(--blue-700);}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:3px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;cursor:pointer;}
    .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.4);}
    .btn-ghost:hover{border-color:#fff;}
    .eyebrow{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--green-600);}
    .navlink{font-size:14px;font-weight:600;color:rgba(255,255,255,0.82);cursor:pointer;}
    .navlink:hover{color:#fff;}
    .langpill{padding:5px 10px;border-radius:16px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;}
    .spec-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px;}
    .spec-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;}
    .spec-row:last-child{border-bottom:none;}
  


    :root{
      --navy-900:#0A1826; --navy-800:#0F2338;
      --blue-700:#164A82; --blue-600:#1C7FC2; --blue-300:#8ED2EF;
      --green-700:#2E5A1E; --green-600:#4C9A2A; --green-500:#6CB33F; --green-300:#B3DE8F; --green-100:#EEF6E6;
      --whatsapp:#25D366;
      --ink:#10161B; --ink-2:#4B5760; --ink-3:#77828B;
      --paper:#F7F8F5; --line:#DDE3DC;
    }
    *{box-sizing:border-box;}
    body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);}
    h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;margin:0;}
    p{margin:0;}
    a{color:var(--blue-600);text-decoration:none;}
    a:hover{color:var(--blue-700);}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:3px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;cursor:pointer;}
    .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.4);}
    .btn-ghost:hover{border-color:#fff;}
    .eyebrow{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--green-600);}
    .navlink{font-size:14px;font-weight:600;color:rgba(255,255,255,0.82);cursor:pointer;}
    .navlink:hover{color:#fff;}
    .langpill{padding:5px 10px;border-radius:16px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;}
  


    :root{
      --navy-900:#0A1826; --navy-800:#0F2338;
      --blue-700:#164A82; --blue-600:#1C7FC2; --blue-300:#8ED2EF; --blue-100:#E7F3FA;
      --green-700:#2E5A1E; --green-600:#4C9A2A; --green-500:#6CB33F; --green-300:#B3DE8F; --green-100:#EEF6E6;
      --whatsapp:#25D366;
      --ink:#10161B; --ink-2:#4B5760; --ink-3:#77828B;
      --paper:#F7F8F5; --paper-alt:#EFF2EC; --line:#DDE3DC; --white:#FFFFFF;
    }
    *{box-sizing:border-box;}
    body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);}
    h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;margin:0;}
    p{margin:0;}
    a{color:var(--blue-600);text-decoration:none;}
    a:hover{color:var(--blue-700);}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:3px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;cursor:pointer;}
    .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.4);}
    .btn-ghost:hover{border-color:#fff;}
    .eyebrow{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--green-600);}
    .navlink{font-size:14px;font-weight:600;color:rgba(255,255,255,0.82);cursor:pointer;}
    .navlink:hover{color:#fff;}
    .langpill{padding:5px 10px;border-radius:16px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;}
    .checkrow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;}
  


    :root{
      --navy-900:#0A1826; --navy-800:#0F2338; --forest-900:#122A20;
      --blue-700:#164A82; --blue-600:#1C7FC2; --blue-300:#8ED2EF; --blue-100:#E7F3FA;
      --green-700:#2E5A1E; --green-600:#4C9A2A; --green-300:#B3DE8F; --green-100:#EEF6E6;
      --gold-500:#C79A45; --gold-100:#F5EEDD;
      --whatsapp:#25D366;
      --ink:#10161B; --ink-2:#4B5760;
      --paper:#F7F8F5; --line:#DDE3DC;
    }
    *{box-sizing:border-box;}
    body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);}
    h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;margin:0;}
    p{margin:0;}
    a{color:var(--blue-600);text-decoration:none;}
    a:hover{color:var(--blue-700);}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:3px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;cursor:pointer;}
    .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.4);}
    .btn-ghost:hover{border-color:#fff;}
    .eyebrow{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--green-600);}
    .navlink{font-size:14px;font-weight:600;color:rgba(255,255,255,0.82);cursor:pointer;}
    .navlink:hover{color:#fff;}
    .langpill{padding:5px 10px;border-radius:16px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;}
  


    :root{
      --navy-900:#0A1826; --navy-800:#0F2338;
      --blue-700:#164A82; --blue-600:#1C7FC2; --blue-300:#8ED2EF;
      --green-700:#2E5A1E; --green-600:#4C9A2A; --green-300:#B3DE8F;
      --gold-500:#C79A45;
      --whatsapp:#25D366;
      --ink:#10161B; --ink-2:#4B5760;
      --paper:#F7F8F5; --line:#DDE3DC;
    }
    *{box-sizing:border-box;}
    body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);}
    h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;margin:0;}
    p{margin:0;}
    a{color:var(--blue-600);text-decoration:none;}
    a:hover{color:var(--blue-700);}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:3px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;cursor:pointer;}
    .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.4);}
    .btn-ghost:hover{border-color:#fff;}
    .eyebrow{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--green-600);}
    .navlink{font-size:14px;font-weight:600;color:rgba(255,255,255,0.82);cursor:pointer;}
    .navlink:hover{color:#fff;}
    .langpill{padding:5px 10px;border-radius:16px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;}
  


    :root{
      --navy-900:#0A1826; --navy-800:#0F2338;
      --blue-700:#164A82; --blue-600:#1C7FC2; --blue-300:#8ED2EF;
      --green-700:#2E5A1E; --green-600:#4C9A2A; --green-300:#B3DE8F;
      --whatsapp:#25D366;
      --ink:#10161B; --ink-2:#4B5760; --ink-3:#77828B;
      --paper:#F7F8F5; --line:#DDE3DC;
    }
    *{box-sizing:border-box;}
    body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);}
    h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;margin:0;}
    p{margin:0;}
    a{color:var(--blue-600);text-decoration:none;}
    a:hover{color:var(--blue-700);}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:3px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;cursor:pointer;}
    .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.4);}
    .btn-ghost:hover{border-color:#fff;}
    .eyebrow{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--green-600);}
    .navlink{font-size:14px;font-weight:600;color:rgba(255,255,255,0.82);cursor:pointer;}
    .navlink:hover{color:#fff;}
    .langpill{padding:5px 10px;border-radius:16px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;}
    .field-label{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:8px;display:block;}
    .field-input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:3px;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;color:var(--ink-3);background:#fff;}
  

.page-wrap{ width:100%; max-width:1440px; margin:0 auto; }
html{ overflow-x:hidden; }
body{ overflow-x:hidden; }
.navlink{ text-decoration:none; }
.navlink.active{ color:#fff !important; }
.langpill{ color:rgba(255,255,255,0.55); background:transparent; transition:background .15s ease, color .15s ease; }
.langpill.active{ background:#ffffff; color:#0A1826; }
img{ max-width:100%; }

/* ---------------------------------------------------------------------
   Responsive layer — the markup above was authored as a fixed-width
   (1440px) desktop export with inline styles. Everything below adapts
   it for tablet/phone without touching that markup, using !important
   only where an inline style on the same element must be overridden.
   ------------------------------------------------------------------ */

.nav-toggle{ display:none; background:none; border:none; padding:6px; cursor:pointer; flex-shrink:0; }

@media (max-width: 860px){

  /* -- Nav: collapse the link/lang/CTA row behind a hamburger -- */
  .site-nav{ padding-left:20px !important; padding-right:20px !important; position:relative; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }
  .nav-right{
    display:none !important;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:20px !important;
    background:var(--navy-900);
    padding:22px 20px 26px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    box-shadow:0 16px 24px rgba(0,0,0,0.25);
    z-index:200;
  }
  .nav-right.open{ display:flex !important; }
  .nav-links{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:16px !important;
    width:100%;
  }

  /* -- Grids: always single column -- */
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(5"]{
    grid-template-columns: 1fr !important;
  }

  /* -- Flex rows with a fixed-width sidebar/column: stack them -- */
  div:has(> [style*="flex:0 0 380px"]),
  div:has(> [style*="flex:0 0 560px"]),
  div:has(> [style*="flex:0 0 220px"]){
    flex-direction: column !important;
    gap: 28px !important;
  }
  [style*="flex:0 0 380px"],
  [style*="flex:0 0 560px"]{
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  [style*="flex:0 0 220px"]{
    flex: 0 0 auto !important;
    width: 140px !important;
    height: 140px !important;
  }
  img[style*="width:220px;height:220px"]{
    width: 140px !important;
    height: 140px !important;
  }

  /* -- Other large-gap flex rows (footer columns, hero, platform cards,
     origin note, article cards): stack them too -- */
  [style*="display:flex;gap:56px"],
  [style*="display:flex;gap:40px"],
  [style*="display:flex;gap:32px"],
  [style*="display:flex;gap:24px"],
  [style*="position:relative;display:flex;gap:56px"]{
    flex-direction: column !important;
    gap: 24px !important;
  }
  div:has(> [style*="flex:1;padding:30px 64px"]),
  div:has(> [style*="flex:1;padding:26px 64px"]){
    flex-direction: column !important;
  }
  [style*="flex:1;padding:30px 64px"],
  [style*="flex:1;padding:26px 64px"]{
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  [style*="padding:56px;display:flex;align-items:center;justify-content:space-between"]{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  /* -- Home hero power-flow diagram: shrink the 4 fixed 100px icon columns -- */
  [style*="width:100px;"]{ width:64px !important; }

  /* -- Gradient CTA banners (text + buttons spread apart): stack -- */
  [style*="display:flex;align-items:center;justify-content:space-between"]:not(.site-nav){
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  [style*="display:flex;gap:14px"]{ flex-wrap: wrap !important; }

  /* -- Section padding: shrink the 64px side gutters -- */
  [style*="padding:0 64px 100px"], [style*="padding:0 64px 96px"],
  [style*="padding:100px 64px"], [style*="padding:26px 64px"],
  [style*="padding:30px 64px"], [style*="padding:56px 64px 28px"],
  [style*="padding:72px 64px"], [style*="padding:80px 64px"],
  [style*="padding:80px 64px 0"], [style*="padding:80px 64px 72px"],
  [style*="padding:88px 64px"], [style*="padding:88px 64px 80px"],
  [style*="padding:96px 64px"], [style*="padding:96px 64px 48px"],
  [style*="padding:96px 64px 88px"]{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  h1{ font-size:30px !important; line-height:1.2 !important; }
  h2{ font-size:24px !important; }
}

@media (max-width: 520px){
  [style*="flex:0 0 220px"]{ width:110px !important; height:110px !important; }
  img[style*="width:220px;height:220px"]{ width:110px !important; height:110px !important; }
}