/* ============================================================
   OrganicByAI — Main Stylesheet
   Theme: Dark Forest Green + Bright Accent Green
   ============================================================ */

/* === 1. VARIABLES === */
:root {
  --c-dark:       #0A1F12;
  --c-primary:    #1B4332;
  --c-secondary:  #2D6A4F;
  --c-accent:     #52B788;
  --c-accent2:    #74C69D;
  --c-light:      #95D5B2;
  --c-lime:       #6BCB77;
  --c-white:      #FFFFFF;
  --c-off-white:  #F8FFFE;
  --c-bg-light:   #F0FAF4;
  --c-text:       #0A1F12;
  --c-muted:      #4A7660;

  --g-primary:    linear-gradient(135deg,#1B4332 0%,#2D6A4F 50%,#52B788 100%);
  --g-accent:     linear-gradient(135deg,#52B788,#95D5B2);
  --g-dark:       linear-gradient(135deg,#0A1F12 0%,#1B4332 100%);
  --g-hero:       radial-gradient(ellipse at 20% 50%,#1B4332 0%,#0A1F12 70%);
  --g-card:       linear-gradient(135deg,rgba(82,183,136,.08),rgba(149,213,178,.04));

  --shadow-sm:    0 4px 20px rgba(27,67,50,.08);
  --shadow-md:    0 10px 40px rgba(27,67,50,.14);
  --shadow-lg:    0 20px 60px rgba(27,67,50,.2);
  --shadow-xl:    0 30px 80px rgba(27,67,50,.28);
  --shadow-glow:  0 0 40px rgba(82,183,136,.35);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 100px;

  --t-fast:   .2s cubic-bezier(.4,0,.2,1);
  --t-base:   .3s cubic-bezier(.4,0,.2,1);
  --t-slow:   .6s cubic-bezier(.4,0,.2,1);
  --t-spring: .5s cubic-bezier(.34,1.56,.64,1);

  --font-display: 'Plus Jakarta Sans','Inter',-apple-system,sans-serif;
  --font-body:    'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --sec-py: 100px;
  --wrap: 1200px;
}

/* === 2. RESET & BASE === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--c-text);background:#fff;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:var(--t-base)}
ul,ol{list-style:none}
button{cursor:pointer;border:none;outline:none;background:none;font-family:inherit}
input,textarea,select{font-family:inherit}

/* === 3. TYPOGRAPHY === */
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.15;color:var(--c-primary)}
h1{font-size:clamp(2.4rem,5vw,4.8rem)}
h2{font-size:clamp(1.9rem,3.5vw,3rem)}
h3{font-size:clamp(1.3rem,2.5vw,1.9rem)}
h4{font-size:1.15rem}
p{color:var(--c-muted);line-height:1.8}

/* === 4. LAYOUT UTILITIES === */
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.section{padding:var(--sec-py) 0}
.section-sm{padding:60px 0}
.bg-dark{background:var(--c-primary)}
.bg-darker{background:var(--c-dark)}
.bg-light{background:var(--c-bg-light)}
.bg-white{background:#fff}

.text-gradient{
  background:var(--g-accent);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}
.text-green{color:var(--c-accent)}
.text-center{text-align:center}

.section-label{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(82,183,136,.12);color:var(--c-accent);
  border:1px solid rgba(82,183,136,.25);
  padding:6px 16px;border-radius:var(--r-full);
  font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:14px
}

.section-header{max-width:680px;margin:0 auto 64px;text-align:center}
.section-header h2{margin-bottom:14px}
.section-header p{font-size:1.1rem}

/* === 5. BUTTONS === */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;border-radius:var(--r-full);
  font-size:.95rem;font-weight:600;font-family:var(--font-display);
  transition:var(--t-base);position:relative;overflow:hidden;white-space:nowrap
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);
  transform:translateX(-120%);transition:transform .5s ease
}
.btn:hover::after{transform:translateX(120%)}

.btn-primary{background:var(--g-primary);color:#fff;box-shadow:0 4px 24px rgba(27,67,50,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(27,67,50,.45)}

.btn-secondary{background:transparent;color:var(--c-primary);border:2px solid var(--c-accent)}
.btn-secondary:hover{background:var(--c-accent);color:#fff;transform:translateY(-2px)}

.btn-white{background:#fff;color:var(--c-primary);box-shadow:0 4px 20px rgba(0,0,0,.18)}
.btn-white:hover{background:var(--c-off-white);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.24)}

.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}

.btn-sm{padding:10px 24px;font-size:.875rem}
.btn-lg{padding:18px 44px;font-size:1.05rem}

/* === 6. NAVIGATION === */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:22px 0;transition:var(--t-base)
}
.nav.scrolled{
  padding:12px 0;
  background:rgba(10,31,18,.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 4px 32px rgba(0,0,0,.35);
  border-bottom:1px solid rgba(82,183,136,.12)
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:32px}

.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-logo-icon{
  width:38px;height:38px;
  background:var(--g-accent);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem
}
.nav-logo-text{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:#fff}
.nav-logo-text span{color:var(--c-accent)}

.nav-links{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.nav-links a{
  color:rgba(255,255,255,.8);font-size:.88rem;font-weight:500;
  padding:8px 16px;border-radius:var(--r-full);transition:var(--t-fast)
}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(82,183,136,.16)}

.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}

/* ---- NAV DROPDOWN ---- */
.nav-item{position:relative}
.nav-dropdown-toggle{display:inline-flex;align-items:center;gap:6px}
.nav-caret{width:13px;height:13px;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.nav-item:hover .nav-caret{transform:rotate(180deg)}
.nav-dropdown{
  position:absolute;top:calc(100% + 16px);left:50%;
  transform:translateX(-50%) translateY(10px);
  min-width:300px;background:rgba(10,31,18,.98);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(82,183,136,.18);border-radius:var(--r-md);
  box-shadow:0 24px 64px rgba(0,0,0,.5);padding:10px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.23,1,.32,1),visibility .28s;
  z-index:1001
}
.nav-dropdown::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)
}
.nav-dd-link{display:flex;align-items:center;gap:14px;padding:11px 13px;border-radius:var(--r-sm);transition:var(--t-fast)}
.nav-dd-link:hover{background:rgba(82,183,136,.14)}
.nav-dd-link::after{display:none!important}
.nav-dd-ic{
  width:38px;height:38px;flex-shrink:0;background:var(--g-accent);
  border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff
}
.nav-dd-ic svg{width:19px;height:19px}
.nav-dd-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav-dd-title{color:#fff;font-size:.9rem;font-weight:600;line-height:1.2}
.nav-dd-desc{color:rgba(255,255,255,.55);font-size:.75rem;line-height:1.3}
.nav-dd-divider{height:1px;background:rgba(82,183,136,.14);margin:8px 10px}
.nav-dd-all{display:block;text-align:center;color:var(--c-accent2);font-size:.82rem;font-weight:600;padding:9px}
.nav-dd-all:hover{color:#fff}

/* ---- MOBILE FREE SERVICES ---- */
.nav-mobile-group{width:100%;max-width:340px;text-align:center}
.nav-mobile-group-label{
  color:var(--c-accent2);font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin:8px 0 4px;display:block
}
.nav-mobile-group a{font-size:1.1rem!important;padding:8px 24px!important}

.nav-hamburger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer}
.nav-hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:var(--t-base)}

.nav-mobile{
  display:none;position:fixed;inset:0;z-index:999;
  background:rgba(10,31,18,.98);
  flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px
}
.nav-mobile.open{display:flex}
.nav-mobile a{color:#fff;font-size:1.5rem;font-weight:600;padding:12px 32px;border-radius:var(--r-md);transition:var(--t-base)}
.nav-mobile a:hover{color:var(--c-accent);background:rgba(82,183,136,.1)}
.nav-mobile-close{
  position:absolute;top:24px;right:24px;color:#fff;font-size:1.5rem;cursor:pointer;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.1)
}

/* === 7. HERO === */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  background:var(--g-hero);overflow:hidden;padding:100px 0 60px
}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.45}

