/* ============================================
   ELOCARRY SEO PAGE DESIGN SYSTEM v2
   File: /wp-content/uploads/elocarry-production.css
   ============================================ */

/* Design tokens */
.ecp{
  --ecp-bg:#0E0E0E;
  --ecp-surface:#141414;
  --ecp-surface-2:#1a1a1a;
  --ecp-border:rgba(49,198,60,0.3);
  --ecp-border-soft:rgba(255,255,255,0.08);
  --ecp-green:#31C63C;
  --ecp-green-hover:#2ba832;
  --ecp-green-soft:rgba(49,198,60,0.08);
  --ecp-text:#ffffff;
  --ecp-text-muted:rgba(255,255,255,0.65);
  --ecp-text-dim:rgba(255,255,255,0.45);
  --ecp-radius:14px;
  --ecp-radius-sm:8px;
  --ecp-max:1280px;
  font-family:'Manrope',sans-serif;
  color:var(--ecp-text);
  line-height:1.6;
}

.ecp *,.ecp *::before,.ecp *::after{box-sizing:border-box}
.ecp h1,.ecp h2,.ecp h3,.ecp h4{font-family:'Manrope',sans-serif;color:var(--ecp-text);font-weight:800;line-height:1.15;margin:0 0 16px}
.ecp p{margin:0 0 16px;color:var(--ecp-text-muted);font-size:17px}
.ecp a{color:var(--ecp-green);text-decoration:none}
.ecp ul{list-style:none;padding:0;margin:0}

/* Section wrapper */
.ecp-section{padding:80px 0;position:relative}
.ecp-section--tight{padding:48px 0}
.ecp-container{max-width:var(--ecp-max);margin:0 auto;padding:0 24px}

/* ===== HERO ===== */
.ecp-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.ecp-hero-trust{display:inline-flex;align-items:center;gap:10px;color:var(--ecp-text-muted);font-size:14px;font-weight:600;margin-bottom:24px;padding:8px 14px;background:rgba(49,198,60,0.08);border:1px solid var(--ecp-border);border-radius:999px}
.ecp-hero-trust svg{width:16px;height:16px;color:var(--ecp-green);flex-shrink:0}
.ecp-hero h1{font-size:64px;letter-spacing:-1.5px;margin-bottom:12px;font-weight:800}
.ecp-hero-sub{font-size:22px;font-weight:700;line-height:1.35;color:var(--ecp-text);margin-bottom:24px}
.ecp-hero p{font-size:16px;line-height:1.7;color:var(--ecp-text-muted)}

/* Hero media — single image, sticky-feel */
.ecp-hero-media{position:relative;border-radius:var(--ecp-radius);overflow:hidden;background:#000;aspect-ratio:4/3;box-shadow:0 30px 60px -20px rgba(0,0,0,0.6),0 0 0 1px var(--ecp-border-soft)}
.ecp-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.ecp-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,0.4));pointer-events:none}

/* Pricing slot */
.ecp-pricing-slot{margin-top:32px}

/* Trust strip under hero */
.ecp-trust-strip{display:flex;flex-wrap:wrap;gap:28px;align-items:center;padding:18px 24px;border-top:1px solid var(--ecp-border-soft);border-bottom:1px solid var(--ecp-border-soft);margin-top:32px;font-size:14px;font-weight:700;color:var(--ecp-text-muted)}
.ecp-trust-strip span{display:inline-flex;align-items:center;gap:8px}
.ecp-trust-strip b{color:var(--ecp-green);font-weight:800}

/* ===== FEATURE GRID ===== */
.ecp-features{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--ecp-border);border-radius:var(--ecp-radius);overflow:hidden;background:var(--ecp-surface)}
.ecp-feature{padding:36px 28px;border-right:1px solid var(--ecp-border);position:relative;display:flex;flex-direction:column}
.ecp-feature:last-child{border-right:none}
.ecp-feature h3{font-size:22px;text-align:center;margin-bottom:18px;font-weight:800;letter-spacing:-0.3px;min-height:54px;display:flex;align-items:center;justify-content:center}
.ecp-feature-desc{font-size:14.5px;line-height:1.65;color:var(--ecp-text-muted);margin-bottom:24px;text-align:left;min-height:auto}

/* Feature checkmark list */
.ecp-feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ecp-text);margin-bottom:11px;font-weight:600;position:relative;line-height:1.4}
.ecp-feature-list li::before{
  content:"";
  flex-shrink:0;
  width:18px;
  height:18px;
  margin-top:1px;
  border:1.5px solid var(--ecp-green);
  border-radius:4px;
  background-color:transparent;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2331C63C'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
}
.ecp-feature-divider{height:1px;background:var(--ecp-border);margin:18px 0}

