<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta name="theme-color" content="#0b1020">

  <meta name="description" content="Dados Analytics — clarity for better decisions.">

  <title>Dados Analytics | fhfs.solutions</title>

  <style>

    :root {

      color-scheme: dark;

      --bg: #0b1020;

      --panel: #111a2e;

      --text: #f3f6fc;

      --muted: #a7b2c8;

      --blue: #72a7ff;

      --line: rgba(255,255,255,.12);

    }


    * { box-sizing: border-box; }


    body {

      margin: 0;

      min-height: 100vh;

      color: var(--text);

      background:

        radial-gradient(ellipse at 75% 10%, rgba(56,112,205,.19), transparent 36%),

        var(--bg);

      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

      line-height: 1.6;

    }


    .wrap {

      width: min(1080px, calc(100% - 48px));

      margin: 0 auto;

    }


    header {

      height: 88px;

      display: flex;

      align-items: center;

      justify-content: space-between;

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

    }


    .brand {

      display: flex;

      align-items: center;

      gap: 12px;

      color: var(--text);

      font-weight: 650;

      letter-spacing: -.02em;

    }


    .logo {

      width: 38px;

      height: 38px;

      display: grid;

      place-items: center;

      border: 1px solid rgba(114,167,255,.42);

      border-radius: 12px;

      color: var(--blue);

      background: rgba(114,167,255,.1);

      font-size: 13px;

      font-weight: 750;

      letter-spacing: -.05em;

    }


    .domain {

      color: var(--muted);

      font-size: 14px;

    }


    main {

      min-height: calc(100vh - 160px);

      display: grid;

      grid-template-columns: 1.2fr .8fr;

      align-items: center;

      gap: 64px;

      padding: 82px 0;

    }


    .eyebrow {

      color: var(--blue);

      font-size: 13px;

      font-weight: 700;

      letter-spacing: .14em;

      text-transform: uppercase;

    }


    h1 {

      max-width: 680px;

      margin: 18px 0;

      font-size: clamp(42px, 6vw, 70px);

      line-height: 1.04;

      letter-spacing: -.055em;

    }


    h1 span { color: var(--blue); }


    .intro {

      max-width: 570px;

      color: var(--muted);

      font-size: 18px;

    }


    .card {

      position: relative;

      overflow: hidden;

      padding: 30px;

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

      border-radius: 22px;

      background: linear-gradient(145deg, rgba(22,34,58,.92), rgba(14,21,38,.92));

      box-shadow: 0 24px 80px rgba(0,0,0,.24);

    }


    .card::before {

      content: "";

      position: absolute;

      width: 180px;

      height: 180px;

      right: -72px;

      top: -72px;

      border: 1px solid rgba(114,167,255,.22);

      border-radius: 50%;

      box-shadow: 0 0 0 24px rgba(114,167,255,.035), 0 0 0 48px rgba(114,167,255,.025);

    }


    .card-label {

      color: var(--muted);

      font-size: 13px;

      text-transform: uppercase;

      letter-spacing: .12em;

    }


    .card h2 {

      margin: 14px 0 10px;

      font-size: 25px;

      letter-spacing: -.03em;

    }


    .card p { color: var(--muted); }


    .dots {

      display: flex;

      gap: 8px;

      margin-top: 30px;

    }


    .dots i {

      width: 8px;

      height: 8px;

      border-radius: 50%;

      background: var(--blue);

      opacity: .8;

    }


    .dots i:nth-child(2) { opacity: .45; }

    .dots i:nth-child(3) { opacity: .22; }


    footer {

      padding: 22px 0;

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

      color: var(--muted);

      font-size: 13px;

    }


    @media (max-width: 760px) {

      .wrap { width: min(100% - 36px, 560px); }

      header { height: 74px; }

      .domain { display: none; }

      main {

        grid-template-columns: 1fr;

        gap: 36px;

        padding: 64px 0;

      }

      .intro { font-size: 16px; }

      .card { padding: 25px; }

    }

  </style>

</head>

<body>

  <div class="wrap">

    <header>

      <div class="brand">

        <div class="logo">DA</div>

        <span>Dados Analytics</span>

      </div>

      <div class="domain">fhfs.solutions</div>

    </header>


    <main>

      <section>

        <div class="eyebrow">Dados Analytics</div>

        <h1>More clarity.<br><span>Better decisions.</span></h1>

        <p class="intro">

          Well-understood data helps you spot opportunities, track performance,

          and make decisions with greater confidence.

        </p>

      </section>


      <aside class="card">

        <div class="card-label">Analytics</div>

        <h2>Turn information into direction.</h2>

        <p>

          A simple digital presence built around one essential idea:

          using data to better understand your business and move forward.

        </p>

        <div class="dots" aria-hidden="true"><i></i><i></i><i></i></div>

      </aside>

    </main>


    <footer>© 2026 fhfs.solutions · Dados Analytics</footer>

  </div>

</body>

</html>