.hero-glow{
  position:absolute;border-radius:50%;pointer-events:none
}
.hero-glow-1{
  width:700px;height:700px;top:-150px;right:-150px;
  background:radial-gradient(circle,rgba(82,183,136,.14) 0%,transparent 70%);
  animation:pulse-glow 7s ease-in-out infinite
}
.hero-glow-2{
  width:500px;height:500px;bottom:-100px;left:5%;
  background:radial-gradient(circle,rgba(107,203,119,.1) 0%,transparent 70%);
  animation:pulse-glow 9s ease-in-out infinite 2.5s
}

.hero-content{position:relative;z-index:1;max-width:920px}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(82,183,136,.14);border:1px solid rgba(82,183,136,.3);
  color:var(--c-accent2);padding:8px 18px;border-radius:var(--r-full);
  font-size:.82rem;font-weight:500;margin-bottom:28px;
  backdrop-filter:blur(10px);animation:slide-down .7s ease both
}
.hero-badge-dot{width:8px;height:8px;background:var(--c-lime);border-radius:50%;animation:pulse 2s ease infinite}

.hero h1{
  color:#fff;margin-bottom:16px;font-weight:800;
  letter-spacing:-.025em;animation:slide-up .8s ease .15s both
}
.hero h1 .hl{
  background:linear-gradient(135deg,#74C69D,#6BCB77,#B7E4C7);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}

.hero-typing-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:16px;animation:slide-up .8s ease .25s both
}
.typing-label{color:rgba(255,255,255,.7);font-size:1.05rem}
.typing-word{
  color:var(--c-accent2);font-weight:700;font-size:1.1rem;
  border-right:2px solid var(--c-accent);padding-right:4px;
  min-width:120px;display:inline-block
}

.platform-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;animation:slide-up .8s ease .3s both}
.platform-tag{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.9);padding:5px 13px;border-radius:var(--r-full);
  font-size:.78rem;font-weight:500;backdrop-filter:blur(6px);transition:var(--t-base)
}
.platform-tag:hover{background:rgba(82,183,136,.22);border-color:rgba(82,183,136,.5);color:var(--c-accent2)}