/* ===== FULL-WIDTH CTA BUTTON ===== */
.ecp-cta-bar{display:block;width:100%;padding:24px;background:var(--ecp-green);color:#fff !important;font-size:18px;font-weight:800;text-align:center;border-radius:var(--ecp-radius);text-decoration:none !important;letter-spacing:0.5px;border:none;cursor:pointer;font-family:'Manrope',sans-serif;margin:36px 0 0;transition:background 0.15s,transform 0.15s,box-shadow 0.15s;box-shadow:0 10px 30px -10px rgba(49,198,60,0.5)}
.ecp-cta-bar:hover{background:var(--ecp-green-hover);color:#fff !important;text-decoration:none !important;box-shadow:0 14px 34px -10px rgba(49,198,60,0.6);transform:translateY(-1px)}
.ecp-cta-bar:active{transform:scale(0.995)}

/* ===== SECTION HEADER ===== */
.ecp-section-head{display:flex;align-items:center;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.ecp-section-head h2{font-size:44px;letter-spacing:-1px;margin:0;flex:1;min-width:300px;font-weight:800}
.ecp-section-head-meta{display:flex;align-items:center;gap:16px;color:var(--ecp-green);font-size:13px;font-weight:800;letter-spacing:4px;text-transform:uppercase;flex-shrink:0}
.ecp-section-head-meta::before{content:"";width:80px;height:1px;background:var(--ecp-green)}
.ecp-section-intro{font-size:17px;color:var(--ecp-text-muted);margin-bottom:32px;max-width:760px}

/* ===== REVIEWS ===== */
.ecp-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ecp-review{background:var(--ecp-surface);border:1px solid var(--ecp-border-soft);border-radius:var(--ecp-radius);padding:28px;transition:border-color 0.15s,transform 0.15s}
.ecp-review:hover{border-color:var(--ecp-border)}
.ecp-review-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.ecp-review-stars{display:inline-flex;gap:3px;color:var(--ecp-green)}
.ecp-review-stars svg{width:16px;height:16px;fill:var(--ecp-green)}
.ecp-review-date{font-size:13px;color:var(--ecp-text-dim);font-weight:600}
.ecp-review h4{font-size:18px;margin-bottom:12px;font-weight:800}
.ecp-review p{font-size:14.5px;line-height:1.65;color:var(--ecp-text-muted);margin:0}

/* ===== FAQ — only highlight open item ===== */
.ecp-faq{display:flex;flex-direction:column;gap:12px}
.ecp-faq-item{background:var(--ecp-surface);border:1px solid var(--ecp-border-soft);border-radius:var(--ecp-radius);overflow:hidden;transition:border-color 0.2s,background 0.2s}
.ecp-faq-item[open]{border-color:var(--ecp-green);background:var(--ecp-surface-2)}
.ecp-faq-item summary{list-style:none;cursor:pointer;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:17px;font-weight:700;color:var(--ecp-text);user-select:none;transition:background 0.15s}
.ecp-faq-item:hover summary{background:rgba(255,255,255,0.02)}
.ecp-faq-item summary::-webkit-details-marker{display:none}
.ecp-faq-item summary::after{content:"+";flex-shrink:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;color:var(--ecp-green);font-size:24px;font-weight:300;transition:transform 0.2s;border:1.5px solid var(--ecp-border);border-radius:50%}
.ecp-faq-item[open] summary::after{content:"−";border-color:var(--ecp-green);background:rgba(49,198,60,0.1)}
.ecp-faq-item-body{padding:0 28px 22px;color:var(--ecp-text-muted);font-size:15.5px;line-height:1.7}
.ecp-faq-item-body p{margin:0;color:var(--ecp-text-muted)}

/* ===== RELATED GAMES ===== */
.ecp-related{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ecp-related-card{display:flex;flex-direction:column;padding:28px 24px;background:var(--ecp-surface);border:1px solid var(--ecp-border-soft);border-radius:var(--ecp-radius);text-decoration:none !important;transition:border-color 0.15s,transform 0.15s,background 0.15s;min-height:170px}
.ecp-related-card:hover{border-color:var(--ecp-green);transform:translateY(-3px);background:var(--ecp-surface-2)}
.ecp-related-card h4{font-size:17px;margin-bottom:8px;color:var(--ecp-text);font-weight:800;line-height:1.3}
.ecp-related-card p{font-size:13.5px;color:var(--ecp-text-muted);margin:0;line-height:1.5;flex:1}
.ecp-related-card-arrow{margin-top:16px;color:var(--ecp-green);font-size:18px;font-weight:800}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .ecp-hero h1{font-size:52px}
  .ecp-feature h3{font-size:20px;min-height:48px}
}
@media (max-width:980px){
  .ecp-section{padding:56px 0}
  .ecp-hero{grid-template-columns:1fr;gap:40px}
  .ecp-hero h1{font-size:42px}
  .ecp-hero-sub{font-size:19px}
  .ecp-hero-media{aspect-ratio:16/10;max-width:600px}
  .ecp-features{grid-template-columns:repeat(2,1fr)}
  .ecp-feature{border-right:1px solid var(--ecp-border);border-bottom:1px solid var(--ecp-border)}
  .ecp-feature:nth-child(2n){border-right:none}
  .ecp-feature:nth-last-child(-n+2){border-bottom:none}
  .ecp-feature h3{min-height:auto}
  .ecp-reviews{grid-template-columns:1fr}
  .ecp-related{grid-template-columns:repeat(2,1fr)}
  .ecp-section-head h2{font-size:34px}
}
@media (max-width:560px){
  .ecp-section{padding:48px 0}
  .ecp-container{padding:0 18px}
  .ecp-hero h1{font-size:34px}
  .ecp-hero-sub{font-size:17px}
  .ecp-features{grid-template-columns:1fr;border-radius:var(--ecp-radius)}
  .ecp-feature{border-right:none;border-bottom:1px solid var(--ecp-border)}
  .ecp-feature:last-child{border-bottom:none}
  .ecp-related{grid-template-columns:1fr}
  .ecp-section-head h2{font-size:26px}
  .ecp-section-head{gap:16px;margin-bottom:32px}
  .ecp-section-head-meta::before{width:40px}
  .ecp-faq-item summary{padding:18px 20px;font-size:15px}
  .ecp-faq-item-body{padding:0 20px 18px;font-size:14.5px}
  .ecp-trust-strip{gap:14px;padding:16px}
  .ecp-cta-bar{padding:20px;font-size:16px}
}