/*
Theme Name: ZeroFlame Lithium Power Corrected
Theme URI: https://zeroflamelithiumpower.com
Author: ZeroFlame Lithium Power
Description: Corrected mobile-friendly ZeroFlame theme using clean image assets only. Fixes duplicated header/text/cards, smaller transparent logo, active contact links, and detailed Marine Safety section.
Version: 6.1.0
Text Domain: zeroflame
*/

:root{
  --green:#78d900;
  --orange:#ff8a00;
  --red:#ff3b22;
  --muted:#c8d0d5;
  --line:rgba(255,255,255,.13);
  --panel:rgba(3,9,12,.88);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;line-height:1.45;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
.zf-wrap{max-width:1920px;margin:0 auto;background:#000}

/* ONE HEADER ONLY */
.zf-header{
  min-height:86px;
  display:grid;
  grid-template-columns:190px 1fr auto;
  align-items:center;
  gap:22px;
  padding:0 34px;
  background:#000;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;
  top:0;
  z-index:1000;
}
.zf-logo{width:150px}
.zf-logo-link{display:flex;align-items:center}
.zf-menu{display:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:8px 11px;font-size:24px}
.zf-nav{display:flex;justify-content:center;align-items:center;gap:34px;font-size:15px;text-transform:uppercase;font-weight:800}
.zf-nav a{white-space:nowrap}
.zf-nav a:hover{color:var(--green)}
.zf-contact-menu{position:relative}
.zf-contact-trigger{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--green);border-radius:6px;padding:12px 18px}
.zf-contact-dropdown{display:none;position:absolute;top:52px;right:0;width:330px;background:rgba(3,8,10,.98);border:1px solid #d5a51c;border-radius:10px;padding:14px 16px;box-shadow:0 20px 60px rgba(0,0,0,.55);text-transform:none;font-size:14px;z-index:2000}
.zf-contact-menu:hover .zf-contact-dropdown,.zf-contact-menu:focus-within .zf-contact-dropdown{display:block}
.zf-contact-dropdown strong{display:block;text-transform:uppercase;margin-bottom:8px}
.zf-contact-dropdown a{display:block;padding:8px 0;border-top:1px solid rgba(255,255,255,.1)}
.zf-contact-dropdown a:hover{color:var(--green)}
.zf-head-right{display:flex;align-items:center;gap:20px}
.zf-made{display:flex;align-items:center;gap:10px;text-transform:uppercase;font-weight:900;font-size:15px;white-space:nowrap}
.zf-flag{font-size:27px}
.zf-exclusive{background:#fff;color:#111;border-radius:6px;padding:9px 16px;text-align:center;font-weight:950;line-height:1.03;text-transform:uppercase;font-size:14px}
.zf-veteran{display:flex;align-items:center;gap:10px;text-transform:uppercase;font-weight:950;line-height:1.02;font-size:16px;white-space:nowrap}
.zf-vet-mark{width:48px;height:48px;border:2px solid rgba(255,255,255,.75);border-radius:50%;display:grid;place-items:center;color:#fff;font-size:25px}

/* HERO uses CLEAN photo only. No text/header/cards embedded in image. */
.zf-hero{
  position:relative;
  min-height:555px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.78) 22%,rgba(0,0,0,.34) 45%,rgba(0,0,0,.02) 75%),
    url('assets/clean-catamaran-hero.png') center center/cover no-repeat;
  overflow:hidden;
}
.zf-hero-copy{
  position:absolute;
  left:42px;
  top:54px;
  width:455px;
  max-width:calc(100vw - 84px);
  z-index:3;
}
.zf-hero h1{margin:0 0 22px;font-size:39px;line-height:1.12;text-transform:uppercase;font-weight:950;letter-spacing:.01em}
.zf-hero p{margin:0;font-size:17px;line-height:1.55;color:#edf3f5}
.zf-battery-visual{
  position:absolute;
  right:58px;
  bottom:52px;
  width:340px;
  height:185px;
  border-radius:14px;
  background:
    radial-gradient(circle at 20% 70%,rgba(120,217,0,.35),transparent 24%),
    radial-gradient(circle at 78% 72%,rgba(255,70,20,.35),transparent 26%),
    linear-gradient(145deg,#050708,#15191d);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.zf-battery-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.07) 48%,transparent 52%);opacity:.4}
.zf-battery-logo{width:210px;position:relative;z-index:2}

/* Feature band */
.zf-feature-row{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;background:var(--panel);border:1px solid var(--line);margin:0 38px;border-radius:8px;overflow:hidden;transform:translateY(-24px);position:relative;z-index:4}
.zf-feature{display:flex;gap:18px;padding:26px 28px;border-right:1px solid var(--line);align-items:flex-start}
.zf-feature:last-child{border-right:0}
.zf-icon{font-size:43px;color:var(--green);line-height:1;min-width:52px;text-align:center}
.zf-feature h3{margin:0 0 8px;font-size:17px;line-height:1.22;text-transform:uppercase;font-weight:900}
.zf-feature p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

/* Marine Safety Detail */
.zf-safety-detail{
  padding:54px 38px 72px;
  background:
    radial-gradient(circle at 12% 0%, rgba(120,217,0,.12), transparent 30%),
    radial-gradient(circle at 95% 10%, rgba(255,138,0,.10), transparent 32%),
    #020506;
  border-top:1px solid rgba(255,255,255,.10);
}
.zf-safety-detail-inner{max-width:1380px;margin:0 auto}
.zf-kicker{color:var(--green);font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:13px;margin:0 0 10px}
.zf-safety-detail h2{font-size:clamp(30px,4vw,56px);line-height:1.02;margin:0 0 18px;text-transform:uppercase;letter-spacing:-.03em}
.zf-safety-lead{font-size:20px;color:#d8e2e7;max-width:1040px;margin:0 0 34px}
.zf-safety-detail-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:start}
.zf-safety-panel,.zf-compare-panel{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.25)}
.zf-safety-panel h3,.zf-compare-panel h3{margin:0 0 14px;font-size:24px;text-transform:uppercase}
.zf-safety-panel p{color:#cbd5db;font-size:16px;margin:0 0 16px}
.zf-safety-list{display:grid;gap:12px;margin-top:18px}
.zf-safety-list div{border-left:4px solid var(--green);background:rgba(0,0,0,.22);padding:14px 16px;border-radius:8px;color:#edf3f5}
.zf-safety-list strong{display:block;color:#fff;text-transform:uppercase;margin-bottom:4px}
.zf-compare-table{display:grid;gap:10px}
.zf-compare-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zf-compare-cell{background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.10);border-radius:8px;padding:14px;color:#dce5e9}
.zf-compare-cell strong{display:block;color:#fff;margin-bottom:5px}
.zf-compare-cell.good{border-color:rgba(120,217,0,.45)}
.zf-disclaimer{margin-top:22px;padding:16px 18px;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#b8c3c9;font-size:13px;background:rgba(0,0,0,.22)}

/* Applications */
.zf-app-section{padding-top:8px}
.zf-section-title{text-align:center;margin:0 0 12px;text-transform:uppercase;font-size:22px;letter-spacing:.06em;font-weight:500;color:#f2f6f7}
.zf-app-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:0 38px}
.zf-app-card{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:6px;overflow:hidden;min-height:206px}
.zf-app-card img{height:98px;width:100%;object-fit:cover}
.zf-app-card div{padding:12px 13px;text-align:center}
.zf-app-card h3{margin:0 0 7px;text-transform:uppercase;font-size:14px}
.zf-app-card p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.35}

/* Lower */
.zf-lower{display:grid;grid-template-columns:430px 1fr;gap:16px;padding:16px 38px 14px}
.zf-advantage{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:8px;padding:18px 22px}
.zf-advantage h3{margin:0 0 12px;text-transform:uppercase;font-size:22px;font-weight:500}
.zf-advantage ul{margin:0;padding:0;list-style:none}
.zf-advantage li{font-size:14px;color:#e8eef1;margin:7px 0}
.zf-advantage li:before{content:'✓';color:var(--green);font-weight:950;margin-right:12px}
.zf-bottom-banner{min-height:184px;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:grid;grid-template-columns:.48fr .52fr;background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.52)),url('assets/clean-catamaran-hero.png') center bottom/cover no-repeat}
.zf-bottom-copy{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:18px}
.zf-wordmark{font-size:48px;font-weight:950;background:linear-gradient(90deg,var(--green),var(--orange),var(--red));-webkit-background-clip:text;color:transparent;line-height:.95}
.zf-wordmark-sub{font-size:18px;letter-spacing:.25em;margin-top:4px;color:white}
.zf-bottom-copy p{font-size:18px;text-transform:uppercase;margin:12px 0 14px;line-height:1.25}
.zf-button{background:linear-gradient(90deg,var(--green),#63bd00);color:#111;font-weight:950;text-transform:uppercase;border:0;border-radius:4px;padding:10px 28px;font-size:13px;display:inline-block}
.zf-direct-contact{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);padding:18px 20px;background:#030608}
.zf-direct-contact a{border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:10px 18px;font-weight:900}
.zf-direct-contact a:hover{color:#111;background:var(--green)}

/* Footer */
.zf-footer{display:grid;grid-template-columns:repeat(6,1fr);background:#030608;border-top:1px solid rgba(255,255,255,.1)}
.zf-footer-item{display:flex;align-items:center;justify-content:center;gap:12px;min-height:78px;border-right:1px solid rgba(255,255,255,.12);color:#dbe2e6;font-size:12px;text-transform:uppercase}
.zf-footer-item:last-child{border-right:0}
.zf-footer-item span:first-child{font-size:30px;color:var(--green)}

/* Responsive */
@media(max-width:1550px){
  .zf-header{grid-template-columns:170px 1fr auto;gap:15px}
  .zf-logo{width:135px}.zf-nav{gap:24px;font-size:14px}.zf-head-right{gap:15px}.zf-exclusive{font-size:13px;padding:8px 12px}.zf-veteran{font-size:15px}
  .zf-feature{padding:22px 18px}.zf-feature h3{font-size:15px}.zf-feature p{font-size:12.5px}
}
@media(max-width:1220px){
  .zf-header{grid-template-columns:160px auto auto;min-height:86px;padding:8px 18px}
  .zf-menu{display:block;justify-self:end}
  .zf-nav{display:none;position:absolute;top:86px;left:0;right:0;background:#000;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);padding:18px 24px;flex-direction:column;align-items:flex-start;gap:18px}
  body.zf-menu-open .zf-nav{display:flex}
  .zf-contact-dropdown{display:block;position:static;width:100%;box-shadow:none;margin-top:8px}
  .zf-head-right{grid-column:1 / -1;justify-content:flex-end;padding-bottom:8px}
  .zf-feature-row{grid-template-columns:1fr 1fr;margin:0 18px;transform:translateY(-16px)}
  .zf-app-grid{grid-template-columns:repeat(3,1fr);padding:0 18px}
  .zf-lower{padding:18px;grid-template-columns:1fr}
  .zf-hero{min-height:520px}
  .zf-battery-visual{right:26px;width:270px;height:155px}.zf-battery-logo{width:170px}
}
@media(max-width:900px){
  .zf-safety-detail{padding:50px 18px}
  .zf-safety-detail-grid{grid-template-columns:1fr}
  .zf-compare-row{grid-template-columns:1fr}
}
@media(max-width:760px){
  .zf-header{grid-template-columns:1fr auto}
  .zf-logo{width:140px}.zf-head-right{justify-content:space-between;gap:8px;width:100%}
  .zf-made{font-size:11px}.zf-flag{font-size:19px}.zf-exclusive{font-size:10px;padding:7px 8px}.zf-veteran{font-size:10px}.zf-vet-mark{width:34px;height:34px;font-size:19px}
  .zf-hero{min-height:590px;background-position:center top}
  .zf-hero-copy{left:18px;top:42px;width:360px;max-width:calc(100vw - 36px)}
  .zf-hero h1{font-size:32px;line-height:1.14}
  .zf-hero p{font-size:16px;line-height:1.5}
  .zf-battery-visual{right:18px;bottom:30px;width:230px;height:132px}
  .zf-battery-logo{width:145px}
  .zf-feature-row{grid-template-columns:1fr}
  .zf-feature{border-right:0;border-bottom:1px solid var(--line)}
  .zf-app-grid{grid-template-columns:1fr 1fr}
  .zf-bottom-banner{grid-template-columns:1fr;min-height:260px}
  .zf-footer{grid-template-columns:1fr 1fr}
  .zf-footer-item{border-bottom:1px solid rgba(255,255,255,.08)}
}
@media(max-width:470px){
  .zf-logo{width:125px}.zf-header{padding:8px 12px}
  .zf-head-right{display:grid;grid-template-columns:1fr 1fr;align-items:center}.zf-made{grid-column:1 / -1;justify-content:center}
  .zf-app-grid{grid-template-columns:1fr}
  .zf-hero h1{font-size:28px}
  .zf-footer{grid-template-columns:1fr}.zf-footer-item{border-right:0}
  .zf-direct-contact{display:grid;grid-template-columns:1fr}.zf-direct-contact a{text-align:center}
}


/* About Founder / CEO Section */
.zf-about-founder{
  padding:76px 38px;
  background:
    radial-gradient(circle at 10% 10%, rgba(120,217,0,.10), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(255,138,0,.10), transparent 34%),
    #05080a;
  border-top:1px solid rgba(255,255,255,.10);
}
.zf-about-inner{
  max-width:1380px;
  margin:0 auto;
  display:grid;
  grid-template-columns:420px 1fr;
  gap:42px;
  align-items:center;
}
.zf-founder-photo{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 90px rgba(0,0,0,.42);
  background:#111;
}
.zf-founder-photo img{
  width:100%;
  height:560px;
  object-fit:cover;
  object-position:center;
}
.zf-about-copy{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:38px;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}
.zf-about-copy .zf-kicker{
  color:var(--green);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:13px;
  margin:0 0 10px;
}
.zf-about-copy h2{
  font-size:clamp(31px,4vw,56px);
  line-height:1.02;
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:-.03em;
}
.zf-title-line{
  color:#fff;
  font-size:20px;
  margin:0 0 22px;
  font-weight:800;
}
.zf-about-copy p{
  color:#d7e0e5;
  font-size:17px;
  line-height:1.65;
  margin:0 0 16px;
}
.zf-about-highlight{
  margin-top:22px;
  padding:18px 20px;
  border-left:5px solid var(--green);
  border-radius:10px;
  background:rgba(0,0,0,.24);
  color:#fff;
  font-weight:800;
  font-size:18px;
}
@media(max-width:980px){
  .zf-about-inner{grid-template-columns:1fr}
  .zf-founder-photo img{height:auto}
}
@media(max-width:620px){
  .zf-about-founder{padding:50px 18px}
  .zf-about-copy{padding:24px}
  .zf-about-copy p{font-size:16px}
}
