/* ═══════════════════════════════════════════════════════════
index.css — Complete Final Version
Includes: all original styles + responsive + all link fixes
═══════════════════════════════════════════════════════════ */
/* @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Syne:wght@400;600;700;800&display=swap'); */
:root {
--g1:#1b5e20; --g2:#2e7d32; --g3:#388e3c; --g4:#43a047;
--g5:#66bb6a; --g6:#a5d6a7; --g7:#e8f5e9; --g8:#f4faf4;
--white:#fff; --text:#0f1a10; --text2:#2d3d2f; --text3:#5a6b5c;
--border:rgba(46,125,50,0.12);
--r:20px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { overflow-x:hidden; -webkit-text-size-adjust:100%; }
body { font-family:'DM Sans',sans-serif; color:var(--text); background:#fff; overflow-x:hidden; max-width:100vw; }
img { max-width:100%; height:auto; display:block; }
/* ═══════════════════════════════════════════
HERO
═══════════════════════════════════════════ */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; background:#071409; }
.hero-bg { position:absolute; inset:0; z-index:0;
background:radial-gradient(ellipse 80% 65% at 18% 52%,rgba(27,94,32,.65) 0%,transparent 62%),
radial-gradient(ellipse 55% 70% at 84% 26%,rgba(102,187,106,.18) 0%,transparent 58%),
linear-gradient(148deg,#071409 0%,#0d2710 45%,#153418 100%); }
.hero-mesh { position:absolute; inset:0; z-index:0;
background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:60px 60px; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(72px); opacity:.28; z-index:0; animation:orb 10s ease-in-out infinite; }
.o1 { width:520px; height:520px; background:#1b5e20; top:-170px; left:-130px; }
.o2 { width:360px; height:360px; background:#43a047; bottom:-100px; right:2%; animation-delay:4s; }
.o3 { width:240px; height:240px; background:#81c784; top:32%; right:17%; animation-delay:7s; }
@keyframes orb { 0%,100%{transform:scale(1) translateY(0);}50%{transform:scale(1.07) translateY(-22px);} }
.leaf { position:absolute; z-index:1; user-select:none; opacity:.15; animation:leafUp linear infinite;
filter:drop-shadow(0 0 14px rgba(255,255,255,.08)); }
.leaf:nth-child(1){left:4%;font-size:3.6rem;animation-duration:16s;}
.leaf:nth-child(2){left:13%;font-size:2.3rem;animation-duration:20s;animation-delay:-5s;}
.leaf:nth-child(3){left:75%;font-size:2.9rem;animation-duration:14s;animation-delay:-3s;}
.leaf:nth-child(4){left:86%;font-size:4rem;animation-duration:18s;animation-delay:-8s;}
.leaf:nth-child(5){left:53%;font-size:1.9rem;animation-duration:22s;animation-delay:-12s;}
.leaf:nth-child(6){left:33%;font-size:3.3rem;animation-duration:17s;animation-delay:-10s;}
.leaf:nth-child(7){left:63%;font-size:2.5rem;animation-duration:24s;animation-delay:-4s;}
.leaf:nth-child(8){left:90%;font-size:2.1rem;animation-duration:19s;animation-delay:-14s;}
@keyframes leafUp { 0%{transform:translateY(110vh) rotate(0deg);opacity:0;}8%{opacity:.15;}90%{opacity:.15;}
100%{transform:translateY(-14vh) rotate(350deg);opacity:0;} }
.hero-inner { position:relative; z-index:10; width:100%; max-width:1160px; margin:0 auto;
padding:6rem 2rem 4rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.6rem; }
.hero-badge { display:inline-flex; align-items:center; gap:.55rem;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
color:#a5d6a7; font-size:.72rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
padding:.48rem 1.4rem; border-radius:50px; backdrop-filter:blur(14px);
animation:fadeUp .8s ease forwards; opacity:0; }
.badge-dot { width:6px; height:6px; background:#69f0ae; border-radius:50%; animation:blink 2.2s infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(1.6);} }
.hero-h1 { font-family:'DM Serif Display',serif; font-size:clamp(3.2rem,8.5vw,6.6rem);
font-weight:400; line-height:1.04; letter-spacing:-.5px; color:#fff;
animation:fadeUp .9s ease .18s forwards; opacity:0; }
.hero-h1 .green { display:block; font-style:italic;
background:linear-gradient(100deg,#69f0ae 0%,#a5d6a7 55%,#c8e6c9 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-p { font-size:clamp(.98rem,2vw,1.18rem); color:rgba(255,255,255,.62);
max-width:560px; line-height:1.78; font-weight:400;
animation:fadeUp 1s ease .34s forwards; opacity:0; }
.hero-stats { display:flex; gap:2.8rem; animation:fadeUp 1s ease .5s forwards; opacity:0; }
.hstat { display:flex; flex-direction:column; align-items:center; gap:.16rem; }
.hstat-n { font-size:2rem; font-weight:700; color:#a5d6a7; line-height:1; }
.hstat-l { font-size:.68rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:2px; font-weight:600; }
.hstat-div { width:1px; background:rgba(255,255,255,.1); align-self:stretch; }
.hero-search { width:100%; max-width:580px; animation:fadeUp 1s ease .65s forwards; opacity:0; }
.search-box { display:flex; align-items:center;
background:rgba(255,255,255,.09); border:1.5px solid rgba(255,255,255,.18);
border-radius:60px; padding:.38rem .38rem .38rem 1.5rem;
backdrop-filter:blur(18px); transition:border-color .3s,box-shadow .3s; }
.search-box:focus-within { border-color:rgba(105,240,174,.55); box-shadow:0 0 0 4px rgba(105,240,174,.1); }
.search-ico { color:rgba(255,255,255,.4); font-size:1rem; margin-right:.65rem; flex-shrink:0; }
.search-inp { flex:1; background:transparent; border:none; outline:none;
color:#fff; font-size:.96rem; font-family:'DM Sans',sans-serif; min-width:0; }
.search-inp::placeholder { color:rgba(255,255,255,.36); }
.search-btn { background:linear-gradient(135deg,#1b5e20,#2e7d32); color:#fff; font-weight:700;
font-size:.88rem; border:none; border-radius:50px; padding:.7rem 1.7rem; cursor:pointer;
flex-shrink:0; font-family:'DM Sans',sans-serif; transition:transform .25s,box-shadow .25s; }
.search-btn:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(27,94,32,.5); }
.hero-chips { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
animation:fadeUp 1s ease .8s forwards; opacity:0; }
.chip-lbl { color:rgba(255,255,255,.60); font-size:.76rem; align-self:center; font-weight:600; margin-right:.2rem; }
.chip { display:inline-flex; align-items:center; gap:.3rem;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.68); font-size:.76rem; font-weight:600;
padding:.36rem .9rem; border-radius:50px; text-decoration:none; transition:all .25s; cursor:pointer; }
.chip:hover { background:rgba(105,240,174,.13); color:#69f0ae; border-color:rgba(105,240,174,.32); text-decoration:none; }
.hero-scroll { position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
display:flex; flex-direction:column; align-items:center; gap:.4rem;
color:rgba(255,255,255,.28); font-size:.62rem; letter-spacing:3px; text-transform:uppercase;
z-index:10; cursor:pointer; animation:fadeUp 1s ease 1.1s forwards; opacity:0; }
.scroll-ring { width:22px; height:36px; border:2px solid rgba(255,255,255,.2); border-radius:11px; position:relative; }
.scroll-ring::after { content:''; width:3px; height:7px; background:rgba(255,255,255,.38);
border-radius:2px; position:absolute; top:6px; left:50%; transform:translateX(-50%);
animation:sdot 1.9s ease-in-out infinite; }
@keyframes sdot { 0%,100%{transform:translateX(-50%) translateY(0);opacity:1;}
80%{transform:translateX(-50%) translateY(12px);opacity:0;} }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);} }
/* ═══════════════════════════════════════════
TRUST BAR
═══════════════════════════════════════════ */
.trust-bar { background:#0b1a0d; padding:1rem 0; border-bottom:1px solid rgba(105,240,174,.07); }
.trust-inner { display:flex; align-items:center; justify-content:center; gap:2.8rem; flex-wrap:wrap;
max-width:1160px; margin:0 auto; padding:0 2rem; }
.trust-item { display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.60);
font-size:.7rem; font-weight:600; letter-spacing:1.8px; text-transform:uppercase; white-space:nowrap; }
.trust-item i { color:#69f0ae; font-size:.85rem; }
.trust-sep { color:rgba(255,255,255,.1); }
/* ═══════════════════════════════════════════
SECTION WRAPPERS
═══════════════════════════════════════════ */
.ns { padding:6rem 0; position:relative; overflow:hidden; }
.ns .container { max-width:1200px; margin:0 auto; padding:0 2rem; position:relative; z-index:2; }
.ns-white { background:#fff; }
.ns-cream { background:#fafdf8; }
.ns-forest { background:linear-gradient(155deg,#0c2010 0%,#0e2913 50%,#091608 100%); }
.ns-deep { background:#071409; }
.sec-div { height:1px; background:linear-gradient(90deg,transparent,rgba(46,125,50,.15),transparent); }
/* BG DECORATIONS */
.ns-forest .bg-deco { position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(ellipse 60% 70% at 5% 30%,rgba(46,125,50,.28) 0%,transparent 60%),
radial-gradient(ellipse 50% 60% at 95% 60%,rgba(105,240,174,.06) 0%,transparent 65%); }
.ns-deep .bg-deco { position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(ellipse 55% 65% at 4% 65%,rgba(46,125,50,.22) 0%,transparent 60%),
radial-gradient(ellipse 40% 50% at 96% 20%,rgba(105,240,174,.05) 0%,transparent 60%),
linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
background-size:auto,auto,42px 42px,42px 42px; }
/* ═══════════════════════════════════════════
SECTION HEADERS
═══════════════════════════════════════════ */
.eyebrow { display:inline-flex; align-items:center; gap:.55rem;
font-family:'Syne',sans-serif; font-size:.63rem; font-weight:700; letter-spacing:3.5px; text-transform:uppercase;
margin-bottom:.9rem; }
.eyebrow::before { content:''; display:block; width:22px; height:2px; border-radius:2px; }
.eyebrow.lt { color:#69f0ae; } .eyebrow.lt::before { background:#69f0ae; }
.eyebrow.dk { color:var(--g2); } .eyebrow.dk::before { background:var(--g4); }
.sec-h { font-family:'Playfair Display',serif; font-size:clamp(2.1rem,4.2vw,3.2rem);
font-weight:700; line-height:1.1; letter-spacing:-.4px; margin-bottom:.5rem; }
.sec-h em { font-style:italic; font-weight:400; }
.sec-h.lt { color:#fff; } .sec-h.lt em { color:#a5d6a7; }
.sec-h.dk { color:var(--text); } .sec-h.dk em { color:var(--g2); }
.sec-rule { width:52px; height:3px; border-radius:2px; margin:1rem 0 1rem; }
.sec-rule.lt { background:linear-gradient(90deg,#69f0ae,transparent); }
.sec-rule.dk { background:linear-gradient(90deg,var(--g4),transparent); }
.sec-p { font-size:.93rem; line-height:1.82; max-width:440px; }
.sec-p.lt { color:rgba(255,255,255,.48); }
.sec-p.dk { color:var(--text3); }
/* ═══════════════════════════════════════════
LAYOUT HELPERS
═══════════════════════════════════════════ */
.split-hd { display:flex; align-items:flex-end; justify-content:space-between;
gap:2rem; flex-wrap:wrap; margin-bottom:2.8rem; }
.sidebar-layout { display:flex; align-items:flex-start; gap:4rem; }
.sb-left { flex:0 0 270px; }
.sb-right { flex:1; min-width:0; }
/* ═══════════════════════════════════════════
HORIZONTAL SCROLL TRACK
═══════════════════════════════════════════ */
.htrack { display:flex; gap:1.4rem; overflow-x:auto; overflow-y:visible;
padding-bottom:1.4rem; scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
scrollbar-width:thin; scrollbar-color:rgba(105,240,174,.25) transparent;
width:100%; box-sizing:border-box; }
.htrack::-webkit-scrollbar { height:3px; }
.htrack::-webkit-scrollbar-track { background:rgba(255,255,255,.04); }
.htrack::-webkit-scrollbar-thumb { background:rgba(105,240,174,.28); border-radius:2px; }
.scroll-cue { display:flex; align-items:center; gap:.6rem; margin-top:1.6rem; font-size:.68rem; letter-spacing:1px; }
.scroll-cue.lt { color:rgba(255,255,255,.3); }
.scroll-cue-bar { width:70px; height:2px; border-radius:2px; position:relative; overflow:hidden; }
.scroll-cue-bar.lt { background:rgba(255,255,255,.1); }
.scroll-cue-bar::after { content:''; position:absolute; inset-block:0; left:0; width:35%;
border-radius:2px; animation:barPulse 2.2s ease-in-out infinite; }
.scroll-cue-bar.lt::after { background:linear-gradient(90deg,#69f0ae,transparent); }
@keyframes barPulse { 0%{left:0;width:35%;}55%{left:38%;width:38%;}100%{left:65%;width:35%;} }
/* ═══════════════════════════════════════════
DARK CARD (glass — horizontal scroll)
═══════════════════════════════════════════ */
.dcard { flex:0 0 268px; min-width:268px;
background:rgba(255,255,255,.035); border:1.5px solid rgba(105,240,174,.09); border-radius:22px;
overflow:hidden; scroll-snap-align:start;
transition:transform .42s cubic-bezier(.175,.885,.32,1.275),background .3s,box-shadow .4s;
display:flex; flex-direction:column; position:relative; }
.dcard:hover { transform:translateY(-11px) scale(1.016);
background:rgba(255,255,255,.065);
box-shadow:0 28px 64px rgba(0,0,0,.45),0 0 0 1px rgba(105,240,174,.18); }
.dcard-bar { height:3px; background:linear-gradient(90deg,#69f0ae,#a5d6a7,transparent); flex-shrink:0; }
/* ── DCARD IMAGE — link fix ── */
.dcard-img { height:196px; overflow:hidden; position:relative; flex-shrink:0; }
/* fills entire image, sits above ::after overlay */
.dcard-img a {
display:block; position:absolute; inset:0;
width:100%; height:100%;
z-index:3; cursor:pointer;
}
.dcard-img a img {
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .7s ease; filter:brightness(.82);
}
.dcard:hover .dcard-img a img,
.dcard-img a:hover img { transform:scale(1.11); filter:brightness(.98); }
.dcard-img::after { content:''; position:absolute; inset:0;
background:linear-gradient(to bottom,transparent 22%,rgba(3,12,5,.78) 100%);
pointer-events:none; z-index:1; }
/* Badge and pill above link */
.dcard-pill { position:absolute; bottom:11px; left:11px; z-index:4;
background:rgba(105,240,174,.16); backdrop-filter:blur(12px);
border:1px solid rgba(105,240,174,.28); color:#c8e6c9;
font-size:.62rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
padding:.2rem .68rem; border-radius:50px; }
.dcard-badge { position:absolute; top:11px; right:11px; z-index:4;
background:rgba(36,155,55); border:1px solid rgba(105,240,174,.22);
color:#0b0306; font-size:.58rem; font-weight:800; letter-spacing:.6px;
padding:.2rem .68rem; border-radius:50px; }
.dcard-body { padding:1.25rem 1.35rem 1.45rem; flex:1; display:flex; flex-direction:column; }
.dcard-name { font-family:'Syne',sans-serif; font-size:.95rem; font-weight:700;
color:#fff; margin-bottom:.55rem; line-height:1.3; cursor:pointer; }
.dcard-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:.75rem; }
.dtag { background:rgba(105,240,174,.07); color:#a5d6a7; border:1px solid rgba(105,240,174,.14);
padding:.18rem .62rem; border-radius:50px; font-size:.6rem; font-weight:700; letter-spacing:.4px; }
.dcard-desc { color:rgba(255,255,255,.4); font-size:.79rem; line-height:1.72;
margin-bottom:1rem; display:-webkit-box; -webkit-line-clamp:2;
-webkit-box-orient:vertical; overflow:hidden; flex:1; }
.dcard-foot { display:flex; align-items:center; justify-content:space-between;
padding-top:.75rem; border-top:1px solid rgba(255,255,255,.065); }
.dcard-stat { display:flex; flex-direction:column; gap:.1rem; color:#f2faf2;font-size: .7rem;}
.dstat-n { font-size:.7rem; font-weight:800; color:#a5d6a7; }
.dstat-l { font-size:.57rem; color:rgba(255,255,255,.3); letter-spacing:.6px; text-transform:uppercase; }
/* ═══════════════════════════════════════════
LIGHT CARD (grid)
═══════════════════════════════════════════ */
.ng { display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.lcard { background:#fff; border-radius:22px;
border:1.5px solid rgba(46,125,50,.09); box-shadow:0 4px 22px rgba(27,94,32,.07);
overflow:hidden; display:flex; flex-direction:column; position:relative;
transition:transform .42s cubic-bezier(.175,.885,.32,1.275),box-shadow .42s ease,border-color .3s;
cursor:pointer; }
.lcard:hover { transform:translateY(-11px); box-shadow:0 26px 60px rgba(27,94,32,.17); border-color:rgba(46,125,50,.26); }
.lcard-bar { height:3px; background:linear-gradient(90deg,var(--g2),var(--g5),transparent); }
/* ── LCARD IMAGE — link fix ── */
.lcard-img { height:215px; overflow:hidden; position:relative; }
/* fills entire image, sits above ::after overlay */
.lcard-img a {
display:block; position:absolute; inset:0;
width:100%; height:100%;
z-index:3; cursor:pointer;
}
.lcard-img a img {
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .7s ease;
}
.lcard:hover .lcard-img a img,
.lcard-img a:hover img { transform:scale(1.1); }
.lcard-img::after { content:''; position:absolute; inset:0;
background:linear-gradient(to bottom,transparent 35%,rgba(4,20,7,.56) 100%);
pointer-events:none; z-index:1; }
/* Badge and pill above link */
.lcard-pill { position:absolute; bottom:11px; left:11px; z-index:4;
background:rgba(255,255,255,.14); backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.22); color:#fff;
font-size:.62rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
padding:.2rem .68rem; border-radius:50px; }
.lcard-badge { position:absolute; top:11px; right:11px; z-index:4;
background:#fff; color:var(--g2); font-size:.58rem; font-weight:800;
padding:.2rem .68rem; border-radius:50px; box-shadow:0 2px 12px rgba(0,0,0,.12); }
.lcard-body { padding:1.35rem 1.4rem 1.55rem; flex:1; display:flex; flex-direction:column; }
.lcard-name { font-family:'Syne',sans-serif; font-size:.97rem; font-weight:700;
color:var(--text); margin-bottom:.52rem; line-height:1.3; cursor:pointer; }
.lcard-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:.75rem; }
.ltag { background:var(--g7); color:var(--g3); border:1px solid rgba(46,125,50,.13);
padding:.18rem .62rem; border-radius:50px; font-size:.6rem; font-weight:700; letter-spacing:.4px; }
.lcard-desc { color:var(--text3); font-size:.8rem; line-height:1.68;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
margin-bottom:1.1rem; flex:1; }
.lcard-foot { display:flex; align-items:center; justify-content:space-between;
padding-top:.8rem; border-top:1px solid rgba(46,125,50,.07); }
.lcard-kcal { font-size:.7rem; font-weight:800; color:var(--g2); }
.lcard-kcal span { font-weight:400; color:var(--text3); font-size:.6rem; }
/* ═══════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════ */
.btn-g { display:inline-flex; align-items:center; gap:.42rem; padding:.54rem 1.18rem;
border-radius:50px; background:linear-gradient(135deg,var(--g2),var(--g4));
color:#fff; font-size:.73rem; font-weight:700; letter-spacing:.3px;
text-decoration:none; font-family:'Syne',sans-serif; cursor:pointer;
transition:transform .3s,box-shadow .3s; }
.btn-g:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(46,125,50,.36); color:#fff; text-decoration:none; }
.btn-go { display:inline-flex; align-items:center; gap:.42rem; padding:.48rem 1.1rem;
border-radius:50px; background:transparent; border:1.5px solid rgba(105,240,174,.38);
color:#69f0ae; font-size:.73rem; font-weight:700; letter-spacing:.3px;
text-decoration:none; font-family:'Syne',sans-serif; cursor:pointer;
transition:transform .3s,background .3s,box-shadow .3s; }
.btn-go:hover { background:rgba(105,240,174,.11); color:#69f0ae;
transform:translateY(-2px); box-shadow:0 6px 20px rgba(105,240,174,.14); text-decoration:none; }
.btn-g .ar,.btn-go .ar { transition:transform .3s; display:inline-block; }
.btn-g:hover .ar,.btn-go:hover .ar { transform:translateX(3px); }
.vm-btn { display:inline-flex; align-items:center; gap:.65rem; padding:.82rem 2.2rem; border-radius:50px;
font-family:'Syne',sans-serif; font-weight:700; font-size:.86rem;
text-decoration:none; cursor:pointer; transition:all .35s cubic-bezier(.175,.885,.32,1.275); }
.vm-dk { border:2px solid var(--g4); color:var(--g2); background:transparent; }
.vm-dk:hover { background:var(--g2); color:#fff; transform:translateY(-4px); box-shadow:0 12px 36px rgba(46,125,50,.28); text-decoration:none; }
.vm-lt { border:2px solid rgba(105,240,174,.35); color:#a5d6a7; background:transparent; }
.vm-lt:hover { background:rgba(105,240,174,.1); color:#69f0ae; transform:translateY(-4px); box-shadow:0 12px 36px rgba(105,240,174,.1); text-decoration:none; }
.vm-ico { transition:transform .3s; display:inline-block; }
.vm-btn:hover .vm-ico { transform:translateX(5px); }
/* ═══════════════════════════════════════════
FEATURE STRIP
═══════════════════════════════════════════ */
.feat-strip { display:grid; grid-template-columns:repeat(4,1fr);
gap:1px; background:rgba(46,125,50,.09); border-radius:18px; overflow:hidden; margin-bottom:2.6rem; }
.fi { background:#fff; padding:1.7rem 1.4rem; display:flex; flex-direction:column;
align-items:flex-start; gap:.55rem; transition:background .3s; cursor:default; }
.fi:hover { background:#f2faf2; }
.fi-ico { font-size:1.7rem; line-height:1; }
.fi-t { font-family:'Syne',sans-serif; font-size:.85rem; font-weight:700; color:var(--text); }
.fi-d { font-size:.74rem; color:var(--text3); line-height:1.6; }
/* ═══════════════════════════════════════════
BLOG GRID
═══════════════════════════════════════════ */
.blog-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.8rem; align-items:start; }
.bcard { background:#fff; border-radius:22px; border:1.5px solid rgba(46,125,50,.09);
overflow:hidden; box-shadow:0 4px 22px rgba(27,94,32,.07);
transition:transform .42s cubic-bezier(.175,.885,.32,1.275),box-shadow .42s,border-color .3s;
display:flex; flex-direction:column; position:relative; cursor:pointer; }
.bcard:hover { transform:translateY(-9px); box-shadow:0 22px 58px rgba(27,94,32,.17); border-color:rgba(46,125,50,.26); }
.bcard-bar { height:3px; background:linear-gradient(90deg,var(--g2),var(--g5),transparent); }
/* ── BCARD IMAGE — link fix ── */
.bcard-img { overflow:hidden; position:relative; }
.bcard.feat .bcard-img { height:275px; }
.bcard:not(.feat) .bcard-img { height:175px; }
/* fills entire image, sits above ::after overlay */
.bcard-img a {
display:block; position:absolute; inset:0;
width:100%; height:100%;
z-index:3; cursor:pointer;
}
.bcard-img a img {
width:300; height:250; object-fit:cover; display:block;
transition:transform .7s ease;
}
.bcard:hover .bcard-img a img,
.bcard-img a:hover img { transform:scale(1.08); }
.bcard-img::after { content:''; position:absolute; inset:0;
background:linear-gradient(to bottom,transparent 28%,rgba(4,20,7,.65) 100%);
pointer-events:none; z-index:1; }
/* Category badge above link */
.bcard-cat { position:absolute; bottom:11px; left:11px; z-index:4;
background:var(--g2); color:#fff; padding:.2rem .7rem; border-radius:50px;
font-family:'Syne',sans-serif; font-weight:700; font-size:.59rem; letter-spacing:1.2px; text-transform:uppercase; }
.bcard-body { padding:1.35rem 1.45rem 1.6rem; flex:1; display:flex; flex-direction:column; }
.bcard-meta { display:flex; align-items:center; gap:.55rem; margin-bottom:.65rem; }
.bcard-tag { font-family:'Syne',sans-serif; font-size:.58rem; font-weight:700;
letter-spacing:1px; text-transform:uppercase; color:var(--g3); }
.bcard-dot { width:3px; height:3px; border-radius:50%; background:var(--text3); }
.bcard-date { font-size:.6rem; color:var(--text3); }
.bcard-title { font-family:'Playfair Display',serif; font-weight:700; color:var(--text);
line-height:1.35; margin-bottom:.6rem; cursor:pointer;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bcard.feat .bcard-title { font-size:1.22rem; }
.bcard:not(.feat) .bcard-title { font-size:.97rem; }
.bcard-exc { color:var(--text3); font-size:.79rem; line-height:1.74; flex:1; margin-bottom:1rem;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bcard:not(.feat) .bcard-exc { -webkit-line-clamp:2; }
/* ═══════════════════════════════════════════════════════════
RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════════════ */
/* ── iPad Pro landscape (≤1180px) ── */
@media (max-width:1180px) {
.ns .container { padding:0 1.5rem; }
.ng { gap:1.5rem; }
.blog-grid { grid-template-columns:1.4fr 1fr 1fr; }
.sb-left { flex:0 0 240px; }
.sidebar-layout { gap:3rem; }
}
/* ── iPad landscape (≤1024px) ── */
@media (max-width:1024px) {
.ng { grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.blog-grid { grid-template-columns:1fr 1fr; gap:1.4rem; }
.feat-strip { grid-template-columns:repeat(2,1fr); }
.sidebar-layout { gap:2.4rem; }
.sb-left { flex:0 0 220px; }
.dcard { flex:0 0 255px; min-width:255px; }
.bcard.feat .bcard-img { height:240px; }
}
/* ── iPad portrait (≤820px) ── */
@media (max-width:820px) {
.ns { padding:4.5rem 0; }
.ns .container { padding:0 1.2rem; }
.sidebar-layout { flex-direction:column; gap:1.8rem; }
.sb-left { flex:none; width:100%; max-width:100%; }
.sb-right { width:100%; }
.scroll-cue { margin-top:1rem; }
.ng { grid-template-columns:repeat(2,1fr); gap:1.3rem; }
.blog-grid { grid-template-columns:1fr 1fr; gap:1.3rem; }
.feat-strip { grid-template-columns:repeat(2,1fr); }
.hero-inner { padding:5rem 1.4rem 3.5rem; gap:1.4rem; }
.hero-stats { gap:1.8rem; }
.hstat-n { font-size:1.65rem; }
.trust-inner { gap:1.4rem; padding:0 1.2rem; }
.split-hd { flex-direction:column; align-items:flex-start; gap:1.2rem; }
.vm-btn { padding:.7rem 1.6rem; font-size:.8rem; }
.dcard { flex:0 0 260px; min-width:260px; }
.lcard-img { height:195px; }
}
/* ── Large phones landscape (≤680px) ── */
@media (max-width:680px) {
.ns { padding:3.8rem 0; }
.ns .container { padding:0 1rem; }
.sidebar-layout { gap:1.5rem; }
.dcard { flex:0 0 240px; min-width:240px; }
.dcard-img { height:175px; }
.htrack { gap:1.1rem; }
.ng { grid-template-columns:1fr 1fr; gap:1.1rem; }
.blog-grid { grid-template-columns:1fr; }
.bcard.feat .bcard-img { height:220px; }
.feat-strip { grid-template-columns:repeat(2,1fr); }
.hero-inner { padding:4.5rem 1rem 3rem; gap:1.2rem; }
.search-btn { padding:.65rem 1.1rem; font-size:.8rem; }
.leaf:nth-child(n+5) { display:none; }
.sec-h { font-size:clamp(1.7rem,5vw,2.4rem); }
.split-hd { gap:1rem; }
}
/* ── iPhone Plus / Android (≤480px) ── */
@media (max-width:480px) {
.ns { padding:3rem 0; }
.ns .container { padding:0 .9rem; }
.ng { grid-template-columns:1fr; }
.blog-grid { grid-template-columns:1fr; }
.feat-strip { grid-template-columns:1fr 1fr; gap:1px; }
.dcard { flex:0 0 85vw; min-width:85vw; max-width:320px; }
.dcard-img { height:170px; }
.dcard-body { padding:1rem 1.1rem 1.2rem; }
.dcard-name { font-size:.88rem; }
.lcard-img { height:185px; }
.lcard-body { padding:1.1rem 1.1rem 1.3rem; }
.htrack { gap:1rem; padding-bottom:1rem; padding-right:.9rem; }
.sidebar-layout { gap:1.3rem; }
.sb-left { padding-bottom:0; }
.scroll-cue { margin-top:.8rem; }
.hero-inner { padding:4rem .9rem 2.8rem; gap:1.1rem; }
.hero-stats { gap:1rem; }
.hstat-n { font-size:1.4rem; }
.hstat-div { display:none; }
.search-box { padding:.32rem .32rem .32rem 1.1rem; }
.search-inp { font-size:.88rem; }
.search-btn { padding:.62rem 1rem; font-size:.78rem; }
.chip-lbl { display:none; }
.hero-chips { gap:.45rem; }
.chip { font-size:.7rem; padding:.3rem .75rem; }
.trust-sep { display:none; }
.trust-inner { gap:1rem; flex-wrap:wrap; }
.trust-item { font-size:.62rem; letter-spacing:1.2px; white-space:normal; }
.sec-h { font-size:clamp(1.6rem,6vw,2rem); }
.sec-p { font-size:.86rem; }
.eyebrow { font-size:.58rem; letter-spacing:2.5px; }
.split-hd { gap:.9rem; margin-bottom:2rem; }
.vm-btn { padding:.65rem 1.4rem; font-size:.78rem; }
.bcard.feat .bcard-img { height:210px; }
.bcard:not(.feat) .bcard-img { height:165px; }
.bcard.feat .bcard-title { font-size:1.05rem; }
.fi { padding:1.2rem 1rem; }
.fi-ico { font-size:1.4rem; }
.fi-t { font-size:.78rem; }
.fi-d { font-size:.68rem; }
}
/* ── iPhone (≤430px) ── */
@media (max-width:430px) {
.dcard { flex:0 0 82vw; min-width:82vw; max-width:300px; }
.htrack { padding-right:.9rem; }
.sec-h { font-size:1.65rem; }
.hero-h1 { font-size:clamp(2.4rem,9vw,3.5rem); }
}
/* ── iPhone SE (≤390px) ── */
@media (max-width:390px) {
.ns .container { padding:0 .75rem; }
.hero-inner { padding:3.5rem .75rem 2.5rem; }
.hero-h1 { font-size:clamp(2.2rem,9vw,3rem); letter-spacing:-.3px; }
.hero-p { font-size:.88rem; }
.search-box { padding:.28rem .28rem .28rem .9rem; }
.search-inp { font-size:.82rem; }
.search-btn { padding:.58rem .85rem; font-size:.74rem; }
.dcard { flex:0 0 80vw; min-width:80vw; }
.dcard-img { height:158px; }
.lcard-img { height:170px; }
.sec-h { font-size:1.5rem; }
.feat-strip { grid-template-columns:1fr 1fr; }
.fi { padding:1rem .85rem; }
.htrack { gap:.9rem; }
.blog-grid { gap:1rem; }
}
/* ── iPhone SE 1st gen (≤320px) ── */
@media (max-width:320px) {
.hero-h1 { font-size:2rem; }
.hero-inner { gap:1rem; }
.dcard { flex:0 0 88vw; min-width:88vw; }
.search-btn { display:none; }
.ns .container { padding:0 .65rem; }
.sec-h { font-size:1.35rem; }
.feat-strip { grid-template-columns:1fr; }
}
/* ═══════════════════════════════════════════
TOUCH DEVICES
═══════════════════════════════════════════ */
@media (hover:none) and (pointer:coarse) {
/* Tap feedback instead of hover lift */
.dcard:active { transform:scale(.98); }
.lcard:active { transform:scale(.98); }
.bcard:active { transform:scale(.98); }
/* Larger tap targets */
.btn-g, .btn-go { padding:.62rem 1.3rem; min-height:44px; }
.vm-btn { min-height:44px; }
.chip { min-height:36px; }
.search-btn { min-height:44px; }
/* Horizontal scroll */
.htrack { cursor:grab; -webkit-overflow-scrolling:touch; touch-action:pan-x; }
.scroll-cue { display:flex; opacity:1; }
/* Sidebar never sticky on touch (iOS scroll bug) */
.det-sidebar { position:static !important; }
}