.hero p{
  color:rgba(255,255,255,.75);font-size:1.15rem;max-width:700px;
  margin-bottom:40px;animation:slide-up .8s ease .4s both
}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;animation:slide-up .8s ease .5s both}

.hero-stats{
  display:flex;gap:48px;flex-wrap:wrap;
  margin-top:56px;padding-top:40px;
  border-top:1px solid rgba(255,255,255,.1);
  animation:slide-up .8s ease .65s both
}
.h-stat-num{
  font-family:var(--font-display);font-size:2.2rem;font-weight:800;
  color:var(--c-accent2);line-height:1;margin-bottom:4px
}
.h-stat-label{font-size:.75rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.1em}

.hero-scroll{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,.4);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;
  animation:bounce 2.5s ease infinite;z-index:1
}
.scroll-line{width:1px;height:36px;background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent)}

/* === 8. PLATFORMS TICKER === */
.ticker-bar{
  background:var(--c-dark);padding:18px 0;
  border-top:1px solid rgba(82,183,136,.1);
  border-bottom:1px solid rgba(82,183,136,.1);
  overflow:hidden
}
.ticker-track{
  display:flex;gap:64px;
  animation:scroll-left 22s linear infinite;
  width:max-content
}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{
  display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.45);font-size:.88rem;font-weight:500;flex-shrink:0
}
.ticker-item span:first-child{font-size:1.1rem}

/* === 9. ABOUT SECTION === */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}

.about-visual{position:relative}
.about-card-main{
  background:var(--g-dark);border-radius:var(--r-lg);padding:48px;
  color:#fff;position:relative;overflow:hidden
}
.about-card-main::before{
  content:'';position:absolute;top:-40%;right:-20%;
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(82,183,136,.18) 0%,transparent 70%)
}
.about-card-main h3{color:#fff;margin-bottom:12px}
.about-card-main p{color:rgba(255,255,255,.7);margin-bottom:28px}

.about-mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini-stat{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);padding:20px;text-align:center
}
.mini-stat-num{
  font-family:var(--font-display);font-size:1.8rem;font-weight:800;
  background:var(--g-accent);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:4px
}
.mini-stat-label{font-size:.75rem;color:rgba(255,255,255,.5)}

.float-badge{
  position:absolute;background:#fff;border-radius:var(--r-md);
  padding:10px 18px;box-shadow:var(--shadow-lg);
  font-size:.82rem;font-weight:600;color:var(--c-primary);
  display:flex;align-items:center;gap:8px;animation:float 4s ease-in-out infinite
}
.float-badge-1{top:-20px;right:-20px;animation-delay:0s}
.float-badge-2{bottom:60px;left:-30px;animation-delay:1.8s}
.float-badge-3{bottom:-16px;right:50px;animation-delay:3.2s}

.about-features{display:flex;flex-direction:column;gap:16px;margin-top:36px}
.about-feature{
  display:flex;align-items:flex-start;gap:16px;
  padding:20px;background:rgba(82,183,136,.05);
  border:1px solid rgba(82,183,136,.1);border-radius:var(--r-md);
  transition:var(--t-base)
}
.about-feature:hover{background:rgba(82,183,136,.1);transform:translateX(5px);border-color:rgba(82,183,136,.25)}
.af-icon{
  width:44px;height:44px;background:var(--g-accent);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0
}
.about-feature h4{font-size:1rem;margin-bottom:4px;color:var(--c-primary)}
.about-feature p{font-size:.875rem;margin:0}

/* === 10. SERVICES SECTION === */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.service-card{
  background:#fff;border:1px solid rgba(82,183,136,.12);border-radius:var(--r-lg);
  padding:32px;position:relative;overflow:hidden;transition:var(--t-slow);cursor:default
}
.service-card::before{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:var(--g-primary);transform:scaleX(0);transform-origin:left;
  transition:transform .4s ease
}
.service-card:hover::before{transform:scaleX(1)}
.service-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-xl);border-color:rgba(82,183,136,.3)}

