/* ─────────────────────────────────────────
   RESET & TOKENS
───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root {
    --navy: #2B3BAB;
    --navy-d: #1e2c82;
    --navy-l: #5b72e8;
    --green: #5fa81e;
    --green-l: #7DC832;
    --dark: #0e1422;
    --text: #1c2333;
    --sub: #070707;
    --muted: #2b2d2f;
    --bg: #f7f9fc;
    --white: #fff;
    --border: #e2e8f0;
    --border-blue: rgba(43,59,171,.12);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --shadow: 0 4px 12px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.04);
    --shadow-md: 0 8px 24px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.05);
    --shadow-lg: 0 16px 48px rgba(0,0,0,.1),0 6px 16px rgba(0,0,0,.06);
    --container: 1200px;
    --gap: 1.5rem;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button {
    cursor: pointer;
    font-family: urbanist
}

/* ─────────────────────────────────────────
   LAYOUT HELPERS
───────────────────────────────────────── */
.container{max-width:var(--container);margin:0 auto;padding:0 2rem}
.section{padding:3rem 0}
.section-sm{padding:2rem 0}

/* ─────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-300% center}100%{background-position:300% center}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(95,168,30,.45)}50%{box-shadow:0 0 0 6px rgba(95,168,30,0)}}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(-1.5deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-11px) rotate(2deg)}}
@keyframes floatC{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-18px) rotate(-.5deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinR{to{transform:rotate(-360deg)}}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes newPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ─────────────────────────────────────────
   NAVBAR
───────────────────────────────────────── */
nav{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.96);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  height:64px;
}
.nav-inner{
  max-width:var(--container);margin:0 auto;padding:0 2rem;
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.logo-wrap img {
    height: 150px;
    width: auto;
    object-fit: contain;
    margin-top: 15px;
}
.nav-links{display:flex;gap:0;list-style:none}
.nav-links a{
  display:block;padding:.45rem .85rem;
  font-size:.85rem;font-weight:500;color:var(--sub);
  border-radius:var(--radius-sm);transition:color .15s,background .15s;
}
.nav-links a:hover{color:var(--navy);background:rgba(43,59,171,.05)}
.nav-right{display:flex;align-items:center;gap:.75rem}
.nav-search-btn{
  display:flex;align-items:center;gap:.5rem;
  padding:.4rem .8rem;border-radius:var(--radius-sm);
  border:1.5px solid var(--border);background:#f8fafc;
  font-size:.8rem;color:var(--muted);transition:border-color .15s;
}
.nav-search-btn:hover{border-color:var(--navy);color:var(--navy)}
.nav-cta {
    padding: .5rem 1.25rem;
    border-radius: var(--radius-sm);
    border: none;
    background: linear-gradient(to right, #4CAF50 0%, #4CAF50 51%, #4CAF50 100%);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    transition: background .15s,box-shadow .15s;
    box-shadow: 0 2px 8px rgba(43,59,171,.3);
}
   /* .nav-cta:hover {
        background: linear-gradient(to right, #FF512F 0%, #F09819 51%, #FF512F 100%);
        box-shadow: 0 4px 14px rgba(43,59,171,.38)
    }*/
.nav-cta1 {
    padding: .5rem 1.25rem;
    border-radius: var(--radius-sm);
    border: none;
    background: #4CAF50;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    transition: background .15s,box-shadow .15s;
    box-shadow: 0 2px 8px rgba(43,59,171,.3);
    text-align: center;
}

    .nav-cta1:hover {
        background: #4CAF50;
        box-shadow: 0 4px 14px rgba(43,59,171,.38)
    }
/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
    min-height: calc(83vh - 64px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    /* padding:1rem 1rem;*/
    max-width: var(--container);
    margin: 0 auto;
    position: relative;
    /*background: linear-gradient(45deg, rgb(255, 224, 223) 0%, rgb(255, 232, 219) 5%, rgb(255, 239, 215) 10%, rgb(255, 246, 212) 15%, rgb(255, 252, 209) 20%, rgb(255, 255, 208) 25%, rgb(255, 255, 206) 30%, rgb(255, 255, 206) 35%, rgb(255, 255, 206) 40%, rgb(255, 255, 207) 45%, rgb(255, 255, 209) 50%, rgb(255, 255, 212) 55%, rgb(255, 255, 215) 60%, rgb(255, 252, 219) 65%, rgb(252, 247, 223) 70%, rgb(243, 240, 228) 75%, rgb(235, 233, 233) 80%, rgb(227, 225, 239) 85%, rgb(220, 216, 244) 90%, rgb(212, 207, 250) 95%, rgb(206, 198, 255) 100%);*/
}
/* full-bleed bg behind hero */
.hero-bg {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    height: calc(100vh - 64px);
    background: linear-gradient(45deg, rgb(255, 224, 223) 0%, rgb(255, 232, 219) 5%, rgb(255, 239, 215) 10%, rgb(255, 246, 212) 15%, rgb(255, 252, 209) 20%, rgb(255, 255, 208) 25%, rgb(255, 255, 206) 30%, rgb(255, 255, 206) 35%, rgb(255, 255, 206) 40%, rgb(255, 255, 207) 45%, rgb(255, 255, 209) 50%, rgb(255, 255, 212) 55%, rgb(255, 255, 215) 60%, rgb(255, 252, 219) 65%, rgb(252, 247, 223) 70%, rgb(243, 240, 228) 75%, rgb(235, 233, 233) 80%, rgb(227, 225, 239) 85%, rgb(220, 216, 244) 90%, rgb(212, 207, 250) 95%, rgb(206, 198, 255) 100%);
    z-index: -1;
    pointer-events: none;
}
.hero-section {
    margin-top:-5px;
    background: linear-gradient(45deg, rgb(255, 224, 223) 0%, rgb(255, 232, 219) 5%, rgb(255, 239, 215) 10%, rgb(255, 246, 212) 15%, rgb(255, 252, 209) 20%, rgb(255, 255, 208) 25%, rgb(255, 255, 206) 30%, rgb(255, 255, 206) 35%, rgb(255, 255, 206) 40%, rgb(255, 255, 207) 45%, rgb(255, 255, 209) 50%, rgb(255, 255, 212) 55%, rgb(255, 255, 215) 60%, rgb(255, 252, 219) 65%, rgb(252, 247, 223) 70%, rgb(243, 240, 228) 75%, rgb(235, 233, 233) 80%, rgb(227, 225, 239) 85%, rgb(220, 216, 244) 90%, rgb(212, 207, 250) 95%, rgb(206, 198, 255) 100%);
    z-index: -1;
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(43,59,171,.08) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,black,transparent);
}

/* Left */
.hero-left{display:flex;flex-direction:column;gap:0}
.hero-pill{
    margin-top:20px;
  display:inline-flex;align-items:center;gap:.45rem;
  background:#fff;border:1.5px solid var(--border-blue);
  border-radius:100px;padding:.3rem .9rem;
  font-size:.72rem;font-weight:600;color:var(--navy);letter-spacing:.06em;text-transform:uppercase;
  width:fit-content;margin-bottom:1.25rem;
  animation:fadeUp .5s .1s both;
  box-shadow:var(--shadow-sm);
}
.pill-dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}
.hero-eyebrow {
    font-family: 'Syne',sans-serif;
    font-size: .95rem;
    font-weight: 600;
    color: #4CAF50;
    margin-bottom: .4rem;
    letter-spacing: .01em;
    animation: fadeUp .5s .15s both;
}
.hero-h1{
  font-family:'Syne',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.05;
  animation:fadeUp .5s .2s both;
}
.hero-h1 .line-sm{font-size:clamp(2.4rem,4vw,3.8rem);color:var(--dark);display:block}
.hero-h1 .line-grad{
  display:block;font-size:clamp(3rem,5vw,5rem);
  background:linear-gradient(95deg,var(--navy) 0%,var(--navy-l) 40%,var(--green-l) 70%,var(--green) 100%);
  background-size:250% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 6s linear infinite;
}
.hero-h1 .line-end{font-size:clamp(1.4rem,2vw,1.9rem);color:var(--sub);display:block;margin-top:.1rem;font-weight:600}
.line-underline{position:relative;display:inline-block}
.line-underline::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--green-l));
  border-radius:2px;
}
.hero-desc{
  margin-top:1.4rem;font-size:.95rem;color:var(--sub);max-width:420px;line-height:1.75;
  animation:fadeUp .5s .3s both;
}
.hero-btns{
  margin-top:1.75rem;display:flex;gap:.75rem;flex-wrap:wrap;
  animation:fadeUp .5s .35s both;
}
.btn-primary {
    background-image: linear-gradient(to right, #4CAF50 0%, #CDDC39 51%, #4CAF50 100%);
    margin: 10px;
    padding: 10px 30px;
    text-align: center;
    /*text-transform: uppercase;*/
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    border-radius: 10px;
    display: block;
    outline: none;
    border: none;
}
    .btn-primary:hover {
        background-position: right center;
        color: #fff;
        text-decoration: none;
    }
.btn-outline {
    background-image: linear-gradient(to right, #354496 0%, #2196F3 51%, #354496 100%);
    margin: 10px;
    padding: 10px 30px;
    text-align: center;
    /*text-transform: uppercase;*/
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
    outline: none;
    border: none;
}
    .btn-outline:hover {
        background-position: right center;
        color: #fff;
        text-decoration: none;
    }

.hero-stats {
    display: flex;
    gap: 0;
    margin-top: 2rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    animation: fadeUp .5s .45s both;
    margin-left: 55px;

}
.hero-stat{padding-right:2rem;margin-right:2rem;border-right:1px solid var(--border)}
.hero-stat:last-child{border-right:none}
.hero-stat-n{font-family:'Syne',sans-serif;font-size:1.0rem;font-weight:800;color:var(--navy);line-height:1}
.hero-stat-l{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-top:.2rem;margin-bottom:10px;}

/* Right — visual */
.hero-right{
  position:relative;height:350px;
  display:flex;align-items:center;justify-content:center;
}
.ring{position:absolute;border-radius:50%;pointer-events:none}
.r1{width:360px;height:360px;border:1px dashed rgba(43,59,171,.12);animation:spin 35s linear infinite}
.r2{width:240px;height:240px;border:1px solid rgba(95,168,30,.15);animation:spinR 24s linear infinite}
.r3{width:120px;height:120px;border:1px solid rgba(43,59,171,.1);animation:spin 15s linear infinite}
.hero-glow{
  width:180px;height:180px;border-radius:50%;position:absolute;
  background:radial-gradient(circle,rgba(95,168,30,.18),rgba(43,59,171,.1) 60%,transparent);
  filter:blur(24px);
}
.hero-center{
  position:absolute;z-index:5;
  width:62px;height:62px;border-radius:18px;
  background:linear-gradient(135deg,var(--navy),var(--navy-l));
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;
  box-shadow:0 8px 32px rgba(43,59,171,.4);
}
.fc{
  position:absolute;background:#fff;border-radius:12px;z-index:4;
  display:flex;align-items:center;gap:.55rem;
  padding:.6rem .85rem;
  border:1px solid rgba(43,59,171,.08);
  box-shadow:var(--shadow-md);white-space:nowrap;
}
.fc-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.fc-name{font-family:'Syne',sans-serif;font-size:.78rem;font-weight:700;color:var(--dark)}
.fc-cat {
    font-size: .62rem;
    color: #424f61;
}
.fc-tag{font-size:.58rem;font-weight:700;padding:.1rem .4rem;border-radius:100px;text-transform:uppercase;letter-spacing:.04em;margin-left:.2rem}
.fc1{top:6%;left:2%;animation:floatC 5.5s ease-in-out infinite}
.fc2{top:20%;right:0%;animation:floatA 6.5s .5s ease-in-out infinite}
.fc3{top:49%;left:-4%;animation:floatB 5s 1s ease-in-out infinite}
.fc4{bottom:20%;right:2%;animation:floatC 6s .4s ease-in-out infinite}
.fc5{bottom:5%;left:10%;animation:floatA 7s .8s ease-in-out infinite}

/* ─────────────────────────────────────────
   SHARED SECTION CHROME
───────────────────────────────────────── */
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.sec-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:.3rem}
.sec-title{font-family:'Syne',sans-serif;font-size:clamp(1.3rem,2.5vw,1.75rem);font-weight:800;color:var(--dark);letter-spacing:-.02em;line-height:1.15}
.sec-title span{background:linear-gradient(90deg,var(--navy),var(--navy-l));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-sub{font-size:.95rem;color:var(--muted);margin-top:.3rem}
.sec-link{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-size:.825rem;font-weight:600;color:var(--navy);
  padding:.4rem 1rem;border-radius:100px;
  border:1.5px solid var(--border-blue);background:#fff;
  box-shadow:var(--shadow-sm);
  transition:all .15s;
}
.sec-link:hover{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:var(--shadow)}
.dark-section .sec-link{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.85);background:transparent}
.dark-section .sec-link:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ─────────────────────────────────────────
   SEARCH SECTION
───────────────────────────────────────── */
.search-section {
    background: white;
    padding: 2rem 0;
    border-top: 1px solid var(--border)
}

.search-box-wrap{max-width:640px;margin:0 auto 1.75rem;position:relative}
.search-icon-wrap{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);font-size:1rem;pointer-events:none;color:var(--muted)}
.search-input{
  width:100%;padding:.85rem 3rem .85rem 2.8rem;
  font-family:'Inter',sans-serif;font-size:.95rem;
  border:1.5px solid var(--border);border-radius:var(--radius-lg);
  background:#f8fafc;color:var(--text);outline:none;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.search-input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(43,59,171,.1);background:#fff}
.search-input::placeholder{color:var(--muted)}
.search-x{
  position:absolute;right:.85rem;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  background:#e2e8f0;border:none;font-size:.65rem;color:var(--sub);
  display:none;align-items:center;justify-content:center;transition:background .15s;
}
.search-x:hover{background:#cbd5e1}
.search-x.on{display:flex}

.cat-pills{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;margin-bottom:0.75rem}
.cpill {
    padding: .42rem 1.05rem;
    border-radius: 6px;
    background: var(--navy);
    border: none;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all .15s;
    box-shadow: 0 2px 6px rgba(43, 59, 171, .22);
}
.cpill:hover{border-color:var(--navy);color:var(--navy);background:rgba(43,59,171,.04)}
.cpill.on{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 3px 10px rgba(43,59,171,.28);font-weight:600}

/* toolbar */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;
  padding:.65rem 1rem;border-radius:var(--radius);
  border:1px solid white;background:#f8fafc;
  margin-bottom:1.25rem;
}
.toolbar-l,.toolbar-r{display:flex;align-items:center;gap:.5rem}
.tlabel {
    font-size: .75rem;
    color: #2b2d2f;
    font-weight: 500
}
.vbtn{
  width:32px;height:32px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:all .15s;
}
.vbtn svg{width:14px;height:14px;fill:currentColor}
.vbtn:hover{border-color:var(--navy);color:var(--navy)}
.vbtn.on{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 2px 8px rgba(43,59,171,.25)}
.tselect{
  padding:.32rem .65rem;border-radius:var(--radius-sm);
  border:1.5px solid var(--border);background:#fff;
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:500;color:var(--navy);
  outline:none;cursor:pointer;transition:border-color .15s;
}
.tselect:focus{border-color:var(--navy)}

.result-meta {
    text-align: center;
    font-size: .8rem;
    color: #2b2d2f;
    margin-bottom: 1.1rem;
    min-height: 1.2em
}
.result-meta strong{color:var(--navy)}

/* grid */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(275px,1fr));
    gap: 1.1rem
}
.tool-grid.gv-2{grid-template-columns:repeat(2,1fr)}
.tool-grid.gv-4{grid-template-columns:repeat(4,1fr)}
.tool-grid.gv-list{grid-template-columns:1fr;gap:.6rem}

