
:root{
  --cyan:#03F7F7;
  --indigo:#4853AE;
  --steel:#407E9B;
  --slate:#505050;
  --charcoal:#3B3B3B;
  --ink:#142033;
  --bg:#f5f9fb;
  --card:#ffffff;
  --muted:#5c6878;
  --line:rgba(64,126,155,.18);
  --shadow:0 16px 48px rgba(24,34,56,.10);
  --shadow-hover:0 22px 60px rgba(24,34,56,.16);
  --radius:24px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fff 0%,#f5f9fb 48%,#eef6f8 100%);
  line-height:1.68;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.container{width:min(var(--max), calc(100% - 36px)); margin-inline:auto}
.section{padding:78px 0; position:relative}
.section-head{max-width:760px; margin-bottom:32px}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border:1px solid rgba(3,247,247,.34); border-radius:999px;
  background:rgba(3,247,247,.10); color:#0fa7ba; font-size:.78rem;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.section h1,.section h2,.hero h1,.page-hero h1,.card h3,.panel h3,.step h3,.footer h3,.footer h4,.article h2,.article h3,.faq summary,.post-card h3{
  font-family:Poppins,Inter,sans-serif;
  letter-spacing:-.03em;
  line-height:1.12;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}
.section h1,.section h2{margin:14px 0 12px}
.section h2{font-size:clamp(1.9rem,3vw,2.7rem)}
p{margin:0 0 1rem}
.section p,.article p,.post-card p,.panel p,.faq p,.footer p,.page-hero p,.hero-copy,.spec span,.trust-item span,.meta-list div,.notice,.legal-page li{color:var(--muted)}

