/* ==================================================
       TOKENS
       ================================================== */

    :root {
      /* Colors */
      --color-bg: #0c0c0c;
      --color-bg-elevated: #111111;
      --color-bg-card: #1a1a1a;
      --color-bg-card-gradient-start: #1a1a1a;
      --color-bg-card-gradient-end: #111111;
      --color-bg-header: rgba(19, 19, 19, 0.9);
      --color-bg-footer: #080808;

      --color-accent:#ffd700;
      --color-accent-muted: rgba(255, 238, 88, 0.05);
      --color-accent-border: rgba(255, 238, 88, 0.3);

      --color-text: #ffffff;
      --color-text-muted: #ccc7ae;
      --color-text-muted-soft: rgba(204, 199, 174, 0.6);
      --color-text-muted-faint: rgba(204, 199, 174, 0.4);
      --color-text-body: rgba(204, 199, 174, 0.9);

      --color-border: rgba(255, 255, 255, 0.05);
      --color-border-light: rgba(255, 255, 255, 0.1);
      --color-border-medium: rgba(255, 255, 255, 0.2);

      --color-danger: #ef4444;
      --color-danger-muted: rgba(239, 68, 68, 0.5);
      --color-danger-border: rgba(239, 68, 68, 0.2);

      --color-black: #000000;
      --color-step-inactive: #2a2a2a;

      /* Typography */
      --font-display: "Hanken Grotesk", "Inter", system-ui, sans-serif;
      --font-body: "Hanken Grotesk", "Inter", system-ui, sans-serif;
      --font-mono: "Hanken Grotesk", "Inter", system-ui, sans-serif;

      /* Spacing */
      --space-xs: 8px;
      --space-sm: 16px;
      --space-md: 24px;
      --space-lg: 32px;
      --space-xl: 40px;
      --space-2xl: 48px;
      --space-3xl: 64px;

      /* Layout */
      --container-max: 1440px;
      --header-height: 80px;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-full: 9999px;
    }

    /* ==================================================
       RESET & BASE
       ================================================== */

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

    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body { min-height: 100vh; }

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

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

    ul,
    ol { list-style: none; }

    button,
    summary {
      cursor: pointer;
      font: inherit;
      color: inherit;
      background: none;
      border: none;
    }

    details > summary { list-style: none; }
    details > summary::-webkit-details-marker { display: none; }

    /* ==================================================
       LAYOUT — CONTAINER (max 1440px)
       ================================================== */

    .cc-container {
      width: 100%;
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: var(--space-sm);
    }

    /* ==================================================
       PAGE
       ================================================== */

    .cc-page {
      background-color: var(--color-bg);
      color: var(--color-text);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.625;
    }

    .cc-main {
      padding-top:0px !important;
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
    }

    /* ==================================================
       EYEBROW
       ================================================== */

    .cc-eyebrow {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      margin-bottom: var(--space-md);
    }

    .cc-eyebrow__line {
      width: 32px;
      height: 1px;
      background-color: var(--color-accent);
      flex-shrink: 0;
    }

    .cc-eyebrow__text {
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.3em;
      color: var(--color-accent);
    }

    /* ==================================================
       BUTTONS
       ================================================== */

    .cc-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-body);
      font-weight: 400;
      white-space: nowrap;
      transition: opacity 0.2s ease;
    }

    .cc-btn:hover { opacity: 0.9; }

    .cc-btn--primary {
      background-color: var(--color-accent);
      color: var(--color-black);
    }

    .cc-btn--outline {
      border: 1px solid var(--color-border-medium);
      color: var(--color-text);
    }

    .cc-btn--sm {
      font-family: var(--font-mono);
      font-size: 14px;
      line-height: 20px;
      padding: 10px 24px;
    }

    .cc-btn--lg {
      font-size: 20px;
      line-height: 28px;
      padding: 16px 40px;
	  border-radius:12px;
    }

    .cc-btn--primary.cc-btn--sm {
      box-shadow: 0 4px 20px rgba(255, 238, 88, 0.15);
    }

    /* ==================================================
       HERO
       ================================================== */

    .cc-hero {
      background:
        radial-gradient(closest-side, rgba(255, 238, 88, 0.05) 0%, transparent 70%),
        var(--color-bg-elevated);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      overflow: hidden;
    }

    .cc-hero__inner {
      display: flex;
      flex-direction: column;
      min-height: 360px;
    }

    .cc-hero__content {
      padding: var(--space-lg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
    }

    .cc-hero__title {
      font-family: var(--font-display);
      font-size: 40px;
      line-height: 0.95;
      letter-spacing: -0.025em;
      margin-bottom: var(--space-md);
	  font-weight:700;
    }

    .cc-hero__title-line { display: block; }
    .cc-hero__title-line--accent { color: var(--color-accent); }

    .cc-hero__description {
      color: var(--color-text-body);
      font-size: 16px;
      line-height: 1.625;
      max-width: 36rem;
      margin-bottom: var(--space-xl);
    }

    .cc-hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
    }

    .cc-hero__media {
      position: relative;
      min-height: 240px;
      overflow: hidden;
      background-color: var(--color-bg-elevated);
    }

    .cc-hero__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
    }

    .cc-hero__gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        var(--color-bg-elevated) 0%,
        rgba(17, 17, 17, 0.4) 50%,
        transparent 100%
      );
      pointer-events: none;
    }

    /* ==================================================
       BENTO GRID
       ================================================== */

    .cc-bento {
      display: grid;
      gap: var(--space-lg);
      grid-template-columns: 1fr;
    }

    /* ==================================================
       CARDS
       ================================================== */

    .cc-card {
      background: linear-gradient(
        135deg,
        var(--color-bg-card-gradient-start) 0%,
        var(--color-bg-card-gradient-end) 100%
      );
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }

    .cc-card__header {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .cc-card__number {
      font-family: var(--font-display);
      font-size: 28px;
      line-height: 1;
      color: var(--color-accent);
      opacity: 0.5;
      flex-shrink: 0;
    }

    .cc-card__number--danger {
      color: var(--color-danger);
      opacity: 1;
    }

    .cc-card__title {
      font-size: 22px;
      line-height: 1.2;
      letter-spacing: -0.025em;
      color: var(--color-text);
    }

    .cc-card__body {
      color: var(--color-text-muted);
      font-size: 16px;
      line-height: 1.625;
    }

    .cc-card__quote {
      background: var(--color-accent-muted);
      border-left: 4px solid var(--color-accent);
      padding: var(--space-md);
      font-size: 16px;
      line-height: 1.55;
      font-style: italic;
      color: var(--color-accent);
      margin-top: auto;
    }

    .cc-card--login { gap: var(--space-lg); }
    .cc-card--process .cc-card__header { margin-bottom: var(--space-xs); }
    .cc-card--spectrum { gap: var(--space-2xl); }

    .cc-card--responsible {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-xl);
      border-color: var(--color-danger-muted);
      border-left-width: 4px;
    }

    .cc-card--dual { gap: var(--space-3xl); }

    .cc-card__dual-col {
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
    }

    .cc-card__responsible-content {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      flex: 1;
    }

    /* ==================================================
       STEPS
       ================================================== */

    .cc-steps {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      position: relative;
    }

    .cc-steps::before {
      content: "";
      position: absolute;
      left: 21px;
      top: 8px;
      bottom: 8px;
      width: 1px;
      background: var(--color-border-light);
    }

    .cc-steps__item {
      display: flex;
      gap: var(--space-md);
      align-items: flex-start;
      position: relative;
    }

    .cc-steps__badge {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 20px;
      line-height: 1;
      background: var(--color-step-inactive);
      border: 1px solid var(--color-accent-border);
      color: var(--color-accent);
      z-index: 1;
    }

    .cc-steps__badge--active {
      background: var(--color-accent);
      border-color: var(--color-accent);
      color: var(--color-black);
    }

    .cc-steps__content { padding-top: 4px; }

    .cc-steps__title {
      font-family: var(--font-mono);
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0.1em;
      color: var(--color-text);
      margin-bottom: 3px;
    }

    .cc-steps__desc {
      font-size: 12px;
      line-height: 1.625;
      color: var(--color-text-muted-soft);
    }

    /* ==================================================
       FEATURES
       ================================================== */

    .cc-features {
      display: grid;
      gap: var(--space-md);
      grid-template-columns: 1fr;
    }

    .cc-feature {
      background: rgba(255, 255, 255, 0.05);
      border-radius: var(--radius-sm);
      padding: var(--space-lg);
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }

    .cc-feature__icon { width: 28px; height: auto; }

    .cc-feature__title {
      font-family: var(--font-mono);
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0.05em;
      color: var(--color-text);
    }

    .cc-feature__text {
      font-size: 14px;
      line-height: 1.625;
      color: var(--color-text-muted);
    }

    /* ==================================================
       CHECKLIST
       ================================================== */

    .cc-checklist {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }

    .cc-checklist__item {
      display: flex;
      gap: var(--space-sm);
      align-items: flex-start;
      font-size: 16px;
      line-height: 1.625;
      color: var(--color-text-muted);
    }

    .cc-checklist__icon {
      flex-shrink: 0;
      margin-top: 3px;
    }

    /* ==================================================
       PROGRESS
       ================================================== */

    .cc-progress {
      display: flex;
      gap: var(--space-sm);
      margin-top: var(--space-xs);
    }

    .cc-progress__track {
      flex: 1;
      height: 4px;
      background: rgba(255, 238, 88, 0.3);
      position: relative;
      overflow: hidden;
    }

    .cc-progress__fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: var(--color-accent);
    }

    .cc-progress__fill--33 { width: 33.33%; }
    .cc-progress__fill--67 { width: 66.67%; }
    .cc-progress__fill--100 { width: 100%; }

    /* ==================================================
       AGE BADGE
       ================================================== */

    .cc-age {
      flex-shrink: 0;
      width: 120px;
      height: 120px;
      border-radius: var(--radius-full);
      border: 4px solid var(--color-danger-border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
    }

    .cc-age__number {
      font-family: var(--font-display);
      font-size: 48px;
      line-height: 1;
      color: var(--color-text);
    }

    .cc-age__label {
      font-family: var(--font-mono);
      font-size: 10px;
      line-height: 1.5;
      letter-spacing: 0.2em;
      color: var(--color-danger);
    }

    /* ==================================================
       BULLETS
       ================================================== */

    .cc-bullets {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }

    .cc-bullets__item {
      position: relative;
      padding-left: 22px;
      font-size: 16px;
      line-height: 1.75;
      color: var(--color-text-muted);
    }

    .cc-bullets__item::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 50%;
      width: 6px;
      height: 6px;
      background: var(--color-accent);
      transform: translateY(-50%) rotate(45deg);
    }

    /* ==================================================
       FAQ
       ================================================== */

    .cc-faq { padding-bottom: var(--space-3xl); }

    .cc-faq__inner {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xl);
      max-width: 56rem;
    }

    .cc-faq__title {
      font-family: var(--font-display);
      font-size: 32px;
      line-height: 1;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xl);
      padding-inline: var(--space-xl);
    }

    .cc-faq__title-accent {
      width: 32px;
      height: 4px;
      background: var(--color-accent);
      flex-shrink: 0;
    }

    .cc-faq__list {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }

    .cc-faq__item {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .cc-faq__question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-md);
      padding: var(--space-lg);
      font-size: 18px;
      line-height: 1.4;
      letter-spacing: -0.025em;
      color: var(--color-text);
      width: 100%;
      text-align: left;
    }

    .cc-faq__chevron {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      transition: transform 0.2s ease;
    }

    .cc-faq__item[open] .cc-faq__chevron { transform: rotate(180deg); }
    /* ==================================================
       RESPONSIVE BREAKPOINTS
       ================================================== */

    /* Mobile: @media (max-width: 767px) */
    @media (max-width: 767px) {
      .cc-container { padding-inline: var(--space-sm); }

      .cc-hero__title { font-size: 36px; }

      .cc-hero__actions {
        flex-direction: column;
        align-items: stretch;
      }

      .cc-hero__actions .cc-btn {
        width: 100%;
        text-align: center;
      }

      .cc-header__actions .cc-btn--outline { display: none; }

      .cc-hero__gradient {
        background: linear-gradient(
          to bottom,
          var(--color-bg-elevated) 0%,
          rgba(17, 17, 17, 0.5) 35%,
          transparent 70%
        );
      }

      .cc-card { padding: var(--space-md); }
      .cc-card__title { font-size: 18px; }

      .cc-faq__title {
        font-size: 24px;
        gap: var(--space-md);
        padding-inline: var(--space-md);
      }

      .cc-faq__question {
        font-size: 16px;
        padding: var(--space-md);
      }

      .cc-footer__brand-text { font-size: 20px; }
    }

    /* Tablet: @media (min-width: 768px) and (max-width: 1023px) */
    @media (min-width: 768px) and (max-width: 1023px) {
      .cc-container { padding-inline: var(--space-lg); }

      .cc-header__nav {
        display: flex;
        gap: var(--space-md);
      }

      .cc-header__nav-link {
        font-size: 12px;
        letter-spacing: 0.08em;
      }

      .cc-hero__inner {
        flex-direction: row;
        min-height: 420px;
      }

      .cc-hero__content {
        padding: var(--space-3xl);
        flex: 1 1 50%;
      }

      .cc-hero__media {
        flex: 1 1 50%;
        min-height: auto;
      }

      .cc-hero__title { font-size: 52px; }
      .cc-hero__description { font-size: 17px; }

      .cc-bento { grid-template-columns: repeat(2, 1fr); }
      .cc-card--login { grid-column: 1 / -1; }
      .cc-card--process { grid-column: 1 / -1; }
      .cc-card--spectrum { grid-column: 1 / -1; }

      .cc-features { grid-template-columns: repeat(2, 1fr); }

      .cc-card--safety,
      .cc-card--expertise { grid-column: span 1; }

      .cc-card--responsible {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
      }

      .cc-card--dual {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: var(--space-3xl);
      }

      .cc-card__dual-col { flex: 1; }

      .cc-footer__top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
      }

      .cc-footer__links { grid-template-columns: repeat(3, 1fr); }

      .cc-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }

    /* Desktop: @media (min-width: 1024px) */
    @media (min-width: 1024px) {
      .cc-container { padding-inline: var(--space-lg); }

      .cc-main {
        gap: var(--space-xl);
        padding-bottom: var(--space-lg);
      }

      .cc-header__nav { display: flex; }

      .cc-hero__inner {
        flex-direction: row;
        min-height: 480px;
      }

      .cc-hero__content {
        padding: var(--space-3xl);
        flex: 1 1 50%;
      }

      .cc-hero__media {
        flex: 1 1 50%;
        min-height: auto;
      }

      .cc-hero__title { font-size: 64px; }

      .cc-hero__description {
        font-size: 18px;
        line-height: 1.625;
      }

      .cc-bento {
        grid-template-columns: repeat(12, 1fr);
        gap: var(--space-lg);
      }

      .cc-card--login {
        grid-column: 1 / span 8;
        grid-row: 1;
        min-height: 480px;
        justify-content: space-between;
      }

      .cc-card--process {
        grid-column: 9 / span 4;
        grid-row: 1;
      }

      .cc-card--spectrum {
        grid-column: 1 / -1;
        grid-row: 2;
      }

      .cc-features {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
      }

      .cc-card--safety {
        grid-column: 1 / span 6;
        grid-row: 3;
      }

      .cc-card--expertise {
        grid-column: 7 / span 6;
        grid-row: 3;
      }

      .cc-card--responsible {
        grid-column: 1 / -1;
        grid-row: 4;
        flex-direction: row;
        align-items: center;
        gap: var(--space-xl);
      }

      .cc-age {
        width: 160px;
        height: 160px;
      }

      .cc-age__number { font-size: 60px; }

      .cc-card--dual {
        grid-column: 1 / -1;
        grid-row: 5;
        flex-direction: row;
        gap: var(--space-3xl);
      }

      .cc-card__dual-col { flex: 1; }

      .cc-card__title { font-size: 30px; }
      .cc-card__number { font-size: 36px; }
      .cc-card__body { font-size: 18px; }
      .cc-card__quote { font-size: 18px; }

      .cc-footer__top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
      }

      .cc-footer__links {
        grid-template-columns: repeat(3, auto);
        gap: var(--space-2xl) var(--space-3xl);
      }

      .cc-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }

    /* Large Screens: @media (min-width: 1920px) */
    @media (min-width: 1920px) {
      .cc-container { padding-inline: var(--space-xl); }

      .cc-hero__title { font-size: 72px; }

      .cc-hero__description {
        font-size: 20px;
        max-width: 40rem;
      }

      .cc-card { padding: var(--space-xl); }
      .cc-card__title { font-size: 34px; }
      .cc-card__number { font-size: 40px; }
      .cc-card__body,
      .cc-card__quote { font-size: 20px; }

      .cc-feature { padding: var(--space-xl); }
      .cc-feature__title { font-size: 16px; }
      .cc-feature__text { font-size: 16px; }

      .cc-faq__title { font-size: 48px; }
      .cc-faq__question {
        font-size: 20px;
        padding: var(--space-xl);
      }

      .cc-footer__brand-text { font-size: 30px; }
      .cc-footer__copyright { font-size: 18px; }
    }