.tc {
    background: #fff;
    border: 2px solid #4CAF50;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: transform .18s,box-shadow .18s,border-color .18s;
    animation: cardIn .25s ease both;
}
.tc:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(43,59,171,.2)}
.tc-top{display:flex;align-items:flex-start;gap:.85rem;margin-bottom:.9rem}
.tc-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.tc-name{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:700;color:var(--dark);line-height:1.2}
.tc-cat{font-size:.95rem;color:var(--muted);margin-top:.15rem;font-weight:500;text-align:left;}
.tc-tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.75rem}
.tc-tag{font-size:.6rem;font-weight:600;padding:.14rem .5rem;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}
.tc-desc {
    text-align: left;
    font-size: .95rem;
    color: var(--sub);
    line-height: 1.65;
}
.tc-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--border);
}
.tc-price{font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:.3rem}
.tc-link{font-size:.95rem;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:.2rem;transition:gap .15s}
.tc-link:hover{gap:.4rem}

/* list view */
.tool-grid.gv-list .tc{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem 1.1rem;padding:1rem 1.25rem}
.tool-grid.gv-list .tc-top{margin-bottom:0;grid-column:1;grid-row:1/3}
.tool-grid.gv-list .tc-mid{grid-column:2;grid-row:1;display:flex;align-items:center;gap:.6rem}
.tool-grid.gv-list .tc-tags{margin-bottom:0}
.tool-grid.gv-list .tc-desc{grid-column:2;grid-row:2;margin:0;font-size:.78rem}
.tool-grid.gv-list .tc-foot{grid-column:3;grid-row:1/3;border:none;margin:0;padding:0;flex-direction:column;align-items:flex-end;gap:.4rem}

/* pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:.35rem;margin-top:2rem;flex-wrap:wrap}
.pbtn{
  min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);border:1.5px solid var(--border);background:#fff;
  font-family:'Syne',sans-serif;font-size:.8rem;font-weight:700;color:var(--sub);
  padding:0 .4rem;transition:all .15s;
}
.pbtn:hover:not(:disabled){border-color:var(--navy);color:var(--navy);background:rgba(43,59,171,.04)}
.pbtn.on{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 2px 8px rgba(43,59,171,.28)}
.pbtn:disabled{opacity:.35;cursor:not-allowed}
.pdots{color:var(--muted);padding:0 .1rem;line-height:36px;font-size:.85rem}
.pinfo{text-align:center;font-size:.75rem;color:var(--muted);margin-top:.6rem}
.pinfo strong{color:var(--navy)}

.no-results{grid-column:1/-1;text-align:center;padding:4rem 2rem;display:none}
.no-results.on{display:block}
.no-results-icon{font-size:2.5rem;margin-bottom:.75rem}
.no-results h3{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;color:var(--dark);margin-bottom:.4rem}
.no-results p{color:var(--muted);font-size:.875rem}

/* ─────────────────────────────────────────
   LATEST AI SECTION
───────────────────────────────────────── */
.latest-section {
    background: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #44107A 100%);
    border-top: 1px solid var(--border)
}

.new-pill{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:#ff4757;color:#fff;padding:.12rem .45rem;border-radius:100px;
  box-shadow:0 2px 6px rgba(255,71,87,.35);
}
.new-dot{width:4px;height:4px;background:#fff;border-radius:50%;animation:newPulse 1.4s infinite}

.latest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.lc {
    background: rgba(255, 255, 255, .03);
    border: 3px solid #4CAF50;
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .18s,box-shadow .18s,border-color .18s;
    animation: cardIn .3s ease both;
}
.lc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--navy),var(--green-l));opacity:0;transition:opacity .18s}
.lc:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(43,59,171,.2)}
.lc:hover::before{opacity:1}
.lc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.7rem}
.lc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.lc-name {
    font-family: 'Syne', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}
.lc-cat {
    font-size: .95rem;
    color: #1be63c;
    margin-top: .1rem;
}
.lc-desc {
    display: flex;
    justify-content: space-between;
    font-size: .95rem;
    color: white;
    margin-bottom: .25rem;
}
.lc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:.85rem;padding-top:.7rem;border-top:1px solid var(--border)}
.lc-date {
    font-size: .95rem;
    color: white;
    margin-top: .1rem;
}
.lc-link {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: .15rem;
    transition: gap .15s;
}
.lc-link:hover{gap:.35rem}

/* ─────────────────────────────────────────
   FEATURED SECTION
───────────────────────────────────────── */
.featured-section{background:var(--bg);border-top:1px solid var(--border)}

.feat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;gap:1.1rem}