.svc-icon{
  width:56px;height:56px;
  background:linear-gradient(135deg,rgba(82,183,136,.14),rgba(149,213,178,.08));
  border:1px solid rgba(82,183,136,.2);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  margin-bottom:20px;transition:var(--t-spring);position:relative;z-index:1
}
.service-card:hover .svc-icon{
  background:var(--g-accent);border-color:transparent;
  transform:scale(1.1) rotate(-5deg);box-shadow:var(--shadow-glow)
}
.service-card h3{font-size:1.1rem;margin-bottom:10px;color:var(--c-primary);position:relative;z-index:1}
.service-card p{font-size:.875rem;line-height:1.7;margin-bottom:20px;position:relative;z-index:1}
.svc-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--c-accent);font-size:.875rem;font-weight:600;
  transition:var(--t-base);position:relative;z-index:1
}
.svc-link:hover{gap:10px;color:var(--c-secondary)}
.svc-tag{
  position:absolute;top:18px;right:18px;
  background:rgba(82,183,136,.1);color:var(--c-accent);
  font-size:.68rem;font-weight:600;padding:3px 10px;
  border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.05em
}

/* === 11. STATS SECTION === */
.stats-section{background:var(--g-dark);position:relative;overflow:hidden}
.stats-section::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(82,183,136,.06) 1px,transparent 1px);
  background-size:32px 32px
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1}
.stat-item{
  text-align:center;padding:60px 24px;
  border-right:1px solid rgba(255,255,255,.07)
}
.stat-item:last-child{border-right:none}
.stat-num{
  font-family:var(--font-display);font-size:3.5rem;font-weight:800;
  background:linear-gradient(135deg,var(--c-accent),var(--c-light));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;margin-bottom:8px
}
.stat-label{color:rgba(255,255,255,.5);font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px}
.stat-bar{height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;max-width:80px;margin:0 auto}
.stat-bar-fill{height:100%;background:var(--g-accent);border-radius:2px;width:0;transition:width 1.6s cubic-bezier(.4,0,.2,1)}

/* === 12. PROCESS SECTION === */
.process-wrap{position:relative}
.process-line{
  position:absolute;top:48px;left:calc(10% + 40px);right:calc(10% + 40px);
  height:2px;background:linear-gradient(90deg,var(--c-accent),var(--c-light));
  z-index:0
}
.process-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.process-step{text-align:center;padding:0 16px;position:relative;z-index:1}
.step-num{
  width:80px;height:80px;background:var(--g-primary);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:#fff;
  margin:0 auto 20px;box-shadow:var(--shadow-glow);
  transition:var(--t-spring);border:4px solid #fff
}
.process-step:hover .step-num{transform:scale(1.12);box-shadow:0 0 50px rgba(82,183,136,.55)}
.process-step h4{font-size:.95rem;color:var(--c-primary);margin-bottom:8px}
.process-step p{font-size:.8rem;line-height:1.6}

/* === 13. WHO WE HELP === */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.who-card{
  background:#fff;border:1px solid rgba(82,183,136,.12);border-radius:var(--r-md);
  padding:26px;display:flex;align-items:center;gap:16px;transition:var(--t-base)
}
.who-card:hover{border-color:var(--c-accent);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.who-icon{
  width:48px;height:48px;background:var(--g-card);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0
}
.who-card h4{font-size:.95rem;color:var(--c-primary);margin-bottom:3px}
.who-card p{font-size:.8rem;margin:0}

/* === 14. WHY US === */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.why-card{
  background:var(--c-bg-light);border:1px solid rgba(82,183,136,.1);
  border-radius:var(--r-lg);padding:36px;position:relative;overflow:hidden;
  transition:var(--t-base)
}
.why-card::after{
  content:'';position:absolute;top:-30%;right:-10%;
  width:160px;height:160px;
  background:radial-gradient(circle,rgba(82,183,136,.1),transparent 70%)
}
.why-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(82,183,136,.28)}
.why-icon{
  width:56px;height:56px;background:var(--g-primary);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:20px
}
.why-card h3{font-size:1.2rem;margin-bottom:12px}
.why-card p{font-size:.875rem}

