:root {
      --black:#050505;
      --dark:#0b0b0b;
      --card:#111111;
      --green:#1F3D2B;
      --gold:#C2A15A;
      --cream:#F5F5F3;
      --muted:rgba(245,245,243,.68);
      --line:rgba(194,161,90,.24);
    }

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

    html { scroll-behavior:smooth; }

    body {
      background:var(--black);
      color:var(--cream);
      font-family:Arial, Helvetica, sans-serif;
      overflow-x:hidden;
    }

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

    .nav {
      position:fixed;
      top:0;
      width:100%;
      z-index:1000;
      padding:22px 5vw;
      display:flex;
      justify-content:space-between;
      align-items:center;
      background:rgba(5,5,5,.70);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    .logo {
      font-size:13px;
      font-weight:900;
      letter-spacing:3px;
      text-transform:uppercase;
    }

    .nav-links {
      display:flex;
      gap:22px;
      font-size:12px;
      font-weight:800;
      letter-spacing:1.3px;
      text-transform:uppercase;
      color:rgba(245,245,243,.72);
      align-items:center;
    }

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

    .nav-cta {
      border:1px solid rgba(194,161,90,.5);
      color:var(--gold);
      border-radius:999px;
      padding:9px 13px;
    }

    .menu-toggle {
      display:none;
      width:44px;
      height:44px;
      padding:10px;
      border:1px solid rgba(194,161,90,.5);
      border-radius:12px;
      background:rgba(5,5,5,.55);
      cursor:pointer;
    }

    .menu-toggle span {
      display:block;
      width:100%;
      height:2px;
      margin:5px 0;
      background:var(--gold);
      transition:.3s ease;
    }

    .hero {
      min-height:100vh;
      padding:140px 5vw 70px;
      display:flex;
      align-items:center;
      position:relative;
      overflow:hidden;
    }

    .hero::before {
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(5,5,5,.96), rgba(5,5,5,.42), rgba(5,5,5,.90)),
        linear-gradient(180deg, rgba(5,5,5,.10), rgba(5,5,5,.96)),
        url("https://c9202c464af778ade582.cdn6.editmysite.com/uploads/b/c9202c464af778ade582ea40050b032f3b810f4615601ef05b617000811714b0/dji_fly_20250110_114758_700_1736531724454_aeb-HDR_1777017055.jpg?width=2400&optimize=medium");
      background-size:cover;
      background-position:center 42%;
      transform:scale(1.02);
      z-index:-2;
    }

    .hero::after {
      content:"";
      position:absolute;
      inset:0;
      background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
      background-size:4px 4px;
      opacity:.10;
      z-index:-1;
      pointer-events:none;
    }

    .hero-content {
      max-width:1220px;
      width:100%;
    }

    .eyebrow {
      color:var(--gold);
      text-transform:uppercase;
      letter-spacing:3px;
      font-size:12px;
      font-weight:900;
      margin-bottom:18px;
    }

    h1 {
      font-size:clamp(54px,10vw,138px);
      line-height:.82;
      letter-spacing:-7px;
      text-transform:uppercase;
      max-width:1180px;
    }

    .hero-main-text {
      margin-top:28px;
      max-width:820px;
      color:rgba(245,245,243,.82);
      font-size:clamp(18px,2vw,24px);
      line-height:1.5;
    }

    .proof {
      margin-top:20px;
      max-width:760px;
      color:rgba(245,245,243,.72);
      font-size:17px;
      line-height:1.55;
    }

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

    .btn {
      display:inline-flex;
      justify-content:center;
      align-items:center;
      padding:15px 24px;
      border-radius:999px;
      font-size:12px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:1.5px;
      transition:.3s ease;
      white-space:nowrap;
    }

    .btn.gold {
      background:var(--gold);
      color:#080808;
    }

    .btn.outline {
      border:1px solid rgba(245,245,243,.38);
      color:var(--cream);
    }

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

    .quick-paths {
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:12px;
      margin-top:28px;
      max-width:980px;
    }

    .path {
      border:1px solid rgba(245,245,245,.22);
      padding:16px 18px;
      border-radius:22px;
      display:flex;
      flex-direction:column;
      gap:5px;
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:1px;
      transition:.3s ease;
      background:rgba(0,0,0,.28);
    }

    .path:hover {
      border-color:var(--gold);
      transform:translateY(-3px);
      background:rgba(194,161,90,.09);
    }

    .path strong { color:var(--gold); }

    .path span {
      color:rgba(245,245,245,.62);
      font-size:11px;
      line-height:1.35;
    }

    .trust-line {
      margin-top:22px;
      font-size:13px;
      color:rgba(245,245,245,.58);
      letter-spacing:1px;
      text-transform:uppercase;
    }

    section { padding:110px 5vw; }

    .community-note {
      background:var(--cream);
      color:#080808;
      padding:74px 5vw;
    }

    .community-wrap {
      max-width:1220px;
      margin:0 auto;
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:42px;
      align-items:center;
    }

    .community-wrap h2 {
      color:var(--green);
      font-size:clamp(34px,5vw,68px);
      line-height:.9;
      letter-spacing:-3px;
      text-transform:uppercase;
    }

    .community-wrap p {
      color:#444;
      font-size:19px;
      line-height:1.65;
      max-width:760px;
    }

    .ticker {
      overflow:hidden;
      border-top:1px solid rgba(255,255,255,.08);
      border-bottom:1px solid rgba(255,255,255,.08);
      background:#080808;
    }

    .ticker-track {
      display:flex;
      width:max-content;
      animation:ticker 30s linear infinite;
    }

    .ticker span {
      padding:18px 34px;
      color:rgba(245,245,243,.68);
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:2px;
      white-space:nowrap;
    }

    .ticker b { color:var(--gold); }

    @keyframes ticker {
      to { transform:translateX(-50%); }
    }

    .section-head {
      max-width:1220px;
      margin:0 auto 54px;
      display:grid;
      grid-template-columns:1fr .8fr;
      gap:40px;
      align-items:end;
    }

    .section-head h2 {
      font-size:clamp(42px,7vw,94px);
      line-height:.88;
      letter-spacing:-4px;
      text-transform:uppercase;
    }

    .section-head p {
      color:var(--muted);
      font-size:18px;
      line-height:1.65;
    }

    .bento {
  max-width:1380px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(260px, auto);
  gap:16px;
}

    .tile {
      position:relative;
      overflow:hidden;
      border-radius:26px;
      border:1px solid rgba(194,161,90,.18);
      background:var(--card);
      transition:.45s ease;
    }

    .tile:hover {
      transform:translateY(-7px);
      border-color:var(--gold);
      box-shadow:0 30px 80px rgba(0,0,0,.42);
    }

    .tile img {
      height:100%;
      object-fit:cover;
      opacity:.72;
      transition:.8s ease;
    }

    .tile:hover img {
      transform:scale(1.08);
      opacity:1;
    }

    .tile::after {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent, rgba(0,0,0,.78));
    }

    .tile-content {
      position:absolute;
      inset:0;
      z-index:2;
      padding:24px;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
    }

    .tile-label {
      color:var(--gold);
      font-size:11px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:2px;
      margin-bottom:8px;
    }

    .tile h3 {
  font-size:clamp(24px,2.65vw,42px);
      line-height:.95;
      text-transform:uppercase;
      letter-spacing:-1.5px;
    }

    .tile p {
      color:rgba(245,245,243,.72);
      margin-top:12px;
      max-width:420px;
      line-height:1.55;
    }

    .tile.big {
      grid-column:span 2;
      grid-row:span 2;
    }

    .tile.wide { grid-column:span 2; }
    .tile.tall { grid-row:span 2; }

    .tile.text {
      background:linear-gradient(145deg, var(--green), #0a0a0a);
    }

    .tile.gold-tile {
      background:var(--gold);
      color:#080808;
    }

    .tile.gold-tile::after { display:none; }

    .tile.gold-tile .tile-label,
    .tile.gold-tile p {
      color:#080808;
    }

    .mid-cta {
      background:
        radial-gradient(circle at top right, rgba(194,161,90,.14), transparent 34%),
        #080808;
      padding:70px 5vw;
    }

    .mid-cta-wrap {
      max-width:1220px;
      margin:0 auto;
      border:1px solid rgba(194,161,90,.34);
      border-radius:34px;
      padding:38px;
      background:
        radial-gradient(circle at top left, rgba(194,161,90,.16), transparent 34%),
        linear-gradient(145deg, rgba(31,61,43,.72), rgba(8,8,8,.98));
      display:grid;
      grid-template-columns:1fr auto;
      gap:30px;
      align-items:center;
      box-shadow:0 35px 90px rgba(0,0,0,.32);
    }

    .mid-cta h2 {
      font-size:clamp(34px,5vw,72px);
      line-height:.9;
      letter-spacing:-3px;
      text-transform:uppercase;
    }

    .mid-cta p {
      color:rgba(245,245,243,.72);
      line-height:1.65;
      margin-top:14px;
      max-width:760px;
    }

    .web-feature {
      background:var(--cream);
      color:#080808;
    }

    .web-inner {
      max-width:1220px;
      margin:0 auto;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:50px;
      align-items:center;
    }

    .web-feature h2 {
      color:var(--green);
      font-size:clamp(42px,6vw,88px);
      line-height:.9;
      letter-spacing:-4px;
      text-transform:uppercase;
      margin-bottom:20px;
    }

    .web-feature p {
      color:#444;
      font-size:18px;
      line-height:1.65;
      margin-top:14px;
    }

    .browser {
      border-radius:30px;
      background:#111;
      padding:16px;
      box-shadow:0 28px 90px rgba(0,0,0,.28);
    }

    .browser-top {
      display:flex;
      gap:8px;
      padding:0 0 14px 4px;
    }

    .dot {
      width:10px;
      height:10px;
      border-radius:50%;
      background:rgba(255,255,255,.34);
    }

    .browser-screen {
      min-height:320px;
      border-radius:20px;
      display:grid;
      place-items:center;
      text-align:center;
      padding:24px;
      background:
        linear-gradient(145deg, rgba(0,0,0,.42), rgba(0,0,0,.72)),
        url("https://cdn.myportfolio.com/6548b179-e775-4fd6-82d3-1c416ff2f000/f98c281a-0164-452b-81ec-6461348c9508_rw_1200.png?h=90b79eab1238ac0b62f0f35654a73534");
      background-size:cover;
      background-position:center;
    }

    .browser-screen h3 {
      color:white;
      font-size:clamp(32px,5vw,68px);
      text-transform:uppercase;
      line-height:.92;
      letter-spacing:-2px;
    }

    .case-preview {
      background:#080808;
    }

    .case-grid {
      max-width:1220px;
      margin:0 auto;
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
    }

    .case-card {
      border:1px solid rgba(194,161,90,.2);
      border-radius:26px;
      overflow:hidden;
      background:#111;
      transition:.35s ease;
    }

    .case-card:hover {
      transform:translateY(-6px);
      border-color:var(--gold);
    }

    .case-image img {
      height:250px;
      object-fit:cover;
    }

    .case-body {
      padding:24px;
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:flex-end;
    }

    .case-body h3 {
      margin-top:7px;
      text-transform:uppercase;
      letter-spacing:-1px;
      font-size:28px;
      line-height:.98;
    }

    .case-body p {
      color:rgba(245,245,243,.66);
      line-height:1.55;
      margin-top:10px;
    }

    .case-link {
      color:var(--gold);
      font-size:12px;
      font-weight:900;
      text-transform:uppercase;
      white-space:nowrap;
    }

    .proof-section {
      background:#0a0a0a;
    }

    .proof-grid {
      max-width:1220px;
      margin:0 auto;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }

    .proof-card {
      border:1px solid rgba(194,161,90,.22);
      border-radius:24px;
      padding:28px;
      background:linear-gradient(145deg, rgba(31,61,43,.48), rgba(8,8,8,.94));
    }

    .proof-card strong {
      display:block;
      color:var(--gold);
      font-size:42px;
      margin-bottom:12px;
      letter-spacing:-2px;
    }

    .proof-card span {
      color:rgba(245,245,243,.7);
      line-height:1.5;
    }

    .cta-final {
      min-height:80vh;
      display:grid;
      place-items:center;
      text-align:center;
      background:
        linear-gradient(rgba(0,0,0,.68), rgba(0,0,0,.92)),
        url("https://b894397.smushcdn.com/894397/wp-content/uploads/2023/08/Hyundai-Santa-Monica-1536x1024.png?lossy=1&strip=1&webp=1");
      background-size:cover;
      background-position:center;
    }

    .cta-final h2 {
      font-size:clamp(52px,9vw,124px);
      line-height:.82;
      letter-spacing:-6px;
      text-transform:uppercase;
      margin-bottom:26px;
    }

    .cta-final p {
      color:rgba(245,245,243,.74);
      font-size:20px;
      max-width:760px;
      margin:0 auto 32px;
      line-height:1.55;
    }

    footer {
      padding:34px 5vw;
      display:flex;
      justify-content:space-between;
      gap:20px;
      color:rgba(245,245,243,.45);
      font-size:13px;
      border-top:1px solid rgba(255,255,255,.08);
    }

    .reveal {
      opacity:0;
      transform:translateY(34px);
      transition:1s ease;
    }

    .reveal.visible {
      opacity:1;
      transform:translateY(0);
    }

    @media (max-width:1080px) {
      .nav-links {
        gap:14px;
        font-size:11px;
      }
    }

    @media (max-width:980px) {
      .menu-toggle {
        display:block;
      }

      .nav-links {
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        padding:22px 5vw 26px;
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
        background:rgba(5,5,5,.97);
        border-bottom:1px solid rgba(255,255,255,.08);
        backdrop-filter:blur(18px);
      }

      .nav-links.is-open {
        display:flex;
      }

      .menu-toggle.is-open span:nth-child(1) {
        transform:translateY(7px) rotate(45deg);
      }

      .menu-toggle.is-open span:nth-child(2) {
        opacity:0;
      }

      .menu-toggle.is-open span:nth-child(3) {
        transform:translateY(-7px) rotate(-45deg);
      }

      .hero {
        min-height:auto;
        padding:130px 5vw 70px;
      }

      h1,
      .cta-final h2 {
        letter-spacing:-3px;
      }

      .quick-paths,
      .section-head,
      .web-inner,
      .community-wrap,
      .mid-cta-wrap {
        grid-template-columns:1fr;
      }

      .bento {
        grid-template-columns:1fr;
        grid-auto-rows:280px;
      }

      .tile.big,
      .tile.wide,
      .tile.tall {
        grid-column:span 1;
        grid-row:span 1;
      }

      .proof-grid,
      .case-grid {
        grid-template-columns:1fr;
      }

      section { padding:80px 5vw; }

      footer { flex-direction:column; }
    }
    .choice-egg {
  overflow:visible;
}

.swap-wrap {
  display:inline-grid;
  position:relative;
  vertical-align:baseline;
  min-width:7.5em;
}

.swap-line {
  grid-area:1 / 1;
  display:inline-block;
  transition:
    opacity .7s ease,
    transform .7s ease,
    filter .7s ease;
}

.choice-line {
  opacity:0;
  transform:translateY(22px);
  filter:blur(8px);
  color:var(--gold);
}

.choice-egg:hover .business-line,
.choice-egg.swap-active .business-line {
  opacity:0;
  transform:translateY(-22px);
  filter:blur(8px);
}

.choice-egg:hover .choice-line,
.choice-egg.swap-active .choice-line {
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

@media (max-width:980px) {
  .swap-wrap {
    min-width:6.4em;
  }
}
    .social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.social-links a {
  color: #cfa46b;
  font-size: 22px;
  transition: 0.3s;
}

.social-links a:hover {
  color: white;
  transform: scale(1.2);
}