/* Hero featured card — spans 2 cols, 2 rows */
.feat-hero {
    grid-column: 1/3;
    grid-row: 1/3;
    background: #fff;
    border: 2px solid #4CAF50;
    border-radius: var(--radius-xl);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s;
}
.feat-hero:hover{box-shadow:var(--shadow-lg)}
.feat-hero-accent{
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--navy),var(--green-l));
}
.feat-hero-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.65rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:linear-gradient(90deg,#f59e0b,#fbbf24);color:#fff;
  padding:.2rem .6rem;border-radius:100px;
  box-shadow:0 2px 8px rgba(245,158,11,.3);margin-bottom:1.2rem;
}
.feat-hero-top{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.feat-hero-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.9rem;flex-shrink:0}
.feat-hero-name{font-family:'Syne',sans-serif;font-size:1.35rem;font-weight:800;color:var(--dark);line-height:1.1}
.feat-hero-cat{font-size:.75rem;color:var(--muted);margin-top:.2rem}
.feat-hero-desc {
    font-size: .95rem;
    color: var(--sub);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.feat-hero-stats{display:flex;gap:2rem;padding:1rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:1.25rem;margin-left:55px;}
.fhs-val{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;color:var(--navy);line-height:1}
.fhs-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-top:.2rem}
.feat-hero-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.25rem}
.fhtag{font-size:.65rem;font-weight:600;padding:.18rem .55rem;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}
.feat-hero-foot{display:flex;justify-content:space-between;align-items:center}
.feat-price{font-size:.78rem;font-weight:600}
.feat-btn{
  padding:.55rem 1.25rem;border-radius:var(--radius-sm);border:none;
  background:var(--navy);color:#fff;font-size:.82rem;font-weight:600;
  transition:background .15s,transform .15s;
}
.feat-btn:hover{background:var(--navy-d);transform:translateY(-1px)}

/* Small featured cards — right column */
.feat-sm {
    background: #fff;
    border: 2px solid #4CAF50;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: transform .18s,box-shadow .18s,border-color .18s;
}
.feat-sm:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(43,59,171,.2)}
.feat-sm-badge{
  position:absolute;top:.85rem;right:.85rem;
  font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.15rem .48rem;border-radius:100px;
}
.fb-hot{background:#fff1f2;color:#f43f5e;border:1px solid #fecdd3}
.fb-sp{background:#eff6ff;color:var(--navy);border:1px solid #bfdbfe}
.feat-sm-top{display:flex;align-items:center;gap:.85rem;margin-bottom:.75rem}
.feat-sm-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.feat-sm-name{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--dark)}
.feat-sm-cat{font-size:.95rem;color:var(--muted);margin-top:.1rem}
.feat-sm-desc {
    font-size: .95rem;
    color: var(--sub);
    line-height: 1.6;
    margin-bottom: .85rem;
}
.feat-sm-foot{display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;border-top:1px solid var(--border)}
.feat-sm-price{font-size:.95rem;font-weight:600}
.feat-sm-link{font-size:.95rem;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:.2rem;transition:gap .15s}
.feat-sm-link:hover{gap:.35rem}

/* CTA card */
.feat-cta{
  background:linear-gradient(140deg,var(--navy) 0%,var(--navy-l) 100%);
  border-radius:var(--radius-lg);padding:1.5rem;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:180px;border:none;
  transition:transform .18s,box-shadow .18s;
}
.feat-cta:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(43,59,171,.35)}
.feat-cta-icon{font-size:1.5rem;margin-bottom:.5rem}
.feat-cta h3{font-family:'Syne',sans-serif;font-size:1rem;font-weight:800;color:#fff;line-height:1.3;margin-bottom:.35rem}
.feat-cta p{font-size:.78rem;color:rgba(255,255,255,.65);line-height:1.6}
.feat-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: linear-gradient(to right, #FF512F 0%, #F09819 51%, #FF512F 100%);
    color: white;
    font-size: .78rem;
    font-weight: 700;
    padding: .45rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    margin-top: 1.1rem;
    transition: transform .15s;
    width: fit-content;
}
.feat-cta-btn:hover{transform:scale(1.03)}

/* ─────────────────────────────────────────
   SUPER TOOLS (dark)
───────────────────────────────────────── */
.super-section {
    background: linear-gradient(-225deg, #231557 0%, #231557 51%, #231557 100%, #231557 100%);
    border-top: 1px solid rgba(255,255,255,.05)
}
.dark-section .sec-eyebrow{color:var(--green-l)}
.dark-section .sec-title{color:#fff}
.dark-section .sec-sub{color:white;}

.super-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.sc {
    background: white;
    border: 3px solid #4CAF50;
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    cursor: pointer;
    transition: background .18s,border-color .18s,transform .18s;
    animation: cardIn .3s ease both;
}
  /*  .sc:hover {
        background: #4CAF50;
        border-color: rgba(125,200,50,.25);
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0,0,0,.3)
    }*/
.sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.sc-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.sc-rank{font-family:'Syne',sans-serif;font-size:.75rem;font-weight:800;color:white}
    .sc-rank.gold {
        color: white;
        text-shadow: 0 0 8px rgba(251,191,36,.4)
    }
    .sc-rank.silver {
        color: white
    }
    .sc-rank.bronze {
        color: white
    }
.sc-name{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:700;color:black}
.sc-cat{font-size:.95rem;color:black;margin-top:.1rem}
.sc-bar-wrap{margin-top:.85rem}
.sc-bar-lbl{display:flex;justify-content:space-between;font-size:.62rem;color:black;margin-bottom:.25rem}
.sc-bar-track{height:3px;background:black;border-radius:2px;overflow:hidden}
.sc-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--navy-l),var(--green-l))}
.sc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.06)}
.sc-price{font-size:.95rem;font-weight:600}
.sc-link{font-size:1rem;font-weight:600;color:white;display:flex;align-items:center;gap:.15rem;transition:gap .15s}
.sc-link:hover{gap:.3rem}

/* ─────────────────────────────────────────
   ALL CATEGORIES
───────────────────────────────────────── */
/*.cats-section{background:#fff;border-top:1px solid var(--border)}
.cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.2rem}
.catc {
    background: #cfd8ff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.2rem;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform .18s,box-shadow .18s,border-color .18s,background .18s;
    animation: cardIn .3s ease both;
}
.catc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(43,59,171,.2);background:#fff}
.catc-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:.75rem;transition:transform .2s}
.catc:hover .catc-icon{transform:scale(1.1) rotate(-3deg)}
.catc-name{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--dark)}
.catc-count{font-size:.95rem;color:var(--muted);margin-top:.2rem}
.catc-desc{font-size:.73rem;color:var(--sub);line-height:1.5;margin-top:.45rem}
.catc-arrow{font-size:.72rem;font-weight:600;color:var(--navy);margin-top:.8rem;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.catc:hover .catc-arrow{opacity:1;transform:translateX(0)}
.catc.catc-feat{background:linear-gradient(140deg,var(--navy),var(--navy-l));border-color:transparent}
.catc.catc-feat .catc-name{color:#fff}
.catc.catc-feat .catc-count{color:rgba(255,255,255,.55)}
.catc.catc-feat .catc-desc{color:rgba(255,255,255,.6)}
.catc.catc-feat .catc-arrow{color:var(--green-l)}*/

/* ─────────────────────────────────────────
   ABOUT SECTION
───────────────────────────────────────── */
.about-section{background:var(--bg);border-top:1px solid var(--border)}

/* Top split: intro + mission visual */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-bottom:4rem}
.about-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);background:rgba(43,59,171,.07);border:1px solid rgba(43,59,171,.15);border-radius:100px;padding:.28rem .85rem;margin-bottom:1.1rem}
.about-h2{font-family:'Syne',sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:var(--dark);letter-spacing:-.03em;line-height:1.1;margin-bottom:1rem}
.about-h2 span{background:linear-gradient(90deg,var(--navy),var(--navy-l));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.about-lead{font-size:1rem;color:var(--sub);line-height:1.8;margin-bottom:1.5rem}
.about-lead strong{color:var(--dark);font-weight:600}
.about-body{font-size:.9rem;color:var(--sub);line-height:1.8;margin-bottom:1.75rem}
.about-ctas{display:flex;gap:.75rem;flex-wrap:wrap}
.about-btn-primary{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.4rem;border-radius:var(--radius);border:none;background:var(--navy);color:#fff;font-size:.875rem;font-weight:600;box-shadow:0 3px 12px rgba(43,59,171,.28);transition:background .15s,transform .15s}
.about-btn-primary:hover{background:var(--navy-d);transform:translateY(-1px)}
.about-btn-outline{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.25rem;border-radius:var(--radius);border:1.5px solid var(--border-blue);background:#fff;color:var(--navy);font-size:.875rem;font-weight:600;transition:all .15s;box-shadow:var(--shadow-sm)}
.about-btn-outline:hover{border-color:var(--navy);box-shadow:var(--shadow);transform:translateY(-1px)}

/* Visual card stack on the right */
.about-visual{position:relative;height:360px}
.about-card{position:absolute;background:#fff;border-radius:var(--radius-lg);border:1.5px solid var(--border);box-shadow:var(--shadow-md);padding:1.25rem 1.4rem}
.about-card-main{top:0;left:0;right:0;z-index:3}
.about-card-back1{top:12px;left:10px;right:-10px;z-index:2;opacity:.6;transform:rotate(1.5deg)}
.about-card-back2{top:22px;left:18px;right:-18px;z-index:1;opacity:.35;transform:rotate(3deg)}
.acard-top{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.acard-icon{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;background:linear-gradient(135deg,rgba(43,59,171,.1),rgba(95,168,30,.1))}
.acard-title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:800;color:var(--dark)}
.acard-sub{font-size:.72rem;color:var(--muted);margin-top:.1rem}
.acard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem}
.acard-stat{background:var(--bg);border-radius:var(--radius-sm);padding:.6rem .5rem;text-align:center}
.acard-stat-n{font-family:'Syne',sans-serif;font-size:1rem;font-weight:800;color:var(--navy)}
.acard-stat-l{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.1rem}
.acard-bar-label{font-size:.68rem;color:var(--muted);margin-bottom:.35rem}
.acard-bar-wrap{display:flex;flex-direction:column;gap:.4rem}
.acard-bar-row{display:flex;align-items:center;gap:.6rem;font-size:.65rem;color:var(--muted)}
.acard-bar-row span:first-child{width:60px;flex-shrink:0}
.acard-track{flex:1;height:5px;background:#e2e8f0;border-radius:3px;overflow:hidden}
.acard-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--navy-l),var(--green-l))}

/* Values row */
.about-values{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:4rem}
.val-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:1.4rem 1.2rem;transition:transform .18s,box-shadow .18s,border-color .18s;animation:cardIn .3s ease both}
.val-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(43,59,171,.18)}
.val-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.85rem}
.val-title{font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;color:var(--dark);margin-bottom:.4rem}
.val-desc{font-size:.8rem;color:var(--sub);line-height:1.65}