/* === 15. FAQ === */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:#fff;border:1px solid rgba(82,183,136,.14);border-radius:var(--r-md);
  overflow:hidden;transition:var(--t-base)
}
.faq-item.open{box-shadow:var(--shadow-md);border-color:rgba(82,183,136,.3)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 28px;cursor:pointer;user-select:none;gap:20px
}
.faq-q h4{font-size:.975rem;color:var(--c-primary);font-weight:600}
.faq-toggle{
  width:32px;height:32px;background:rgba(82,183,136,.1);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--c-accent);font-size:1.4rem;font-weight:300;transition:var(--t-base)
}
.faq-item.open .faq-toggle{background:var(--g-accent);color:#fff;transform:rotate(45deg)}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-ans{max-height:240px}
.faq-ans p{padding:0 28px 24px;font-size:.9rem}

/* === 16. CTA SECTION === */
.cta-section{background:var(--g-dark);position:relative;overflow:hidden;text-align:center}
.cta-section::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:900px;height:500px;
  background:radial-gradient(ellipse,rgba(82,183,136,.14) 0%,transparent 70%)
}
.cta-content{position:relative;z-index:1;max-width:700px;margin:0 auto}
.cta-content h2{color:#fff;margin-bottom:16px}
.cta-content p{color:rgba(255,255,255,.75);font-size:1.1rem;margin-bottom:40px}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* === 17. BLOG SECTION === */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-card{
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(82,183,136,.1);transition:var(--t-slow)
}
.blog-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-xl);border-color:rgba(82,183,136,.3)}
.blog-img{height:220px;position:relative;overflow:hidden}
.blog-img-bg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:4.5rem;transition:transform .6s ease
}
.blog-card:hover .blog-img-bg{transform:scale(1.08)}
.blog-cat{
  position:absolute;top:16px;left:16px;
  background:rgba(10,31,18,.9);color:var(--c-accent2);
  padding:4px 12px;border-radius:var(--r-full);font-size:.72rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.06em;backdrop-filter:blur(10px)
}
.blog-body{padding:28px}
.blog-meta{display:flex;align-items:center;gap:14px;font-size:.78rem;color:var(--c-muted);margin-bottom:10px}
.blog-card h3{font-size:1.05rem;color:var(--c-primary);margin-bottom:10px;line-height:1.4;transition:var(--t-fast)}
.blog-card:hover h3{color:var(--c-accent)}
.blog-card p{font-size:.875rem;margin-bottom:18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-more{display:inline-flex;align-items:center;gap:6px;color:var(--c-accent);font-size:.875rem;font-weight:600;transition:var(--t-base)}
.blog-more:hover{gap:10px}

/* === 18. CONTACT === */
.contact-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start}
.contact-info h2{margin-bottom:14px}
.contact-info p{font-size:1.05rem}

.contact-details{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.c-detail{
  display:flex;align-items:center;gap:16px;padding:14px 18px;
  background:rgba(82,183,136,.06);border:1px solid rgba(82,183,136,.12);
  border-radius:var(--r-md);transition:var(--t-base)
}
.c-detail:hover{background:rgba(82,183,136,.1);border-color:rgba(82,183,136,.25)}
.c-icon{
  width:40px;height:40px;background:var(--g-accent);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0
}
.c-text{font-size:.875rem;font-weight:500;color:var(--c-primary)}

.form-wrap{
  background:#fff;border:1px solid rgba(82,183,136,.14);
  border-radius:var(--r-xl);padding:48px;box-shadow:var(--shadow-lg)
}
.form-group{margin-bottom:22px}
.form-label{display:block;font-size:.875rem;font-weight:600;color:var(--c-primary);margin-bottom:7px}
.form-input,.form-select,.form-textarea{
  width:100%;padding:13px 18px;
  border:1.5px solid rgba(82,183,136,.2);border-radius:var(--r-md);
  font-size:.9rem;color:var(--c-text);background:var(--c-off-white);
  transition:var(--t-base);outline:none
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--c-accent);background:#fff;
  box-shadow:0 0 0 4px rgba(82,183,136,.1)
}
.form-textarea{resize:vertical;min-height:130px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* === 19. FOOTER === */
.footer{background:var(--c-dark);padding:80px 0 0;position:relative;overflow:hidden}
.footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(82,183,136,.4),transparent)
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:56px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-brand p{color:rgba(255,255,255,.45);font-size:.875rem;margin:16px 0 24px;max-width:270px}
.footer-socials{display:flex;gap:10px}
.social-btn{
  width:38px;height:38px;background:rgba(255,255,255,.08);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:var(--t-base)
}
.social-btn:hover{background:var(--c-accent);transform:translateY(-3px)}
.footer-col h4{color:#fff;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{color:rgba(255,255,255,.45);font-size:.85rem;transition:var(--t-fast)}
.footer-links a:hover{color:var(--c-accent);padding-left:4px}
.footer-bottom{padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-bottom p{color:rgba(255,255,255,.28);font-size:.78rem}

/* === 20. INNER PAGE HEROES === */
.page-hero{background:var(--g-dark);padding:160px 0 90px;position:relative;overflow:hidden}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(82,183,136,.05) 1px,transparent 1px);
  background-size:28px 28px
}
.page-hero-inner{position:relative;z-index:1}
.page-hero h1{color:#fff}
.page-hero p{color:rgba(255,255,255,.72);font-size:1.15rem;max-width:640px;margin-top:18px}

/* === 21. SERVICES FULL GRID === */
.services-full{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.svc-full-card{
  background:#fff;border:1px solid rgba(82,183,136,.12);border-radius:var(--r-lg);
  padding:36px;position:relative;overflow:hidden;transition:var(--t-slow)
}
.svc-full-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl);border-color:rgba(82,183,136,.3)}
.svc-full-card::before{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:var(--g-primary);transform:scaleX(0);transform-origin:left;transition:transform .4s ease
}
.svc-full-card:hover::before{transform:scaleX(1)}
.svc-includes{display:flex;flex-direction:column;gap:7px;margin:16px 0 20px}
.svc-includes li{
  display:flex;align-items:center;gap:8px;font-size:.83rem;color:var(--c-muted)
}
.svc-includes li::before{content:'✓';color:var(--c-accent);font-weight:700;flex-shrink:0}

