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

    :root {
      --gold: #c8a048;
      --deep-gold: #b78b35;
      --midnight: #10141b;
      --ink: #161d27;
      --charcoal: #1e2632;
      --slate: #2a3646;
      --mist: #f6f7fb;
      --text-primary: #edf2ff;
      --text-secondary: rgba(237, 242, 255, 0.78);
      --text-dark: #1b2330;
      --max-width: 1200px;
      --radius-lg: 26px;
      --radius-md: 16px;
      --shadow-soft: 0 25px 60px rgba(6, 10, 18, 0.35);
      --shadow-card: 0 18px 45px rgba(11, 17, 28, 0.3);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: var(--text-primary);
      background: #05070e;
      line-height: 1.6;
      overflow-x: hidden;
      position: relative;
    }

    #neural-backdrop {
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      overflow: hidden;
      background:
        radial-gradient(circle at 12% 22%, rgba(200, 160, 72, 0.08), transparent 50%),
        radial-gradient(circle at 82% 78%, rgba(64, 188, 255, 0.08), transparent 55%),
        #05070e;
    }

    #neural-backdrop::after {
      content: '';
      position: absolute;
      inset: -40%;
      background: conic-gradient(from 160deg at 50% 50%, rgba(200, 160, 72, 0.16), rgba(70, 150, 255, 0.1), rgba(200, 160, 72, 0.18));
      filter: blur(130px);
      opacity: 0.42;
      animation: netscapePulse 24s ease-in-out infinite alternate;
    }

    #neural-canvas {
      width: 100%;
      height: 100%;
      display: block;
      mix-blend-mode: screen;
      opacity: 0.85;
    }

    @keyframes netscapePulse {
      0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.32;
      }
      50% {
        opacity: 0.48;
      }
      100% {
        transform: scale(1.1) rotate(10deg);
        opacity: 0.38;
      }
    }

    #app {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    header.hero {
      position: relative;
      padding: 90px 32px 120px;
      background: linear-gradient(120deg, rgba(3, 9, 18, 0.95), rgba(24, 35, 50, 0.9));
      overflow: hidden;
    }

    header.hero::before {
      content: '';
      position: absolute;
      inset: -220px -120px 0 50%;
      background: radial-gradient(circle at top right, rgba(200, 160, 72, 0.35), transparent 60%);
      transform: rotate(-12deg);
    }

    header.hero::after {
      content: '';
      position: absolute;
      width: 420px;
      height: 420px;
      bottom: -140px;
      right: -120px;
      background: radial-gradient(circle, rgba(200, 160, 72, 0.18), transparent 70%);
      filter: blur(8px);
    }

    .hero__inner {
      max-width: var(--max-width);
      margin: 0 auto;
      display: grid;
      gap: 48px;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      position: relative;
      z-index: 2;
      align-items: center;
    }

    .hero__branding {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .hero__logo {
      width: 220px;
      height: auto;
      filter: drop-shadow(0 12px 24px rgba(7, 11, 19, 0.8));
    }

    .hero__title {
      font-family: 'Cinzel', serif;
      font-size: clamp(2.8rem, 2.6rem + 1vw, 3.6rem);
      line-height: 1.15;
      margin: 0;
    }

    .hero__subtitle {
      margin: 0;
      font-size: 1.1rem;
      max-width: 520px;
      color: var(--text-secondary);
    }

    .hero__cta {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 14px 26px;
      border-radius: 999px;
      font-weight: 600;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      cursor: pointer;
      border: none;
    }

    .button--primary {
      background: linear-gradient(135deg, var(--gold), var(--deep-gold));
      color: #120b00;
      box-shadow: var(--shadow-soft);
    }

    .button--primary:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 28px 60px rgba(17, 12, 0, 0.35);
    }

    .button--secondary {
      background: rgba(31, 40, 54, 0.7);
      color: var(--text-secondary);
      border: 1px solid rgba(200, 160, 72, 0.24);
    }

    .button--secondary:hover {
      transform: translateY(-2px);
      background: rgba(31, 40, 54, 0.9);
      color: var(--text-primary);
    }

    .hero__visual {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 32px;
    }

    .hero__portrait {
      width: clamp(260px, 40vw, 360px);
      max-width: 100%;
      height: auto;
      border-radius: var(--radius-lg);
      box-shadow: 0 35px 80px rgba(2, 6, 12, 0.66);
      border: 1px solid rgba(200, 160, 72, 0.28);
    }

    .hero__badge {
      position: absolute;
      bottom: -60px;
      right: -60px;
      background: rgba(7, 10, 16, 0.92);
      border-radius: var(--radius-md);
      padding: 16px 22px;
      border: 1px solid rgba(200, 160, 72, 0.5);
      box-shadow: var(--shadow-card);
      max-width: 240px;
    }

    .hero__badge span {
      display: block;
      font-weight: 600;
      color: var(--gold);
      font-family: 'Cinzel', serif;
      letter-spacing: 0.04em;
    }

    main {
      display: flex;
      flex-direction: column;
      gap: 80px;
      padding: 0 32px 120px;
    }

    section {
      max-width: var(--max-width);
      margin: 0 auto;
    }

    .section-heading {
      font-family: 'Cinzel', serif;
      font-size: clamp(2rem, 1.8rem + 1vw, 2.6rem);
      margin-bottom: 18px;
      color: var(--gold);
    }

    .section-subtitle {
      margin-top: 0;
      color: rgba(237, 242, 255, 0.7);
      max-width: 680px;
    }

    .services {
      background: linear-gradient(160deg, rgba(24, 34, 48, 0.95), rgba(14, 19, 28, 0.9));
      border-radius: var(--radius-lg);
      padding: 56px clamp(24px, 4vw, 48px);
      border: 1px solid rgba(200, 160, 72, 0.12);
      box-shadow: var(--shadow-card);
    }

    .service-grid {
      display: grid;
      gap: 28px;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      margin-top: 36px;
    }

    .service-card {
      position: relative;
      padding: 28px;
      border-radius: var(--radius-md);
      background: rgba(10, 14, 22, 0.78);
      border: 1px solid rgba(200, 160, 72, 0.16);
      backdrop-filter: blur(6px);
      transition: transform 0.2s ease, border-color 0.2s ease;
    }

    .service-card:hover {
      transform: translateY(-6px);
      border-color: rgba(200, 160, 72, 0.34);
    }

    .service-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      background: rgba(200, 160, 72, 0.15);
      color: var(--gold);
    }

    .process {
      display: grid;
      gap: 26px;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .process-step {
      background: rgba(9, 12, 18, 0.8);
      padding: 32px;
      border-radius: var(--radius-md);
      border: 1px solid rgba(200, 160, 72, 0.14);
      position: relative;
      overflow: hidden;
      transition: transform 0.2s ease;
    }

    .process-step::after {
      content: attr(data-step);
      position: absolute;
      top: 18px;
      right: 22px;
      font-family: 'Cinzel', serif;
      font-size: 2.8rem;
      color: rgba(200, 160, 72, 0.08);
    }

    .process-step:hover {
      transform: translateY(-4px);
    }

    .process-step h3 {
      margin-top: 0;
      color: var(--gold);
      font-family: 'Cinzel', serif;
      letter-spacing: 0.03em;
      font-size: 1.3rem;
    }

    .metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 26px;
      margin-top: 32px;
    }

    .metric-card {
      flex: 1 1 220px;
      border-radius: var(--radius-md);
      padding: 26px;
      background: linear-gradient(145deg, rgba(200, 160, 72, 0.18), rgba(16, 20, 27, 0.75));
      border: 1px solid rgba(200, 160, 72, 0.24);
    }

    .metric-value {
      font-family: 'Cinzel', serif;
      font-size: 2.4rem;
      margin: 0 0 10px;
      color: var(--gold);
    }

    .metric-card .metric-citation {
      display: block;
      margin-top: 10px;
      font-size: 0.8rem;
      color: rgba(237, 242, 255, 0.72);
    }

    .metric-card .metric-citation a {
      color: inherit;
      text-decoration: underline;
    }

    .case-study {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 40px;
      align-items: center;
      background: linear-gradient(130deg, rgba(17, 23, 32, 0.96), rgba(10, 13, 20, 0.9));
      padding: 50px;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(200, 160, 72, 0.14);
      box-shadow: var(--shadow-card);
    }

    .case-study img {
      width: 50%;
      min-width: 180px;
      border-radius: var(--radius-md);
      filter: saturate(1.1);
      border: 1px solid rgba(200, 160, 72, 0.24);
      justify-self: center;
    }

    .case-study h3 {
      font-family: 'Cinzel', serif;
      color: var(--gold);
      margin-top: 0;
    }

    .cta-panel {
      background: linear-gradient(150deg, rgba(200, 160, 72, 0.18), rgba(32, 42, 58, 0.9));
      padding: 46px;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(200, 160, 72, 0.24);
      box-shadow: var(--shadow-card);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
      align-items: center;
    }

    .cta-panel p {
      margin: 0;
      color: rgba(17, 12, 0, 0.8);
      font-weight: 700;
    }

    footer {
      background: rgba(7, 9, 13, 0.9);
      padding: 48px 32px 60px;
      border-top: 1px solid rgba(200, 160, 72, 0.14);
    }

    .footer__inner {
      max-width: var(--max-width);
      margin: 0 auto;
      display: grid;
      gap: 24px;
      justify-items: center;
      text-align: center;
      color: rgba(237, 242, 255, 0.6);
      font-size: 0.95rem;
    }

    .social-links {
      display: flex;
      gap: 18px;
    }

    .social-link {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(200, 160, 72, 0.14);
      color: var(--gold);
      border: 1px solid transparent;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
      text-decoration: none;
    }

    .social-link:hover {
      transform: translateY(-4px);
      border-color: rgba(200, 160, 72, 0.38);
      background: rgba(200, 160, 72, 0.24);
    }

    .social-link svg {
      width: 22px;
      height: 22px;
    }

    @media (max-width: 640px) {
      header.hero {
        padding-top: 72px;
      }

      .hero__badge {
        position: static;
        margin-top: 18px;
      }
    }