/* Team row */
.about-team-label{font-family:'Syne',sans-serif;font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.1rem}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.tm{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:1.4rem 1.2rem;text-align:center;transition:transform .18s,box-shadow .18s;animation:cardIn .3s ease both}
.tm:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.tm-avatar{width:56px;height:56px;border-radius:50%;margin:0 auto .85rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;border:2px solid var(--border)}
.tm-name{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:700;color:var(--dark)}
.tm-role{font-size:.72rem;color:var(--muted);margin-top:.2rem}
.tm-links{display:flex;justify-content:center;gap:.5rem;margin-top:.75rem}
.tm-lnk{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--muted);transition:all .15s}
.tm-lnk:hover{border-color:var(--navy);color:var(--navy);background:rgba(43,59,171,.05)}

/* Press/trust bar */
.about-trust{background:#fff;border-radius:var(--radius-xl);border:1.5px solid var(--border);padding:2rem 2.4rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:3rem;box-shadow:var(--shadow-sm)}
.trust-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;padding-right:2rem;border-right:1px solid var(--border)}
.trust-logos{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;flex:1}
.trust-logo{font-size:.85rem;font-weight:700;color:#c0cce0;letter-spacing:.02em;transition:color .2s}
.trust-logo:hover{color:var(--navy)}

@media(max-width:900px){
    .nav-links, .nav-cta {
        display: none
    }

    .nav-burger {
        display: flex
    }

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

    .stat-item:nth-child(2) {
        border-right: none
    }

    .stat-item:nth-child(3) {
        border-top: 1px solid var(--border);
        border-right: 1px solid var(--border)
    }

    .stat-item:nth-child(4) {
        border-top: 1px solid var(--border);
        border-right: none
    }

    .steps {
        grid-template-columns: 1fr 1fr;
        gap: 2rem
    }

        .steps::before {
            display: none
        }

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

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

    .req-layout {
        grid-template-columns: 1fr
    }

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

    .faq-grid {
        grid-template-columns: 1fr
    }
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 3rem 1.5rem 2rem
    }

    .hero-bg {
        display: none
    }

    .hero-right {
        display: none
    }

    .nav-links, .nav-search-btn {
        display: none
    }

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

    .feat-hero {
        grid-column: 1;
        grid-row: auto
    }

    .super-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .cats-grid {
        grid-template-columns: repeat(1,1fr) !important;
    }

    .tool-grid.gv-4, .tool-grid.gv-2 {
        grid-template-columns: 1fr
    }
  .about-split{grid-template-columns:1fr;gap:2rem}
  .about-visual{display:none}
  .about-values{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .nav-burger {
        display: flex !important;
    }
    .nav-cta{
        display:none !important;
    }
    .nav-user {
        display: none !important;
    }
    .steps {
        grid-template-columns: 1fr 1fr;
        gap: 2rem
    }

        .steps::before {
            display: none
        }
    .footer-links1{
        display:none;
    }
}
@media(max-width:600px){
    .imageserch {
        width: 30%;
    }
    .container {
        padding: 0 1.1rem
    }
    .tool-grid {
        grid-template-columns: 1fr
    }
    .stat-grid {
        grid-template-columns: 1fr
    }

    .stat-item {
        border-right: none;
        border-bottom: 1px solid var(--border)
    }

        .stat-item:last-child {
            border-bottom: none
        }

    .steps {
        grid-template-columns: 1fr !important;
    }

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

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

    .cta-box {
        padding: 2.75rem 1.5rem
    }
    .steps {
        grid-template-columns: 1fr;
    }
    .container {
        padding: 10px 1.1rem
    }

    .hero-stats {
        gap: 0;
        flex-wrap: wrap
    }

    .hero-stat {
        padding-right: 1.25rem;
        margin-right: 1.25rem
    }

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

    .cats-grid {
        grid-template-columns: repeat(1,1fr) !important;
    }
  .about-values{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .about-trust{flex-direction:column;align-items:flex-start;gap:1rem}
  .trust-label{border-right:none;padding-right:0;border-bottom:1px solid var(--border);padding-bottom:.75rem;width:100%}
  .nav-burger {
        display: flex !important;
    }
    .nav-cta {
        display: none !important;
    }
    .nav-user {
        display: none !important;
    }
    .footer-links1 {
        display: none;
    }
    .footer-left {
        display: none;
    }
}

/* ─────────────────────────────────────────
   REVIEWS SECTION
───────────────────────────────────────── */
.rev-section {
    margin: 2.5rem 0 2rem
}

.rev-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.1rem
}

.rsh-left {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap
}

.rsh-eyebrow {
    font-family: 'Syne',sans-serif;
    font-size: .8rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em
}

.rsh-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: linear-gradient(135deg,#fef9c3,#fefce8);
    border: 1.5px solid #fde68a;
    border-radius: 100px;
    padding: .28rem .85rem
}

.rsh-pill-score {
    font-family: 'Syne',sans-serif;
    font-size: .88rem;
    font-weight: 800;
    color: #92400e
}

.rsh-pill-stars {
    font-size: .65rem;
    color: #f59e0b;
    letter-spacing: .08em
}

.rsh-pill-count {
    font-size: .68rem;
    color: #a16207;
    font-weight: 500
}

.rsh-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap
}

.btn-all-reviews {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .38rem .85rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border-blue);
    background: rgba(43,59,171,.04);
    font-size: .78rem;
    font-weight: 600;
    color: var(--navy);
    transition: all .15s;
    cursor: pointer
}

    .btn-all-reviews:hover {
        background: rgba(43,59,171,.09);
        border-color: var(--navy)
    }

.btn-write-rev {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .38rem .85rem;
    border-radius: var(--radius);
    border: none;
    background: linear-gradient(135deg,#5fa81e,#7DC832);
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 8px rgba(95,168,30,.3);
    transition: all .15s;
    cursor: pointer
}

    .btn-write-rev:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(95,168,30,.38)
    }

/* Rating summary */
.rev-summary {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--shadow-sm)
}

.rs-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1.5rem;
    border-right: 1px solid var(--border);
    flex-shrink: 0
}

.rs-num {
    font-family: 'Syne',sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1
}

.rs-stars {
    display: flex;
    gap: .18rem;
    margin: .3rem 0
}

.rs-star {
    font-size: .85rem;
    color: #f59e0b
}

    .rs-star.e {
        opacity: .22
    }

.rs-label {
    font-size: .68rem;
    color: var(--muted)
}

.rs-bars {
    display: flex;
    flex-direction: column;
    gap: .38rem;
    flex: 1;
    min-width: 150px
}

.rsb-row {
    display: flex;
    align-items: center;
    gap: .5rem
}

.rsb-lbl {
    font-size: .67rem;
    font-weight: 600;
    color: var(--sub);
    width: 12px;
    text-align: right;
    flex-shrink: 0
}

.rsb-track {
    flex: 1;
    height: 6px;
    background: var(--bg);
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid var(--border)
}

.rsb-fill {
    height: 100%;
    border-radius: 100px
}

.rsb-pct {
    font-size: .62rem;
    color: var(--muted);
    width: 26px;
    text-align: right;
    flex-shrink: 0
}

.rs-subs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem .9rem;
    margin-left: auto;
    flex-shrink: 0
}

.rs-sub {
    display: flex;
    align-items: center;
    gap: .4rem
}

.rs-sub-lbl {
    font-size: .69rem;
    color: var(--sub);
    white-space: nowrap
}

.rs-sub-stars {
    display: flex;
    gap: .06rem
}

.rs-sub-star {
    font-size: .64rem;
    color: #f59e0b
}

    .rs-sub-star.e {
        opacity: .22
    }

.rs-sub-score {
    font-size: .69rem;
    font-weight: 700;
    color: var(--dark)
}

/* Review cards */
.rev-list {
    display: flex;
    flex-direction: column;
    gap: .85rem
}

.rc {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.2rem 1.35rem;
    transition: border-color .15s,box-shadow .15s
}

    .rc:hover {
        border-color: rgba(43,59,171,.18);
        box-shadow: var(--shadow)
    }

    .rc.rc-top {
        border-color: rgba(43,59,171,.2);
        background: linear-gradient(135deg,#fafbff,#fff)
    }

        .rc.rc-top::before {
            content: '⭐ Top Review';
            font-size: .59rem;
            font-weight: 700;
            letter-spacing: .07em;
            text-transform: uppercase;
            background: var(--navy);
            color: #fff;
            padding: .18rem .6rem;
            border-radius: 100px;
            display: inline-block;
            margin-bottom: .8rem
        }

.rc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem
}

.rc-user {
    display: flex;
    align-items: center;
    gap: .7rem
}

.rc-av {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 700;
    color: #fff
}

.rc-uname {
    font-size: .84rem;
    font-weight: 700;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: .38rem;
    flex-wrap: wrap
}

.rc-vbadge {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    padding: .1rem .42rem;
    border-radius: 100px
}

.rc-urole {
    font-size: .68rem;
    color: var(--muted);
    margin-top: .04rem
}

.rc-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .26rem;
    flex-shrink: 0
}

.rc-star-row {
    display: flex;
    gap: .13rem
}

.rc-star {
    font-size: .88rem;
    color: #f59e0b
}

    .rc-star.e {
        opacity: .2
    }

.rc-date {
    font-size: .65rem;
    color: var(--muted)
}

.rc-plan {
    font-size: .62rem;
    font-weight: 600;
    padding: .14rem .48rem;
    border-radius: 100px;
    background: #eff6ff;
    color: var(--navy);
    border: 1px solid #bfdbfe
}

.rc-title {
    font-family: 'Syne',sans-serif;
    font-size: .9rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: .4rem;
    line-height: 1.3
}

.rc-body {
    font-size: .8rem;
    color: var(--sub);
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

    .rc-body.open {
        -webkit-line-clamp: unset;
        overflow: visible
    }

.rc-more {
    font-size: .73rem;
    color: var(--navy);
    font-weight: 600;
    cursor: pointer;
    margin-top: .32rem;
    display: inline-block
}

    .rc-more:hover {
        text-decoration: underline
    }

.rc-procon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .8rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border)
}