/* === 22. BLOG PAGE === */
.blog-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-page-grid .blog-card.featured{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr}
.blog-page-grid .blog-card.featured .blog-img{height:auto}

/* === 23. SINGLE POST === */
.post-content{max-width:780px;margin:0 auto;padding:80px 28px}
.post-content h2{font-size:1.75rem;margin:48px 0 18px;color:var(--c-primary)}
.post-content h3{font-size:1.35rem;margin:36px 0 14px;color:var(--c-secondary)}
.post-content p{margin-bottom:20px;font-size:1rem;line-height:1.9;color:#2a4a3c}
.post-content ul,.post-content ol{list-style:initial;padding-left:26px;margin-bottom:20px}
.post-content li{color:#2a4a3c;font-size:1rem;line-height:1.8;margin-bottom:8px}
.post-content strong{color:var(--c-primary);font-weight:600}
.post-content blockquote{
  border-left:4px solid var(--c-accent);background:rgba(82,183,136,.06);
  padding:20px 28px;border-radius:0 var(--r-md) var(--r-md) 0;margin:32px 0
}
.post-content blockquote p{color:var(--c-primary);font-size:1.1rem;font-style:italic;margin:0}

.post-infographic{
  background:var(--g-dark);border-radius:var(--r-lg);padding:44px;margin:48px 0;
  color:#fff;position:relative;overflow:hidden
}
.post-infographic::before{
  content:'';position:absolute;top:-40%;right:-15%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(82,183,136,.16) 0%,transparent 70%)
}
.post-infographic h3{color:#fff;margin-bottom:28px;position:relative;z-index:1}
.infographic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1}
.ig-item{text-align:center;padding:20px;background:rgba(255,255,255,.05);border-radius:var(--r-md)}
.ig-num{font-size:2.5rem;font-weight:800;color:var(--c-accent2);line-height:1;margin-bottom:8px}
.ig-label{font-size:.85rem;color:rgba(255,255,255,.65)}

.bar-chart{display:flex;flex-direction:column;gap:14px;margin:32px 0;position:relative;z-index:1}
.bar-row{display:flex;align-items:center;gap:14px}
.bar-lbl{font-size:.82rem;font-weight:500;color:rgba(255,255,255,.7);min-width:100px}
.bar-track{flex:1;height:8px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:var(--g-accent);border-radius:4px;width:0;transition:width 1.6s cubic-bezier(.4,0,.2,1)}
.bar-pct{font-size:.82rem;font-weight:700;color:var(--c-accent2);min-width:40px;text-align:right}

.author-box{
  background:var(--c-bg-light);border-radius:var(--r-lg);padding:32px;
  display:flex;gap:24px;align-items:flex-start;margin-top:60px;
  border:1px solid rgba(82,183,136,.14)
}
.author-avatar{
  width:72px;height:72px;background:var(--g-primary);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0
}
.author-info h4{font-size:1.05rem;color:var(--c-primary);margin-bottom:3px}
.author-role{font-size:.78rem;color:var(--c-accent);font-weight:600;margin-bottom:10px;display:block}
.author-info p{font-size:.875rem;margin:0}

.related-posts{padding:80px 0;background:var(--c-bg-light)}

/* === 24. SCROLL REVEAL === */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .7s ease}
.reveal-left.in{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s ease,transform .7s ease}
.reveal-right.in{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .6s ease,transform .6s ease}
.reveal-scale.in{opacity:1;transform:scale(1)}

.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
.d4{transition-delay:.4s}.d5{transition-delay:.5s}.d6{transition-delay:.6s}

/* === 25. KEYFRAMES === */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse-glow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
@keyframes slide-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes slide-down{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(9px)}}
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shimmer{from{background-position:-1000px 0}to{background-position:1000px 0}}

