/* ======================
     Base & Theme (Dark Green)
     ====================== */
  :root{
    --bg:#07161a;             /* very dark blue-green */
    --bg-2:#0b2226;           /* section bg */
    --panel:#0e2a2f;          /* card bg */
    --panel-2:#11353b;        /* card hover bg */
    --primary:#1fab89;        /* green accent */
    --primary-600:#159b79;
    --primary-700:#118565;
    --text:#e7f6f2;           /* near white */
    --muted:#9ecbc2;          /* soft mint */
    --pos:#29d391;
    --neg:#ef5350;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius:18px;
    --grid-gap:14px;
  }

  *{box-sizing:border-box}
  html,body{
    margin:0;padding:0;background:var(--bg);color:var(--text);
    font-size:16px; line-height:1.6;
  }
  img{max-width:100%;display:block}
  a{color:inherit}

  /* Typography (slimmer — kept H1 bigger) */
  h1{font-size:clamp(30px, 4vw + 8px, 52px); line-height:1.08; margin:0 0 10px; font-weight:800; color:#fff}
  h2{font-size:clamp(20px, 2.2vw, 28px); line-height:1.2; margin:0 0 10px; font-weight:700; color:#fff}
  p, .muted, .sis-kpi, .sis-hero-label, .sis-kpi-label, .reason strong, .reason .muted{
    font-weight:400; /* slimmer */
  }
  p{font-size:15px}                /* down from 16–20 */
  .lead{font-size:16px; color:var(--muted)} /* slimmer lead */
  .sis-hero-label{font-size:13px}
  .sis-hero-value{font-size:clamp(24px, 3.3vw, 32px); font-weight:700}
  .sis-kpi-label{font-size:11px; text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; color:var(--muted)}
  .sis-kpi{font-size:18px}         /* down from 20 */

  /* Layout helpers */
  .container{width:min(1200px, 92vw); margin:0 auto}
  .muted{color:var(--muted)}
  .pos{color:var(--pos)}
  .neg{color:var(--neg)}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
    padding:.8rem 1.05rem;border-radius:14px;border:0;cursor:pointer;
    background:linear-gradient(135deg, var(--primary), var(--primary-700));
    color:#fff;font-weight:500;text-decoration:none;box-shadow:var(--shadow);
    transition:transform .12s ease, filter .2s ease;
    font-size:14px; letter-spacing: 0.8; 
  }
  .btn:hover{transform:translateY(-2px);filter:brightness(1.05); color: #fff;}
  .btn.secondary{background:#103438;color:var(--text);font-weight:600}

  /* ======================
     HERO
     ====================== */
  .hero{
    position:relative;
    background: linear-gradient(135deg, #146b5b 5%, #062032 90%);
    padding: 64px 0 52px;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .hero-grid{display:grid;grid-template-columns: 1.05fr .95fr; gap:34px; align-items:center}
  .cta-row{display:flex; gap:10px; flex-wrap:wrap}

  /* KPI grid */
  .kpi-wrap{
    display:grid; gap:var(--grid-gap);
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-areas:
      "hero invested profit"
      "hero onedaynet onedaypct";
  }
  .sis-hero-card{grid-area:hero;background:var(--panel);border:1px solid rgba(255,255,255,.06);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow)}
  .sis-card{background:var(--panel);border:1px solid rgba(255,255,255,.06);padding:16px;border-radius:var(--radius);box-shadow:var(--shadow);min-height:86px;display:flex;flex-direction:column;justify-content:center}
  .area-invested{grid-area:invested}
  .area-profit{grid-area:profit}
  .area-1dnet{grid-area:onedaynet}
  .area-1dpct{grid-area:onedaypct}
  .sis-card:hover,.sis-hero-card:hover{background:var(--panel-2)}

  /* ======================
     SECTION: What this is / How it works (own section)
     ====================== */
  .section-what{background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); padding:60px 0}
  .what-wrap{display:grid; gap:18px}
  .panel{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
  .panel p{margin:0; color:var(--muted); font-size:15px}

  /* ======================
     SECTION: Why use (own section)
     ====================== */
  .section-why{background:linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); padding:60px 0}
  .reasons{display:grid; gap:12px; grid-template-columns: 1fr 1fr}
  .reason{
    display:flex; gap:12px; align-items:flex-start;
    background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
    padding:14px 16px; border-radius:14px;
    transition:transform .15s ease, background .2s ease;
  }
  .reason:hover{transform:translateY(-2px); background:rgba(255,255,255,.035)}
  .reason svg{flex:0 0 20px}
  .reason strong{display:block; margin-bottom:2px; font-size:15px}
  .reason .muted{font-size:14px}

  /* ======================
     Animations (CSS) + reveal states
     ====================== */
  @keyframes fadeUp {
    from {opacity:0; transform:translateY(14px)}
    to   {opacity:1; transform:translateY(0)}
  }
  @keyframes scaleIn {
    from {opacity:0; transform:scale(.97)}
    to   {opacity:1; transform:scale(1)}
  }
  .reveal{opacity:0; transform:translateY(14px)}
  .reveal.in{opacity:1; transform:none; animation:fadeUp .5s ease forwards}
  .reveal-scale{opacity:0; transform:scale(.97)}
  .reveal-scale.in{opacity:1; transform:none; animation:scaleIn .45s ease forwards}

  /* ======================
     Responsive
     ====================== */
  @media (max-width: 960px){
    .hero-grid{grid-template-columns: 1fr; gap:26px}
    .kpi-wrap{
      grid-template-columns: 1fr 1fr; grid-template-areas:
      "hero hero"
      "invested profit"
      "onedaynet onedaypct";
    }
    .reasons{grid-template-columns:1fr}
  }
  @media (max-width: 620px){
    .kpi-wrap{
      grid-template-columns: 1fr; grid-template-areas:
      "hero" "invested" "profit" "onedaynet" "onedaypct";
    }
    .cta-row{flex-direction:column}
  }
  
.connect-section {
  background: linear-gradient(135deg, #0e3a34, #1fab89);
  color: #fff;
  padding: 80px 20px;
  width: 100vw;
  text-align: center;
}

.connect-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.connect-heading {
  font-size: 36px;
  margin-bottom: 10px;
  color: #fff;
}

.connect-subtext {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 30px;
  opacity: 0.9;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.social-icon {
  font-size: 22px;
  color: #fff;
  background: rgba(255,255,255,0.15);
  padding: 12px 16px;
  border-radius: 50px;
  transition: background 0.3s, transform 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-icon:hover {
  background: #f9f9f9;
  color: #0f7075;
  transform: scale(1.1);
}