/* ============================================================
   MrMarker — style.css
   Design concept inherited from the BrandTales 2026 template:
   light-lavender base, Inter + Caveat, purple #6C2BD9 accent,
   numbered icon rows, soft cards, dark footer.
   ============================================================ */

:root{
  --purple:#6C2BD9;
  --purple-2:#7C3AED;
  --ink:#111114;
  --ink-2:#14141A;
  --gray:#55555e;
  --bg-top:#F5F2FC;
  --orange:#F97316;
  --teal:#0D9488;
  --pink:#EC4899;
  --green:#84CC16;
  --blue:#3B82F6;
  --yellow:#F2B705;
  --soft:#EFEAF9;
  --soft-2:#E8E1F7;
  --line:#E4DFF0;
  --line-dash:#D9D5E6;
  --dot:#C9B9E8;
  --dark:#141418;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
button{font-family:inherit;}
.wrap{max-width:1150px;margin:0 auto;padding:0 24px;}
.wrap-header{max-width:1240px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:14.5px;letter-spacing:.2px;
  border-radius:999px;padding:13px 24px;border:1.6px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .25s,background .25s,border-color .25s,box-shadow .25s;
}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 10px 24px rgba(108,43,217,.32);}
.btn-primary:hover{background:var(--purple-2);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--purple-2);border-color:var(--dot);}
.btn-ghost:hover{border-color:var(--purple-2);background:var(--soft);}
.btn-sm{padding:10px 18px;font-size:13px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.65;cursor:default;transform:none;}

