.hero {
      background: var(--ink);
      padding: 96px 32px 88px;
      text-align: center;
      position: relative; overflow: hidden;
      min-height: unset;
    }
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(16,185,129,0.1) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero-eyebrow {
      font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
      text-transform: uppercase; color: #4b5563; margin-bottom: 20px;
    }
    .hero h1 {
      font-family: var(--serif); font-size: clamp(36px,6vw,52px); font-weight: 400;
      line-height: 1.12; color: #fff; max-width: 680px; margin: 0 auto 20px;
      letter-spacing: -1px; animation: none;
    }
    .hero h1 em { font-style: italic; color: var(--green); }
    .hero-sub {
      font-size: 18px; color: #6b7280; font-weight: 300;
      max-width: 500px; margin: 0 auto; line-height: 1.7; animation: none;
    }

    .main {
  	width: 100%;
  	max-width: 1100px;
  	margin: 0 auto;
  	padding: 80px 24px;
    }


    .origin {
      display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
      align-items: start; padding-bottom: 72px;
      border-bottom: 0.5px solid var(--border); margin-bottom: 72px;
    }
    h2 { font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1.2; margin-bottom: 20px; }
    p { font-size: 16px; color: var(--ink-2); font-weight: 300; line-height: 1.8; margin-bottom: 16px; }
    p strong { color: var(--ink); font-weight: 500; }

    .pull-quote {
      border-left: 3px solid var(--accent);
      padding: 4px 0 4px 24px; margin: 0;
    }
    .pull-quote p {
      font-family: var(--serif); font-size: 22px; font-weight: 400;
      color: var(--ink); font-style: italic; line-height: 1.5; margin-bottom: 12px;
    }
    .pull-quote cite { font-size: 13px; color: var(--ink-3); font-style: normal; }

    .product-card {
      background: var(--bg-card); border: 0.5px solid var(--border);
      border-radius: 14px; padding: 28px; margin-top: 28px;
    }
    .product-name { font-size: 20px; font-weight: 500; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
    .product-name span { color: var(--accent); }
    .product-desc { font-size: 14px; color: var(--ink-2); font-weight: 300; margin-bottom: 18px; line-height: 1.6; }
    .product-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .product-tag { font-size: 12px; padding: 4px 12px; border-radius: 999px; border: 0.5px solid var(--border); color: var(--ink-2); background: var(--bg); }

    .values { margin-bottom: 72px; }
    .values-grid {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
      background: var(--border); border: 0.5px solid var(--border);
      border-radius: var(--radius); overflow: hidden; margin-top: 32px;
    }
    .value-card { background: var(--bg); padding: 28px 24px; }
    .value-num { font-family: var(--serif); font-size: 36px; color: var(--accent); line-height: 1; margin-bottom: 12px; opacity: 0.4; }
    .value-title { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
    .value-body { font-size: 14px; color: var(--ink-2); font-weight: 300; line-height: 1.65; margin: 0; }

    .team { margin-bottom: 72px; padding-bottom: 72px; border-bottom: 0.5px solid var(--border); }
    .team-card {
      display: flex; align-items: flex-start; gap: 24px;
      padding: 28px; border: 0.5px solid var(--border);
      border-radius: 14px; background: var(--bg-card); margin-top: 28px;
    }
    .team-avatar {
      width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
      background: var(--ink); display: flex; align-items: center;
      justify-content: center; font-family: var(--serif); font-size: 22px; color: var(--accent);
    }
    .team-name { font-size: 16px; font-weight: 500; margin-bottom: 2px; }
    .team-role { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
    .team-bio { font-size: 14px; color: var(--ink-2); font-weight: 300; line-height: 1.6; margin: 0; }
    .team-links { display: flex; gap: 10px; margin-top: 10px; }
    .team-link { font-size: 12px; color: var(--green-txt); text-decoration: none; padding: 3px 10px; background: var(--green-dim); border-radius: 999px; }

    .ipx-section {
      background: var(--bg-card); border: 0.5px solid var(--border);
      border-radius: 14px; padding: 36px 40px; margin-bottom: 72px;
      display: flex; gap: 40px; align-items: flex-start;
    }
    .ipx-logo {
      font-family: var(--serif); font-size: 28px; color: var(--ink);
      flex-shrink: 0; padding: 16px 20px; background: var(--bg);
      border: 0.5px solid var(--border); border-radius: var(--radius); line-height: 1;
    }
    .ipx-body h3 { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
    .ipx-body p { font-size: 14px; color: var(--ink-2); font-weight: 300; line-height: 1.7; margin: 0; }

    .timeline { margin-bottom: 72px; padding-bottom: 72px; border-bottom: 0.5px solid var(--border); }
    .timeline-list { margin-top: 28px; display: flex; flex-direction: column; }
    .timeline-item { display: flex; gap: 20px; padding-bottom: 28px; position: relative; }
    .timeline-item::after {
      content: ''; position: absolute; left: 11px; top: 24px;
      width: 1px; height: calc(100% - 16px); background: var(--border);
    }
    .timeline-item:last-child::after { display: none; }
    .timeline-dot {
      width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
      border: 2px solid var(--accent); background: var(--bg);
      display: flex; align-items: center; justify-content: center; z-index: 1;
    }
    .timeline-dot.filled { background: var(--accent); }
    .timeline-dot-inner { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
    .timeline-dot.filled .timeline-dot-inner { background: #fff; }
    .timeline-year { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 3px; padding-top: 2px; }
    .timeline-event { font-size: 15px; font-weight: 400; color: var(--ink); margin-bottom: 3px; }
    .timeline-detail { font-size: 13px; color: var(--ink-2); font-weight: 300; margin: 0; }

    .cta-section { text-align: center; }
    .cta-section h2 { font-family: var(--serif); font-size: 36px; font-weight: 400; margin-bottom: 12px; }
    .cta-section h2 em { font-style: italic; color: var(--accent); }
    .cta-section p { font-size: 16px; color: var(--ink-2); font-weight: 300; margin-bottom: 28px; }
    .cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .btn-cta-outline {
      display: inline-block; font-size: 15px; padding: 13px 28px;
      border: 0.5px solid var(--border); color: var(--ink);
      border-radius: 999px; text-decoration: none; transition: background 0.2s;
    }
    .btn-cta-outline:hover { background: var(--bg-card); }

    footer { background: var(--bg); }

    @media (max-width: 780px) {
      .origin { grid-template-columns: 1fr; gap: 36px; }
      .values-grid { grid-template-columns: 1fr; }
      .ipx-section { flex-direction: column; gap: 20px; }
    }