/* ══════════════════════════════════════════
   INDEX PAGE
══════════════════════════════════════════ */

    /* ══ HERO — responsive full-width carousel ══ */
    #hero {
      position: relative;
      width: 100%;
      /* Desktop: full viewport height */
      height: 100vh;
      height: 100svh; /* avoids mobile browser-chrome jump */
      overflow: hidden;
      z-index: 1;
      display: flex;
      align-items: center;
    }
    /* Tablet — slightly shorter so content doesn't feel buried */
    @media(max-width:900px) {
      #hero { height: 75vh; min-height: 500px; }
    }
    /* Mobile portrait — compact, shows image without massive zoom */
    @media(max-width:600px) {
      #hero { height: auto; min-height: 520px; }
    }
    @media(max-width:400px) {
      #hero { height: auto; min-height: 480px; }
    }

    .hero-carousel { position: absolute; inset: 0; z-index: 0; }

    .hero-slide {
      position: absolute; inset: 0; opacity: 0; overflow: hidden;
      z-index: 0;
      will-change: opacity;
    }
    /* Outgoing — stays visible underneath */
    .hero-slide.behind {
      opacity: 1;
      z-index: 1;
    }
    /* Before ready: first slide instant */
    .hero-slide.active {
      opacity: 1;
      z-index: 2;
    }
    /* Clean crossfade only — no transform on the slide itself */
    .hero-carousel.ready .hero-slide.active {
      opacity: 0;
      z-index: 2;
      transition: opacity 1.4s ease-in-out;
    }
    .hero-carousel.ready .hero-slide.active.visible {
      opacity: 1;
    }
    /* Ken Burns lives on the img — completely separate from opacity */
    .hero-carousel.ready .hero-slide.active.visible img,
    .hero-carousel.ready .hero-slide.active.visible picture {
      animation: kenBurns 9s ease-out forwards;
    }
    @keyframes kenBurns {
      from { transform: scale(1); }
      to   { transform: scale(1.06); }
    }

    /* Image fills slide, crop smartly per breakpoint */
    .hero-slide picture,
    .hero-slide img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      display: block;
    }
    .hero-slide img {
      object-fit: cover;
      object-position: center 25%; /* desktop — show upper quarter where faces are */
    }
    @media(max-width:900px) {
      .hero-slide img { object-position: center 15%; }
    }
    @media(max-width:600px) {
      /* Mobile portrait images (hero-*-m.*) are 800x1100 — tall.
         With shorter hero height (65vh) they fit without heavy zoom. */
      .hero-slide img { object-position: center 10%; }
    }

    .hero-overlay {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(to top, rgba(5,18,4,.90) 0%, rgba(5,18,4,.60) 30%,
                                rgba(5,18,4,.25) 65%, rgba(5,18,4,.10) 100%),
        linear-gradient(to right, rgba(5,18,4,.50) 0%, transparent 60%);
    }
    .hero-content {
      position: relative; z-index: 2;
      max-width: 1200px; margin: 0 auto; width: 100%;
      padding: 130px 52px 72px;
    }
    .hero-h1 {
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 6vw, 5.5rem);
      font-weight: 200; line-height: .93; letter-spacing: -.03em;
      color: #fff; max-width: 14ch;
      text-shadow: 0 2px 24px rgba(0,0,0,.45);
      opacity: 0; animation: fadeUp .9s .3s forwards;
    }
    .hero-h1 em { font-style:italic; color:#f5d675; display:block; font-weight:100; letter-spacing:-.04em; }
    .hero-sub {
      font-size: 1rem; line-height: 1.68; color: rgba(255,255,255,.80);
      margin-top: 18px; max-width: 480px;
      opacity: 0; animation: fadeUpDeep .9s .45s forwards;
    }

    .hero-trust {
      display: flex; align-items: center; gap: 8px;
      margin-top: 18px; font-size: .78rem;
      color: rgba(255,255,255,.52);
      opacity: 0; animation: fadeUp .8s .75s forwards;
      flex-wrap: wrap; row-gap: 6px;
    }
    .hero-trust-dot {
      width: 4px; height: 4px; border-radius: 50%;
      background: rgba(245,214,117,.70); flex-shrink: 0;
    }
    @media(max-width:900px) {
      .hero-content { padding: 110px 24px 48px; }
      .hero-h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); max-width: 100%; }
    }
    @media(max-width:600px) {
      #hero { align-items: center; }
      .hero-content { padding: 100px 16px 60px; text-align: left; }
      .hero-h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.08; max-width: 100%; }
      .hero-h1 em { font-size: 95%; }
      .hero-sub { font-size: .88rem; margin-top: 10px; max-width: 100%; }

      .hero-trust { font-size: .70rem; margin-top: 14px; }
    }
    @media(max-width:400px) {
      .hero-content { padding: 82px 14px 52px; }
      .hero-h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
    }


    /* ── Custom pricing CTA pill ── */
    .hero-price-custom {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 16px; padding: 7px 14px;
      background: rgba(255,255,255,.10);
      border: 1.5px solid rgba(245,214,117,.50);
      border-radius: 100px;
      backdrop-filter: blur(12px);
    }
    @media(max-width:600px) {
      .hero-price-custom { padding: 5px 10px; gap: 6px; margin-top: 10px; }
    }

    /* ── Pricing pill ── */
    .hero-price-pill {
      display: inline-flex; flex-direction: column; gap: 6px;
      margin-top: 22px;
      background: rgba(255,255,255,.13);
      border: 1.5px solid rgba(245,214,117,.55);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 14px;
      padding: 12px 20px 10px;
    }
    .hero-price-main {
      display: flex; align-items: baseline; gap: 10px;
    }
    .hero-price-label {
      font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
      color: rgba(245,214,117,.85); font-weight: 700; font-family: var(--font-body);
    }
    .hero-price-amount {
      font-family: var(--font-display); font-size: 2rem; font-weight: 600;
      color: #ffffff; line-height: 1; letter-spacing: -.02em;
    }
    .hero-price-per {
      font-size: .95rem; font-weight: 300; color: rgba(255,255,255,.70);
      font-family: var(--font-body); letter-spacing: 0;
    }
    .hero-price-includes {
      font-size: .74rem; color: rgba(255,255,255,.68);
      font-family: var(--font-body); letter-spacing: .02em;
    }
    @media(max-width:600px) {
      .hero-price-pill { padding: 10px 16px 9px; }
      .hero-price-amount { font-size: 1.7rem; }
      .hero-price-includes { font-size: .70rem; }
    }


    /* ── GKVK badge — circular logo + rectangular text label below ── */
    .hero-gkvk-badge {
      position: absolute; top: 132px; right: 52px; z-index: 3;
      display: flex; flex-direction: column;
      align-items: center; gap: 0;
      opacity: 0; animation: fadeUp .7s .9s forwards;
    }
    /* Circular logo container */
    .gkvk-circle {
      width: 72px; height: 72px; border-radius: 50%;
      background: rgba(10,30,10,.60);
      border: 2px solid rgba(245,214,117,.75);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      box-shadow: 0 4px 20px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.12);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    /* Rectangular text tag below the circle */
    .gkvk-text {
      background: rgba(10,30,10,.65);
      border: 1.5px solid rgba(245,214,117,.60);
      border-top: none;
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      padding: 5px 14px 6px;
      border-radius: 0 0 10px 10px;
      text-align: center; line-height: 1.25;
      box-shadow: 0 4px 16px rgba(0,0,0,.30);
    }
    .gkvk-line1 {
      display: block; font-size: .54rem; font-weight: 700;
      letter-spacing: .10em; text-transform: uppercase;
      color: rgba(245,214,117,.72);
    }
    .gkvk-line2 {
      display: block; font-size: .76rem; font-weight: 800;
      color: #f5d675; letter-spacing: .02em;
    }
    @media(max-width:900px) {
      .hero-gkvk-badge { top: 120px; right: 24px; }
      .gkvk-circle { width: 60px; height: 60px; }
    }
    @media(max-width:600px) {
      .hero-gkvk-badge { top: 110px; right: 14px; }
      .gkvk-circle { width: 52px; height: 52px; }
      .gkvk-text { padding: 4px 10px 5px; }
      .gkvk-line2 { font-size: .68rem; }
    }
    @media(max-width:400px) {
      .hero-gkvk-badge { top: 100px; right: 10px; }
      .gkvk-circle { width: 46px; height: 46px; }
    }

    /* ── Carousel dots ── */
    .hero-dots {
      position: absolute; bottom: 32px; left: 50%;
      transform: translateX(-50%); z-index: 3;
      display: flex; gap: 10px; align-items: center;
    }
    .hero-dot {
      width: 8px; height: 8px; border-radius: 100px;
      background: rgba(255,255,255,.38);
      border: none; cursor: pointer; padding: 0;
      transition: background .3s, width .3s;
    }
    .hero-dot.active {
      background: #f5d675;
      width: 28px;
    }
    @media(hover:none)and(pointer:coarse){ .hero-dot { cursor: pointer; } }

    /* ── Carousel arrows — hidden ── */
    .hero-arrow { display: none !important; }

    /* ── Progress bar ── */
    .hero-progress {
      position: absolute; bottom: 0; left: 0; z-index: 3;
      height: 3px; background: rgba(255,255,255,.15); width: 100%;
    }
    .hero-progress-bar {
      height: 100%; background: var(--gold);
      width: 0%; transition: none;
    }
    .hero-progress-bar.running {
      transition: width 5s linear;
      width: 100%;
    }

    /* ── Scroll hint ── */
    .hero-scroll {
      position: absolute; bottom: 52px; right: 52px; z-index: 3;
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      color: rgba(255,255,255,.40); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
      opacity: 0; animation: fadeUp .7s 1.2s forwards;
    }
    .hero-scroll-line {
      width: 1px; height: 40px;
      background: linear-gradient(to bottom, rgba(245,214,117,.60), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }
    @keyframes fadeUpDeep{
      from{opacity:0;transform:translateY(44px)}
      to{opacity:1;transform:translateY(0)}
    }
    @keyframes scrollPulse {
      0%   { transform: scaleY(0); transform-origin: top; }
      50%  { transform: scaleY(1); transform-origin: top; }
      51%  { transform-origin: bottom; }
      100% { transform: scaleY(0); transform-origin: bottom; }
    }


    /* ── Hero CTA buttons ── */
    .hero-actions {
      display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap;
      opacity: 0; animation: fadeUp .9s .6s forwards;
    }
    .hero-btn-primary,
    .hero-btn-outline {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      padding: 14px 24px; border-radius: 100px;
      font-family: var(--font-body); font-weight: 700; font-size: .92rem;
      text-decoration: none; white-space: nowrap;
      transition: transform .2s, box-shadow .3s, background .2s;
    }
    .hero-btn-primary {
      background: var(--green); color: #fff; border: none; cursor: pointer;
      box-shadow: 0 6px 24px rgba(45,106,45,.50);
    }
    .hero-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(45,106,45,.65); background: var(--green-light); }
    .hero-btn-outline {
      background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
      border: 1.5px solid rgba(255,255,255,.55);
      backdrop-filter: blur(12px);
    }
    .hero-btn-outline:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.85); transform: translateY(-3px); }
    @media(hover:none)and(pointer:coarse){
      .hero-btn-primary, .hero-btn-outline { cursor: pointer; }
      .hero-btn-primary:hover, .hero-btn-outline:hover { transform: none; }
    }
    /* Tablet */
    @media(max-width:900px){
      .hero-btn-primary, .hero-btn-outline { padding: 12px 18px; font-size: .85rem; }
    }
    /* Mobile — stack vertically, hug content */
    @media(max-width:600px){
      .hero-actions { flex-direction: column; align-items: flex-start; }
      .hero-btn-primary, .hero-btn-outline {
        padding: 11px 20px; font-size: .82rem;
      }
    }
    @media(max-width:400px){
      .hero-btn-primary, .hero-btn-outline { padding: 10px 14px; font-size: .78rem; }
    }

    /* ── STATS STRIP — Full green, white numbers, bold impact ── */
    /* ── Stats strip — centred, icon above number ── */
    .stats-strip {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      width: 100%;
      position: relative; z-index: 1;
      background: var(--green);
    }
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 28px 12px 24px;
      position: relative;
      transition: background .3s;
      border-right: 1px solid rgba(255,255,255,.12);
    }
    .stat-item:last-child { border-right: none; }
    .stat-item:hover { background: var(--green-dark); }
    /* Gold top accent line on hover */
    .stat-item::after {
      content: '';
      position: absolute; top: 0; left: 20%; right: 20%; height: 2px;
      background: var(--gold);
      transform: scaleX(0);
      transition: transform .3s cubic-bezier(.4,0,.2,1);
      border-radius: 0 0 2px 2px;
    }
    .stat-item:hover::after { transform: scaleX(1); }
    /* Icon circle */
    .stat-icon {
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(255,255,255,.12);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 10px;
      color: rgba(255,255,255,.85);
      transition: background .3s, transform .3s;
    }
    .stat-item:hover .stat-icon {
      background: rgba(200,146,10,.25);
      transform: translateY(-3px);
    }
    .stat-num {
      font-variant-numeric: tabular-nums;
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 3.8vw, 3.2rem);
      font-weight: 600;
      color: #f5d675;
      line-height: 1;
      letter-spacing: -.02em;
    }
    .stat-label {
      font-size: .72rem;
      color: rgba(255,255,255,.70);
      margin-top: 6px;
      letter-spacing: .07em;
      text-transform: uppercase;
      font-weight: 600;
      line-height: 1.3;
    }

    @keyframes emojiBounce{
      0%{transform:scale(1) rotate(0)}
      30%{transform:scale(1.25) rotate(-8deg) translateY(-6px)}
      60%{transform:scale(.95) rotate(4deg) translateY(2px)}
      80%{transform:scale(1.08) rotate(-2deg) translateY(-2px)}
      100%{transform:scale(1.05) rotate(0) translateY(0)}
    }
    /* ── ACTIVITIES GRID — 3×3, brief spec ── */
    .activities-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .activity-card {
      padding: 32px 26px 28px;
      position: relative; overflow: hidden;
      border-radius: 18px;
      /* White glass card */
      background: rgba(255,252,240,.68);
      backdrop-filter: blur(16px) saturate(160%);
      border: 1.5px solid rgba(255,255,255,.85);
      box-shadow: 0 4px 20px rgba(45,106,45,.08);
      transition:
        border-color .28s ease,
        box-shadow .28s ease,
        transform .28s ease,
        background .28s ease;
      cursor: default;
    }
    /* Green border on hover — exact brief spec */
    .activity-card:hover {
      border-color: var(--green) !important;
      box-shadow: 0 8px 32px rgba(45,106,45,.18), 0 0 0 0px transparent;
      transform: translateY(-4px);
      background: rgba(255,252,240,.88);
    }
    /* Decorative top-left leaf accent */
    .activity-card::after {
      content: '';
      position: absolute; top: 0; left: 0;
      width: 0; height: 3px;
      background: var(--green);
      transition: width .35s ease;
      border-radius: 0 0 3px 0;
    }
    .activity-card:hover::after { width: 100%; }

    /* Large icon — brief says "large icon/emoji" */
    .act-emoji {
      font-size: 3rem;
      display: block;
      margin-bottom: 16px;
      line-height: 1;
      /* Subtle drop shadow on emoji for depth */
      filter: drop-shadow(0 2px 4px rgba(45,106,45,.20));
      transition: transform .3s ease, filter .3s ease;
    }
    .activity-card:hover .act-emoji {
      animation: emojiBounce .5s cubic-bezier(.36,.07,.19,.97) forwards;
      filter: drop-shadow(0 4px 8px rgba(45,106,45,.30));
    }

    /* Bold activity name — brief says "bold" */
    .act-name {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--green-dark);
      letter-spacing: -.01em;
      line-height: 1.2;
    }
    /* One-line description */
    .act-desc {
      color: var(--muted);
      font-size: .86rem;
      line-height: 1.6;
      /* Keep it tight — brief says "one-line description" */
    }

    /* ── WHY US — icon + text rows ── */
    .why-rows {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      max-width: 960px;
      margin: 0 auto;
    }
    .why-row {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      padding: 24px 26px;
      border-radius: 16px;
      background: rgba(255,252,240,.65);
      backdrop-filter: blur(14px);
      border: 1.5px solid rgba(255,255,255,.85);
      box-shadow: 0 3px 16px rgba(45,106,45,.07);
      transition: border-color .28s, box-shadow .28s, transform .28s, background .28s;
    }
    .why-row:nth-child(even) {
      background: rgba(45,106,45,.06);
      border-color: rgba(45,106,45,.18);
    }
    .why-row:hover {
      border-color: var(--green);
      box-shadow: 0 8px 28px rgba(45,106,45,.15);
      transform: translateY(-3px);
      background: rgba(255,252,240,.88);
    }
    .why-row-icon {
      font-size: 2rem;
      flex-shrink: 0;
      line-height: 1;
      width: 44px;
      transition: transform .5s cubic-bezier(.34,1.56,.64,1);
      transform: scale(.7) rotate(-15deg);
      text-align: center;
      margin-top: 2px;
      transition: transform .3s;
    }
    .why-row:hover .why-row-icon { transform: scale(1.15); }
    .why-row.visible .why-row-icon {
      transform: scale(1) rotate(0);
    }
    .why-row-body { flex: 1; }
    .why-row-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--green-dark);
      margin-bottom: 5px;
      letter-spacing: -.01em;
    }
    .why-row-text {
      font-size: .87rem;
      color: var(--muted);
      line-height: 1.65;
    }

    /* ── TESTIMONIALS — 3 cards, soft green background, brief spec ── */
    .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .testi-card {
      padding: 32px 28px;
      border-radius: 20px;
      /* Soft green card background — exact brief spec */
      background: linear-gradient(145deg, rgba(45,106,45,.10) 0%, rgba(45,106,45,.06) 100%);
      border: 1.5px solid rgba(45,106,45,.18);
      box-shadow: 0 4px 20px rgba(45,106,45,.08);
      display: flex; flex-direction: column;
      transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
      position: relative; overflow: hidden;
    }
    .testi-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 40px rgba(45,106,45,.16);
      background: linear-gradient(145deg, rgba(45,106,45,.15) 0%, rgba(45,106,45,.09) 100%);
    }
    /* Decorative quote mark watermark */
    .testi-card::before {
      content: '\201C';
      position: absolute; top: -8px; right: 20px;
      font-family: var(--font-display);
      font-size: 7rem; font-weight: 600;
      color: rgba(45,106,45,.10); line-height: 1;
      pointer-events: none;
    }

    /* Star rating */
    .testi-stars {
      color: var(--gold);
      font-size: 1rem;
      letter-spacing: 3px;
      margin-bottom: 18px;
    }

    /* Quote text */
    .testi-text {
      font-family: var(--font-display);
      font-size: 1rem;
      font-style: italic;
      font-weight: 300;
      color: var(--green-dark);
      line-height: 1.70;
      flex: 1;
      position: relative; z-index: 1;
    }

    /* Photo + name row */
    .testi-author {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 24px;
      padding-top: 18px;
      border-top: 1px solid rgba(45,106,45,.15);
    }
    .testi-photo {
      width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--green), var(--green-light));
      border: 2px solid rgba(45,106,45,.25);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 1.1rem; font-weight: 600; color: #fff;
      /* When real photo is available, swap bg for img tag */
      overflow: hidden;
    }
    .testi-photo img {
      width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    }
    .testi-name {
      font-family: var(--font-body);
      font-size: .9rem; font-weight: 700;
      color: var(--green-dark);
    }
    .testi-role {
      font-size: .76rem;
      color: var(--muted);
      margin-top: 2px;
      letter-spacing: .02em;
    }

    /* Responsive */

    /* ── Instagram Feed Placeholder ── */
    .ig-placeholder { }
    .ig-placeholder-inner { }
    .ig-mock-grid {
      display: grid; grid-template-columns: repeat(6,1fr);
      gap: 10px; margin: 0 auto;
    }
    .ig-mock-card {
      aspect-ratio: 1/1; border-radius: 12px;
      position: relative; overflow: hidden;
      display: flex; align-items: flex-end; padding: 10px;
      cursor: default;
      transition: transform .3s, box-shadow .3s;
    }
    .ig-mock-card:hover { transform: scale(1.04); box-shadow: 0 10px 30px rgba(45,106,45,.25); }
    .ig-mock-card::before { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 55%); }
    .ig-mock-emoji { position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); font-size:2.2rem; opacity:.3; }
    .ig-mock-caption { position:relative; z-index:1; font-size:.68rem; color:rgba(255,255,255,.85); font-weight:600; }
    .ig-placeholder-note { text-align:center; margin-top:16px; font-size:.8rem; color:var(--muted); }
    .ig-placeholder-note a { color:var(--green); font-weight:600; text-decoration:none; }
    @media(max-width:900px){ .ig-mock-grid{ grid-template-columns:repeat(3,1fr); } }
    @media(max-width:600px){ .ig-mock-grid{ grid-template-columns:repeat(2,1fr); } }

    /* ── Responsive ── */
    @media(max-width:900px){
      .activities-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
      .activity-card{padding:24px 20px;}
      .why-rows{grid-template-columns:1fr;}
      .why-row{padding:20px 22px;}
      .stats-strip{grid-template-columns:repeat(3,1fr);}
      .stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.10);}
      .stat-item:nth-child(1),.stat-item:nth-child(2),.stat-item:nth-child(4){border-right:1px solid rgba(255,255,255,.10);}
      .stat-item:nth-child(4),.stat-item:nth-child(5){border-bottom:none;}
      .stat-item{padding:22px 10px 18px;}
      .stat-icon{width:38px;height:38px;margin-bottom:8px;}
      .testi-grid{grid-template-columns:1fr;}
      .testi-card{padding:26px 22px;}
    }
    @media(max-width:600px){
      .activities-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
      .activity-card{padding:20px 16px;}
      .act-emoji{font-size:2.4rem;}
      .act-name{font-size:1rem;}
      .stats-strip{grid-template-columns:repeat(2,1fr);}
      .stat-item{padding:20px 10px 16px;border-right:none;border-bottom:1px solid rgba(255,255,255,.10);}
      .stat-item:nth-child(odd){border-right:1px solid rgba(255,255,255,.10);}
      .stat-item:nth-child(4),.stat-item:nth-child(5){border-bottom:none;}
      .stat-num{font-size:clamp(1.9rem,7vw,2.6rem);}
      .stat-label{font-size:.66rem;}
      .stat-icon{width:34px;height:34px;margin-bottom:6px;}
      .hero-scroll{display:none;}
    }
    @media(max-width:400px){
    }