@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg:#090b0c;
  --card-soft:#0d1012;
  --line:#24292d;
  --amber:#ffb300;
  --text:#f5f3ed;
  --muted:#969da3;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body {
  min-height:100vh;
  background:
  radial-gradient(
    circle at 50% 0%,
    rgba(255,179,0,.12),
    transparent 35%
    ),
    var(--bg);

    color:var(--text);
    font-family:Inter,sans-serif;

    display:flex;
    justify-content:center;

    padding:60px 20px;
  }

  .wrapper {
    width:100%;
    max-width:1140px;
  }


  /* Header */

  .header {
    margin-bottom:30px;
    animation:fadeUp .7s ease-out both;
  }

  .logo {
    display:inline-block;

    color:var(--text);
    text-decoration:none;

    font-size:25px;
    font-weight:700;

    letter-spacing:-.3px;

    margin-bottom:20px;

    transition:opacity .2s ease;
  }

  .logo:hover {
    opacity:.8;
  }

  .logo span,
  h1 span {
    color:var(--amber);
  }


  .tagline {
    color:var(--amber);

    font-size:14px;
    font-weight:600;

    letter-spacing:.08em;

    margin-bottom:32px;

    padding-bottom:24px;

    border-bottom:3px solid var(--amber);
  }


  h1 {
    font-size:clamp(48px,6vw,76px);

    line-height:1.05;

    letter-spacing:-3px;
    text-align: center;
  }


  .subtitle {
    margin-top:24px;

    font-size:22px;

    line-height:1.7;

    color:var(--muted);
    text-align: center;
  }


  /* Main */

  .section {
    animation:fadeUp .7s ease-out .15s both;
  }


  .description {
    font-size:19px;

    line-height:1.8;

    color:var(--text);
    text-align: center;
    margin-top: 35px;
  }


  /* Products */

  .products {

    margin-top:45px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:16px;
  }


  .product {

    display:flex;

    align-items:center;

    gap:20px;

    padding:28px;

    background:var(--card-soft);

    border:1px solid var(--line);

    border-radius:14px;

    transition:
    border-color .2s ease,
    transform .2s ease;
  }


  .product:hover {

    border-color:#5a4310;

    transform:translateY(-3px);
  }


  .product-icon {

    width:42px;

    height:42px;

    flex-shrink:0;

    color:var(--amber);
  }


  .product-icon svg {

    width:100%;

    height:100%;

    stroke:currentColor;

    fill:none;

    stroke-width:1.6;

    stroke-linecap:round;

    stroke-linejoin:round;
  }


  .product-content {

    flex:1;
  }


  .product h3 {

    font-size:17px;

    margin-bottom:8px;
  }


  .product p {

    font-size:14px;

    line-height:1.6;

    color:var(--muted);
  }


  /* Capacity */

  .capacity {

    margin-top:55px;

    padding:28px;

    background:var(--card-soft);

    border:1px solid var(--line);

    border-radius:14px;
  }


  .capacity-top {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

    font-size:13px;

    font-family:monospace;

    color:var(--muted);
  }


  .capacity-top strong {

    color:var(--amber);

    font-size:15px;
  }


  .progress {

    height:8px;

    background:#1c2023;

    border-radius:20px;

    overflow:hidden;
  }


  .progress div {

    height:100%;

    width:0;

    background:
    linear-gradient(
      90deg,
      #9a6800,
      var(--amber)
      );

      border-radius:20px;

      box-shadow:
      0 0 18px rgba(255,179,0,.35);

      animation:
      loadProgress 1.8s cubic-bezier(.22,1,.36,1) forwards;
    }


    .note {

      margin-top:16px;

      font-size:14px;

      line-height:1.6;

      color:var(--muted);
    }


    /* Footer */

    footer {

      text-align:center;

      margin-top:40px;

      font-size:12px;

      color:#555c61;
    }


    /* Animations */

    @keyframes loadProgress {

      from {
        width:0;
      }

      to {
        width:72%;
      }

    }


    @keyframes fadeUp {

      from {
        opacity:0;
        transform:translateY(15px);
      }

      to {
        opacity:1;
        transform:translateY(0);
      }

    }


    /* Responsive */

    @media(max-width:900px) {

      .products {
        grid-template-columns:repeat(2,1fr);
      }

    }


    @media(max-width:600px) {

      body {
        padding:35px 18px;
      }


      h1 {
        font-size:clamp(40px,12vw,56px);
        letter-spacing:-1.5px;
      }


      .subtitle {
        font-size:17px;
      }


      .products {
        grid-template-columns:1fr;
      }


      .product {

        padding:22px;

        gap:16px;

      }


      .product-icon {

        width:34px;

        height:34px;

      }

    }


    .cta {

      margin-top:60px;

      padding:45px;

      background:
      linear-gradient(
        135deg,
        rgba(255,179,0,.08),
        transparent
        ),
        var(--card-soft);

        border:1px solid var(--line);

        border-radius:18px;

        text-align:center;

      }


      .cta h2 {

        font-size:clamp(30px,4vw,44px);

        line-height:1.15;

        letter-spacing:-1.5px;

        margin-bottom:20px;

      }


      .cta h2 span {

        color:var(--amber);

      }


      .cta p {

        max-width:760px;

        margin:0 auto 16px;

        font-size:17px;

        line-height:1.8;

        color:var(--muted);

      }


      .cta-button {

        display:inline-flex;

        align-items:center;

        justify-content:center;

        margin-top:25px;

        padding:14px 26px;

        border-radius:8px;

        background:var(--amber);

        color:#17120a;

        text-decoration:none;

        font-size:15px;

        font-weight:700;

        transition:
        transform .2s ease,
        opacity .2s ease;

      }


      .cta-button:hover {

        transform:translateY(-2px);

        opacity:.9;

      }


      @media(max-width:600px){

        .cta {

          padding:30px 22px;

        }

        .cta p {

          font-size:15px;

        }

      }

      .cta-status {

        margin-top:28px;

        padding-top:22px;

        border-top:1px solid var(--line);

        font-size:14px;

        line-height:1.7;

        color:var(--amber);

        font-weight:500;

      }

      .hero-cta {

        margin-top:45px;

        display:grid;

        grid-template-columns:1.1fr .9fr;

        gap:40px;

        align-items:center;

        padding:45px;

        background:
        linear-gradient(
          135deg,
          rgba(255,179,0,.1),
          transparent 60%
          ),
          var(--card-soft);

          border:1px solid var(--line);

          border-radius:18px;

          overflow:hidden;

        }


        .hero-cta-content h2 {

          font-size:clamp(30px,4vw,44px);

          line-height:1.15;

          letter-spacing:-1.5px;

          margin-bottom:18px;

        }


        .hero-cta-content h2 span {

          color:var(--amber);

        }


        .hero-cta-content p {

          font-size:17px;

          line-height:1.7;

          color:var(--muted);

          max-width:560px;

        }


        .hero-cta-points {

          display:flex;

          gap:25px;

          margin-top:30px;

        }


        .hero-cta-points div {

          display:flex;

          flex-direction:column;

          gap:5px;

        }


        .hero-cta-points strong {

          color:var(--amber);

          font-size:15px;

        }


        .hero-cta-points span {

          color:var(--muted);

          font-size:13px;

        }


        .growth-chart {

          width:100%;

        }


        .growth-chart svg {

          width:100%;

          height:auto;

        }


        .chart-area {

          fill:url(#growthArea);

        }


        .chart-line {

          stroke:url(#growthLine);

          stroke-width:5;

          stroke-linecap:round;

          stroke-linejoin:round;

          stroke-dasharray:900;

          stroke-dashoffset:900;

          animation:
          drawChart 2.5s ease-out forwards;
        }


        .growth-chart circle {

          fill:var(--amber);

          animation:
          pulsePoint 2s infinite;

        }


        .growth-chart text {

          fill:var(--amber);

          font-family:Inter,sans-serif;

          font-size:22px;

          font-weight:700;

        }


        @keyframes drawChart {

          to {
            stroke-dashoffset:0;
          }

        }


        @keyframes pulsePoint {

          0%,100% {
            opacity:1;
          }

          50% {
            opacity:.45;
          }

        }


        @media(max-width:900px){

          .hero-cta {

            grid-template-columns:1fr;

          }


          .growth-chart {

            margin-top:20px;

          }

        }


        @media(max-width:600px){

          .hero-cta {

            padding:28px;

          }


          .hero-cta-points {

            flex-direction:column;

            gap:15px;

          }

        }

        .cta-status-top {

          grid-column:1 / -1;

          margin-top:20px;

          padding-top:24px;

          border-top:1px solid var(--line);

          display:flex;

          align-items:center;

          gap:18px;

        }


        .cta-status-top .status-label {

          flex-shrink:0;

          color:var(--amber);

          font-size:12px;

          font-weight:700;

          letter-spacing:.12em;

          text-transform:uppercase;

        }


        .cta-status-top p {

          margin:0;

          color:var(--muted);

          font-size:15px;

          line-height:1.6;

        }


        @media(max-width:600px){

          .cta-status-top {

            flex-direction:column;


            gap:8px;

          }

        }

        @media(max-width:600px){

          .header {
            text-align:center;
          }

          .logo {
            margin-left:auto;
            margin-right:auto;
          }

          .tagline {
            text-align:center;
          }

          h1 {
            text-align:center;
          }

          .subtitle {
            text-align:center;
            margin-left:auto;
            margin-right:auto;
          }

        }

        @media(max-width:600px){

          .hero-cta {

            padding:34px 24px;

            text-align:center;

          }


          .hero-cta-content h2 {

            font-size:38px;

            line-height:1.15;

            letter-spacing:-1px;

          }


          .hero-cta-content p {

            font-size:18px;

            line-height:1.75;

            margin-left:auto;

            margin-right:auto;

          }


          .hero-cta-points {

            flex-direction:column;

            align-items:center;

            gap:20px;

            margin-top:32px;

          }


          .hero-cta-points div {

            align-items:center;

            text-align:center;

          }


          .hero-cta-points strong {

            font-size:17px;

          }


          .hero-cta-points span {

            font-size:15px;

          }


          .growth-chart {

            margin-top:35px;

            width:110%;

            margin-left:-5%;

          }


          .cta-status {
            flex-direction:column;
            align-items:center;
            justify-content:center;
            text-align:center;
            gap:10px;
          }


          .cta-status .status-label {
            width:100%;
            text-align:center;
            justify-content:center;
          }


          .cta-status p {
            width:100%;
            max-width:320px;
            margin:0 auto;
            text-align:center;
          }

        }


        .testimonials {

          margin-top:70px;

        }


        .testimonials-header {

          margin-bottom:35px;
          text-align: center;

        }


        .section-label {

          color:var(--amber);

          font-size:13px;

          font-weight:700;

          text-transform:uppercase;

          letter-spacing:.12em;

          margin-bottom:15px;

        }


        .testimonials h2 {

          font-size:clamp(32px,4vw,46px);

          line-height:1.15;

          letter-spacing:-1.5px;

        }


        .testimonials h2 span {

          color:var(--amber);

        }


        .testimonial-grid {

          display:grid;

          grid-template-columns:repeat(3,1fr);

          gap:16px;

        }


        .testimonial {

          padding:28px;

          background:var(--card-soft);

          border:1px solid var(--line);

          border-radius:14px;

          display:flex;

          flex-direction:column;

          justify-content:space-between;

          min-height:220px;

          transition:
          transform .2s ease,
          border-color .2s ease;

        }


        .testimonial:hover {

          transform:translateY(-4px);

          border-color:#5a4310;

        }


        .testimonial p {

          color:var(--muted);

          font-size:15px;

          line-height:1.75;

        }


        .testimonial-author {

          margin-top:25px;

          display:flex;

          flex-direction:column;

          gap:4px;

        }


        .testimonial-author strong {

          color:var(--text);

          font-size:14px;

        }


        .testimonial-author span {

          color:var(--amber);

          font-size:12px;

        }


        @media(max-width:900px){

          .testimonial-grid {

            grid-template-columns:repeat(2,1fr);

          }

        }


        @media(max-width:600px){

          .testimonials {

            margin-top:50px;

          }


          .testimonials-header {

            text-align:center;

          }


          .testimonial-grid {

            grid-template-columns:1fr;

          }


          .testimonial {

            min-height:auto;

          }

        }
        footer {

          margin-top:50px;

          padding-top:35px;

          border-top:3px solid var(--amber);

          text-align:center;

        }


        .socials {

          display:flex;

          justify-content:center;

          align-items:center;

          gap:18px;

          margin-bottom:22px;

        }


        .social-icon {

          width:42px;

          height:42px;

          display:flex;

          align-items:center;

          justify-content:center;

          color:var(--muted);

          border:1px solid var(--line);

          border-radius:50%;

          transition:
          color .2s ease,
          border-color .2s ease,
          transform .2s ease,
          background .2s ease;

        }


        .social-icon svg {

          width:20px;

          height:20px;

          stroke:currentColor;

          fill:none;

          stroke-width:1.8;

          stroke-linecap:round;

          stroke-linejoin:round;

        }


        .social-icon:hover {

          color:var(--amber);

          border-color:var(--amber);

          background:rgba(255,179,0,.05);

          transform:translateY(-3px);

        }


        .footer-copy {

          font-size:12px;

          color:#555c61;

        }


        @media(max-width:600px){

          .socials {

            gap:14px;

          }


          .social-icon {

            width:38px;

            height:38px;

          }


          .social-icon svg {

            width:18px;

            height:18px;

          }

        }
        /* Technology Stack */

        .technology-stack {

          margin-top:30px;

          padding:55px 0;

        }


        .tech-header {

          text-align:center;

          margin-bottom:40px;

        }


        .tech-header .section-label {

          color:var(--amber);

          font-size:13px;

          font-weight:700;

          text-transform:uppercase;

          letter-spacing:.12em;

          margin-bottom:18px;

        }


        .tech-header h2 {

          font-size:clamp(34px,4vw,48px);

          line-height:1.15;

          letter-spacing:-1.5px;

          margin-bottom:20px;

        }


        .tech-header h2 span {

          color:var(--amber);

        }


        .tech-header p {

          max-width:720px;

          margin:0 auto;

          color:var(--muted);

          font-size:17px;

          line-height:1.7;

        }


        /* Grid */

        .tech-grid {

          display:grid;

          grid-template-columns:repeat(6,1fr);

          gap:16px;

        }


        /* Technology cards */

        .tech-item {

          min-height:140px;

          background:var(--card);

          border:1px solid var(--line);

          border-radius:16px;

          display:flex;

          flex-direction:column;

          align-items:center;

          justify-content:center;

          gap:16px;

          padding:20px 12px;

          transition:

            transform .25s ease,

            border-color .25s ease,

            background .25s ease;

        }


        .tech-item:hover {

          transform:translateY(-5px);

          border-color:rgba(255,179,0,.45);

          background:#15191b;

        }


        /* Icon container */

        .tech-logo {

          width:58px;

          height:58px;

          display:flex;

          align-items:center;

          justify-content:center;

          border-radius:14px;

          color:var(--amber);

          background:rgba(255,179,0,.08);

          border:1px solid rgba(255,179,0,.25);

          transition:

            transform .25s ease,

            box-shadow .25s ease;

        }


        .tech-item:hover .tech-logo {

          transform:scale(1.08);

          box-shadow:

            0 0 25px rgba(255,179,0,.18);

        }


        /* SVG icons */

        .tech-logo svg {

          width:28px;

          height:28px;

          stroke:currentColor;

          fill:none;

          stroke-width:1.8;

          stroke-linecap:round;

          stroke-linejoin:round;

        }


        /* Labels */

        .tech-item span {

          color:var(--muted);

          font-size:13px;

          line-height:1.4;

          text-align:center;

        }


        /* Tablet */

        @media(max-width:1000px){

          .tech-grid {

            grid-template-columns:repeat(4,1fr);

          }

        }


        /* Mobile */

        @media(max-width:600px){

          .technology-stack {

            margin-top:50px;

            padding:40px 0;

          }


          .tech-header {

            text-align:center;

            margin-bottom:30px;

          }


          .tech-header h2 {

            font-size:34px;

            letter-spacing:-1px;

          }


          .tech-header p {

            font-size:16px;

          }


          .tech-grid {

            grid-template-columns:repeat(2,1fr);

            gap:12px;

          }


          .tech-item {

            min-height:120px;

            padding:16px 8px;

          }


          .tech-logo {

            width:52px;

            height:52px;

          }


          .tech-logo svg {

            width:24px;

            height:24px;

          }


          .tech-item span {

            font-size:12px;

          }

        }