.rc-pros {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius);
    padding: .55rem .7rem
}

.rc-cons {
    background: #fff5f5;
    border: 1px solid #fecdd3;
    border-radius: var(--radius);
    padding: .55rem .7rem
}

.rpc-h {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .35rem
}

.rc-pros .rpc-h {
    color: #16a34a
}

.rc-cons .rpc-h {
    color: #ef4444
}

.rpc-ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .2rem
}

    .rpc-ul li {
        font-size: .71rem;
        color: var(--sub);
        display: flex;
        align-items: flex-start;
        gap: .32rem;
        line-height: 1.4
    }

.rc-pros .rpc-ul li::before {
    content: '✓';
    color: #16a34a;
    font-weight: 700;
    flex-shrink: 0
}

.rc-cons .rpc-ul li::before {
    content: '✗';
    color: #ef4444;
    font-weight: 700;
    flex-shrink: 0
}

.rc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .8rem;
    padding-top: .72rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: .5rem
}

.rc-tags {
    display: flex;
    gap: .28rem;
    flex-wrap: wrap
}

.rc-tag {
    font-size: .62rem;
    font-weight: 500;
    padding: .14rem .5rem;
    border-radius: 100px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--sub)
}

.rc-helpful {
    display: flex;
    align-items: center;
    gap: .42rem;
    margin-left: auto
}

.rc-hlabel {
    font-size: .7rem;
    color: var(--muted)
}

.rc-hbtn {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .26rem .62rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: .7rem;
    font-weight: 500;
    color: var(--sub);
    transition: all .15s;
    cursor: pointer
}

    .rc-hbtn:hover, .rc-hbtn.voted {
        border-color: var(--green);
        color: var(--green);
        background: #f0fdf4
    }

    .rc-hbtn.dn:hover, .rc-hbtn.dn.voted {
        border-color: #ef4444;
        color: #ef4444;
        background: #fff5f5
    }

.rev-view-all {
   
    text-align: center;
    margin-top: 1.1rem
}

    .rev-view-all a {
        /*border: 3px solid #4CAF50;*/
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .62rem 1.5rem;
        border-radius: var(--radius);
        /*background: linear-gradient(to right, #FF512F 0%, #F09819 51%, #FF512F 100%);*/
        font-size: .83rem;
        font-weight: 600;
        color: white;
        box-shadow: var(--shadow-sm);
        transition: all .15s
    }

        .rev-view-all a:hover {
            border-color: var(--navy);
            color: white;
            /*background: linear-gradient(to right, #FF512F 0%, #F09819 51%, #FF512F 100%);*/
        }

@media(max-width:900px) {
    .rs-subs {
        display: none
    }

    .rc-procon {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {
    .imageserch {
        width: 30%;
    }
    .rev-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem
    }

    .rs-big {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: .75rem;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        width: 100%
    }
}

/* ─── NAV USER AVATAR ─── */
.nav-user {
    position: relative
}
.nav-user1 {
    position: relative
}
.nav-avatar-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .65rem .35rem .35rem;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s,box-shadow .15s;
    font-family: 'Inter',sans-serif;
}

    .nav-avatar-btn:hover {
        border-color: var(--navy);
        box-shadow: 0 2px 8px rgba(43,59,171,.12)
    }

.nav-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg,var(--navy),var(--navy-l));
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .03em;
}

.nav-avatar-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--dark)
}

.nav-avatar-btn svg {
    color: var(--muted);
    transition: transform .18s
}

.nav-avatar-btn.open svg {
    transform: rotate(180deg)
}

/* ─── USER DROPDOWN ─── */
.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 16px 48px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06);
    z-index: 999;
    display: none;
    animation: fadeDropdown .18s ease both;
    overflow: hidden;
}

    .user-dropdown.open {
        display: block
    }

@keyframes fadeDropdown {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }

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

.ud-header {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.1rem 1.1rem .9rem;
    background: linear-gradient(135deg,#eef2ff,#f0fdf4);
    border-bottom: 1px solid var(--border);
}

.ud-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg,var(--navy),var(--navy-l));
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(43,59,171,.28);
}

.ud-name {
    font-family: 'Syne',sans-serif;
    font-size: .9rem;
    font-weight: 800;
    color: var(--dark)
}

.ud-email {
    font-size: .7rem;
    color: var(--muted);
    margin-top: .05rem
}

.ud-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    padding: .12rem .45rem;
    border-radius: 100px;
    margin-top: .28rem;
}

.ud-stats {
    display: flex;
    justify-content: space-around;
    padding: .75rem 1rem;
}

.ud-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .08rem
}

    .ud-stat strong {
        font-family: 'Syne',sans-serif;
        font-size: .95rem;
        font-weight: 800;
        color: var(--dark)
    }

    .ud-stat span {
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--muted)
    }

.ud-divider {
    height: 1px;
    background: var(--border)
}

.ud-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .58rem 1.1rem;
    font-size: .82rem;
    color: var(--sub);
    transition: background .12s,color .12s;
}

    .ud-item span:first-child {
        font-size: .95rem;
        width: 18px;
        text-align: center;
        flex-shrink: 0
    }

    .ud-item:hover {
        background: #f7f9fc;
        color: var(--navy)
    }

.ud-item-danger {
    color: #ef4444
}

    .ud-item-danger:hover {
        background: #fff5f5;
        color: #dc2626
    }

.ud-notif {
    margin-left: auto;
    background: var(--navy);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    padding: .1rem .42rem;
    border-radius: 100px;
}

/* ─── LOGIN MODAL ─── */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(14,20,34,.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}

    .login-overlay.open {
        opacity: 1;
        pointer-events: all
    }

.login-box {
    background: #fff;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 64px rgba(0,0,0,.15);
    transform: translateY(22px) scale(.97);
    opacity: 0;
    transition: transform .25s ease,opacity .25s ease;
    overflow: hidden;
}

.login-overlay.open .login-box {
    transform: translateY(0) scale(1);
    opacity: 1
}

.lb-top {
    background: linear-gradient(135deg,#1e2c82,#2B3BAB);
    padding: 1.5rem 1.5rem 1.25rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.lb-title {
    font-family: 'Syne',sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff
}

.lb-sub {
    font-size: .75rem;
    color: rgba(255,255,255,.6);
    margin-top: .2rem
}

.lb-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background .15s;
}

    .lb-close:hover {
        background: rgba(255,255,255,.2)
    }

.lb-body {
    padding: 1.4rem 1.5rem 1.5rem
}

/* Social buttons */
.lb-social {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: 1.1rem
}

.lb-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: 100%;
    padding: .65rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: .84rem;
    font-weight: 500;
    color: var(--dark);
    transition: border-color .15s,background .15s,box-shadow .15s;
    cursor: pointer;
}

    .lb-social-btn:hover {
        border-color: #c7d2fe;
        background: #fafbff;
        box-shadow: 0 2px 8px rgba(0,0,0,.06)
    }

    .lb-social-btn svg {
        width: 17px;
        height: 17px;
        flex-shrink: 0
    }

    .lb-social-btn.github {
        border-color: #24292f;
        color: #24292f
    }

        .lb-social-btn.github:hover {
            background: #24292f;
            color: #fff
        }

.lb-divider {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.1rem;
    font-size: .72rem;
    color: var(--muted)
}

    .lb-divider::before, .lb-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border)
    }

/* Fields */
.lb-field {
    margin-bottom: .9rem
}

.lb-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: .35rem
}

.lb-input-wrap {
    position: relative
}

.lb-input {
    width: 100%;
    padding: .62rem .85rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: 'Inter',sans-serif;
    font-size: .855rem;
    color: var(--text);
    background: #f8fafc;
    outline: none;
    transition: border-color .15s,box-shadow .15s;
}

    .lb-input:focus {
        border-color: var(--navy);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(43,59,171,.09)
    }

    .lb-input::placeholder {
        color: #c4c9d4
    }

    .lb-input.has-icon {
        padding-left: 2.4rem
    }

    .lb-input.error {
        border-color: #ef4444;
        background: #fff5f5
    }

.lb-icon {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .9rem;
    pointer-events: none
}

.lb-pw-toggle {
    position: absolute;
    right: .8rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: .82rem;
    color: var(--muted);
    transition: color .15s;
    padding: 0;
}

    .lb-pw-toggle:hover {
        color: var(--navy)
    }

.lb-input.has-right {
    padding-right: 2.4rem
}

.lb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .9rem
}

.lb-check-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .76rem;
    color: var(--sub)
}

    .lb-check-row input {
        accent-color: var(--navy);
        width: 14px;
        height: 14px;
        cursor: pointer
    }

.lb-forgot {
    font-size: .76rem;
    color: var(--navy);
    font-weight: 500
}

    .lb-forgot:hover {
        text-decoration: underline
    }

.lb-err {
    font-size: .68rem;
    color: #ef4444;
    margin-top: .28rem;
    display: none
}

    .lb-err.show {
        display: block
    }

.lb-submit {
    width: 100%;
    padding: .75rem;
    border-radius: var(--radius);
    border: none;
    background: linear-gradient(135deg,var(--navy),var(--navy-l));
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(43,59,171,.3);
    transition: transform .15s,box-shadow .15s,opacity .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

    .lb-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(43,59,171,.38)
    }

    .lb-submit.loading {
        opacity: .75;
        pointer-events: none
    }

.lb-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.lb-submit.loading .lb-spinner {
    display: block
}

.lb-submit.loading .lb-btn-label {
    display: none
}

.lb-footer {
    text-align: center;
    font-size: .72rem;
    color: var(--muted);
    margin-top: .85rem
}

    .lb-footer a {
        color: var(--navy);
        font-weight: 500
    }

        .lb-footer a:hover {
            text-decoration: underline
        }

/* Tab switcher inside modal */
.lb-tabs {
    display: flex;
    background: #f7f9fc;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: .25rem;
    gap: .2rem;
    margin-bottom: 1.1rem
}

.lb-tab {
    flex: 1;
    padding: .48rem;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    font-size: .82rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all .18s;
    font-family: 'Inter',sans-serif
}

    .lb-tab.active {
        background: #fff;
        color: var(--navy);
        font-weight: 700;
        box-shadow: var(--shadow-sm)
    }

