/*
  LiDAR startup website styles
  Sections:
  1. Global
  2. Hero
  3. Our Technology
  4. About Us
*/
* { box-sizing: border-box; }
    html, body { margin: 0; width: 100%; height: 100%; }
    body { font-family: Inter, Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif; background:#0a1118; }

    .hero {
      position: relative;
      min-height: 100vh;
      width: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
      background-image: url("../images/hero.png");
      background-size: cover;
      background-position: center center;
    }

    /* Keep the left side readable while preserving the photograph. */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg,
          rgba(4,10,16,0.92) 0%,
          rgba(4,10,16,0.72) 32%,
          rgba(4,10,16,0.26) 56%,
          rgba(4,10,16,0.04) 78%);
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.22));
      pointer-events: none;
    }

    .content {
      position: relative;
      z-index: 1;
      width: min(760px, 58vw);
      margin-left: clamp(34px, 7vw, 132px);
      padding: 80px 0;
      color: #fff;
    }

    h1 {
      margin: 0 0 28px;
      max-width: 760px;
      font-size: clamp(48px, 5.4vw, 88px);
      line-height: 1.02;
      letter-spacing: -0.045em;
      font-weight: 750;
      text-shadow: 0 3px 28px rgba(0,0,0,.32);
    }

    p {
      margin: 0;
      max-width: 700px;
      font-size: clamp(19px, 1.55vw, 28px);
      line-height: 1.65;
      letter-spacing: -0.025em;
      font-weight: 430;
      color: rgba(255,255,255,.91);
      text-shadow: 0 2px 18px rgba(0,0,0,.42);
    }

    @media (max-width: 900px) {
      .hero {
        min-height: 760px;
        align-items: flex-end;
        background-position: 66% center;
      }
      .hero::before {
        background: linear-gradient(180deg,
          rgba(4,10,16,0.12) 20%,
          rgba(4,10,16,0.44) 54%,
          rgba(4,10,16,0.94) 100%);
      }
      .content {
        width: auto;
        margin: 0;
        padding: 56px 28px 64px;
      }
      h1 {
        font-size: clamp(42px, 11vw, 66px);
      }
      p {
        font-size: clamp(18px, 4.4vw, 24px);
      }
    }


    /* Our Technology section */
    .technology {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 72% 12%, rgba(24,105,180,.12), transparent 34%),
        radial-gradient(circle at 18% 72%, rgba(18,87,154,.08), transparent 32%),
        #07111b;
      color: #fff;
      padding: clamp(78px, 8vw, 132px) 0 clamp(86px, 9vw, 150px);
      border-top: 1px solid rgba(101,164,221,.10);
    }

    .technology::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(91,150,201,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91,150,201,.025) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 80%);
      pointer-events: none;
    }

    .technology-inner {
      position: relative;
      z-index: 1;
      width: min(1420px, calc(100% - 64px));
      margin: 0 auto;
    }

    .section-kicker {
      margin: 0 0 14px;
      font-size: 14px;
      line-height: 1;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 700;
      color: #4fa8ef;
    }

    .technology h2 {
      margin: 0 0 22px;
      font-size: clamp(38px, 4vw, 64px);
      line-height: 1.08;
      letter-spacing: -.04em;
      font-weight: 720;
    }

    .technology-intro {
      margin: 0 0 clamp(48px, 5vw, 74px);
      max-width: 820px;
      font-size: clamp(18px, 1.35vw, 23px);
      line-height: 1.7;
      color: rgba(225,238,249,.72);
      text-shadow: none;
    }

    .architecture-frame {
      width: 100%;
      margin: 0 auto clamp(52px, 5vw, 76px);
      padding: clamp(14px, 1.7vw, 24px);
      border: 1px solid rgba(119,176,225,.17);
      border-radius: 24px;
      background: rgba(6,17,28,.68);
      box-shadow: 0 24px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025);
    }

    .architecture-frame img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 15px;
    }

    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .benefit-card {
      position: relative;
      min-height: 220px;
      padding: 34px 32px 32px;
      border: 1px solid rgba(107,170,224,.18);
      border-radius: 20px;
      background: linear-gradient(145deg, rgba(14,34,52,.78), rgba(6,20,33,.82));
      box-shadow: 0 20px 58px rgba(0,0,0,.19), inset 0 1px 0 rgba(255,255,255,.025);
    }

    .benefit-card::before {
      content: "";
      position: absolute;
      left: 31px;
      top: 26px;
      width: 34px;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, #168bea, #6ac4ff);
      box-shadow: 0 0 16px rgba(40,154,239,.36);
    }

    .benefit-card h3 {
      margin: 20px 0 16px;
      font-size: clamp(23px, 1.7vw, 30px);
      line-height: 1.2;
      letter-spacing: -.025em;
      font-weight: 650;
      color: #f5f9fc;
    }

    .benefit-card p {
      margin: 0;
      font-size: clamp(16px, 1.05vw, 19px);
      line-height: 1.75;
      letter-spacing: -.015em;
      font-weight: 420;
      color: rgba(211,229,243,.72);
      text-shadow: none;
    }

    @media (max-width: 980px) {
      .technology-inner {
        width: min(100% - 40px, 1420px);
      }
      .benefit-grid {
        grid-template-columns: 1fr;
      }
      .benefit-card {
        min-height: 0;
      }
    }

    @media (max-width: 640px) {
      .technology {
        padding: 70px 0 86px;
      }
      .technology-inner {
        width: min(100% - 28px, 1420px);
      }
      .architecture-frame {
        padding: 8px;
        border-radius: 16px;
      }
      .architecture-frame img {
        border-radius: 10px;
      }
      .benefit-card {
        padding: 30px 24px 26px;
      }
      .benefit-card::before {
        left: 24px;
      }
    }

    /* About Us section */
    .about {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 14% 18%, rgba(29,116,190,.10), transparent 30%),
        radial-gradient(circle at 82% 74%, rgba(24,94,157,.08), transparent 34%),
        #09131d;
      color: #fff;
      padding: clamp(86px, 9vw, 148px) 0;
      border-top: 1px solid rgba(101,164,221,.10);
    }

    .about::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(91,150,201,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91,150,201,.022) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.34), transparent 86%);
      pointer-events: none;
    }

    .about-inner {
      position: relative;
      z-index: 1;
      width: min(1180px, calc(100% - 64px));
      margin: 0 auto;
    }

    .about .section-kicker {
      margin-bottom: 14px;
    }

    .about h2 {
      margin: 0 0 42px;
      font-size: clamp(40px, 4vw, 64px);
      line-height: 1.08;
      letter-spacing: -.04em;
      font-weight: 720;
    }

    .company-panel {
      position: relative;
      max-width: 1060px;
      padding: clamp(34px, 4vw, 58px);
      border: 1px solid rgba(107,170,224,.18);
      border-radius: 24px;
      background:
        linear-gradient(145deg, rgba(14,34,52,.76), rgba(6,20,33,.84));
      box-shadow:
        0 24px 72px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.025);
    }

    .company-panel::before {
      content: "";
      position: absolute;
      left: clamp(34px, 4vw, 58px);
      top: 32px;
      width: 44px;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, #168bea, #6ac4ff);
      box-shadow: 0 0 18px rgba(40,154,239,.42);
    }

    .company-panel h3 {
      margin: 18px 0 24px;
      font-size: clamp(27px, 2vw, 36px);
      line-height: 1.2;
      letter-spacing: -.025em;
      font-weight: 650;
      color: #f5f9fc;
    }

    .company-panel p {
      max-width: 980px;
      margin: 0;
      font-size: clamp(17px, 1.25vw, 22px);
      line-height: 1.8;
      letter-spacing: -.012em;
      font-weight: 410;
      color: rgba(220,234,246,.78);
      text-shadow: none;
    }

    .company-panel p + p {
      margin-top: 20px;
    }

    .site-footer {
      margin-top: 36px;
      padding: 20px 20px 42px;
      background: #08131d;
    }

    .footer-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 10px;
    }

    .footer-logo {
      display: block;
      width: 50%;
      max-width: 260px;
      min-width: 120px;
      height: auto;
      opacity: 0.9;
    }

    .footer-address {
      margin: 0;
      font-size: clamp(12px, 0.9vw, 15px);
      line-height: 1.6;
      letter-spacing: -0.01em;
      color: rgba(216, 231, 245, 0.78);
      text-align: center;
    }

    @media (max-width: 640px) {
      .about {
        padding: 72px 0 86px;
      }
      .about-inner {
        width: min(100% - 28px, 1180px);
      }
      .company-panel {
        padding: 32px 24px 30px;
        border-radius: 18px;
      }
      .company-panel::before {
        left: 24px;
        top: 25px;
      }
      .site-footer {
        margin-top: 16px;
        padding-bottom: 30px;
      }
      .footer-logo {
        width: 48%;
      }
    }