/* === 26. ICON STYLES === */
.svc-icon svg{width:28px;height:28px}
.svc-icon{color:var(--c-accent)}
.service-card:hover .svc-icon{color:#fff}
.svc-full-card .svc-icon svg{width:28px;height:28px}
.svc-full-card .svc-icon{color:var(--c-accent)}
.af-icon{color:#fff}
.af-icon svg{width:22px;height:22px}
.why-icon{color:#fff}
.why-icon svg{width:28px;height:28px}
.who-icon{color:var(--c-accent)}
.who-icon svg{width:24px;height:24px}
.blog-img-bg svg{width:64px;height:64px;color:rgba(255,255,255,.88)}
.author-avatar{color:#fff}
.author-avatar svg{width:32px;height:32px}
.float-badge svg{width:15px;height:15px;color:var(--c-accent);flex-shrink:0}
.social-btn{color:rgba(255,255,255,.65)}
.social-btn:hover{color:#fff}
.social-btn svg{width:16px;height:16px}
.nav-logo-img{height:44px;width:auto;display:block;object-fit:contain}
.nav-logo-fallback{align-items:center;gap:10px}
.blog-meta svg{width:13px;height:13px;flex-shrink:0;position:relative;top:-1px}
.blog-meta span{display:inline-flex;align-items:center;gap:5px}
.ticker-item svg{width:15px;height:15px;flex-shrink:0;color:var(--c-accent2)}
.ig-num svg{width:36px;height:36px;color:var(--c-accent2);display:block;margin:0 auto}
.nav-mobile-close svg{display:block}

/* === 27. HOVER ANIMATIONS === */

/* Keyframes */
@keyframes icon-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}60%{transform:translateY(-3px)}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 0 0 rgba(82,183,136,.45)}55%{box-shadow:0 0 0 14px rgba(82,183,136,0)}}
@keyframes shine-sweep{0%{left:-80%}100%{left:160%}}
@keyframes num-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes ripple-expand{to{transform:scale(4);opacity:0}}

/* Cursor glow */
#cursor-glow{position:fixed;width:320px;height:320px;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(82,183,136,.11) 0%,transparent 65%);transition:opacity .3s;opacity:0;will-change:left,top}

/* Nav underline slide */
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:50%;width:0;height:2px;background:var(--c-accent);border-radius:2px;transition:width .28s cubic-bezier(.23,1,.32,1),left .28s cubic-bezier(.23,1,.32,1)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;left:0}

/* Service cards */
.service-card{transition:transform .38s cubic-bezier(.23,1,.32,1),box-shadow .38s cubic-bezier(.23,1,.32,1);will-change:transform}
.service-card:hover{box-shadow:0 28px 64px rgba(82,183,136,.2),0 8px 20px rgba(0,0,0,.1) !important}
.service-card:hover .svc-icon svg{animation:icon-bounce .55s ease}

/* Full service cards */
.svc-full-card{transition:transform .38s cubic-bezier(.23,1,.32,1),box-shadow .38s cubic-bezier(.23,1,.32,1);will-change:transform}
.svc-full-card:hover{transform:translateY(-7px);box-shadow:0 22px 52px rgba(82,183,136,.16)}
.svc-full-card:hover .svc-icon svg{animation:icon-bounce .55s ease}

/* Blog cards — shine sweep */
.blog-card{transition:transform .38s cubic-bezier(.23,1,.32,1),box-shadow .38s cubic-bezier(.23,1,.32,1);will-change:transform;overflow:hidden}
.blog-card{position:relative}
.blog-card::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.09) 50%,transparent 60%);pointer-events:none}
.blog-card:hover::after{animation:shine-sweep .7s ease forwards}
.blog-card:hover{transform:translateY(-7px);box-shadow:0 22px 52px rgba(0,0,0,.13)}

/* Why cards */
.why-card{transition:transform .38s cubic-bezier(.23,1,.32,1),box-shadow .38s cubic-bezier(.23,1,.32,1);will-change:transform}
.why-card:hover{transform:translateY(-7px);box-shadow:0 22px 52px rgba(82,183,136,.22)}
.why-card:hover .why-icon{animation:glow-pulse .75s ease}

/* Who cards */
.who-card{transition:transform .28s cubic-bezier(.23,1,.32,1),box-shadow .28s}
.who-card:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(82,183,136,.18)}
.who-card:hover .who-icon svg{animation:icon-bounce .5s ease}

/* AF items (how it works) */
.af-item{transition:transform .28s ease}
.af-item:hover{transform:scale(1.04)}
.af-item:hover .af-icon svg{animation:icon-bounce .55s ease}

/* Process step numbers */
.process-step:hover .process-num{animation:num-pulse .5s ease}

/* FAQ hover border */
.faq-item{border-left:3px solid transparent;padding-left:4px;transition:border-left-color .25s}
.faq-item:hover,.faq-item.open{border-left-color:var(--c-accent)}

/* Stat items */
.stat-item{transition:background .3s}
.stat-item:hover{background:rgba(82,183,136,.06)}

/* Social buttons */
.social-btn{transition:color .25s,transform .35s cubic-bezier(.23,1,.32,1)}
.social-btn:hover{transform:translateY(-4px) scale(1.18)}