.lb-panel {
    display: none
}

    .lb-panel.active {
        display: block
    }


/* ─── BURGER BUTTON ─── */
.nav-burger {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s,background .15s;
}

    .nav-burger:hover {
        border-color: var(--navy);
        background: #f0f4ff
    }

    .nav-burger svg {
        width: 18px;
        height: 18px;
        stroke: var(--sub);
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        transition: stroke .15s
    }

    .nav-burger:hover svg {
        stroke: var(--navy)
    }
    /* hide X by default, show hamburger */
    .nav-burger .icon-close {
        display: none
    }

    .nav-burger .icon-menu {
        display: block
    }

    .nav-burger.open .icon-close {
        display: block
    }

    .nav-burger.open .icon-menu {
        display: none
    }

/* ─── MOBILE MENU DRAWER ─── */
.mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 199;
    background: rgba(14,20,34,.35);
    backdrop-filter: blur(4px);
}

    .mobile-menu.open {
        display: block
    }

.mobile-menu-panel {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem 1.5rem;
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    transform: translateY(-8px);
    opacity: 0;
    transition: transform .22s ease,opacity .22s ease;
}

.mobile-menu.open .mobile-menu-panel {
    transform: translateY(0);
    opacity: 1;
}
/* mobile logo row inside drawer */
.mm-logo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .9rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--border);
}

    .mm-logo-row img {
        height: 110px;
        width: auto;
        object-fit: contain
    }

.mm-close-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
}

    .mm-close-btn:hover {
        border-color: var(--navy);
        background: #f0f4ff
    }

    .mm-close-btn svg {
        width: 14px;
        height: 14px;
        stroke: var(--sub);
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round
    }
/* nav links stacked */
.mm-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-bottom: 1rem
}

    .mm-links a {
        display: flex;
        align-items: center;
        gap: .55rem;
        padding: .6rem .75rem;
        border-radius: var(--radius-sm);
        font-size: .9rem;
        font-weight: 500;
        color: var(--sub);
        transition: color .15s,background .15s;
    }

        .mm-links a:hover {
            color: var(--navy);
            background: rgba(43,59,171,.05)
        }

        .mm-links a svg {
            width: 15px;
            height: 15px;
            stroke: currentColor;
            stroke-width: 1.8;
            fill: none;
            stroke-linecap: round;
            flex-shrink: 0;
            opacity: .6
        }
/* search + cta row */
.mm-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border)
}

.mm-search-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .6rem .9rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: #f8fafc;
    font-size: .85rem;
    color: var(--muted);
    transition: border-color .15s;
    text-align: left;
}

    .mm-search-btn:hover {
        border-color: var(--navy);
        color: var(--navy)
    }

.mm-cta {
    width: 100%;
    padding: .65rem 1.25rem;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--navy);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(43,59,171,.3);
    transition: background .15s,box-shadow .15s;
}

    .mm-cta:hover {
        background: var(--navy-d);
        box-shadow: 0 4px 14px rgba(43,59,171,.38)
    }

/* ─── HOW IT WORKS ─── */
.how-section {
    background: white;
}

.steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    position: relative;
    margin-top: 2rem
}

    .steps::before {
        content: '';
        position: absolute;
        top: 35px;
        left: calc(12.5% + 16px);
        right: calc(12.5% + 16px);
        height: 2px;
        background: linear-gradient(90deg,var(--navy-l),var(--green-l));
        border-radius: 2px;
        z-index: 0;
    }

.step {
    margin-top:15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.1rem;
    position: relative;
    z-index: 1
}

.step-bubble {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    background: var(--white);
    border: 2.5px solid var(--border);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.2rem;
    flex-shrink: 0;
    transition: all .22s;
    position: relative;
}

.step:hover .step-bubble {
    border-color: var(--navy);
    box-shadow: 0 0 0 6px rgba(43,59,171,.07),var(--shadow)
}

.step-n {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white)
}

.step-title {
    font-family: 'Syne',sans-serif;
    font-size: .9rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: .38rem
}

.step-desc {
    font-size: .95rem;
    color: var(--sub);
    line-height: 1.7
}

.step-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .6rem;
    font-size: .63rem;
    font-weight: 700;
    padding: .17rem .52rem;
    border-radius: 100px
}

    .step-tag.g {
        background: rgb(38 58 174);
        color: #ffffff;
    }

    .step-tag.n {
        background: #4CAF50;
        color: #ffffff;
    }

    .step-tag.a {
        background: #F44336;
        color: #ffffff;
    }
/* ─── SHARED SECTION STYLES ─── */
.section {
    padding: 3rem 0
}

.eyebrow {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--navy);
    margin-bottom: .5rem
}

.sec-title {
    font-family: 'Syne',sans-serif;
    font-size: clamp(1.6rem,2.8vw,2.2rem);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--dark);
    line-height: 1.18
}

    .sec-title span {
        background: linear-gradient(90deg,var(--navy),var(--navy-l));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
    }



.center-head {
    text-align: center;
    margin-bottom: 1rem
}

    .center-head .sec-sub {
        margin-left: auto;
        margin-right: auto
    }

.view-all-cats-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.6rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border-blue);
    background: rgb(76, 175, 80) !important;
    color: rgb(238 233 232) !important;
    font-size: .875rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all .18s;
    box-shadow: 0 2px 8px rgba(43, 59, 171, .08);
}

/* ─────────────────────────────────────────
   RECENT REVIEWS SECTION
───────────────────────────────────────── */
.reviews-section {
    background: linear-gradient(-225deg, #231557 0%, #231557 51%, #231557 100%, #231557 100%);
    border-top: 1px solid var(--border)
}

.reviews-track-outer {
    overflow: hidden
}

.reviews-track {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: 2fr 2fr;
    gap: 1rem;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.rv-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    transition: box-shadow .18s,transform .18s,border-color .18s;
    min-width: 0;
}

    .rv-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
        border-color: rgba(43,59,171,.15)
    }

.rv-top {
    display: flex;
    align-items: center;
    gap: .65rem
}

.rv-av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.rv-name {
    font-size: .82rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2
}

.rv-stars {
    display: flex;
    gap: 2px;
    margin-top: .2rem
}

.rv-star {
    font-size: 1.3rem
}

    .rv-star.filled {
        color: #4CAF50
    }

    .rv-star.empty {
        color: #e2e8f0
    }

.rv-body {
    font-size: .95rem;
    color: var(--sub);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.rv-foot {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-top: .65rem;
    border-top: 1px solid var(--border);
    margin-top: auto
}

.rv-brand-ico {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0
}

.rv-brand-name {
    font-size: .74rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.2
}

.rv-brand-url {
    font-size: .64rem;
    color: var(--muted);
    margin-top: .04rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px
}

.rv-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
}

    .rv-btn:hover {
        border-color: var(--navy);
        background: var(--navy)
    }

        .rv-btn:hover svg {
            stroke: #fff
        }

    .rv-btn:disabled {
        opacity: .32;
        cursor: not-allowed;
        pointer-events: none
    }

    .rv-btn svg {
        width: 14px;
        height: 14px;
        stroke: var(--sub);
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.rv-dots {
    display: flex;
    gap: .38rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem
}

.rv-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: all .2s;
    cursor: pointer;
    border: none;
    padding: 0
}

    .rv-dot.on {
        background: var(--navy);
        width: 18px;
        border-radius: 3px
    }
@media(max-width:900px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 3rem 1.5rem 2rem
    }

    .rv-card {
        min-height: 0
    }

    .hero-bg {
        display: none
    }

    .hero-right {
        display: none
    }

    .nav-links, .nav-search-btn {
        display: none
    }

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

    .feat-hero {
        grid-column: 1;
        grid-row: auto
    }

    .super-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .cats-grid {
        grid-template-columns: repeat(1,1fr) !important;
    }

    .tool-grid.gv-4, .tool-grid.gv-2 {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {
    .container {
        padding: 0 1.1rem
    }

    .rv-card {
        min-height: 0
    }

    .hero-stats {
        gap: 0;
        flex-wrap: wrap
    }

    .hero-stat {
        padding-right: 1.25rem;
        margin-right: 1.25rem
    }

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

    .cats-grid {
        grid-template-columns: repeat(1,1fr) !important;
    }
    .imageserch {
        width: 30% !important;
    }
}

@media(max-width:900px) {
    .rs-subs {
        display: none
    }

    .rc-procon {
        grid-template-columns: 1fr
    }
    .front-info img {
        width: 30%;
    }
}

@media(max-width:600px) {
    .rev-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem
    }

    .rs-big {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: .75rem;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        width: 100%
    }
    .imageserch {
        width: 30%;
    }
}

/* ─────────────────────────────────────────
   FAQ SECTION
───────────────────────────────────────── */
.faq-section {
    background: linear-gradient(45deg, rgb(255, 224, 223) 0%, rgb(255, 232, 219) 5%, rgb(255, 239, 215) 10%, rgb(255, 246, 212) 15%, rgb(255, 252, 209) 20%, rgb(255, 255, 208) 25%, rgb(255, 255, 206) 30%, rgb(255, 255, 206) 35%, rgb(255, 255, 206) 40%, rgb(255, 255, 207) 45%, rgb(255, 255, 209) 50%, rgb(255, 255, 212) 55%, rgb(255, 255, 215) 60%, rgb(255, 252, 219) 65%, rgb(252, 247, 223) 70%, rgb(243, 240, 228) 75%, rgb(235, 233, 233) 80%, rgb(227, 225, 239) 85%, rgb(220, 216, 244) 90%, rgb(212, 207, 250) 95%, rgb(206, 198, 255) 100%);
    border-top: 1px solid var(--border);
    padding: 3rem 0
}

.faq-layout {
    display: grid;
    grid-template-columns: 1fr 1.65fr;
    gap: 4rem;
    align-items: start
}

.faq-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--navy);
    margin-bottom: .55rem
}

.faq-h2 {
    font-family: 'Syne',sans-serif;
    font-size: clamp(1.7rem,3vw,2.2rem);
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -.028em;
    line-height: 1.14;
    margin-bottom: .9rem
}

    .faq-h2 span {
        background: linear-gradient(90deg,var(--navy),var(--navy-l));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
    }

.faq-desc {
    font-size: .95rem;
    color: var(--sub);
    line-height: 1.8;
    margin-bottom: 1.75rem
}

