/* =========================================================
       DESIGN SYSTEM
       ========================================================= */

    :root {
      --coral: #E85D4A;
      --coral-deep: #C6432F;
      --coral-light: #F17B69;

      --coral-soft: #FBE9E5;
      --coral-mist: #FFF5F2;

      --ink: #22252B;
      --ink-soft: #6B625F;
      --ink-muted: #948C87;

      --bg: #FFFDF9;
      --surface: #F7F1E9;
      --surface-strong: #EFE4D8;
      --line: #E8DED5;

      --gold: #D9A441;
      --gold-soft: #FBF3DF;
      --gold-deep: #8A6420;

      --site-width: 1460px;

      --ease:
        cubic-bezier(.22,.8,.22,1);

      --ease-out:
        cubic-bezier(.16,1,.3,1);
    }


    /* =========================================================
       RESET
       ========================================================= */

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

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;

      overflow-x: hidden;

      background:
        var(--bg);

      color:
        var(--ink);

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

      -webkit-font-smoothing:
        antialiased;

      text-rendering:
        optimizeLegibility;
    }

    img {
      display: block;

      max-width: 100%;
    }

    button {
      font: inherit;
    }

    button,
    a {
      -webkit-tap-highlight-color:
        transparent;
    }

    a {
      color: inherit;
    }


    /* =========================================================
       GLOBAL LAYOUT
       ========================================================= */

    .site-container,
    .header-inner {
      width:
        min(
          var(--site-width),
          calc(100% - 48px)
        );

      margin-inline:
        auto;
    }


    /* =========================================================
       HEADER
       ========================================================= */

    .qf-header {
      position: sticky;

      top: 0;

      z-index: 1000;

      width: 100%;

      border-bottom:
        1px solid rgba(232,222,213,.68);

      background:
        rgba(255,253,249,.92);

      backdrop-filter:
        blur(18px) saturate(140%);

      -webkit-backdrop-filter:
        blur(18px) saturate(140%);

      transition:
        background 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
    }

    .qf-header::before {
      content: "";

      position: absolute;

      top: 0;
      left: 0;
      right: 0;

      height: 3px;

      background:
        linear-gradient(
          90deg,
          var(--coral-deep),
          var(--coral),
          #F28A78
        );
    }

    .qf-header.is-scrolled {
      background:
        rgba(255,253,249,.98);

      border-bottom-color:
        var(--line);

      box-shadow:
        0 12px 36px rgba(34,37,43,.055);
    }

    .header-inner {
      height: 76px;

      display: flex;

      align-items: center;

      gap: 18px;
    }


    /* =========================================================
       LOGO
       ========================================================= */

    .logo {
      display: inline-flex;

      align-items: center;

      flex: 0 0 auto;

      text-decoration: none;

      transition:
        transform 180ms var(--ease);
    }

    .logo:hover {
      transform:
        translateY(-1px);
    }

    .logo-placeholder {
      display: flex;

      align-items: center;

      gap: 9px;

      font-size: 21px;

      font-weight: 790;

      letter-spacing: -.045em;
    }

    .logo-mark {
      width: 35px;
      height: 35px;

      display: grid;

      place-items: center;

      border-radius: 10px;

      background:
        linear-gradient(
          145deg,
          var(--coral),
          var(--coral-deep)
        );

      color: #fff;

      font-size: 12px;

      font-weight: 850;

      box-shadow:
        0 6px 17px rgba(232,93,74,.21);
    }

    .logo-placeholder strong {
      color:
        var(--coral);
    }


    /* =========================================================
       NAV
       ========================================================= */

    .main-nav {
      margin-left: auto;

      display: flex;

      align-items: center;

      gap: 3px;
    }

    .nav-link {
      position: relative;

      min-height: 42px;

      padding:
        0 11px;

      display: inline-flex;

      align-items: center;

      border-radius: 10px;

      color:
        var(--ink-soft);

      text-decoration: none;

      font-size: 14px;

      font-weight: 590;

      white-space: nowrap;

      transition:
        background 170ms ease,
        color 170ms ease;
    }

    .nav-link::after {
      content: "";

      position: absolute;

      left: 12px;
      right: 12px;
      bottom: 4px;

      height: 2px;

      border-radius: 99px;

      background:
        var(--coral);

      transform:
        scaleX(0);

      transform-origin:
        center;

      transition:
        transform 220ms var(--ease);
    }

    .nav-link:hover,
    .nav-link.active {
      color:
        var(--ink);

      background:
        var(--coral-mist);
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      transform:
        scaleX(1);
    }


    .header-divider {
      width: 1px;
      height: 25px;

      flex: 0 0 auto;

      margin-inline: 3px;

      background:
        var(--line);
    }


    /* =========================================================
       HEADER ACTIONS
       ========================================================= */

    .header-search {
      min-height: 44px;

      padding:
        0 14px;

      display: inline-flex;

      align-items: center;

      gap: 8px;

      border:
        1px solid rgba(232,93,74,.24);

      border-radius: 12px;

      background:
        var(--coral-mist);

      color:
        var(--coral-deep);

      text-decoration: none;

      font-size: 13px;

      font-weight: 700;

      white-space: nowrap;

      transition:
        background 180ms ease,
        transform 180ms var(--ease),
        box-shadow 180ms ease;
    }

    .header-search:hover {
      transform:
        translateY(-1px);

      background:
        var(--coral-soft);

      box-shadow:
        0 7px 20px rgba(232,93,74,.11);
    }


    .header-login {
      min-height: 44px;

      padding:
        0 11px;

      display: inline-flex;

      align-items: center;

      color:
        var(--ink);

      text-decoration: none;

      font-size: 13px;

      font-weight: 650;
    }


    .header-register {
      min-height: 46px;

      padding:
        0 17px;

      display: inline-flex;

      align-items: center;

      border-radius: 12px;

      background:
        var(--coral);

      color: #fff;

      text-decoration: none;

      font-size: 13px;

      font-weight: 730;

      box-shadow:
        0 7px 20px rgba(232,93,74,.18);

      transition:
        transform 180ms var(--ease),
        background 180ms ease,
        box-shadow 180ms ease;
    }

    .header-register:hover {
      transform:
        translateY(-2px);

      background:
        var(--coral-deep);

      box-shadow:
        0 11px 26px rgba(198,67,47,.22);
    }


    /* =========================================================
       MOBILE HEADER
       ========================================================= */

    .mobile-toggle {
      display: none;

      position: relative;

      width: 44px;
      height: 44px;

      margin-left: auto;

      border: 0;

      border-radius: 11px;

      background:
        transparent;

      cursor: pointer;
    }

    .mobile-toggle span {
      position: absolute;

      left: 11px;

      width: 22px;
      height: 2px;

      border-radius: 99px;

      background:
        var(--ink);

      transition:
        top 220ms var(--ease),
        transform 220ms var(--ease);
    }

    .mobile-toggle span:first-child {
      top: 17px;
    }

    .mobile-toggle span:last-child {
      top: 25px;
    }

    .mobile-toggle.open span:first-child {
      top: 21px;

      transform:
        rotate(45deg);
    }

    .mobile-toggle.open span:last-child {
      top: 21px;

      transform:
        rotate(-45deg);
    }

    .mobile-menu {
      display: none;
    }


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

    .hero {
      position: relative;

      overflow: hidden;

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

      display: flex;

      align-items: center;

      padding:
        82px 0 105px;

      background:
        linear-gradient(
          180deg,
          #FFF5F1 0%,
          var(--bg) 76%
        );
    }


    .hero::before {
      content: "";

      position: absolute;

      top: -420px;
      right: -240px;

      width: 830px;
      height: 830px;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(232,93,74,.16),
          rgba(232,93,74,.04) 45%,
          transparent 72%
        );

      pointer-events: none;
    }


    .hero::after {
      content: "";

      position: absolute;

      left: -260px;
      bottom: -310px;

      width: 600px;
      height: 600px;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(217,164,65,.09),
          transparent 69%
        );

      pointer-events: none;
    }


    .hero-grid {
      position: relative;

      z-index: 2;

      display: grid;

      grid-template-columns:
        minmax(0,1fr)
        minmax(480px,.86fr);

      align-items: center;

      gap:
        clamp(60px,7vw,120px);
    }


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

    .hero-eyebrow {
      margin-bottom: 22px;

      display: inline-flex;

      align-items: center;

      gap: 9px;

      padding:
        7px 11px;

      border:
        1px solid rgba(232,93,74,.17);

      border-radius: 99px;

      background:
        rgba(255,255,255,.67);

      color:
        var(--coral-deep);

      font-size: 11px;

      font-weight: 790;

      letter-spacing: .075em;

      text-transform: uppercase;
    }

    .hero-eyebrow-dot {
      width: 7px;
      height: 7px;

      border-radius: 50%;

      background:
        var(--coral);

      box-shadow:
        0 0 0 5px rgba(232,93,74,.09);
    }


    .hero-title {
      max-width: 820px;

      margin: 0;

      font-size:
        clamp(55px,5.7vw,92px);

      line-height: .98;

      font-weight: 790;

      letter-spacing: -.067em;
    }


    .hero-title-accent {
      position: relative;

      display: inline-block;

      color:
        var(--coral);
    }


    .hero-title-accent::after {
      content: "";

      position: absolute;

      left: 3px;
      right: 0;
      bottom: -7px;

      height: 8px;

      border-radius: 99px;

      background:
        linear-gradient(
          90deg,
          var(--coral),
          transparent
        );

      opacity: .25;
    }


    .hero-description {
      max-width: 680px;

      margin:
        29px 0 0;

      color:
        var(--ink-soft);

      font-size:
        clamp(16px,1.4vw,19px);

      line-height: 1.72;
    }

    .hero-description strong {
      color:
        var(--ink);

      font-weight: 690;
    }


    .hero-actions {
      margin-top: 35px;

      display: flex;

      flex-wrap: wrap;

      gap: 11px;
    }


    .button-primary,
    .button-secondary {
      min-height: 52px;

      padding:
        0 20px;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      gap: 10px;

      border-radius: 13px;

      text-decoration: none;

      font-size: 14px;

      font-weight: 720;

      transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms var(--ease),
        box-shadow 180ms ease;
    }


    .button-primary {
      background:
        var(--coral);

      color: #fff;

      box-shadow:
        0 9px 24px rgba(232,93,74,.20);
    }

    .button-primary:hover {
      transform:
        translateY(-2px);

      background:
        var(--coral-deep);

      box-shadow:
        0 14px 30px rgba(198,67,47,.23);
    }


    .button-secondary {
      border:
        1px solid var(--line);

      background:
        rgba(255,255,255,.75);

      color:
        var(--ink);
    }

    .button-secondary:hover {
      transform:
        translateY(-1px);

      border-color:
        rgba(232,93,74,.28);

      background:
        #fff;
    }


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

    .hero-visual {
      position: relative;

      min-height: 610px;
    }


    .hero-photo-frame {
      position: absolute;

      top: 25px;
      left: 24px;
      right: 0;
      bottom: 28px;

      overflow: hidden;

      border-radius: 31px;

      background:
        var(--surface);

      box-shadow:
        0 35px 85px rgba(34,37,43,.15);

      transform:
        rotate(2deg);

      transition:
        transform 700ms var(--ease-out);
    }

    .hero-photo-frame:hover {
      transform:
        rotate(0deg)
        translateY(-5px);
    }


    .hero-photo-frame img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      transition:
        transform 1.2s var(--ease-out);
    }

    .hero-photo-frame:hover img {
      transform:
        scale(1.035);
    }


    .hero-photo-frame::after {
      content: "";

      position: absolute;

      inset: 0;

      background:
        linear-gradient(
          180deg,
          transparent 46%,
          rgba(22,24,29,.58) 100%
        );
    }


    .hero-image-copy {
      position: absolute;

      z-index: 3;

      left: 26px;
      right: 26px;
      bottom: 25px;

      color: #fff;
    }

    .hero-image-copy small {
      display: block;

      margin-bottom: 5px;

      color:
        rgba(255,255,255,.69);

      font-size: 10px;

      font-weight: 730;

      letter-spacing: .08em;

      text-transform: uppercase;
    }

    .hero-image-copy strong {
      max-width: 390px;

      display: block;

      font-size: 19px;

      line-height: 1.34;

      font-weight: 690;
    }


    /* floating card */

    .hero-floating {
      position: absolute;

      z-index: 10;

      top: 0;
      right: -13px;

      width: 225px;

      padding: 17px;

      border:
        1px solid rgba(255,255,255,.72);

      border-radius: 18px;

      background:
        rgba(255,253,249,.92);

      backdrop-filter:
        blur(15px);

      -webkit-backdrop-filter:
        blur(15px);

      box-shadow:
        0 18px 45px rgba(34,37,43,.13);

      animation:
        floatCard 5.8s ease-in-out infinite;
    }


    @keyframes floatCard {

      0%,
      100% {
        transform:
          translateY(0)
          rotate(-1deg);
      }

      50% {
        transform:
          translateY(-11px)
          rotate(1deg);
      }

    }


    .hero-floating-icon {
      width: 38px;
      height: 38px;

      margin-bottom: 11px;

      display: grid;

      place-items: center;

      border-radius: 11px;

      background:
        var(--coral-soft);

      color:
        var(--coral-deep);
    }

    .hero-floating small {
      display: block;

      color:
        var(--ink-soft);

      font-size: 10px;

      font-weight: 680;

      letter-spacing: .03em;
    }

    .hero-floating strong {
      display: block;

      margin-top: 4px;

      font-size: 14px;

      line-height: 1.4;
    }


    /* =========================================================
       WHY
       ========================================================= */

    .why {
      padding:
        110px 0;

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

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

      background: #fff;
    }


    .why-grid {
      display: grid;

      grid-template-columns:
        .46fr 1.54fr;

      gap: 80px;

      align-items: start;
    }


    .why-label {
      position: sticky;

      top: 120px;

      display: flex;

      align-items: center;

      gap: 11px;

      color:
        var(--coral-deep);

      font-size: 11px;

      font-weight: 790;

      letter-spacing: .08em;

      text-transform: uppercase;
    }


    .why-line {
      width: 35px;
      height: 2px;

      background:
        var(--coral);
    }


    .why-text {
      max-width: 1080px;

      margin: 0;

      font-size:
        clamp(33px,3.7vw,57px);

      line-height: 1.16;

      font-weight: 610;

      letter-spacing: -.047em;
    }


    .why-text strong {
      color:
        var(--coral);

      font-weight: 730;
    }


    /* =========================================================
       GENERAL SECTION
       ========================================================= */

    .section {
      position: relative;

      padding:
        125px 0;
    }


    .section-kicker {
      margin-bottom: 15px;

      display: inline-flex;

      align-items: center;

      gap: 8px;

      color:
        var(--coral-deep);

      font-size: 11px;

      font-weight: 790;

      letter-spacing: .08em;

      text-transform: uppercase;
    }

    .section-kicker i {
      font-size: 7px;
    }


    .section-title {
      max-width: 890px;

      margin: 0;

      font-size:
        clamp(40px,4.6vw,70px);

      line-height: 1.03;

      letter-spacing: -.058em;

      font-weight: 770;
    }


    .section-title em {
      color:
        var(--coral);

      font-style: normal;
    }


    .section-description {
      max-width: 700px;

      margin:
        22px 0 0;

      color:
        var(--ink-soft);

      font-size: 16px;

      line-height: 1.75;
    }


    /* =========================================================
       COSMOS
       ========================================================= */

    .cosmos-section {
      overflow: hidden;

      background:
        var(--bg);
    }


    .cosmos-grid {
      display: grid;

      grid-template-columns:
        minmax(0,1.04fr)
        minmax(0,.96fr);

      gap:
        clamp(60px,7vw,120px);

      align-items: center;
    }


    .cosmos-visual {
      position: relative;

      padding:
        29px 0 29px 29px;
    }


    .cosmos-visual::before {
      content: "";

      position: absolute;

      top: 0;
      left: 0;

      width: 58%;
      height: 73%;

      border-radius: 27px;

      background:
        var(--coral-soft);
    }


    .cosmos-image {
      position: relative;

      overflow: hidden;

      aspect-ratio:
        1.27 / 1;

      border-radius: 28px;

      box-shadow:
        0 30px 75px rgba(34,37,43,.13);
    }


    .cosmos-image img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      transition:
        transform 900ms var(--ease-out);
    }

    .cosmos-image:hover img {
      transform:
        scale(1.035);
    }


    .cosmos-card {
      position: absolute;

      z-index: 5;

      left: 0;
      bottom: 0;

      width:
        min(280px,78%);

      padding: 18px;

      border:
        1px solid rgba(232,93,74,.15);

      border-radius: 17px;

      background:
        rgba(255,253,249,.96);

      backdrop-filter:
        blur(14px);

      box-shadow:
        0 17px 45px rgba(34,37,43,.12);
    }


    .cosmos-card-icon {
      width: 39px;
      height: 39px;

      margin-bottom: 12px;

      display: grid;

      place-items: center;

      border-radius: 11px;

      background:
        var(--coral-soft);

      color:
        var(--coral-deep);
    }


    .cosmos-card small {
      display: block;

      margin-bottom: 4px;

      color:
        var(--ink-soft);

      font-size: 10px;

      font-weight: 730;

      letter-spacing: .07em;

      text-transform: uppercase;
    }


    .cosmos-card strong {
      display: block;

      font-size: 14px;

      line-height: 1.45;
    }


    .cosmos-copy h2 {
      max-width: 700px;

      margin: 0;

      font-size:
        clamp(41px,4.4vw,67px);

      line-height: 1.04;

      letter-spacing: -.057em;
    }


    .cosmos-copy p {
      max-width: 665px;

      margin:
        23px 0 0;

      color:
        var(--ink-soft);

      font-size: 16px;

      line-height: 1.78;
    }


    .cosmos-copy p strong {
      color:
        var(--ink);

      font-weight: 680;
    }


    .cosmos-link {
      margin-top: 28px;

      display: inline-flex;

      align-items: center;

      gap: 10px;

      color:
        var(--coral-deep);

      text-decoration: none;

      font-size: 13px;

      font-weight: 730;
    }


    .cosmos-link-icon {
      width: 33px;
      height: 33px;

      display: grid;

      place-items: center;

      border-radius: 9px;

      background:
        var(--coral-soft);

      transition:
        transform 180ms var(--ease);
    }


    .cosmos-link:hover
    .cosmos-link-icon {
      transform:
        translate(3px,-3px);
    }


    /* =========================================================
       MISSION / VISION
       ========================================================= */

    .purpose {
      overflow: hidden;

      background:
        var(--ink);

      color: #fff;
    }


    .purpose::before {
      content: "";

      position: absolute;

      top: -370px;
      right: -270px;

      width: 740px;
      height: 740px;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(232,93,74,.22),
          transparent 69%
        );
    }


    .purpose-head {
      position: relative;

      z-index: 2;

      margin-bottom: 62px;

      display: flex;

      justify-content: space-between;

      align-items: flex-end;

      gap: 70px;
    }


    .purpose-head .section-title {
      color: #fff;
    }


    .purpose-head
    .section-description {
      max-width: 500px;

      margin: 0;

      color:
        rgba(255,255,255,.60);
    }


    .purpose-grid {
      position: relative;

      z-index: 2;

      display: grid;

      grid-template-columns:
        repeat(2,minmax(0,1fr));

      gap: 18px;
    }


    .purpose-card {
      position: relative;

      overflow: hidden;

      min-height: 450px;

      padding: 39px;

      display: flex;

      flex-direction: column;

      justify-content: space-between;

      border:
        1px solid rgba(255,255,255,.095);

      border-radius: 27px;

      background:
        rgba(255,255,255,.045);

      transition:
        transform 350ms var(--ease-out),
        border-color 350ms ease,
        background 350ms ease;
    }


    .purpose-card:hover {
      transform:
        translateY(-7px);

      border-color:
        rgba(232,93,74,.34);

      background:
        rgba(255,255,255,.065);
    }


    .purpose-card::after {
      content: "";

      position: absolute;

      right: -110px;
      bottom: -160px;

      width: 300px;
      height: 300px;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(232,93,74,.19),
          transparent 70%
        );
    }


    .purpose-top {
      position: relative;

      z-index: 2;
    }


    .purpose-number {
      color:
        rgba(255,255,255,.34);

      font-size: 10px;

      font-weight: 800;

      letter-spacing: .10em;
    }


    .purpose-icon {
      width: 55px;
      height: 55px;

      margin-top: 28px;

      display: grid;

      place-items: center;

      border:
        1px solid rgba(232,93,74,.23);

      border-radius: 16px;

      background:
        rgba(232,93,74,.10);

      color:
        #F38877;

      font-size: 20px;
    }


    .purpose-copy {
      position: relative;

      z-index: 2;
    }


    .purpose-copy h3 {
      max-width: 530px;

      margin: 0;

      font-size:
        clamp(31px,3vw,44px);

      line-height: 1.08;

      letter-spacing: -.045em;
    }


    .purpose-copy p {
      max-width: 590px;

      margin:
        16px 0 0;

      color:
        rgba(255,255,255,.62);

      font-size: 15px;

      line-height: 1.72;
    }


    /* =========================================================
       VISION STATEMENT
       ========================================================= */

    .vision-quote {
      position: relative;

      overflow: hidden;

      padding:
        115px 0;

      background:
        var(--coral);

      color: #fff;
    }


    .vision-quote::before {
      content: "“";

      position: absolute;

      top: -135px;
      left: 4%;

      color:
        rgba(255,255,255,.08);

      font-family:
        Georgia,
        serif;

      font-size: 520px;

      line-height: 1;
    }


    .vision-quote-inner {
      position: relative;

      z-index: 2;

      max-width: 1180px;

      margin:
        0 auto;

      text-align: center;
    }


    .vision-quote small {
      display: block;

      margin-bottom: 22px;

      color:
        rgba(255,255,255,.72);

      font-size: 11px;

      font-weight: 790;

      letter-spacing: .12em;

      text-transform: uppercase;
    }


    .vision-quote h2 {
      margin: 0;

      font-size:
        clamp(41px,5.8vw,84px);

      line-height: 1.04;

      font-weight: 720;

      letter-spacing: -.06em;
    }


    /* =========================================================
       PRINCIPLES
       ========================================================= */

    .principles {
      background:
        #FFF9F6;
    }


    .principles-head {
      margin-bottom: 57px;
    }


    .principles-grid {
      display: grid;

      grid-template-columns:
        repeat(12,1fr);

      grid-auto-rows:
        minmax(260px,auto);

      gap: 16px;
    }


    .principle {
      position: relative;

      overflow: hidden;

      padding: 29px;

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

      border-radius: 23px;

      background:
        rgba(255,253,249,.92);

      transition:
        transform 280ms var(--ease-out),
        border-color 280ms ease,
        box-shadow 280ms ease;
    }


    .principle:hover {
      transform:
        translateY(-6px);

      border-color:
        rgba(232,93,74,.25);

      box-shadow:
        0 20px 48px rgba(34,37,43,.075);
    }


    .principle:nth-child(1) {
      grid-column:
        span 7;
    }

    .principle:nth-child(2) {
      grid-column:
        span 5;

      background:
        var(--coral);

      color: #fff;
    }

    .principle:nth-child(3) {
      grid-column:
        span 5;

      background:
        var(--gold-soft);
    }

    .principle:nth-child(4) {
      grid-column:
        span 7;
    }


    .principle-icon {
      width: 47px;
      height: 47px;

      display: grid;

      place-items: center;

      border-radius: 13px;

      background:
        var(--coral-soft);

      color:
        var(--coral-deep);

      font-size: 17px;
    }


    .principle:nth-child(2)
    .principle-icon {
      background:
        rgba(255,255,255,.16);

      color: #fff;
    }


    .principle:nth-child(3)
    .principle-icon {
      background:
        rgba(217,164,65,.17);

      color:
        var(--gold-deep);
    }


    .principle h3 {
      margin:
        38px 0 0;

      font-size: 28px;

      line-height: 1.15;

      letter-spacing: -.04em;
    }


    .principle p {
      max-width: 620px;

      margin:
        12px 0 0;

      color:
        var(--ink-soft);

      font-size: 14px;

      line-height: 1.7;
    }


    .principle:nth-child(2)
    p {
      color:
        rgba(255,255,255,.79);
    }


    .principle-watermark {
      position: absolute;

      right: 22px;
      bottom: 2px;

      color:
        rgba(232,93,74,.055);

      font-size: 120px;

      pointer-events: none;
    }


    .principle:nth-child(2)
    .principle-watermark {
      color:
        rgba(255,255,255,.09);
    }


    .principle:nth-child(3)
    .principle-watermark {
      color:
        rgba(138,100,32,.08);
    }


    /* =========================================================
       HUMAN / FINAL IDENTITY SECTION
       ========================================================= */

    .identity {
      background:
        var(--bg);
    }


    .identity-grid {
      display: grid;

      grid-template-columns:
        minmax(0,.88fr)
        minmax(0,1.12fr);

      gap:
        clamp(55px,7vw,115px);

      align-items: center;
    }


    .identity-photo {
      position: relative;

      overflow: hidden;

      aspect-ratio:
        1.12 / 1;

      border-radius: 29px;

      box-shadow:
        0 28px 70px rgba(34,37,43,.13);
    }


    .identity-photo img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      transition:
        transform 900ms var(--ease-out);
    }


    .identity-photo:hover img {
      transform:
        scale(1.035);
    }


    .identity-copy p {
      max-width: 680px;

      margin:
        23px 0 0;

      color:
        var(--ink-soft);

      font-size: 16px;

      line-height: 1.78;
    }


    .identity-note {
      margin-top: 29px;

      padding:
        18px 19px;

      display: flex;

      align-items: flex-start;

      gap: 14px;

      border:
        1px solid rgba(232,93,74,.17);

      border-radius: 16px;

      background:
        var(--coral-mist);
    }


    .identity-note-icon {
      width: 39px;
      height: 39px;

      display: grid;

      place-items: center;

      flex: 0 0 auto;

      border-radius: 11px;

      background:
        var(--coral-soft);

      color:
        var(--coral-deep);
    }


    .identity-note strong {
      display: block;

      font-size: 13px;
    }


    .identity-note span {
      display: block;

      margin-top: 4px;

      color:
        var(--ink-soft);

      font-size: 12px;

      line-height: 1.5;
    }


    /* =========================================================
       CTA
       ========================================================= */

    .cta-section {
      padding:
        30px 0 105px;

      background:
        var(--bg);
    }


    .cta-card {
      position: relative;

      overflow: hidden;

      padding:
        clamp(50px,7vw,92px);

      display: grid;

      grid-template-columns:
        minmax(0,1.2fr)
        minmax(300px,.8fr);

      align-items: center;

      gap: 60px;

      border-radius: 32px;

      background:
        var(--coral);

      color: #fff;

      box-shadow:
        0 28px 70px rgba(198,67,47,.20);
    }


    .cta-card::before {
      content: "";

      position: absolute;

      top: -290px;
      right: -250px;

      width: 610px;
      height: 610px;

      border-radius: 50%;

      background:
        rgba(255,255,255,.09);
    }


    .cta-card::after {
      content: "";

      position: absolute;

      right: 130px;
      bottom: -250px;

      width: 360px;
      height: 360px;

      border:
        1px solid rgba(255,255,255,.18);

      border-radius: 50%;
    }


    .cta-copy,
    .cta-actions {
      position: relative;

      z-index: 2;
    }


    .cta-copy h2 {
      max-width: 780px;

      margin: 0;

      font-size:
        clamp(41px,4.7vw,69px);

      line-height: 1.02;

      letter-spacing: -.058em;
    }


    .cta-copy p {
      max-width: 620px;

      margin:
        19px 0 0;

      color:
        rgba(255,255,255,.79);

      font-size: 15px;

      line-height: 1.68;
    }


    .cta-actions {
      display: flex;

      flex-direction: column;

      align-items: flex-end;

      gap: 12px;
    }


    .cta-primary {
      min-height: 54px;

      padding:
        0 22px;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      gap: 9px;

      border-radius: 13px;

      background: #fff;

      color:
        var(--coral-deep);

      text-decoration: none;

      font-size: 14px;

      font-weight: 760;

      box-shadow:
        0 10px 27px rgba(111,36,25,.14);

      transition:
        transform 190ms var(--ease);
    }


    .cta-primary:hover {
      transform:
        translateY(-3px);
    }


    .cta-secondary {
      color:
        rgba(255,255,255,.82);

      text-decoration: none;

      font-size: 12px;

      font-weight: 670;
    }


    /* =========================================================
       SCROLL REVEAL
       ========================================================= */

    .reveal {
      opacity: 0;

      transform:
        translateY(38px);

      transition:
        opacity 850ms var(--ease-out),
        transform 850ms var(--ease-out);
    }


    .reveal-left {
      transform:
        translateX(-44px);
    }


    .reveal-right {
      transform:
        translateX(44px);
    }


    .reveal-scale {
      transform:
        translateY(20px)
        scale(.96);
    }


    .reveal.visible {
      opacity: 1;

      transform:
        translate(0,0)
        scale(1);
    }


    .delay-1 {
      transition-delay: 90ms;
    }

    .delay-2 {
      transition-delay: 170ms;
    }

    .delay-3 {
      transition-delay: 250ms;
    }

    .delay-4 {
      transition-delay: 330ms;
    }


    /* =========================================================
       TABLET HEADER
       ========================================================= */

    @media (max-width: 1220px) {

      .site-container,
      .header-inner {
        width:
          calc(100% - 32px);
      }


      .main-nav,
      .header-divider,
      .header-search,
      .header-login,
      .header-register {
        display: none;
      }


      .mobile-toggle {
        display: block;
      }


      .mobile-menu {
        display: grid;

        grid-template-rows:
          0fr;

        width:
          calc(100% - 24px);

        margin:
          0 auto;

        opacity: 0;

        visibility: hidden;

        transition:
          grid-template-rows 280ms var(--ease),
          opacity 180ms ease,
          visibility 180ms ease,
          padding 180ms ease;
      }


      .mobile-menu.open {
        grid-template-rows:
          1fr;

        padding-bottom: 13px;

        opacity: 1;

        visibility: visible;
      }


      .mobile-menu-inner {
        overflow: hidden;
      }


      .mobile-menu-card {
        max-width: 720px;

        margin:
          0 auto;

        padding: 11px;

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

        border-radius: 17px;

        background:
          var(--bg);

        box-shadow:
          0 20px 45px rgba(34,37,43,.10);
      }


      .mobile-nav {
        display: grid;
      }


      .mobile-nav a {
        min-height: 47px;

        padding:
          0 12px;

        display: flex;

        align-items: center;

        border-radius: 10px;

        text-decoration: none;

        font-size: 13px;

        font-weight: 620;
      }


      .mobile-nav a:hover {
        background:
          var(--coral-mist);

        color:
          var(--coral-deep);
      }


      .mobile-actions {
        margin-top: 8px;

        padding-top: 10px;

        display: grid;

        grid-template-columns:
          1fr 1fr;

        gap: 8px;

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


      .mobile-actions a {
        min-height: 47px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 10px;

        text-decoration: none;

        font-size: 13px;

        font-weight: 710;
      }


      .mobile-login {
        border:
          1px solid var(--line);

        background: #fff;
      }


      .mobile-register {
        background:
          var(--coral);

        color: #fff;
      }

    }


    /* =========================================================
       TABLET
       ========================================================= */

    @media (max-width: 1000px) {

      .hero {
        min-height: auto;
      }


      .hero-grid {
        grid-template-columns:
          1fr;

        gap: 65px;
      }


      .hero-copy {
        max-width: 820px;
      }


      .hero-visual {
        width:
          min(710px,100%);

        min-height: 590px;

        margin:
          0 auto;
      }


      .why-grid {
        grid-template-columns:
          1fr;

        gap: 27px;
      }


      .why-label {
        position: static;
      }


      .cosmos-grid,
      .identity-grid {
        grid-template-columns:
          1fr;

        gap: 70px;
      }


      .cosmos-visual,
      .identity-photo {
        width:
          min(760px,100%);

        margin-inline:
          auto;
      }


      .purpose-head {
        display: block;
      }


      .purpose-head
      .section-description {
        margin-top: 22px;
      }


      .purpose-grid {
        grid-template-columns:
          1fr;
      }


      .purpose-card {
        min-height: 370px;
      }


      .principle:nth-child(1),
      .principle:nth-child(2),
      .principle:nth-child(3),
      .principle:nth-child(4) {
        grid-column:
          span 6;
      }


      .cta-card {
        grid-template-columns:
          1fr;

        gap: 34px;
      }


      .cta-actions {
        align-items:
          flex-start;
      }

    }


    /* =========================================================
       MOBILE
       ========================================================= */

    @media (max-width: 680px) {

      .site-container,
      .header-inner {
        width:
          calc(100% - 28px);
      }


      .header-inner {
        height: 68px;
      }


      .logo-placeholder {
        font-size: 18px;
      }


      .logo-mark {
        width: 32px;
        height: 32px;

        font-size: 10px;
      }


      .hero {
        padding:
          49px 0 72px;
      }


      .hero-title {
        font-size:
          clamp(46px,13.5vw,65px);
      }


      .hero-description {
        margin-top: 23px;

        font-size: 15px;

        line-height: 1.66;
      }


      .hero-actions {
        flex-direction: column;

        align-items: stretch;
      }


      .button-primary,
      .button-secondary {
        width: 100%;
      }


      .hero-visual {
        min-height: 435px;
      }


      .hero-photo-frame {
        left: 11px;
        bottom: 15px;

        border-radius: 22px;
      }


      .hero-floating {
        right: -2px;

        width: 180px;

        padding: 13px;
      }


      .hero-image-copy {
        left: 18px;
        right: 18px;
        bottom: 17px;
      }


      .hero-image-copy strong {
        font-size: 15px;
      }


      .why {
        padding:
          72px 0;
      }


      .why-text {
        font-size: 30px;
      }


      .section {
        padding:
          84px 0;
      }


      .cosmos-visual {
        padding:
          18px 0 18px 18px;
      }


      .cosmos-image {
        border-radius: 21px;
      }


      .cosmos-card {
        padding: 14px;

        width:
          min(225px,81%);
      }


      .purpose-head {
        margin-bottom: 39px;
      }


      .purpose-card {
        min-height: 345px;

        padding: 28px;

        border-radius: 22px;
      }


      .vision-quote {
        padding:
          82px 0;
      }


      .vision-quote h2 {
        font-size:
          clamp(38px,11vw,55px);
      }


      .principles-grid {
        grid-template-columns:
          1fr;

        grid-auto-rows:
          auto;
      }


      .principle:nth-child(1),
      .principle:nth-child(2),
      .principle:nth-child(3),
      .principle:nth-child(4) {
        grid-column: auto;
      }


      .principle {
        min-height: 250px;
      }


      .identity-photo {
        border-radius: 22px;
      }


      .cta-section {
        padding:
          10px 0 75px;
      }


      .cta-card {
        padding:
          39px 25px;

        border-radius: 23px;
      }


      .cta-primary {
        width: 100%;
      }


      .mobile-actions {
        grid-template-columns:
          1fr;
      }

    }


    /* =========================================================
       REDUCED MOTION
       ========================================================= */

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        scroll-behavior:
          auto !important;

        animation-duration:
          .01ms !important;

        transition-duration:
          .01ms !important;
      }


      .reveal {
        opacity: 1;

        transform: none;
      }

    }