:root {
       --sand: #faf7f2;
       --sand-2: #f0ebe0;
       --sand-3: #e4ddd0;
       --sea: #1a6b8a;
       --sea-light: #2a8fad;
       --sea-pale: #e8f4f8;
       --orange: #ff6b35;
       --orange-2: #ff9a3c;
       --ink: #1a1410;
       --ink-2: #4a3f35;
       --ink-3: #8a7d70;
       --green: #2a9d5c;
       --green-pale: #f0faf5;
       --green-dark: #1a7a46;
       --gold: #c9a84c;
       --gold-pale: rgba(201, 168, 76, .1);
       --r-sm: 10px;
       --r-md: 14px;
       --r-lg: 18px;
       --r-xl: 24px;
       --r-pill: 100px;
       --t: 0.22s ease;
   }

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

   html {
       scroll-behavior: smooth;
       -webkit-text-size-adjust: 100%
   }

   body {
       font-family: 'Geologica', sans-serif;
       background: var(--sand);
       color: var(--ink);
       -webkit-font-smoothing: antialiased;
       min-height: 100vh;
       display: flex;
       flex-direction: column
   }

   main {
       flex: 1
   }

   address {
       font-style: normal
   }

   p+p {
       margin-top: 14px
   }

   /* ---- HEADER ---- */
   .header {
       background: rgba(250, 247, 242, .96);
       backdrop-filter: blur(12px);
       border-bottom: 1px solid var(--sand-3);
       position: sticky;
       top: 0;
       z-index: 50
   }

   .header__inner {
       max-width: 1100px;
       margin: 0 auto;
       padding: 0 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: 60px
   }

   .logo {
       font-family: 'Unbounded', sans-serif;
       font-size: 20px;
       font-weight: 900;
       text-decoration: none;
       display: flex;
       align-items: center
   }

   .logo__accent {
       color: var(--orange)
   }

   .logo__dot {
       color: var(--sand-3);
       margin: 0 7px
   }

   .logo__sub {
       color: var(--ink-3);
       font-weight: 400;
       font-size: 13px
   }

   .header__nav {
       display: flex;
       gap: 24px
   }

   .header__nav a {
       font-family: 'Unbounded', sans-serif;
       font-size: 11px;
       font-weight: 600;
       color: var(--ink-3);
       text-decoration: none;
       transition: color var(--t)
   }

   .header__nav a:hover {
       color: var(--sea)
   }

   .header__nav a.active {
       color: var(--orange)
   }

   .header__actions {
       display: flex;
       gap: 12px
   }

   .btn {
       font-family: 'Unbounded', sans-serif;
       font-weight: 700;
       display: inline-flex;
       align-items: center;
       gap: 6px;
       border-radius: var(--r-pill);
       text-decoration: none;
       border: none;
       cursor: pointer;
       letter-spacing: .04em;
       transition: all var(--t)
   }

   .btn-orange {
       background: var(--orange);
       color: #fff;
       font-size: 11px;
       padding: 10px 22px
   }

   .btn-orange:hover {
       background: var(--orange-2);
       transform: translateY(-1px)
   }

   /* ---- HERO ---- */
   .hero {
       background: var(--ink);
       padding: 96px 0 80px;
       position: relative;
       overflow: hidden;
   }

   .hero::before {
       content: '';
       position: absolute;
       inset: 0;
       background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1px);
       background-size: 32px 32px;
       pointer-events: none;
   }

   /* Зелёное свечение слева */
   .hero__glow-green {
       position: absolute;
       left: -100px;
       bottom: -100px;
       width: 500px;
       height: 500px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(42, 157, 92, .15) 0%, transparent 65%);
       pointer-events: none;
   }

   /* Морское свечение справа */
   .hero__glow-sea {
       position: absolute;
       right: -80px;
       top: -80px;
       width: 400px;
       height: 400px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(26, 107, 138, .18) 0%, transparent 65%);
       pointer-events: none;
   }

   .hero__inner {
       max-width: 1100px;
       margin: 0 auto;
       padding: 0 20px;
       position: relative;
       z-index: 1;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 64px;
       align-items: center
   }

  

   .hero__badge {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: rgba(42, 157, 92, .15);
       border: 1px solid rgba(42, 157, 92, .3);
       border-radius: var(--r-pill);
       padding: 6px 16px;
       font-family: 'Unbounded', sans-serif;
       font-size: 10px;
       font-weight: 700;
       letter-spacing: .12em;
       color: var(--green);
       margin-bottom: 24px;
   }

   .hero__badge-dot {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: var(--green);
       animation: pulse 2s ease-in-out infinite
   }

   @keyframes pulse {

       0%,
       100% {
           opacity: 1;
           transform: scale(1)
       }

       50% {
           opacity: .5;
           transform: scale(.8)
       }
   }

   .hero__title {
       font-family: 'Cormorant Garamond', serif;
       font-weight: 300;
       font-size: clamp(2.8rem, 5vw, 4.2rem);
       line-height: 1.08;
       color: #fff;
       margin-bottom: 20px;
       letter-spacing: -.5px;
   }

   .hero__title em {
       font-style: italic;
       color: var(--green)
   }

   .hero__sub {
       font-size: 15px;
       color: rgba(255, 255, 255, .6);
       line-height: 1.8;
       margin-bottom: 32px;
   }

   .hero__year {
       display: inline-flex;
       align-items: center;
       gap: 12px;
       font-family: 'Unbounded', sans-serif;
       font-size: 12px;
       font-weight: 700;
       color: rgba(255, 255, 255, .3);
       letter-spacing: .1em;
   }

   .hero__year span {
       color: var(--orange);
       font-size: 18px
   }

   /* Правая колонка — цифры */
   .hero__stats {
       display: flex;
       flex-direction: column;
       gap: 2px
   }

   .hero__stat {
       background: rgba(255, 255, 255, .04);
       border: 1px solid rgba(255, 255, 255, .08);
       border-radius: var(--r-lg);
       padding: 24px 28px;
       transition: background var(--t);
   }

   .hero__stat:hover {
       background: rgba(255, 255, 255, .07)
   }

   .hero__stat-num {
       font-family: 'Cormorant Garamond', serif;
       font-size: 3rem;
       font-weight: 400;
       line-height: 1;
       margin-bottom: 6px;
   }

   .hero__stat-num--green {
       color: var(--green)
   }

   .hero__stat-num--sea {
       color: var(--sea-light)
   }

   .hero__stat-num--orange {
       color: var(--orange)
   }

   .hero__stat-label {
       font-size: 12px;
       color: rgba(255, 255, 255, .45);
       line-height: 1.5
   }

   /* ---- WAVE ---- */
   .wave {
       width: 100%;
       overflow: hidden;
       line-height: 0
   }

   .wave svg {
       display: block;
       width: 100%
   }

   /* ---- LAYOUT ---- */
   .container {
       max-width: 1100px;
       margin: 0 auto;
       padding: 0 20px
   }

   .container--narrow {
       max-width: 780px
   }

   .section {
       padding: 72px 0
   }

   .section--alt {
       background: var(--sand-2);
       border-top: 1px solid var(--sand-3);
       border-bottom: 1px solid var(--sand-3)
   }

   .section--dark {
       background: var(--ink);
       position: relative;
       overflow: hidden
   }

   .section--green {
       background: linear-gradient(160deg, var(--green-pale) 0%, var(--sand) 100%);
       border-top: 1px solid rgba(42, 157, 92, .15);
       border-bottom: 1px solid rgba(42, 157, 92, .15)
   }

   .eyebrow {
       font-family: 'Unbounded', sans-serif;
       font-size: 10px;
       font-weight: 700;
       letter-spacing: .18em;
       margin-bottom: 8px;
       display: block
   }

   .eyebrow--orange {
       color: var(--orange)
   }

   .eyebrow--green {
       color: var(--green)
   }

   .eyebrow--sea {
       color: var(--sea)
   }

   .eyebrow--gold {
       color: var(--gold)
   }

   .eyebrow--muted {
       color: rgba(255, 255, 255, .3)
   }

   .section-title {
       font-family: 'Cormorant Garamond', serif;
       font-size: clamp(2rem, 4vw, 3rem);
       font-weight: 300;
       color: var(--ink);
       margin-bottom: 12px;
       line-height: 1.15
   }

   .section-title em {
       font-style: italic;
       color: var(--green)
   }

   .section-title--white {
       color: #fff
   }

   .section-title--white em {
       color: var(--green)
   }

   .section-sub {
       font-size: 14px;
       color: var(--ink-3);
       line-height: 1.75;
       max-width: 560px
   }

   .section-sub--white {
       color: rgba(255, 255, 255, .55)
   }

   /* ---- О КОМАНДЕ — текстовый блок ---- */
   .about-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 64px;
       align-items: start;
       margin-top: 48px
   }

   .about-text {
       font-size: 15px;
       color: var(--ink-2);
       line-height: 1.9
   }

   .about-text strong {
       color: var(--ink);
       font-weight: 600
   }

   .about-text p+p {
       margin-top: 16px
   }

   /* Карточки ценностей */
   .values-list {
       display: flex;
       flex-direction: column;
       gap: 12px
   }

   .value-item {
       background: #fff;
       border: 1px solid var(--sand-3);
       border-radius: var(--r-md);
       padding: 20px;
       display: flex;
       align-items: flex-start;
       gap: 14px;
       transition: border-color var(--t), transform var(--t);
   }

   .value-item:hover {
       border-color: var(--orange);
       transform: translateX(4px)
   }

   .value-item__icon {
       font-size: 1.6rem;
       flex-shrink: 0;
       line-height: 1;
       margin-top: 2px
   }

   .value-item__title {
       font-family: 'Unbounded', sans-serif;
       font-size: 12px;
       font-weight: 700;
       color: var(--ink);
       margin-bottom: 4px
   }

   .value-item__desc {
       font-size: 13px;
       color: var(--ink-3);
       line-height: 1.6
   }

   /* ---- ЭКОЛОГИЯ ---- */
   .eco-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 16px;
       margin-top: 40px
   }

   .eco-card {
       background: #fff;
       border: 1px solid rgba(42, 157, 92, .2);
       border-radius: var(--r-lg);
       padding: 28px 24px;
       position: relative;
       overflow: hidden;
       transition: transform var(--t), box-shadow var(--t);
   }

   .eco-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 3px;
       background: linear-gradient(90deg, var(--green), #5bc88a);
   }

   .eco-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 12px 40px rgba(42, 157, 92, .12)
   }

   .eco-card__icon {
       font-size: 2.2rem;
       margin-bottom: 16px;
       display: block
   }

   .eco-card__title {
       font-family: 'Unbounded', sans-serif;
       font-size: 13px;
       font-weight: 700;
       color: var(--ink);
       margin-bottom: 10px
   }

   .eco-card__desc {
       font-size: 13px;
       color: var(--ink-3);
       line-height: 1.7
   }

   .eco-card__tag {
       display: inline-block;
       margin-top: 14px;
       font-family: 'Unbounded', sans-serif;
       font-size: 9px;
       font-weight: 700;
       letter-spacing: .1em;
       padding: 3px 10px;
       border-radius: var(--r-pill);
   }

   .eco-card__tag--done {
       background: rgba(42, 157, 92, .1);
       color: var(--green-dark)
   }

   .eco-card__tag--progress {
       background: rgba(255, 107, 53, .08);
       color: var(--orange)
   }

   .eco-card__tag--plan {
       background: var(--sea-pale);
       color: var(--sea)
   }

   /* Большой эко-блок */
   .eco-manifesto {
       background: var(--green);
       border-radius: var(--r-xl);
       padding: 48px;
       margin-top: 16px;
       display: grid;
       grid-template-columns: 1fr auto;
       gap: 32px;
       align-items: center;
   }

   .eco-manifesto__title {
       font-family: 'Cormorant Garamond', serif;
       font-size: clamp(1.6rem, 3vw, 2.4rem);
       font-weight: 300;
       color: #fff;
       line-height: 1.3;
       margin-bottom: 12px;
   }

   .eco-manifesto__title em {
       font-style: italic
   }

   .eco-manifesto__desc {
       font-size: 14px;
       color: rgba(255, 255, 255, .7);
       line-height: 1.75
   }

   .eco-manifesto__icon {
       font-size: 5rem;
       opacity: .6
   }

   /* ---- ПОМОЩЬ ЛЮДЯМ ---- */
   .care-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 16px;
       margin-top: 40px
   }

   .care-card {
       border-radius: var(--r-lg);
       padding: 32px;
       position: relative;
       overflow: hidden;
   }

   .care-card--sea {
       background: linear-gradient(135deg, var(--sea) 0%, #0d4a63 100%);
       color: #fff;
   }

   .care-card--pale {
       background: var(--sea-pale);
       border: 1px solid rgba(26, 107, 138, .15);
   }

   .care-card__icon {
       font-size: 2.5rem;
       margin-bottom: 20px;
       display: block
   }

   .care-card__title {
       font-family: 'Unbounded', sans-serif;
       font-size: 14px;
       font-weight: 700;
       margin-bottom: 12px;
       line-height: 1.4
   }

   .care-card--sea .care-card__title {
       color: #fff
   }

   .care-card--pale .care-card__title {
       color: var(--ink)
   }

   .care-card__desc {
       font-size: 13px;
       line-height: 1.75
   }

   .care-card--sea .care-card__desc {
       color: rgba(255, 255, 255, .7)
   }

   .care-card--pale .care-card__desc {
       color: var(--ink-3)
   }

   .care-card__badge {
       display: inline-block;
       margin-top: 16px;
       font-family: 'Unbounded', sans-serif;
       font-size: 9px;
       font-weight: 700;
       letter-spacing: .1em;
       padding: 4px 12px;
       border-radius: var(--r-pill);
       background: rgba(255, 255, 255, .15);
       color: #fff;
   }

   .care-card--pale .care-card__badge {
       background: rgba(26, 107, 138, .1);
       color: var(--sea)
   }

   /* ---- ЕДИНОМЫШЛЕННИКИ ---- */
   .like-minded {
       background: var(--ink);
       border-radius: var(--r-xl);
       padding: 56px 48px;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 48px;
       align-items: center;
       position: relative;
       overflow: hidden;
   }

   .like-minded::before {
       content: '';
       position: absolute;
       inset: 0;
       background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1px, transparent 1px);
       background-size: 28px 28px;
       pointer-events: none;
   }

   .like-minded::after {
       content: '';
       position: absolute;
       right: -60px;
       bottom: -60px;
       width: 300px;
       height: 300px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(255, 107, 53, .12) 0%, transparent 65%);
   }

   .like-minded__left {
       position: relative;
       z-index: 1
   }

   .like-minded__title {
       font-family: 'Cormorant Garamond', serif;
       font-size: clamp(1.8rem, 3.5vw, 2.8rem);
       font-weight: 300;
       color: #fff;
       line-height: 1.2;
       margin-bottom: 16px;
   }

   .like-minded__title em {
       font-style: italic;
       color: var(--orange)
   }

   .like-minded__desc {
       font-size: 14px;
       color: rgba(255, 255, 255, .55);
       line-height: 1.8;
       margin-bottom: 28px
   }

   .btn-orange-lg {
       font-size: 13px;
       padding: 14px 32px;
       box-shadow: 0 8px 28px rgba(255, 107, 53, .28)
   }

   .btn-orange-lg:hover {
       background: var(--orange-2);
       transform: translateY(-2px)
   }

   .like-minded__right {
       position: relative;
       z-index: 1
   }

   .looking-tags {
       display: flex;
       flex-wrap: wrap;
       gap: 8px
   }

   .looking-tag {
       font-family: 'Unbounded', sans-serif;
       font-size: 11px;
       font-weight: 600;
       padding: 9px 16px;
       border-radius: var(--r-pill);
       border: 1px solid rgba(255, 255, 255, .12);
       color: rgba(255, 255, 255, .6);
       transition: all var(--t);
   }

   .looking-tag:hover {
       border-color: var(--orange);
       color: var(--orange)
   }

   /* ---- TIMELINE ---- */
   .timeline {
       margin-top: 40px;
       display: flex;
       flex-direction: column;
       gap: 0
   }

   .tl-item {
       display: grid;
       grid-template-columns: 120px 1px 1fr;
       gap: 0 24px;
       align-items: start
   }

   .tl-item+.tl-item {
       margin-top: 0
   }

   .tl-date {
       font-family: 'Unbounded', sans-serif;
       font-size: 11px;
       font-weight: 700;
       color: var(--ink-3);
       padding-top: 4px;
       text-align: right;
   }

   .tl-line {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0;
   }

   .tl-dot {
       width: 10px;
       height: 10px;
       border-radius: 50%;
       background: var(--orange);
       flex-shrink: 0;
       margin-top: 4px;
   }

   .tl-dot--green {
       background: var(--green)
   }

   .tl-dot--sea {
       background: var(--sea)
   }

   .tl-dot--future {
       background: var(--sand-3);
       border: 2px solid var(--sand-3)
   }

   .tl-connector {
       flex: 1;
       width: 1px;
       background: var(--sand-3);
       min-height: 40px
   }

   .tl-content {
       padding-bottom: 32px
   }

   .tl-content__title {
       font-family: 'Unbounded', sans-serif;
       font-size: 13px;
       font-weight: 700;
       color: var(--ink);
       margin-bottom: 6px
   }

   .tl-content__desc {
       font-size: 13px;
       color: var(--ink-3);
       line-height: 1.7
   }

   .tl-content__title--future {
       color: var(--ink-3)
   }

   /* ---- FOOTER ---- */
   .footer {
       background: var(--sand-2);
       border-top: 1px solid var(--sand-3);
       padding: 48px 0 24px
   }

   .footer__grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 32px;
       margin-bottom: 32px
   }

   .footer__heading {
       font-family: 'Unbounded', sans-serif;
       font-size: 12px;
       font-weight: 700;
       color: var(--ink);
       margin-bottom: 12px
   }

   .footer__text {
       font-size: 13px;
       color: var(--ink-3);
       line-height: 1.7
   }

   .footer__links {
       display: flex;
       flex-direction: column;
       gap: 8px
   }

   .footer__links a {
       font-size: 13px;
       color: var(--ink-3);
       text-decoration: none;
       transition: color var(--t)
   }

   .footer__links a:hover {
       color: var(--sea)
   }

   .footer__links a.active {
       color: var(--orange)
   }

   .footer__copy {
       border-top: 1px solid var(--sand-3);
       padding-top: 20px;
       text-align: center;
       font-size: 11px;
       color: var(--ink-3)
   }

   /* ---- STICKY ---- */
   .sticky-cta {
       display: none;
       position: fixed;
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%);
       z-index: 100
   }

   .sticky-cta__btn {
       font-family: 'Unbounded', sans-serif;
       font-weight: 800;
       display: flex;
       align-items: center;
       gap: 8px;
       background: rgba(255, 107, 53, .96);
       color: #fff;
       font-size: 13px;
       padding: 14px 28px;
       border-radius: var(--r-pill);
       text-decoration: none;
       box-shadow: 0 8px 32px rgba(255, 107, 53, .35);
       white-space: nowrap
   }

   /* ---- ANIMATIONS ---- */
   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(20px)
       }

       to {
           opacity: 1;
           transform: translateY(0)
       }
   }

   .fu1 {
       animation: fadeUp .6s ease both .05s
   }

   .fu2 {
       animation: fadeUp .6s ease both .15s
   }

   .fu3 {
       animation: fadeUp .6s ease both .25s
   }

   .fu4 {
       animation: fadeUp .6s ease both .35s
   }

   /* ---- RESPONSIVE ---- */
   @media(max-width:900px) {
       .hero__inner {
           grid-template-columns: 1fr;
           gap: 40px
       }

       .hero__stats {
           flex-direction: row;
           flex-wrap: wrap;
           gap: 12px
       }

       .hero__stat {
           flex: 1;
           min-width: 140px
       }

       .about-grid {
           grid-template-columns: 1fr;
           gap: 40px
       }

       .eco-grid {
           grid-template-columns: 1fr
       }

       .eco-manifesto {
           grid-template-columns: 1fr
       }

       .eco-manifesto__icon {
           display: none
       }

       .care-grid {
           grid-template-columns: 1fr
       }

       .like-minded {
           grid-template-columns: 1fr;
           gap: 32px
       }

       .footer__grid {
           grid-template-columns: 1fr;
           gap: 24px
       }
   }

   @media(max-width:768px) {
       .header__nav {
           display: none
       }

       .sticky-cta {
           display: flex
       }

       .tl-item {
           grid-template-columns: 80px 1px 1fr
       }

       .eco-manifesto {
           padding: 32px 24px
       }

       .like-minded {
           padding: 36px 24px
       }
   }