.faq-contact-card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.faq-contact-lbl {
    font-size: .62rem;
    font-weight: 800;
    color: black;
    text-transform: uppercase;
    letter-spacing: .08em
}

.faq-contact-title {
    font-family: 'Syne',sans-serif;
    font-size: .88rem;
    font-weight: 800;
    color: var(--dark)
}

.faq-contact-sub {
    font-size: .95rem;
    color: var(--sub);
    line-height: 1.65
}

.faq-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .48rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--navy);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    width: fit-content
}

    .faq-contact-btn:hover {
        background: var(--navy-d)
    }

.faq-list {
    display: flex;
    flex-direction: column;
    gap: .55rem
}

.faq-item {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .18s,box-shadow .18s
}

    .faq-item.open {
        border-color: rgba(43,59,171,.22);
        box-shadow: var(--shadow)
    }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.15rem;
    cursor: pointer;
    gap: .75rem;
    user-select: none;
    background: #fff;
    transition: background .15s
}

.faq-item.open .faq-q {
    background: linear-gradient(135deg,#fafbff,#fff)
}

.faq-q-text {
    font-size: .85rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.45;
    transition: color .15s;
    flex: 1
}

.faq-item.open .faq-q-text {
    color: var(--navy)
}

.faq-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .22s
}

.faq-item.open .faq-icon {
    background: var(--navy);
    border-color: var(--navy);
    transform: rotate(45deg)
}

.faq-icon svg {
    width: 11px;
    height: 11px;
    stroke: var(--muted);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    transition: stroke .22s
}

.faq-item.open .faq-icon svg {
    stroke: #fff
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1)
}

.faq-item.open .faq-a {
    max-height: 500px
}

.faq-a-inner {
    padding: .05rem 1.15rem 1.05rem;
    font-size: .95rem;
    color: var(--sub);
    line-height: 1.8;
    border-top: 1px solid var(--border)
}

    .faq-a-inner p {
        margin-bottom: .5rem;
        font-size: .95rem;
    }

        .faq-a-inner p:last-child {
            margin-bottom: 0
        }

    .faq-a-inner strong {
        color: var(--dark);
        font-weight: 600
    }

    .faq-a-inner a {
        color: var(--navy);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px
    }

.faq-cats {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem
}

.faq-cat {
    padding: .32rem .85rem;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: .72rem;
    font-weight: 600;
    color: var(--sub);
    cursor: pointer;
    transition: all .15s
}

    .faq-cat:hover, .faq-cat.on {
        background: var(--navy);
        border-color: var(--navy);
        color: #fff
    }

/* responsive additions */
@media(max-width:900px) {
    .faq-layout {
        grid-template-columns: 1fr
    }

    .nl-inner {
        grid-template-columns: 1fr
    }
    .front-info img {
        width: 30%;
    }
}

@media(max-width:600px) {
    .nl-field-row {
        grid-template-columns: 1fr
    }
    .imageserch {
        width: 30%;
    }
}
/* ─────────────────────────────────────────
   NEWSLETTER SECTION
───────────────────────────────────────── */
.nl-section {
    background: linear-gradient(140deg,#080e1c 0%,#0f1a4a 45%,#071a12 100%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

    .nl-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle,rgba(91,114,232,.09) 1px,transparent 1px);
        background-size: 30px 30px;
        pointer-events: none;
    }

.nl-glow-l {
    position: absolute;
    top: -30%;
    left: -8%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle,rgba(43,59,171,.28) 0%,transparent 65%);
    border-radius: 50%;
    pointer-events: none
}

.nl-glow-r {
    position: absolute;
    bottom: -20%;
    right: 0%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle,rgba(95,168,30,.18) 0%,transparent 65%);
    border-radius: 50%;
    pointer-events: none
}

.nl-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem
}

.nl-title {
    font-family: 'Syne',sans-serif;
    font-size: clamp(2rem,5vw,3rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 1rem;
}

    .nl-title .hi {
        background: linear-gradient(90deg,#7dc8f8 0%,#7DC832 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.nl-sub {
    font-size: .97rem;
    color: rgba(255,255,255,.52);
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto 2.75rem
}

.nl-form-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 2rem 2rem 1.75rem;
    max-width: 520px;
    margin: 0 auto;
    backdrop-filter: blur(12px);
}

.nl-email-input {
    width: 100%;
    padding: .75rem 1.1rem;
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
    color: #fff;
    font-family: 'Inter',sans-serif;
    font-size: .9rem;
    outline: none;
    transition: border-color .15s,background .15s;
    margin-bottom: .75rem;
}

    .nl-email-input::placeholder {
        color: rgba(255,255,255,.3)
    }

    .nl-email-input:focus {
        border-color: rgba(91,114,232,.7);
        background: rgba(255,255,255,.11)
    }

    .nl-email-input.nl-error {
        border-color: #ef4444;
        animation: shake .3s ease
    }

@keyframes shake {
    0%,100% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-5px)
    }

    75% {
        transform: translateX(5px)
    }
}

.nl-submit-btn {
    width: 100%;
    padding: .78rem 1.5rem;
    background: linear-gradient(135deg,#4a5fdb,#2B3BAB);
    border: none;
    border-radius: var(--radius);
    color: #fff;
    font-family: 'Inter',sans-serif;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    box-shadow: 0 4px 18px rgba(43,59,171,.45);
    transition: all .18s;
}

    .nl-submit-btn:hover {
        background: linear-gradient(135deg,#5b72e8,#1e2c82);
        box-shadow: 0 8px 26px rgba(43,59,171,.55);
        transform: translateY(-1px)
    }

    .nl-submit-btn svg {
        width: 15px;
        height: 15px;
        stroke: #fff;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round
    }

.nl-privacy {
    font-size: .67rem;
    color: rgba(255,255,255,.28);
    margin-top: .9rem;
    line-height: 1.6
}

    .nl-privacy a {
        color: rgba(255,255,255,.42);
        text-decoration: underline;
        text-underline-offset: 2px
    }
/* success state */
.nl-success {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    text-align: center;
    padding: .5rem 0;
}

    .nl-success.show {
        display: flex
    }

.nl-success-ico {
    font-size: 2.4rem;
    animation: pop .4s ease
}

@keyframes pop {
    0% {
        transform: scale(0)
    }

    60% {
        transform: scale(1.25)
    }

    100% {
        transform: scale(1)
    }
}

.nl-success-title {
    font-family: 'Syne',sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff
}

.nl-success-sub {
    font-size: .8rem;
    color: rgba(255,255,255,.48);
    line-height: 1.65
}
/* stats row below form */
.nl-stats {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-top: 2.5rem
}

.nl-stat {
    text-align: center
}

.nl-stat-num {
    font-family: 'Syne',sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    line-height: 1
}

.nl-stat-lbl {
    font-size: .68rem;
    color: rgba(255,255,255,.38);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: .22rem;
    font-weight: 600
}

.nl-stat-sep {
    width: 1px;
    background: rgba(255,255,255,.1);
    align-self: stretch;
    margin: 0
}

/* search bar — wide, green border, circular button */
.search-box-wrap {
    max-width: 700px;
    margin: 0 auto 2rem;
    position: relative;
    z-index: 1;
}

.sh-search-row {
    display: flex;
    align-items: center;
    border: 2.5px solid var(--green);
    border-radius: 100px;
    background: #fff;
    box-shadow: 0 4px 24px rgba(95,168,30,.15),0 1px 4px rgba(0,0,0,.05);
    overflow: hidden;
    transition: box-shadow .2s;
}

    .sh-search-row:focus-within {
        box-shadow: 0 6px 32px rgba(95,168,30,.22),0 2px 8px rgba(0,0,0,.06)
    }

.search-input {
    flex: 1;
    padding: .85rem 1.2rem;
    font-family: 'Inter',sans-serif;
    font-size: .95rem;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
}

    .search-input::placeholder {
        color: #aab4c4
    }

.search-x {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-right: .55rem;
    background: #e2e8f0;
    border: none;
    font-size: .65rem;
    color: var(--sub);
    display: none;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}

    .search-x:hover {
        background: #cbd5e1
    }

    .search-x.on {
        display: flex
    }

.sh-search-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 4px 5px 4px 0;
    background: linear-gradient(135deg,var(--green),var(--green-l));
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(95,168,30,.35);
    transition: all .18s;
}

    .sh-search-btn:hover {
        transform: scale(1.07);
        box-shadow: 0 5px 16px rgba(95,168,30,.45)
    }

    .sh-search-btn svg {
        width: 20px;
        height: 20px;
        stroke: #fff;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round
    }
.front-info img {
    width: 10%;
}

.front-head {
    font-size: 37px;
    font-weight: 900;
    background: -webkit-linear-gradient(#13be2e, #1042be);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: .8rem 0;
}

.front-info p {
    margin: 20px 0;
    color: #4e4a4a;
    font-size: .95rem;
    font-weight: 600;
}

.stras {
    position: relative;
}

.writing {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
/* ── MAIN FOOTER ── */
footer {
    background: linear-gradient(to right, rgb(65, 41, 90), rgb(47, 7, 67));
    color: rgba(255,255,255,.55);
    border-top: 1px solid rgba(255,255,255,.06);
}

/* top content area */
.footer-top {
    max-width: var(--container);
    margin: 0 auto;
    padding: 1rem 2rem 1rem;
    display: grid;
    grid-template-columns: 300px 1fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 25px;
}

/* brand column */
.ft-brand {
}

.ft-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .95rem;
}

    .ft-logo img {
        height: 50px;
        width: 165px;
        /* width: auto; */
        /* filter: brightness(0) invert(1); */
        opacity: .85;
    }

.ft-logo-text {
    font-family: 'Syne',sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}

    .ft-logo-text span {
        color: var(--green-l)
    }

.ft-tagline {
    font-size: .82rem;
    color: white;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.ft-lang-row {
    display: flex;
    gap: .55rem;
    align-items: center;
    flex-wrap: wrap
}

.ft-lang {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    color: white;
    padding: .25rem .6rem;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,.1);
    cursor: pointer;
    transition: all .15s;
    background: transparent;
}

    .ft-lang:hover {
        border-color: rgba(255,255,255,.25);
        color: rgba(255,255,255,.8)
    }

    .ft-lang.active {
        border-color: rgba(255,255,255,.28);
        color: rgba(255,255,255,.9);
        background: rgba(255,255,255,.06)
    }

.ft-flag {
    font-size: .9rem
}

/* link columns */
        .ft-col {
}

.ft-col-title {
    font-family: 'Syne',sans-serif;
    font-size: .82rem;
    font-weight: 800;
    color: #4CAF50;
    letter-spacing: .02em;
    margin-bottom: 1.1rem;
    text-transform: none;
}

.ft-links {
    display: flex;
    flex-direction: column;
    gap: .62rem
}

    .ft-links a {
        font-size: .82rem;
        color: white;
        transition: color .15s;
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }

        .ft-links a:hover {
            color: #fff
        }

        .ft-links a .ft-star {
            color: var(--green-l);
            font-size: .7rem
        }

/* bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.07);
}

.footer-bottom-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 1.1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.ft-copy {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    color: white;
}

.ft-eco {
    font-size: .85rem
}

.ft-legal-links {
    display: flex;
    align-items: center;
    gap: 1.5rem
}

    .ft-legal-links a {
        font-size: .75rem;
        color: white;
        transition: color .15s;
    }

        .ft-legal-links a:hover {
            color: #fff
        }

.ft-social-row {
    display: flex;
    align-items: center;
    gap: .5rem
}

.ft-social-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: white;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}

    .ft-social-btn:hover {
        background: rgba(255,255,255,.14);
        color: #fff;
        border-color: rgba(255,255,255,.22)
    }

    .ft-social-btn svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round
    }
    /* TikTok special */
    .ft-social-btn.tiktok svg {
        fill: currentColor;
        stroke: none
    }

/* Responsive */
@media(max-width:1000px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem
    }

    .ft-brand {
        grid-column: 1/-1
    }
}

@media(max-width:640px) {
    .footer-top {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.25rem 2rem;
        gap: 1.75rem
    }

    .ft-brand {
        grid-column: auto
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 1.25rem
    }

    .ft-social-row {
        margin-left: 0
    }
}

/* ── FOOTER NEWSLETTER STRIP ── */
.ft-newsletter {
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 3px solid rgba(255, 255, 255, .07);
    margin-top: 6px;
    margin-bottom: 6px;
}

.ft-newsletter-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ft-nl-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.ft-nl-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    background: white;
    border: 1px solid rgba(91,114,232,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.ft-nl-title {
    font-family: 'Syne',sans-serif;
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    white-space: nowrap;
}

    .ft-nl-title .ft-nl-hi {
        background: linear-gradient(90deg,#7DC832,#7DC832);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.ft-nl-sub {
    font-size: .8rem;
    color: rgba(255,255,255,.4);
    margin-top: .1rem;
    white-space: nowrap;
}

.ft-nl-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    max-width: 420px;
}

.ft-nl-input {
    flex: 1;
    min-width: 0;
    padding: .52rem .9rem;
    background: rgba(255,255,255,.07);
    border: 1px solid white;
    border-radius: 100px;
    color: #fff;
    font-family: 'Inter',sans-serif;
    font-size: .8rem;
    outline: none;
    transition: border-color .15s,background .15s;
}

    .ft-nl-input::placeholder {
        color: white;
    }

    .ft-nl-input:focus {
        border-color: rgba(91,114,232,.6);
        background: rgba(255,255,255,.1)
    }

    .ft-nl-input.ft-nl-error {
        border-color: #ef4444;
        animation: ft-shake .3s ease
    }

@keyframes ft-shake {
    0%,100% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-4px)
    }

    75% {
        transform: translateX(4px)
    }
}

