:root {
      --bg: #f7f7fb;
      --bg-alt: #ffffff;
      --text: #181818;      /* darker text */
      --muted: #3f3f3f;     /* darker muted text */
      --accent: #c9a24f;
      --accent-soft: rgba(201,162,79,0.12);
      --border: #e0e3eb;
      --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.08);
      --radius-lg: 24px;
      --radius-xl: 32px;
      --radius-pill: 999px;
      --max-width: 1120px;
    }

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

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top left, #fdfaf3, #f7f7fb 45%, #f2f4fb 100%);
      color: var(--text);
      line-height: 1.7;
      font-size: 16px; /* base larger */
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: blur(16px);
      background: rgba(247, 247, 251, 0.96);
      border-bottom: 1px solid rgba(224,227,235,0.8);
    }

    .nav {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .nav-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .crest {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(201,162,79,0.7);
      background: radial-gradient(circle at 30% 20%, #fdf7e3, #d4b05a 45%, #8b6b2c 100%);
      box-shadow: 0 8px 20px rgba(0,0,0,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #fff;
      font-weight: 600;
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .brand-name {
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .brand-sub {
      font-size: 13px;
      color: var(--muted);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: 14px;
      color: var(--muted);
    }

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

    .badge-pill {
      padding: 7px 16px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(201,162,79,0.8);
      background: linear-gradient(to right, rgba(201,162,79,0.18), rgba(255,255,255,0.95));
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-weight: 600;
      color: #6d5621;
      white-space: nowrap;
    }

    .btn {
      border-radius: var(--radius-pill);
      padding: 9px 20px;
      border: 1px solid var(--border);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      background: #fff;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.18s ease-out;
    }

    .btn-primary {
      background: linear-gradient(135deg, #d2b15a, #af8a36);
      border-color: #af8a36;
      color: #fff;
      box-shadow: 0 14px 30px rgba(175,138,54,0.35);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 40px rgba(175,138,54,0.42);
    }

    .btn-outline {
      background: transparent;
    }

    .btn-outline:hover {
      background: rgba(255,255,255,0.95);
    }

    main {
      flex: 1;
    }

    .section {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 42px 20px;
    }

    /* Hero */
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      gap: 36px;
      align-items: center;
      padding-top: 30px;
      padding-bottom: 38px;
    }

    .hero-kicker {
      font-size: 13px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 10px;
    }

    .hero-title {
      font-size: 34px;
      line-height: 1.18;
      letter-spacing: -0.03em;
      margin-bottom: 12px;
    }

    .hero-title span.accent {
      background: linear-gradient(135deg, #d1b05a, #9e7630);
      -webkit-background-clip: text;
      color: transparent;
    }

    .hero-sub {
      font-size: 16px;
      color: var(--muted);
      max-width: 560px;
      margin-bottom: 18px;
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
    }

    .hero-footnote {
      font-size: 14px;
      color: var(--muted);
    }

    .hero-footnote a {
      color: #8a6a2a;
      font-weight: 600;
    }

    .hero-card {
      border-radius: var(--radius-xl);
      border: 1px solid var(--border);
      background: radial-gradient(circle at top left, #fdf9ee, #ffffff 40%, #f4f4fb 100%);
      box-shadow: var(--shadow-soft);
      padding: 22px 24px;
      position: relative;
      overflow: hidden;
      font-size: 14px;
      color: var(--muted);
    }

    .hero-card-label {
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--muted);
      margin-bottom: 8px;
      font-weight: 600;
    }

    .hero-card-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 10px;
      color: var(--text);
    }

    .hero-tagrow {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .tag {
      border-radius: var(--radius-pill);
      border: 1px solid rgba(16,19,25,0.08);
      background: rgba(255,255,255,0.96);
      font-size: 13px;
      padding: 5px 12px;
      color: var(--muted);
      white-space: nowrap;
    }

    .hero-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .mini-card {
      border-radius: 18px;
      padding: 12px 13px;
      border: 1px solid rgba(224,227,235,0.95);
      background: rgba(255,255,255,0.96);
      font-size: 14px;
      color: var(--muted);
    }

    .mini-label {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--muted);
      margin-bottom: 4px;
      font-weight: 600;
    }

    .mini-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--text);
    }

    .mini-desc {
      font-size: 14px;
      color: var(--muted);
    }

    /* Section headings */
    .section-label {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.25em;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 10px;
    }

    .section-title {
      font-size: 24px;
      letter-spacing: -0.02em;
      margin-bottom: 10px;
      color: var(--text);
    }

    .section-sub {
      font-size: 16px;
      color: var(--muted);
      max-width: 680px;
      margin-bottom: 20px;
    }

    /* Two-column layout */
    .two-col {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      gap: 24px;
      align-items: flex-start;
    }

    .card {
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background: var(--bg-alt);
      padding: 18px 20px;
      box-shadow: 0 10px 30px rgba(15,23,42,0.04);
      font-size: 15px;
      color: var(--muted);
    }

    .card h3 {
      font-size: 18px;
      margin-bottom: 8px;
      color: var(--text);
    }

    .card p {
      margin-bottom: 10px;
    }

    .card ul {
      padding-left: 20px;
      margin: 6px 0 0;
      font-size: 14px;
    }

    .card ul li + li {
      margin-top: 3px;
    }

    .pill-heading {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--muted);
      margin-bottom: 8px;
      font-weight: 600;
    }

    /* Engines grid */
    .engines-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }

    .engine-card {
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background: var(--bg-alt);
      padding: 16px 18px 15px;
      font-size: 14px;
      color: var(--muted);
      box-shadow: 0 10px 30px rgba(15,23,42,0.04);
    }

    .engine-tag {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--muted);
      margin-bottom: 6px;
      font-weight: 600;
    }

    .engine-name {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--text);
    }

    .engine-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      border-radius: var(--radius-pill);
      background: var(--accent-soft);
      font-size: 13px;
      color: #6f5624;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .engine-card ul {
      list-style: none;
      padding-left: 0;
      margin-top: 8px;
    }

    .engine-card li::before {
      content: "• ";
      color: var(--accent);
    }

    /* Diagram / monospace block */
    .diagram {
      font-family: "SF Mono", "Menlo", "Consolas", monospace;
      font-size: 13px;
      background: #070a10;
      color: #e5e7f5;
      border-radius: 18px;
      padding: 16px 18px;
      border: 1px solid #1e2230;
      box-shadow: 0 18px 40px rgba(15,23,42,0.6);
      overflow-x: auto;
      line-height: 1.6;
    }

    .diagram span.ac {
      color: #facc6b;
    }

    /* Columns */
    .columns-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }

    .card-simple {
      border-radius: var(--radius-lg);
      border: 1px dashed rgba(158,165,186,0.7);
      background: rgba(255,255,255,0.96);
      padding: 16px 18px;
      font-size: 14px;
      color: var(--muted);
    }

    .card-simple strong {
      color: var(--text);
      font-weight: 700;
    }

    .card-simple ul {
      margin-top: 8px;
      list-style: none;
      padding-left: 0;
    }

    .card-simple li::before {
      content: "▸ ";
      color: var(--accent);
    }

    /* Roadmap */
    .roadmap {
      margin-top: 10px;
      display: grid;
      gap: 12px;
    }

    .roadmap-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 14px;
      color: var(--muted);
    }

    .roadmap-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--accent);
      margin-top: 6px;
      box-shadow: 0 0 0 6px rgba(201,162,79,0.18);
      flex-shrink: 0;
    }

    .roadmap-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 4px;
    }

    /* CTA / Contact */
    .cta {
      border-radius: var(--radius-xl);
      border: 1px solid rgba(201,162,79,0.7);
      background: radial-gradient(circle at top left, #fef9ec, #fff 40%, #f5f4ff 100%);
      padding: 22px 24px;
      box-shadow: var(--shadow-soft);
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
      gap: 20px;
      align-items: center;
      margin-top: 10px;
    }

    .cta-title {
      font-size: 20px;
      margin-bottom: 6px;
      color: var(--text);
      font-weight: 700;
    }

    .cta-sub {
      font-size: 15px;
      color: var(--muted);
    }

    .cta-field {
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      padding: 8px 14px;
      background: rgba(255,255,255,0.98);
      font-size: 14px;
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .cta-field span.label {
      font-weight: 600;
      color: var(--text);
    }

    .cta-note {
      font-size: 13px;
      color: var(--muted);
      margin-top: 6px;
    }

    footer {
      border-top: 1px solid var(--border);
      margin-top: 24px;
    }

    .footer-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 16px 20px 22px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      color: var(--muted);
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    .footer-links a {
      text-decoration: underline;
      text-decoration-style: dotted;
    }

    @media (max-width: 900px) {
      .hero,
      .two-col,
      .cta {
        grid-template-columns: minmax(0, 1fr);
      }
      .hero {
        padding-top: 24px;
      }
      .engines-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .columns-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .nav-links {
        display: none;
      }
      .hero-title {
        font-size: 28px;
      }
      .engines-grid,
      .columns-3 {
        grid-template-columns: minmax(0, 1fr);
      }
      .section {
        padding: 30px 16px;
      }
    }
  div#container
{
   width: 1004px;
   position: relative;
   margin: 0 auto 0 auto;
   text-align: left;
}
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Garamond;
   font-weight: normal;
   font-size: 17px;
   line-height: 1.1875;
   margin: 0;
   text-align: center;
}
a
{
   color: #000000;
   text-decoration: none;
}
a:hover
{
   color: #000000;
   text-decoration: none;
}