/* Buttons: overflow for ripple + magnetic transition */
.btn{position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.23,1,.32,1),color .2s,background .2s,box-shadow .2s}
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-expand .65s linear;background:rgba(255,255,255,.28);pointer-events:none;width:120px;height:120px;margin-top:-60px;margin-left:-60px}

/* === 28. RESPONSIVE === */
@media(max-width:1024px){
  :root{--sec-py:80px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:48px}
  .services-grid,.services-full,.blog-grid,.blog-page-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.07);padding:40px}
  .stat-item:nth-child(odd){border-right:1px solid rgba(255,255,255,.07)}
  .process-steps{grid-template-columns:repeat(3,1fr);gap:32px}
  .process-line{display:none}
  .who-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .blog-page-grid .blog-card.featured{grid-template-columns:1fr}
  .infographic-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  :root{--sec-py:60px}
  h1{font-size:2.2rem}h2{font-size:1.75rem}
  .nav-links,.nav-actions .btn{display:none}
  .nav-hamburger{display:flex}
  .hero{padding:90px 0 60px}
  .hero h1{font-size:2.1rem}
  .hero p{font-size:1rem}
  .hero-ctas{flex-direction:column;align-items:flex-start}
  .hero-stats{gap:28px}
  .h-stat-num{font-size:1.8rem}
  .services-grid,.services-full,.blog-grid,.blog-page-grid,.who-grid,.why-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .stat-item:nth-child(odd){border-right:none}
  .process-steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .form-row{grid-template-columns:1fr}
  .form-wrap{padding:28px 22px}
  .cta-btns{flex-direction:column;align-items:center}
  .infographic-grid{grid-template-columns:1fr}
  .about-visual{order:-1}
  .float-badge-2,.float-badge-3{display:none}
  .post-content{padding:40px 18px}
  .page-hero{padding:120px 0 60px}
}

@media(max-width:480px){
  :root{--sec-py:48px}
  .container{padding:0 16px}
  .hero-stats{gap:20px}
  .h-stat-num{font-size:1.6rem}
  .btn-lg{padding:14px 28px;font-size:.95rem}
}

/* === TRACKING / GROWTH ADD-ONS === */
.benefit-badges{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:48px;padding-top:34px;
  border-top:1px solid rgba(255,255,255,.1);
  animation:slide-up .8s ease .65s both
}
.benefit-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(82,183,136,.12);border:1px solid rgba(82,183,136,.32);
  color:#fff;padding:9px 16px;border-radius:var(--r-full);
  font-size:.82rem;font-weight:600;backdrop-filter:blur(6px)
}
.benefit-badge svg{width:15px;height:15px;color:var(--c-accent2);flex-shrink:0}

/* light-background benefit badges (used inside about card / sections) */
.benefit-badges-light{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.benefit-badges-light .benefit-badge{
  background:rgba(82,183,136,.1);border-color:rgba(82,183,136,.28);color:var(--c-primary)
}
.benefit-badges-light .benefit-badge svg{color:var(--c-accent)}

/* checklist columns (What We Track) */
.check-cols{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px 28px;margin:8px 0 0
}
.check-cols li{display:flex;align-items:flex-start;gap:9px;font-size:.96rem;color:var(--c-muted);line-height:1.4}
.check-cols li::before{content:'✓';color:var(--c-accent);font-weight:700;flex-shrink:0}
@media(max-width:900px){.check-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.check-cols{grid-template-columns:1fr}}

/* platform chips (Platforms We Set Up) */
.platform-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.platform-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--c-bg-light);border:1px solid rgba(82,183,136,.25);
  color:var(--c-primary);padding:9px 16px;border-radius:var(--r-full);
  font-size:.85rem;font-weight:600
}
.platform-chip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c-accent);flex-shrink:0}

.note-text{font-size:.92rem;color:var(--c-muted);margin-top:22px;line-height:1.6;max-width:880px}

/* highlight copy block */
.copy-block{max-width:820px;margin:0 auto;text-align:center}
.copy-block h2{margin-bottom:18px}
.copy-block p{color:var(--c-muted);font-size:1.08rem;line-height:1.7}

/* === COOKIE CONSENT BANNER === */
.cookie-consent{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  width:calc(100% - 40px);max-width:760px;z-index:9999;
  background:#fff;border:1px solid rgba(27,67,50,.12);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:20px 24px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  opacity:0;visibility:hidden;transition:opacity .35s ease,transform .35s ease
}
.cookie-consent.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.cookie-consent p{font-size:.88rem;color:var(--c-muted);line-height:1.55;flex:1;min-width:240px;margin:0}
.cookie-consent p a{color:var(--c-accent);font-weight:600}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions .btn{padding:10px 20px;font-size:.85rem}
@media(max-width:520px){.cookie-consent{padding:18px}.cookie-actions{width:100%}.cookie-actions .btn{flex:1;justify-content:center}}