.ft-nl-btn {
    display: flex;
    align-items: center;
    gap: .38rem;
    white-space: nowrap;
    flex-shrink: 0;
    padding: .52rem 1.1rem;
    border-radius: 100px;
    border: none;
    background: #4CAF50;
    color: #fff;
    font-family: 'Inter',sans-serif;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(43,59,171,.4);
    transition: all .18s;
}

    .ft-nl-btn:hover {
        background: #4CAF50;
        box-shadow: 0 5px 16px rgba(43,59,171,.5);
        transform: translateY(-1px)
    }

    .ft-nl-btn svg {
        width: 13px;
        height: 13px;
        stroke: #fff;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round
    }

.ft-nl-success {
    display: none;
    align-items: center;
    gap: .5rem;
    flex: 1;
    font-size: .8rem;
    color: var(--green-l);
    font-weight: 600;
}

    .ft-nl-success.show {
        display: flex
    }

@media(max-width:860px) {
    .ft-newsletter-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem
    }

    .ft-nl-form {
        max-width: 100%;
        width: 100%
    }

    .ft-nl-sub {
        display: none
    }
}

@media(max-width:480px) {
    .ft-nl-title {
        white-space: normal
    }

    .ft-nl-form {
        flex-wrap: wrap
    }

    .ft-nl-btn {
        width: 100%;
        justify-content: center
    }
}
.ft-links a svg{
    height:36px;
    width:36px;
}
.ft-social-row1 {
    align-items: center;
}

/* ─────────────────────────────────────────
   ALL CATEGORIES
───────────────────────────────────────── */
.cats-section {
    background: linear-gradient(180deg,#dbdde2 0%,#fff 100%);
    border-top: 1px solid var(--border);
    padding: 3rem 0;
}
    /* section heading overrides */
    .cats-section .sec-hd {
        margin-bottom: 3rem
    }

    .cats-section .sec-eyebrow {
        font-size: .7rem;
        letter-spacing: .14em;
        color: var(--navy);
        margin-bottom: .4rem
    }

    .cats-section .sec-title {
        font-size: clamp(1.6rem,3vw,2.3rem)
    }

/* stat pills row below heading */
.cats-stats {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.cats-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .75rem;
    border-radius: 100px;
    font-size: .68rem;
    font-weight: 600;
    background: var(--bg);
    border: 1.5px solid var(--border);
    color: var(--sub);
}

.cats-stat-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0
}

/* main grid */
.cats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.1rem;
}

/* base card */
.catc {
    background: #fff;
    border: 2px;
    border-radius: var(--radius-xl);
    padding: 1.6rem 1.35rem 1.35rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    /*transition: transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,border-color .2s;*/
    animation: cardIn .35s ease both;
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(43,59,171,.1),0 4px 12px rgba(0,0,0,.05);
    border-color: rgba(43,59,171,.18);
}
    /* subtle top accent line */
    .catc::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--catc-accent,var(--border));
        opacity: 0;
        transition: opacity .2s;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .catc:hover::before {
        opacity: 1
    }

    .catc:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 40px rgba(43,59,171,.1),0 4px 12px rgba(0,0,0,.05);
        border-color: rgba(43,59,171,.18);
    }

/* icon wrapper */
.catc-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}

.catc-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    border: 1.5px solid #4CAF50;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}

.catc:hover .catc-icon {
    transform: scale(1.12) rotate(-4deg)
}

.catc-badge {
    font-size: .75rem;
    font-weight: 600;
    padding: .22rem .58rem;
    border-radius: 100px;
    background: #4CAF50;
    border: 1px solid var(--border);
    color: white;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* text */
.catc-name {
    font-family: 'Syne',sans-serif;
    font-size: .95rem;
    font-weight: 900;
    color: var(--dark);
    letter-spacing: -.01em;
    margin-bottom: .22rem;
}

.catc-desc {
    color: var(--sub);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1
}

/* progress bar */
.catc-bar-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem
}

.catc-bar-label {
    font-size: .63rem;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap
}

.catc-bar-track {
    flex: 1;
    height: 4px;
    background: #e8eef4;
    border-radius: 100px;
    overflow: hidden
}

.catc-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg,var(--navy-l),var(--navy));
    transition: width .6s ease
}

/* footer row */
.catc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .65rem;
    border-top: 2px solid #4CAF50;
}

.catc-count {
    font-family: 'Syne',sans-serif;
    font-size: .95rem;
    font-weight: 800;
    color: var(--navy);
}

    .catc-count span {
        font-size: .95rem;
        font-weight: 500;
        color: var(--muted)
    }

.catc-arrow {
    display: flex;
    align-items: center;
    gap: .22rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--navy);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s,transform .18s;
}

    .catc-arrow svg {
        width: 12px;
        height: 12px;
        stroke: currentColor;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round
    }

.catc:hover .catc-arrow {
    opacity: 1;
    transform: translateX(0)
}

/* FEATURED card — dark navy */
.catc.catc-feat {
    background: linear-gradient(145deg,#0e1422 0%,#1a2460 60%,#0e1a38 100%);
    border-color: rgba(91,114,232,.25);
    box-shadow: 0 4px 20px rgba(43,59,171,.18);
}

    .catc.catc-feat::before {
        background: linear-gradient(90deg,var(--green-l),var(--navy-l));
        opacity: 1
    }

    .catc.catc-feat:hover {
        box-shadow: 0 20px 48px rgba(43,59,171,.28),0 6px 16px rgba(0,0,0,.12);
        border-color: rgba(91,114,232,.4);
    }

    .catc.catc-feat .catc-icon {
        background: rgba(255,255,255,.1) !important;
        border-color: rgba(255,255,255,.12);
        box-shadow: none;
    }

    .catc.catc-feat .catc-badge {
        background: rgba(125,200,50,.15);
        border-color: rgba(125,200,50,.25);
        color: var(--green-l);
    }

    .catc.catc-feat .catc-name {
        color: #fff
    }

    .catc.catc-feat .catc-desc {
        color: rgba(255,255,255,.55)
    }

    .catc.catc-feat .catc-bar-label {
        color: rgba(255,255,255,.35)
    }

    .catc.catc-feat .catc-bar-track {
        background: rgba(255,255,255,.1)
    }

    .catc.catc-feat .catc-bar-fill {
        background: linear-gradient(90deg,var(--green-l),var(--navy-l))
    }

    .catc.catc-feat .catc-foot {
        border-color: rgba(255,255,255,.1)
    }

    .catc.catc-feat .catc-count {
        color: var(--green-l)
    }

        .catc.catc-feat .catc-count span {
            color: rgba(255,255,255,.35)
        }

    .catc.catc-feat .catc-arrow {
        color: var(--green-l)
    }
    /* glow orb inside featured */
    .catc.catc-feat::after {
        content: '';
        position: absolute;
        bottom: -40px;
        right: -40px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(91,114,232,.2) 0%,transparent 65%);
        pointer-events: none;
    }