/* ============================================================
   HEADER (shared navigation)
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:800;
  background:var(--bg-top);
  border-bottom:1px solid #E6E1F2;
  transition:box-shadow .3s;
}
.site-header.scrolled{box-shadow:0 8px 24px rgba(60,30,120,.08);}
.header-inner{display:flex;align-items:center;gap:18px;height:64px;}

.logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo-text{display:flex;flex-direction:column;}
.logo-name{font-weight:800;font-size:19px;line-height:1;letter-spacing:-.2px;color:#14141A;}
.logo-sub{margin-top:4px;font-size:8px;font-weight:700;letter-spacing:1.4px;color:#4A4A55;}

.main-nav{margin-left:auto;}
.main-nav ul{display:flex;gap:12px;list-style:none;}
.main-nav a{
  position:relative;display:block;padding:6px 0;
  font-size:12.5px;font-weight:600;letter-spacing:.1px;
  color:#2B2B34;text-decoration:none;transition:color .2s;
}
.main-nav a:hover{color:var(--purple-2);}
.main-nav a.active{color:var(--purple-2);}
.main-nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--purple-2);border-radius:2px;
}

.header-actions{display:flex;align-items:center;gap:10px;}
.burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:3.5px;
  width:42px;height:38px;border-radius:10px;border:1.6px solid var(--dot);
  background:#fff;cursor:pointer;
}
.burger span{display:block;width:16px;height:2px;background:#2B2B34;border-radius:2px;transition:transform .25s,opacity .2s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* Mobile drawer (inside the shared header) */
.mm-overlay{
  position:fixed;inset:0;z-index:940;
  background:rgba(20,16,28,.5);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.site-header.drawer-open .mm-overlay{opacity:1;pointer-events:auto;}
.mm-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:950;
  width:min(340px,88vw);
  background:var(--bg-top);
  box-shadow:-18px 0 40px rgba(30,15,70,.18);
  display:flex;flex-direction:column;
  padding:20px 22px 26px;overflow-y:auto;
  transform:translateX(105%);transition:transform .35s ease;
}
.site-header.drawer-open .mm-drawer{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.drawer-close{
  width:38px;height:38px;border-radius:10px;border:1.6px solid var(--dot);
  background:#fff;font-size:20px;line-height:1;cursor:pointer;color:#2B2B34;
}
.drawer-close:hover{background:#fff;border-color:var(--purple-2);}
.drawer-list{list-style:none;}
.drawer-list a{
  display:block;padding:11px 2px;
  font-size:15px;font-weight:600;color:#1C1C24;text-decoration:none;
  border-bottom:1px dashed var(--line-dash);
}
.drawer-list a:hover{color:var(--purple-2);}
.drawer-sep{border-bottom:none;padding:0;margin:16px 0 6px;}
.drawer-sep span{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#8A84A3;text-transform:uppercase;}
.drawer-cta{margin-top:auto;padding-top:18px;}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--bg-top);overflow:hidden;padding:30px 0 54px;}
.hero .circle{
  position:absolute;width:560px;height:560px;border-radius:50%;
  background:var(--soft-2);top:-170px;right:-90px;z-index:0;
}
.hero .circle2{
  position:absolute;width:300px;height:300px;border-radius:50%;
  background:var(--soft);bottom:-160px;left:-120px;z-index:0;
}
.hero .dots{
  position:absolute;width:120px;height:150px;top:60px;right:230px;
  background-image:radial-gradient(var(--dot) 2.2px, transparent 2.3px);
  background-size:15px 15px;z-index:0;opacity:.8;
}
.hero .dots.b{width:90px;height:70px;top:330px;right:40px;}
.hero-inner{position:relative;z-index:2;}

.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;}
.hero-stamp{
  display:flex;align-items:center;gap:9px;margin-top:8px;
  font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#3C3C48;
}
.stamp-dot{width:8px;height:8px;border-radius:50%;background:var(--purple-2);flex:0 0 auto;}
.tagline{
  font-family:'Caveat',cursive;
  font-size:38px;line-height:1.02;text-align:right;
  transform:rotate(-2deg);margin-top:4px;
}
.tagline .t1{color:#1C1C22;}
.tagline .t2{color:var(--yellow);font-size:40px;display:inline-block;position:relative;}
.tagline .t2 svg{position:absolute;left:0;bottom:-8px;width:100%;height:12px;}

.hero-main{
  display:grid;grid-template-columns:1.02fr 1fr;gap:30px;
  align-items:center;margin-top:14px;
}
.hero-left h1{
  font-size:clamp(42px,5.8vw,68px);
  line-height:.98;font-weight:800;letter-spacing:-1.5px;color:#0D0D12;
}
.hero-left h1 .p{color:var(--purple-2);}
.badge-row{display:flex;align-items:center;gap:12px;margin:20px 0 22px;}
.badge-count{
  background:var(--purple);color:#fff;
  font-weight:800;font-size:24px;letter-spacing:.5px;
  padding:5px 20px 9px;border-radius:10px;
  box-shadow:0 8px 18px rgba(108,43,217,.25);
}
.badge-note{font-size:12.5px;font-weight:500;color:var(--gray);}
.badge-row .arrow{width:52px;height:38px;}
.hero-sub{font-size:16.5px;color:#33333C;line-height:1.55;max-width:390px;}
.hero-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;}

/* ---------- Devices (laptop + phone mockups) ---------- */
.devices{position:relative;height:440px;}
.plant{position:absolute;left:6px;bottom:52px;width:86px;height:120px;z-index:1;}
.laptop{
  position:absolute;left:34px;top:6px;width:480px;z-index:2;
  transform:perspective(1700px) rotateY(-11deg) rotateX(2deg);
  filter:drop-shadow(0 26px 30px rgba(40,20,80,.22));
}
.laptop-screen{background:#14101C;border-radius:16px;padding:10px 10px 0;}
.laptop-display{
  position:relative;height:292px;border-radius:8px;overflow:hidden;
  background:linear-gradient(140deg,#150C28 0%,#221043 55%,#341A63 100%);
  padding:18px 24px 0;
}
.laptop-display::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(320px 220px at 88% 96%, rgba(216,64,170,.5), transparent 70%);
  pointer-events:none;
}
.ld-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1;}
.ld-brand{color:#fff;font-weight:700;font-size:13px;}
.ld-nav{display:flex;gap:14px;color:#CFC6E6;font-size:9px;font-weight:500;}
.ld-title{
  position:relative;z-index:1;color:#fff;font-weight:700;font-size:23px;
  line-height:1.18;margin-top:34px;letter-spacing:-.3px;
}
.ld-text{
  position:relative;z-index:1;color:#B9AEDF;font-size:9.5px;
  line-height:1.5;max-width:230px;margin-top:12px;
}
.ld-btn{
  position:relative;z-index:1;display:inline-block;margin-top:16px;
  background:var(--purple-2);color:#fff;font-size:10px;font-weight:600;
  padding:8px 16px;border-radius:6px;
}
.laptop-base{
  position:relative;height:46px;margin:0 4px;
  background:linear-gradient(#F4F4F7,#C9C9D3);
  clip-path:polygon(0 0,100% 0,97% 100%,3% 100%);
}
.laptop-base::before{
  content:"";position:absolute;left:9%;right:9%;top:9px;height:22px;
  background-image:
    repeating-linear-gradient(90deg,#B6B6C2 0 11px,transparent 11px 15px),
    repeating-linear-gradient(0deg,#B6B6C2 0 5px,transparent 5px 9px);
  opacity:.8;
}
.laptop-base::after{
  content:"";position:absolute;left:46%;right:46%;bottom:0;height:5px;
  background:#9A9AA6;border-radius:4px 4px 0 0;
}

.phone{
  position:absolute;right:14px;top:118px;width:172px;height:332px;z-index:3;
  background:#14101C;border-radius:28px;padding:8px;
  transform:perspective(1400px) rotateY(-7deg);
  box-shadow:0 24px 40px rgba(35,15,70,.3);
}
.phone-screen{
  position:relative;height:100%;border-radius:21px;overflow:hidden;
  background:linear-gradient(165deg,#1A0F33 0%,#2C1553 70%,#3A1D6E 100%);
  padding:16px 14px;
}
.phone-screen::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(180px 140px at 90% 95%, rgba(216,64,170,.45), transparent 70%);
  pointer-events:none;
}
.ph-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1;}
.ph-brand{color:#fff;font-weight:700;font-size:11px;}
.ph-burger{color:#fff;font-size:13px;line-height:1;letter-spacing:1px;}
.ph-title{position:relative;z-index:1;color:#fff;font-weight:700;font-size:14.5px;line-height:1.22;margin-top:22px;}
.ph-text{position:relative;z-index:1;color:#B9AEDF;font-size:7.5px;line-height:1.5;margin-top:8px;}
.ph-btn{
  position:relative;z-index:1;display:inline-block;margin-top:12px;
  background:var(--purple-2);color:#fff;font-size:8px;font-weight:600;
  padding:6px 12px;border-radius:5px;
}
.ph-icons{position:absolute;left:0;right:0;bottom:14px;z-index:1;display:flex;justify-content:space-around;}
.ph-ic{display:flex;flex-direction:column;align-items:center;gap:4px;color:#CFC4EC;font-size:6.5px;font-weight:600;}
.ph-ic svg{width:15px;height:15px;}

/* ============================================================
   PILL ROW (section dividers)
   ============================================================ */
.pill-row{
  display:flex;align-items:center;gap:20px;
  max-width:1080px;margin:0 auto 34px;padding:0 24px;
}
.pill-row .line{flex:1;height:2px;background:#14141A;}
.pill{
  background:var(--purple);color:#fff;
  font-size:13.5px;font-weight:700;letter-spacing:.6px;
  padding:11px 30px;border-radius:8px;white-space:nowrap;
}

/* ============================================================
   CATEGORIES (trend grid)
   ============================================================ */
.trends{background:#fff;padding:36px 0 30px;}
.trend-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0 44px;
  max-width:1080px;margin:0 auto;padding:0 24px;
}
.trend{
  display:flex;gap:18px;align-items:flex-start;
  padding:18px 0;border-bottom:1px dashed var(--line-dash);
  transition:background .25s;
}
.trend:hover{background:#FAF8FE;}
.trend-visual{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:0 0 auto;padding-top:2px;}
.num{
  width:36px;height:27px;border-radius:7px;color:#fff;
  font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.icon-box{
  width:98px;height:74px;border:1.6px solid #E4E0EF;border-radius:11px;
  display:flex;align-items:center;justify-content:center;background:#fff;
}
.trend-text{padding-top:2px;min-width:0;}
.trend-text h3{font-size:16.5px;font-weight:800;letter-spacing:.2px;line-height:1.25;color:#101016;}
.trend-text p{margin-top:7px;font-size:12.8px;line-height:1.5;color:var(--gray);max-width:400px;}
.trend-link{
  display:inline-block;margin-top:9px;
  font-size:12px;font-weight:700;letter-spacing:.2px;
  color:var(--purple-2);text-decoration:none;
}
.trend-link:hover{text-decoration:underline;}

.c-purple{background:var(--purple-2);}
.c-orange{background:var(--orange);}
.c-teal{background:var(--teal);}
.c-pink{background:var(--pink);}
.c-green{background:var(--green);}
.c-blue{background:var(--blue);}

/* ============================================================
   AUTHORS
   ============================================================ */
.authors{background:var(--bg-top);padding:34px 0 46px;}
.authors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.author-card{
  background:#fff;border:1px solid #E9E4F4;border-radius:16px;
  padding:14px;transition:transform .3s,box-shadow .3s;
}
.author-card:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(60,30,120,.12);}
.author-photo{border-radius:11px;overflow:hidden;aspect-ratio:1/1;background:var(--soft);}
.author-photo img{width:100%;height:100%;object-fit:cover;}
.author-card h3{margin-top:12px;font-size:15px;font-weight:800;letter-spacing:.1px;}
.author-role{margin-top:4px;font-size:12px;color:var(--gray);line-height:1.4;}
.author-link{
  display:inline-block;margin-top:10px;
  font-size:12px;font-weight:700;color:var(--purple-2);text-decoration:none;
}
.author-link:hover{text-decoration:underline;}
.authors-more{text-align:center;margin-top:26px;}
.authors-more a{font-size:13px;font-weight:700;color:var(--purple-2);text-decoration:none;}
.authors-more a:hover{text-decoration:underline;}

/* ============================================================
   GROWTH CARD
   ============================================================ */
.growth{background:#fff;padding:8px 0 40px;}
.growth-card{
  max-width:1080px;margin:0 auto;padding:26px 30px;
  background:var(--soft);border-radius:18px;
  display:flex;align-items:center;gap:28px;
}
.gc-art{flex:0 0 auto;width:170px;height:130px;position:relative;}
.gc-art svg{position:absolute;bottom:0;left:0;width:100%;height:100%;}
.gc-text{flex:1;min-width:0;}
.gc-text h2{color:var(--purple-2);font-size:19px;font-weight:700;line-height:1.35;max-width:340px;}
.gc-text p{margin-top:10px;font-size:12.5px;color:#4C4C57;line-height:1.55;max-width:330px;}
.gc-link{
  display:inline-block;margin-top:12px;
  font-size:12.5px;font-weight:700;color:var(--purple-2);text-decoration:none;
}
.gc-link:hover{text-decoration:underline;}
.gc-features{display:flex;flex:0 0 auto;}
.feat{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 18px;border-left:1px solid #D7D0EA;}
.feat:first-child{border-left:none;}
.feat svg{width:34px;height:34px;}
.feat span{font-size:10.5px;color:#3C3C46;font-weight:500;text-align:center;line-height:1.25;max-width:70px;}

/* ============================================================
   FOOTER (shared)
   ============================================================ */
.footer{background:var(--dark);color:#fff;}
.footer-cta{
  background:linear-gradient(rgba(20,20,24,.82), rgba(20,20,24,.94)), url('images/stage.png') center/cover no-repeat;
  padding:34px 0 30px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.footer-left{display:flex;align-items:center;gap:15px;}
.globe{
  width:46px;height:46px;border-radius:50%;background:var(--purple);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.footer-left p{color:#fff;font-size:13.5px;line-height:1.45;}
.footer-left p strong{font-weight:700;}
.visit-btn{
  display:flex;align-items:center;gap:14px;
  background:var(--purple);color:#fff;
  border:none;border-radius:999px;padding:11px 20px 11px 26px;
  font-size:14.5px;white-space:nowrap;cursor:pointer;
  box-shadow:0 10px 24px rgba(108,43,217,.35);
  transition:transform .25s,background .25s;
}
.visit-btn:hover{background:var(--purple-2);transform:translateY(-2px);}
.visit-btn b{font-weight:800;}
.visit-btn .chev{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
}

.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;
  padding-top:36px;padding-bottom:36px;
}
.f-brand p{color:#B9B4C9;font-size:12.5px;line-height:1.55;margin-top:14px;max-width:260px;}
.logo-light .logo-name{color:#fff;}
.logo-light .logo-sub{color:#8F89A6;}
.f-domain{
  display:inline-block;margin-top:16px;
  font-size:12px;font-weight:700;letter-spacing:.5px;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  padding:7px 14px;border-radius:999px;
}
.f-col h4{
  font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:#8F89A6;margin-bottom:14px;
}
.f-col ul{list-style:none;}
.f-col li{margin-bottom:9px;}
.f-col a{color:#DCD8E8;font-size:13px;text-decoration:none;transition:color .2s;}
.f-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:16px 0;}
.footer-bottom-inner{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;font-size:12px;color:#8F89A6;
}

/* ============================================================
   UNIVERSAL MODAL
   ============================================================ */
.mm-modal{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(20,16,28,.55);
}
.mm-modal.open{display:flex;}
.mm-modal-card{
  position:relative;width:min(460px,100%);
  background:#fff;border-radius:18px;padding:28px;
  box-shadow:0 30px 60px rgba(20,10,50,.35);
  animation:mmIn .35s ease;
}
@keyframes mmIn{
  from{opacity:0;transform:translateY(16px) scale(.98);}
  to{opacity:1;transform:none;}
}
.mm-close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:9px;
  border:1.4px solid var(--line);background:#fff;
  font-size:18px;line-height:1;cursor:pointer;color:#44444C;
}
.mm-close:hover{background:var(--bg-top);}
.mm-head{margin-top:6px;}
.mm-head h2{margin-top:12px;font-size:21px;font-weight:800;letter-spacing:-.2px;}
.mm-head p{margin-top:6px;font-size:13px;color:var(--gray);}
.mm-form label{
  display:block;margin-top:16px;
  font-size:12px;font-weight:700;letter-spacing:.2px;color:#2B2B34;
}
.mm-form input,.mm-form select,.mm-form textarea{
  display:block;width:100%;margin-top:7px;
  padding:11px 13px;font-size:14px;font-family:inherit;color:#14141A;
  background:#F8F6FC;border:1.4px solid #E1DBF0;border-radius:10px;
  transition:border-color .2s,background .2s;
}
.mm-form input:focus,.mm-form select:focus,.mm-form textarea:focus{
  outline:none;border-color:var(--purple-2);background:#fff;
}
.mm-form textarea{resize:vertical;min-height:96px;}
.mm-form .btn{margin-top:20px;}
.mm-error{margin-top:14px;font-size:12.5px;color:#DC2626;}
.mm-note{margin-top:12px;font-size:11px;color:#8A84A3;line-height:1.5;}
.mm-note a{color:var(--purple-2);}
.mm-success{text-align:center;padding:10px 0;}
.mm-check{
  width:56px;height:56px;border-radius:50%;background:var(--soft);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}
.mm-success h2{font-size:20px;font-weight:800;}
.mm-success p{margin:8px 0 18px;font-size:13px;color:var(--gray);}

/* ============================================================
   ENTRANCE ANIMATIONS
   ============================================================ */
[data-mm-anim]{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease;
}
[data-mm-anim].is-in{opacity:1;transform:translateY(0);}
[data-mm-anim="fade"]{transform:none;}
[data-mm-anim="fade"].is-in{transform:none;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1239px){
  .main-nav{display:none;}
  .burger{display:inline-flex;}
  .logo-sub{display:none;}
}
@media (max-width:980px){
  .hero{padding:26px 0 46px;}
  .hero-main{grid-template-columns:1fr;gap:10px;}
  .hero-left{order:1;}
  .devices{order:2;height:400px;max-width:560px;margin:0 auto;}
  .laptop{left:0;}
  .phone{right:0;}
  .trend-grid{grid-template-columns:1fr;}
  .authors-grid{grid-template-columns:repeat(2,1fr);}
  .growth-card{flex-wrap:wrap;justify-content:center;}
  .gc-features{width:100%;justify-content:space-between;border-top:1px solid #D7D0EA;padding-top:18px;}
  .feat{border-left:none;padding:0 6px;}
  .footer-cta-inner{flex-direction:column;text-align:center;}
  .footer-left{flex-direction:column;text-align:center;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .tagline{font-size:30px;}
  .tagline .t2{font-size:32px;}
}
@media (max-width:560px){
  .devices{height:360px;transform:scale(.82);transform-origin:top center;}
  .pill{font-size:11.5px;padding:9px 16px;}
  .pill-row .line{display:none;}
  .authors-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:22px;}
  .footer-bottom-inner{justify-content:center;text-align:center;}
  .header-actions .btn{display:none;}
  .badge-row{flex-wrap:wrap;}
  .badge-row .arrow{display:none;}
  .hero-top{flex-direction:column;gap:10px;}
  .tagline{text-align:left;}
  .hero-left h1{letter-spacing:-1px;}
}
@media (prefers-reduced-motion:reduce){
  [data-mm-anim]{transition:none;opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* Fallback: если JS не загрузился, контент станет видимым через 0.5s */
@keyframes mmFallbackIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion:no-preference) {
  [data-mm-anim]:not(.is-in) {
    animation: mmFallbackIn 0.6s ease 0.5s forwards;
  }
}

/* ============================================================
   RECOMMENDED TOOL — callout inset (between categories & authors)
   ============================================================ */
.rec-tool{background:#fff;padding:30px 0 34px;}
.rec-tool .wrap{max-width:1080px;}
.rt-card{
  display:flex;align-items:flex-start;gap:22px;
  background:linear-gradient(120deg,#F5F2FC 0%,#FFFFFF 55%,#EFEAF9 100%);
  border:1.6px solid #D9D0F0;
  border-left:5px solid var(--purple-2);
  border-radius:16px;
  padding:26px 30px;
  box-shadow:0 12px 30px rgba(60,30,120,.08);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.rt-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(60,30,120,.13);border-left-color:var(--purple);}
.rt-icon{
  flex:0 0 auto;width:54px;height:54px;border-radius:14px;
  background:linear-gradient(140deg,#7C3AED 0%,#A78BFA 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px rgba(108,43,217,.28);
}
.rt-icon svg{filter:brightness(0) invert(1);}
.rt-body{min-width:0;flex:1;}
.rt-label{
  display:inline-block;font-size:11px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--purple-2);
  background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.22);
  padding:5px 12px;border-radius:999px;
}
.rt-title{margin-top:12px;font-size:21px;font-weight:800;letter-spacing:-.3px;color:#101016;line-height:1.3;}
.rt-text{margin-top:10px;font-size:14px;line-height:1.62;color:#3C3C46;max-width:680px;}
.rt-anchor{
  color:var(--purple-2);font-weight:700;text-decoration:none;
  border-bottom:1.6px solid rgba(124,58,237,.35);
  transition:border-color .2s,color .2s;
}
.rt-anchor:hover{color:var(--purple);border-color:var(--purple);}
.rt-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  background:var(--purple);color:#fff;
  font-size:13.5px;font-weight:700;letter-spacing:.2px;
  padding:11px 22px;border-radius:999px;text-decoration:none;
  box-shadow:0 10px 22px rgba(108,43,217,.3);
  transition:transform .25s,background .25s,box-shadow .25s;
}
.rt-cta:hover{background:var(--purple-2);transform:translateY(-2px);box-shadow:0 14px 28px rgba(108,43,217,.4);}
@media (max-width:640px){
  .rt-card{flex-direction:column;gap:16px;padding:20px;}
  .rt-icon{width:46px;height:46px;border-radius:12px;}
  .rt-title{font-size:18px;}
  .rt-text{font-size:13.5px;}
}