:root {
      --bg: #060707;
      --bg-soft: #101313;
      --surface: #141818;
      --surface-2: #1b2020;
      --line: rgba(255,255,255,0.08);
      --line-strong: rgba(140,255,79,0.32);
      --text: #f4f7f4;
      --muted: #a7b0aa;
      --green: #8cf44f;
      --green-deep: #71d13a;
      --steel: #c7d0cb;
      --steel-dark: #78817d;
      --shadow: 0 30px 80px rgba(0,0,0,0.45);
      --radius: 22px;
      --container: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top right, rgba(140,244,79,0.09), transparent 28%),
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.05), transparent 20%),
        linear-gradient(180deg, #050606 0%, #090b0b 44%, #0c1010 100%);
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }

    .container {
      width: min(calc(100% - 40px), var(--container));
      margin: 0 auto;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(16px);
      background: rgba(6,7,7,0.68);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: 82px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background:
        linear-gradient(135deg, rgba(140,244,79,0.95), rgba(76,139,43,0.9)),
        #111;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 12px 30px rgba(140,244,79,0.24);
      position: relative;
      overflow: hidden;
    }

    .brand-mark::before,
    .brand-mark::after {
      content: "";
      position: absolute;
      inset: 8px;
      border: 2px solid rgba(0,0,0,0.48);
      border-radius: 10px;
      transform: skewX(-12deg);
    }

    .brand-mark::after {
      inset: 13px 8px 13px 17px;
      background: rgba(0,0,0,0.36);
      border: 0;
      border-radius: 6px;
    }

    .nav-links {
      display: flex;
      gap: 28px;
      color: var(--muted);
      font-size: 14px;
    }

    .nav-links a:hover { color: var(--text); }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 20px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 15px;
      transition: 180ms ease;
      border: 1px solid transparent;
    }

    .btn-primary {
      color: #0a0d09;
      background: linear-gradient(180deg, #97ff5c 0%, #79db40 100%);
      box-shadow: 0 16px 36px rgba(121, 219, 64, 0.28);
    }

    .btn-primary:hover { transform: translateY(-1px); }

    .btn-ghost {
      color: var(--text);
      border-color: rgba(140,244,79,0.45);
      background: rgba(255,255,255,0.02);
    }

    .btn-ghost:hover {
      border-color: var(--green);
      background: rgba(140,244,79,0.08);
    }

    .hero {
      padding: 58px 0 36px;
    }

    .hero-shell {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      background:
        linear-gradient(135deg, rgba(140,244,79,0.09), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
        #0b0f0f;
      border-radius: 34px;
      box-shadow: var(--shadow);
      isolation: isolate;
    }

    .hero-shell::before {
      content: "";
      position: absolute;
      width: 640px;
      height: 640px;
      right: -180px;
      top: -180px;
      background: radial-gradient(circle, rgba(140,244,79,0.18), transparent 58%);
      z-index: -1;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 32px;
      align-items: center;
      padding: 54px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border: 1px solid rgba(140,244,79,0.24);
      border-radius: 999px;
      color: #d6f8c3;
      background: rgba(140,244,79,0.08);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .hero h1 {
      margin: 22px 0 18px;
      font-size: clamp(42px, 6vw, 72px);
      line-height: 0.98;
      letter-spacing: -0.04em;
      max-width: 11ch;
      text-wrap: balance;
    }

    .hero p.lead {
      margin: 0;
      max-width: 60ch;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.7;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 28px;
    }

    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 36px;
    }

    .metric {
      padding: 18px;
      border-radius: 18px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.07);
    }

    .metric strong {
      display: block;
      font-size: 28px;
      line-height: 1;
      margin-bottom: 8px;
      color: var(--green);
    }

    .metric span {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .hero-visual {
      position: relative;
      min-height: 640px;
      display: grid;
      place-items: center;
    }

    .hero-orbit {
      position: absolute;
      inset: 10% 8%;
      border-radius: 34px;
      border: 1px solid rgba(255,255,255,0.06);
      background:
        linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
      overflow: hidden;
    }

    .hero-orbit::before,
    .hero-orbit::after {
      content: "";
      position: absolute;
      inset: 9% 14%;
      border: 1px solid rgba(140,244,79,0.18);
      border-radius: 50%;
      transform: rotate(-16deg);
    }

    .hero-orbit::after {
      inset: 22% 6%;
      transform: rotate(14deg);
      border-color: rgba(255,255,255,0.11);
    }

    .product-card {
      position: relative;
      width: min(100%, 520px);
      border-radius: 28px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)),
        #0f1313;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 26px 70px rgba(0,0,0,0.45);
      transform: rotate(-4deg);
    }

    .product-card img {
      width: 100%;
      height: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      filter: saturate(1.05) contrast(1.08);
    }

    .visual-badge,
    .visual-panel {
      position: absolute;
      backdrop-filter: blur(16px);
      background: rgba(10,13,12,0.62);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 20px 40px rgba(0,0,0,0.24);
    }

    .visual-badge {
      top: 14%;
      left: -2%;
      padding: 16px 18px;
      border-radius: 18px;
      max-width: 220px;
    }

    .visual-badge strong,
    .visual-panel strong {
      display: block;
      margin-bottom: 6px;
      color: var(--green);
      font-size: 13px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .visual-badge p,
    .visual-panel p {
      margin: 0;
      color: var(--steel);
      font-size: 13px;
      line-height: 1.55;
    }

    .visual-panel {
      right: 0;
      bottom: 9%;
      width: 245px;
      padding: 18px;
      border-radius: 22px;
    }

    .visual-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .visual-list div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--steel);
      font-size: 13px;
    }

    .visual-list span:last-child {
      color: var(--text);
      font-weight: 700;
    }

    section {
      padding: 38px 0;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 24px;
      margin-bottom: 24px;
    }

    .section-head h2 {
      margin: 0;
      font-size: clamp(28px, 3vw, 44px);
      line-height: 1.03;
      letter-spacing: -0.03em;
      text-wrap: balance;
      max-width: 12ch;
    }

    .section-head p {
      margin: 0;
      color: var(--muted);
      max-width: 60ch;
      line-height: 1.7;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }

    .feature-card,
    .application-card,
    .spec-card,
    .sustain-card,
    .cta-panel {
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
      box-shadow: var(--shadow);
    }

    .feature-card {
      padding: 24px;
      min-height: 220px;
      position: relative;
      overflow: hidden;
    }

    .feature-card::before {
      content: "";
      position: absolute;
      inset: auto -10% -38% auto;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(140,244,79,0.14), transparent 70%);
    }

    .icon-chip {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-weight: 800;
      color: #071006;
      background: linear-gradient(180deg, #95fc5a, #77d940);
      box-shadow: 0 12px 28px rgba(121,219,64,0.22);
      margin-bottom: 18px;
    }

    .feature-card h3,
    .application-card h3,
    .spec-card h3,
    .sustain-card h3,
    .cta-panel h3 {
      margin: 0 0 12px;
      font-size: 22px;
      line-height: 1.12;
      letter-spacing: -0.02em;
    }

    .feature-card p,
    .application-card p,
    .spec-card p,
    .sustain-card p,
    .cta-panel p,
    .bullet-list li {
      margin: 0;
      color: var(--muted);
      line-height: 1.7;
      font-size: 15px;
    }

    .application-grid {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 18px;
    }

    .application-card,
    .spec-card,
    .sustain-card,
    .cta-panel {
      padding: 28px;
    }

    .application-card.dark {
      background:
        linear-gradient(135deg, rgba(140,244,79,0.10), rgba(255,255,255,0.02) 32%, rgba(255,255,255,0.02)),
        #111515;
      min-height: 100%;
    }

    .application-card.light {
      background: linear-gradient(180deg, #dbe3de 0%, #b7c0bb 100%);
      color: #101413;
      border-color: rgba(255,255,255,0.2);
    }

    .application-card.light p,
    .application-card.light .bullet-list li {
      color: rgba(16,20,19,0.78);
    }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .pill {
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      color: var(--steel);
      font-size: 13px;
      font-weight: 600;
    }

    .application-card.light .pill {
      background: rgba(16,20,19,0.06);
      border-color: rgba(16,20,19,0.08);
      color: #1b2420;
    }

    .bullet-list {
      padding-left: 18px;
      margin: 16px 0 0;
      display: grid;
      gap: 8px;
    }

    .spec-grid,
    .bottom-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .spec-lines {
      margin-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.08);
      display: grid;
    }

    .spec-line {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      color: var(--steel);
      font-size: 14px;
    }

    .spec-line strong {
      color: var(--text);
      font-size: 15px;
    }

    .sustain-card {
      background:
        linear-gradient(180deg, rgba(140,244,79,0.07), rgba(255,255,255,0.02)),
        #101515;
    }

    .tag {
      display: inline-flex;
      margin-bottom: 14px;
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .cta-panel {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px;
      background:
        radial-gradient(circle at top right, rgba(140,244,79,0.16), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
        #0d1111;
    }

    .footer {
      padding: 20px 0 46px;
      color: #8d9791;
      font-size: 13px;
    }

    .footer-box {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    @media (max-width: 1080px) {
      .hero-grid,
      .application-grid,
      .spec-grid,
      .bottom-grid,
      .feature-grid {
        grid-template-columns: 1fr 1fr;
      }

      .hero-grid {
        padding: 34px;
      }

      .hero-visual {
        min-height: 520px;
      }
    }

    @media (max-width: 780px) {
      .nav { min-height: 74px; }
      .nav-links { display: none; }
      .hero { padding-top: 26px; }
      .hero-grid,
      .application-grid,
      .spec-grid,
      .bottom-grid,
      .feature-grid,
      .hero-metrics {
        grid-template-columns: 1fr;
      }

      .hero-grid {
        padding: 24px;
      }

      .hero-visual {
        min-height: 460px;
      }

      .visual-badge {
        left: 2%;
        top: 8%;
      }

      .visual-panel {
        right: 4%;
        bottom: 5%;
      }

      .section-head,
      .footer-box {
        flex-direction: column;
        align-items: flex-start;
      }
    }