.nav-wrap{
  position:sticky; top:0; z-index:80;
  background:rgba(59,59,59,.96); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(7,15,26,.12);
}
.nav{min-height:78px; display:flex; align-items:center; gap:18px; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px; min-width:0; font-family:Poppins,sans-serif; color:#fff; font-weight:800; font-size:1.08rem}
.brand img{width:64px; height:45px; object-fit:contain; flex:0 0 auto}
.nav-links{display:flex; align-items:center; gap:20px; margin-left:auto; flex-wrap:wrap}
.nav-links a{font-size:.95rem; color:#fff; font-weight:700; position:relative; opacity:1}
.nav-links a:not(.btn)::after{content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px; background:var(--cyan); transition:.25s}
.nav-links a:not(.btn):hover::after,.nav-links a:not(.btn):focus-visible::after{right:0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:14px; padding:13px 18px; font-weight:800;
  cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, opacity .25s ease;
  white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--cyan),#72fbff); color:#082b31; box-shadow:0 12px 30px rgba(3,247,247,.22)}
.nav .btn-primary,.nav-links .btn-primary{background:linear-gradient(135deg,var(--cyan),#72fbff); color:#07262f; opacity:1}
.btn-secondary{border:1px solid rgba(64,126,155,.32); background:#fff; color:var(--ink)}
.hero .btn-secondary{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.32)}
.btn:hover{transform:translateY(-2px); box-shadow:0 18px 38px rgba(24,34,56,.16)}
.menu-btn{display:none; margin-left:auto; background:none; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:12px; padding:9px 12px}

.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(145deg,#34383d 0%,#3b3b3b 42%,#4853ae 132%);
  color:#fff; padding:74px 0 64px;
}
.hero::before{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background:rgba(3,247,247,.12); filter:blur(10px); top:-150px; right:-80px;
}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,460px); gap:42px; align-items:center}
.hero h1{font-size:clamp(2.6rem,5vw,4.8rem); line-height:1.02; margin:14px 0 16px; color:#fff; text-shadow:0 10px 24px rgba(0,0,0,.18)}
.hero h1 span{color:var(--cyan)}
.hero-copy{max-width:62ch; color:#f7fbfe; font-size:1.05rem; opacity:1}
.hero-actions{display:flex; gap:12px; margin:26px 0 18px; flex-wrap:wrap}
.hero-link-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px}
.hero-link-row a{font-size:.92rem; color:#fff; opacity:.96}
.hero-link-row a:hover{color:#b9ffff}
.hero-visual{
  position:relative; width:100%; max-width:460px; min-width:0; justify-self:center;
  border-radius:24px; overflow:hidden; box-shadow:0 28px 80px rgba(0,0,0,.34);
  border:1px solid rgba(3,247,247,.42); aspect-ratio:16 / 10; background:#1e293b;
}
.hero-visual img{width:100%; height:100%; object-fit:cover}
.hero-visual::after{
  content:"Aquatic movement, reimagined"; position:absolute; right:14px; bottom:14px;
  background:rgba(59,59,59,.88); border:1px solid rgba(3,247,247,.38); color:#fff;
  border-radius:14px; padding:10px 13px; font-weight:800; font-size:.82rem;
  max-width:calc(100% - 28px);
}

.trust-row{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:-24px; position:relative; z-index:5}
.trust-item,.card,.panel,.post-card,.faq,.table-wrap,.toc{min-width:0}
.trust-item{background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:18px; padding:22px}
.trust-item strong{display:block; font-family:Poppins,sans-serif; font-size:1.35rem; color:#273d82}
.trust-item span{font-size:.88rem}

.card-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.card,.panel,.post-card,.faq,.table-wrap,.toc{box-shadow:var(--shadow)}
.card,.panel,.post-card,.faq{background:var(--card); border:1px solid var(--line)}
.card{border-radius:var(--radius); padding:24px; transition:.28s}
.card:hover,.panel:hover,.post-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:rgba(3,247,247,.35)}
.card h3{font-size:1.08rem; margin:14px 0 8px}
.icon{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(3,247,247,.18),rgba(72,83,174,.12)); color:#255170; font-weight:900}
.split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch}
.panel{border-radius:28px; padding:30px; transition:.28s}
.panel h3{margin-bottom:10px}
.specs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px}
.spec{padding:14px; border-radius:14px; background:#f4fafb; border:1px solid var(--line)}
.spec b{display:block; color:#294d6e; margin-bottom:4px}
.download-box{background:linear-gradient(145deg,#eefeff 0%,#fff 55%,#edf0ff 100%); border:1px solid rgba(72,83,174,.18)}
.meta-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:20px 0}
.meta-list div{padding:12px 14px; background:#fff; border-radius:13px; border:1px solid var(--line)}
.meta-list small{display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:.7rem}
.steps{counter-reset:step; display:grid; gap:14px}
.step{counter-increment:step; display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 10px 28px rgba(24,34,56,.06); transition:.25s}
.step:hover{transform:translateX(5px)}
.step::before{content:counter(step); width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(135deg,var(--cyan),#64dfe9); font-weight:900}
.step h3{margin:2px 0 5px}
.table-wrap{overflow:auto; border-radius:20px}
table{width:100%; border-collapse:collapse; min-width:700px; background:#fff}
th,td{text-align:left; padding:16px; border-bottom:1px solid #edf1f4; vertical-align:top}
th{font-family:Poppins,sans-serif; font-size:.82rem; color:#34407c; background:#f6f8fc}
.gallery{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.gallery figure{margin:0; background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); transition:.25s}
.gallery figure:hover{transform:translateY(-5px)}
.gallery img{aspect-ratio:16/10; width:100%; height:100%; object-fit:cover}
.gallery figcaption{padding:12px 14px; font-size:.86rem; font-weight:700}
.review-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.stars{color:#c49a00; letter-spacing:.08em}
.faq-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.faq{border-radius:16px; padding:18px; box-shadow:0 10px 30px rgba(24,34,56,.06)}
.faq summary{cursor:pointer; font-weight:800; color:var(--ink)}
.faq p{padding-top:10px}
.blog-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.post-card{border-radius:20px; overflow:hidden; transition:.26s}
.post-card img{display:block; width:100%; aspect-ratio:16/9; height:auto; max-height:220px; object-fit:cover; background:#e9eef5}
.post-card .body{padding:18px}
.post-card h3{font-size:1rem; margin-bottom:8px; min-height:2.35em}
.notice{padding:18px 20px; border-radius:16px; background:#fff8df; border:1px solid #ead7a0; color:#6e5d22}
.contact-grid{display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:22px}
.field{display:grid; gap:7px; margin-bottom:12px}
.field input,.field textarea{width:100%; border:1px solid var(--line); border-radius:13px; padding:12px 13px; background:#fbfdfe}

.footer{background:#31363a; color:#dfe8ec; padding:56px 0 22px}
.footer-grid{display:grid; grid-template-columns:1.35fr repeat(3,minmax(0,1fr)); gap:34px; align-items:start}
.footer h3,.footer h4{color:#fff; margin:0 0 12px}
.footer a{display:block; color:#d9eef5; margin:7px 0; font-size:.92rem}
.footer .brand{margin-bottom:12px}
.copyright{border-top:1px solid rgba(255,255,255,.1); margin-top:34px; padding-top:18px; color:#c7d6db; font-size:.88rem}

.page-hero{padding:66px 0 48px; background:linear-gradient(135deg,#3b3b3b,#505050 52%,#4853ae); color:#fff}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.85rem); margin:10px 0 12px; color:#fff; text-shadow:0 10px 24px rgba(0,0,0,.18)}
.page-hero p{color:#f4f7fd; max-width:70ch; opacity:1}
.breadcrumbs{font-size:.84rem; color:#e4eeff; margin-bottom:8px}
.breadcrumbs a{color:#fff}
.article{max-width:920px; margin-inline:auto}
.article h2{font-size:1.85rem; margin-top:36px; margin-bottom:12px}
.article h3{font-size:1.3rem; margin-top:24px; margin-bottom:10px}
.article img,.article .article-media{display:block; width:min(100%, 860px); aspect-ratio:16/9; object-fit:cover; max-height:460px; border-radius:22px; box-shadow:var(--shadow); margin:22px auto; background:#e8eef4}
.article .feature-media{max-height:420px}
.article .inline-media{max-height:400px}
.toc{border-radius:18px; padding:20px; margin:22px 0}
.sticky-download{display:none}

/* make content visible even if JS is delayed or blocked */
.reveal{opacity:1; transform:none; transition:.55s ease}
.reveal.visible{opacity:1; transform:none}

.legal-page .article{max-width:1100px; display:flex; justify-content:center}
.legal-page .panel{padding:34px; width:min(100%, 900px); margin-inline:auto; text-align:left}
.legal-page .panel section + section{margin-top:24px; padding-top:24px; border-top:1px solid #edf1f4}
.legal-page ul{padding-left:1.25rem; margin:0 0 1rem; color:var(--muted)}
.legal-page li{margin:.35rem 0}

@media (max-width: 1160px){
  .hero-grid{grid-template-columns:1fr; gap:30px}
  .hero-copy{max-width:65ch}
  .hero-visual{max-width:min(100%, 560px)}
  .hero-visual::after{left:14px; right:auto}
  .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 1024px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-row{grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:20px}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 980px){
  .nav{position:relative}
  .nav-links{
    position:fixed; left:18px; right:18px; top:84px; display:none; flex-direction:column; align-items:stretch;
    background:#3b3b3b; padding:18px; border-radius:18px; box-shadow:var(--shadow); margin-left:0;
  }
  .nav-links.open{display:flex}
  .nav-links .btn{width:100%}
  .menu-btn{display:block}
  .split,.contact-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.2rem,8vw,4rem)}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .sticky-download{display:flex; position:fixed; left:14px; right:14px; bottom:14px; z-index:60; box-shadow:0 16px 40px rgba(0,0,0,.22)}
}
@media (max-width: 720px){
  .section{padding:60px 0}
  .hero{padding-top:50px; padding-bottom:50px}
  .container{width:min(var(--max), calc(100% - 24px))}
  .hero-grid{gap:26px}
  .hero h1,.page-hero h1,.section h1,.section h2{font-size:clamp(1.75rem,8.4vw,2.55rem)}
  .hero-copy,.page-hero p{font-size:.98rem}
  .hero-actions{flex-direction:column; align-items:stretch}
  .hero-actions .btn{width:100%}
  .trust-row,.card-grid,.gallery,.blog-grid,.footer-grid,.specs,.meta-list{grid-template-columns:1fr}
  .panel{padding:22px}
  table{min-width:560px}
  .nav{min-height:72px}
  .brand span{font-size:.95rem}
  .brand img{width:58px; height:41px}
  .footer{padding-bottom:90px}
  .post-card h3{min-height:auto}
  .article img,.article .article-media{width:100%; max-height:300px}
}


/* Final deployment fixes */
.faq-grid{align-items:start}
.faq{align-self:start;height:auto}
.faq[open]{height:auto}
.faq summary{display:list-item}
.faq[open] p{display:block}
.footer p{color:#fff;opacity:1}
.footer .footer-brand-copy{color:#fff}
.footer .copyright,.footer .copyright a{color:#fff}
.footer .copyright a{font-weight:800;text-decoration:underline;text-decoration-color:rgba(3,247,247,.6);text-underline-offset:3px}
.download-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.download-actions .btn{flex:1 1 190px}
.btn-third-party{background:#fff;color:#182238;border:1px solid rgba(64,126,155,.28)}
.release-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.release-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 10px 28px rgba(24,34,56,.07)}
.release-card b{display:block;font-family:Poppins,Inter,sans-serif;color:var(--ink);margin-bottom:4px}
.release-card span{color:var(--muted);font-size:.92rem}
@media(max-width:760px){.release-grid{grid-template-columns:1fr}.download-actions{flex-direction:column}.download-actions .btn{width:100%;flex:auto}}

/* Homepage depth sections and footer line fixes */
.home-depth-section:nth-of-type(even){background:linear-gradient(180deg,rgba(64,126,155,.035),rgba(72,83,174,.03));}
.home-wide-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
.home-cta-panel{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.home-cta-panel h3{font-size:1.35rem;margin:10px 0 8px;}
.footer-grid>div{border-left:0!important;border-right:0!important;}
.copyright{display:flex;align-items:center;gap:.28em;white-space:nowrap;overflow-x:auto;overflow-y:hidden;width:100%;max-width:100%;}
.copyright a{display:inline!important;margin:0!important;}
@media (max-width:720px){.home-wide-steps{grid-template-columns:1fr}.home-cta-panel{align-items:stretch;flex-direction:column}.copyright{font-size:.78rem;scrollbar-width:none}.copyright::-webkit-scrollbar{display:none}}

/* FAQ independent-column layout fix:
   opening a question no longer creates blank space beside it */
.faq-grid{
  display:block;
  column-count:2;
  column-gap:14px;
}
.faq-grid .faq{
  display:inline-block;
  width:100%;
  margin:0 0 14px;
  vertical-align:top;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
}
@media (max-width: 980px){
  .faq-grid{column-count:1}
}


/* === SWEM branded responsive refresh v9 === */
:root{
  --cyan:#C4D3D7;--indigo:#5F4F3F;--steel:#75898F;--slate:#5F4F3F;--charcoal:#332F2D;
  --ink:#171A1E;--bg:#F7F8F7;--card:#FFFFFF;--muted:#5C6670;--line:#DDE2E2;
  --shadow:0 10px 30px rgba(23,26,30,.08);--shadow-hover:0 18px 44px rgba(23,26,30,.13);
}
html{background:var(--bg)}
body{background:linear-gradient(180deg,#fff 0%,#F7F8F7 52%,#F1F3F3 100%);overflow-x:hidden}
img,svg,video,iframe{max-width:100%}
.nav-wrap{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);box-shadow:0 8px 24px rgba(23,26,30,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav{min-height:76px}
.brand{color:var(--ink)}
.brand img{width:48px;height:48px;object-fit:cover;border-radius:12px;box-shadow:0 7px 20px rgba(51,47,45,.16)}
.nav-links{gap:6px}
.nav-links a{color:var(--ink);padding:9px 12px;border-radius:10px}
.nav-links a:not(.btn)::after{background:#9D7943;bottom:1px}
.nav-links a:not(.btn):hover,.nav-links a:not(.btn):focus-visible{background:#F5ECDD;color:#795A30}
.menu-btn{color:var(--ink);border-color:var(--line);background:#fff}
.hero{background:linear-gradient(145deg,#332F2D 0%,#4B443E 54%,#5F4F3F 100%)}
.hero::before{background:rgba(196,211,215,.16)}
.hero h1 span{color:#C4D3D7}
.hero-visual{border-color:rgba(196,211,215,.42)}
.hero-visual::after{background:rgba(23,26,30,.82);border-color:rgba(196,211,215,.38)}
.eyebrow{border-color:rgba(157,121,67,.28);background:#F5ECDD;color:#795A30}
.btn-primary{background:linear-gradient(135deg,#9D7943,#B58A4D);color:#fff;box-shadow:0 12px 28px rgba(157,121,67,.24)}
.btn-primary:hover{background:linear-gradient(135deg,#795A30,#9D7943)}
.btn-secondary{border-color:var(--line);background:#fff;color:var(--ink)}
.card:hover,.panel:hover,.post-card:hover{border-color:#CFC5B7}
.icon{background:linear-gradient(135deg,#F5ECDD,#EEE8DF);color:#795A30}
.spec{background:#F8F6F2}
.spec b{color:#5F4F3F}
.download-box{background:linear-gradient(145deg,#FBF7F0 0%,#fff 55%,#F0F3F3 100%);border-color:#DDD3C6}
.step::before{background:linear-gradient(135deg,#9D7943,#C4A36C);color:#fff}
th{color:#5F4F3F;background:#F7F5F1}
.footer{background:#332F2D;color:#F2F2EF}
.footer a{color:#F2F2EF}
.footer p,.footer .footer-brand-copy,.footer .copyright,.footer .copyright a{color:#F2F2EF}
.footer .copyright a{text-decoration-color:#9D7943}
.footer .brand{color:#fff}
.footer .brand img{border-radius:12px}
.container,.nav,.hero-grid,.card-grid,.split,.specs,.gallery,.review-grid,.faq-grid,.blog-grid,.footer-grid,.contact-grid,.release-grid,.home-wide-steps{min-width:0}
.card-grid>*,.split>*,.gallery>*,.review-grid>*,.blog-grid>*,.footer-grid>*,.contact-grid>*{min-width:0}
.sticky-download{display:none!important}
@media(max-width:1100px){.nav-links{gap:2px}.nav-links a{padding:8px 9px;font-size:.9rem}}
@media(max-width:980px){
 .nav-links{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 36px rgba(23,26,30,.12)}
 .nav-links a{color:var(--ink);padding:13px 14px}
 .menu-btn{display:block}
}
@media(max-width:720px){
 .brand img{width:42px;height:42px}
 .container{width:min(var(--max),calc(100% - 24px))}
 .hero-grid{grid-template-columns:1fr}
 .hero-visual{max-width:100%}
 .footer{padding-bottom:28px}
}
