*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:#06060d;color:#e2e8f0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Inter Tight',system-ui,sans-serif}
.grad-txt{background:linear-gradient(135deg,#c4b5fd 0%,#93c5fd 55%,#67e8f9 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.grad-bg{background:linear-gradient(135deg,#7c3aed 0%,#1d4ed8 100%)}
.dgrid{background-image:radial-gradient(rgba(139,92,246,0.09) 1px,transparent 1px);background-size:30px 30px}
nav{position:sticky;top:0;z-index:100;height:68px;display:flex;align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(6,6,13,0.88);border-bottom:1px solid rgba(139,92,246,0.09)}
.gc{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);border-radius:16px;transition:border-color .25s,box-shadow .25s,transform .25s;cursor:pointer}
.gc:hover{border-color:rgba(139,92,246,.35);box-shadow:0 8px 40px rgba(124,58,237,.16);transform:translateY(-4px)}
.cf{padding:7px 18px;border-radius:999px;font-size:13px;font-weight:500;border:1px solid rgba(255,255,255,.06);color:#475569;background:rgba(255,255,255,.03);cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit}
.cf:hover{color:#c4b5fd;border-color:rgba(139,92,246,.35)}
.cf.on{background:linear-gradient(135deg,#7c3aed,#1d4ed8);border-color:transparent;color:#fff}
/* Tab bar — for switching between forms/views (Contact vs Submit) */
.tab-bar{display:flex;gap:4px;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:32px}
.tab{position:relative;top:1px;padding:12px 24px;font-size:14px;font-weight:600;font-family:inherit;color:#64748b;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap}
.tab:hover{color:#c4b5fd}
.tab.on{color:#fff;border-bottom-color:#8b5cf6}
.blob{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none}
.srch{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:10px 10px 10px 18px;transition:border-color .2s,box-shadow .2s}
.srch:focus-within{border-color:rgba(139,92,246,.5);box-shadow:0 0 0 3px rgba(139,92,246,.08)}
.srch input{flex:1;background:none;border:none;outline:none;color:#fff;font-size:15px;font-family:inherit}
.srch input::placeholder{color:#334155}
.bdg{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.bdg-writing{background:rgba(139,92,246,.15);color:#c4b5fd}
.bdg-image{background:rgba(236,72,153,.15);color:#f9a8d4}
.bdg-video{background:rgba(239,68,68,.15);color:#fca5a5}
.bdg-code{background:rgba(59,130,246,.15);color:#93c5fd}
.bdg-audio{background:rgba(16,185,129,.15);color:#6ee7b7}
.bdg-research{background:rgba(245,158,11,.15);color:#fcd34d}
.bdg-design{background:rgba(244,63,94,.15);color:#fda4af}
.bdg-productivity{background:rgba(249,115,22,.15);color:#fdba74}
.bdg-marketing{background:rgba(234,179,8,.15);color:#fde047}
.bdg-education{background:rgba(99,102,241,.15);color:#a5b4fc}
.bdg-new{background:rgba(16,185,129,.2);color:#34d399}
.bdg-free{background:rgba(16,185,129,.12);color:#34d399}
.bdg-freemium{background:rgba(59,130,246,.12);color:#60a5fa}
.bdg-paid{background:rgba(139,92,246,.12);color:#a78bfa}
.nl{color:#64748b;font-size:14px;text-decoration:none;transition:color .15s}
.nl:hover{color:#e2e8f0}
.nl.active{color:#c4b5fd}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#06060d}
::-webkit-scrollbar-thumb{background:rgba(139,92,246,.2);border-radius:2px}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.18),transparent)}
.btn-primary{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#7c3aed,#1d4ed8);color:white;border:none;border-radius:999px;padding:10px 24px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:opacity .15s,transform .15s;font-family:'Inter',sans-serif}
.btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.btn-outline{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(139,92,246,.3);color:#c4b5fd;border-radius:999px;padding:9px 22px;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .15s;background:transparent;font-family:'Inter',sans-serif}
.btn-outline:hover{background:rgba(139,92,246,.1)}
.page-wrap{max-width:1400px;margin:0 auto;padding:0 40px}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pdot{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.fl{animation:fl 7s ease-in-out infinite}
.fl2{animation:fl 9s 1.5s ease-in-out infinite}
.fl3{animation:fl 8s 3s ease-in-out infinite}
.pdot{animation:pdot 2s ease-in-out infinite}
.fade-in{animation:fadeIn .4s ease forwards}
.marquee-outer{overflow:hidden;width:100%}
.marquee-track{display:flex;gap:12px;animation:marquee 35s linear infinite;width:max-content}
.marquee-track:hover{animation-play-state:paused}
/* Responsive 2-column layout: stacks on mobile, splits on desktop.
   Set the desktop columns via the --cols custom property, e.g. --cols:1fr 400px */
.resp-2col{display:grid;gap:40px;align-items:start;grid-template-columns:1fr}
@media(min-width:980px){.resp-2col{grid-template-columns:var(--cols,1fr 360px)}}
/* Hero: two columns on desktop. On phones the tall floating-card stack and the
   logo marquee are hidden and replaced by the compact, swipeable .hero-spotlight
   carousel below — keeping the neural-net background for the wow factor. */
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-spotlight{display:none}   /* desktop: off (floating cards do the work) */
@media(max-width:860px){
  .hero-section{padding:28px 0 44px!important;min-height:0!important}
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .hero-h1{font-size:42px!important;margin-bottom:16px!important}
  /* Tighten the long lead paragraph on phones so the spotlight peeks above the fold. */
  .hero-section p{font-size:15px!important;line-height:1.6!important;margin-bottom:22px!important}
  .hero-visual{display:none!important}   /* floating-card stack: off on phones */
  .tools-strip{display:none!important}    /* logo marquee: off on phones */

  /* Swipeable spotlight deck — native scroll-snap (reliable on iOS + Android). */
  .hero-spotlight{
    display:flex;gap:14px;margin:22px -8px 0;padding:6px 8px 16px;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .hero-spotlight::-webkit-scrollbar{display:none}
  .hs-card{
    position:relative;flex:0 0 78%;max-width:300px;scroll-snap-align:center;
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;overflow:hidden;
    padding:18px;border-radius:18px;text-decoration:none;
    background:rgba(13,13,26,.72);border:1px solid rgba(255,255,255,.08);
    box-shadow:0 16px 40px rgba(0,0,0,.45);-webkit-tap-highlight-color:transparent;
    transform:scale(.94);opacity:.72;
    transition:transform .35s ease,opacity .35s ease,box-shadow .35s ease;
  }
  .hs-card.is-active{
    transform:scale(1);opacity:1;
    box-shadow:0 18px 48px rgba(0,0,0,.5),0 0 0 1px var(--accent,#8b5cf6);
    animation:hsFloat 4s ease-in-out infinite;
  }
  .hs-glow{
    position:absolute;top:-42%;right:-28%;width:160px;height:160px;border-radius:50%;
    background:radial-gradient(circle,var(--accent,#8b5cf6),transparent 65%);
    opacity:.20;filter:blur(6px);pointer-events:none;
  }
  .hs-logo{
    width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    font-size:20px;font-weight:800;overflow:hidden;border:1px solid rgba(255,255,255,.08);
  }
  .hs-name{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.01em;position:relative}
  .hs-sub{font-size:12px;color:#94a3b8;position:relative}
  .hs-badge{
    margin-top:2px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:3px 9px;border-radius:999px;border:1px solid;position:relative;
  }
}
@keyframes hsFloat{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1) translateY(-5px)}}
@media(max-width:400px){
  .hero-h1{font-size:34px!important}
  .hero-spotlight .hs-card{flex-basis:84%}
}
@media(prefers-reduced-motion:reduce){
  .hs-card.is-active{animation:none}
  .hero-spotlight{scroll-behavior:auto}
}
/* Mobile hamburger nav */
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;justify-content:center;gap:5px}
.nav-burger span{display:block;width:22px;height:2px;background:#cbd5e1;border-radius:2px;transition:transform .25s,opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#mobile-menu{display:none;position:fixed;top:68px;left:0;right:0;background:rgba(6,6,13,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(139,92,246,.14);padding:14px 20px 22px;flex-direction:column;gap:2px;z-index:99}
#mobile-menu.open{display:flex}
#mobile-menu a.m-link{padding:13px 10px;font-size:15px;font-weight:500;color:#cbd5e1;text-decoration:none;border-radius:9px;transition:background .15s}
#mobile-menu a.m-link:hover,#mobile-menu a.m-link.active{background:rgba(139,92,246,.12);color:#c4b5fd}
#mobile-menu .m-cta{margin-top:12px;display:flex;gap:10px}
#mobile-menu .m-cta a{flex:1;justify-content:center}
@media(max-width:768px){.page-wrap{padding:0 20px}.hide-mobile{display:none!important}.nav-burger{display:flex}}
@media(max-width:768px){.nav-cta-desktop{display:none!important}}
/* ── Responsive grids: collapse columns as the viewport narrows ─────────────── */
.grid-tools{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.grid-tools{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.grid-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}

.grid-tools-fill{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media(max-width:768px){.grid-tools-fill{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}

.grid-cards{display:grid;gap:24px;grid-template-columns:repeat(var(--gc,3),1fr)}
@media(max-width:900px){.grid-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-cards{grid-template-columns:1fr}}

.grid-2{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.grid-2{grid-template-columns:1fr}}

/* Tool preview scenes: 2-col on desktop (some scenes span both); single column
   on phones, resetting any grid-column span so nothing forces a phantom column. */
.grid-scenes{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.grid-scenes{grid-template-columns:1fr}.grid-scenes>*{grid-column:auto!important}}

.grid-stats{display:grid;gap:24px;grid-template-columns:repeat(4,1fr)}
@media(max-width:640px){.grid-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Minimal, calm tool cards on phones (mobile-only; desktop unchanged):
   keep media + name + ★rating + category badge; hide description + extra links. */
@media(max-width:768px){
  .grid-tools .gc p,.grid-tools-fill .gc p{display:none!important}
  .grid-tools-fill .gc>div:last-child>div:last-child{display:none!important}
  /* Hide the right-aligned pricing badge (the direct child of the header row);
     the nested category badge stays. Prevents clipping in the narrow 2-up card. */
  .grid-tools .gc>div:last-child>div:first-child>.bdg,
  .grid-tools-fill .gc>div:last-child>div:first-child>.bdg{display:none}
}
/* Let search/email inputs shrink instead of forcing overflow */
.srch{min-width:0}
.srch input{min-width:0}
/* Newsletter row: stack input + full-width button on small phones */
@media(max-width:480px){
  .nl-form{flex-wrap:wrap}
  .nl-form>.srch{flex:1 1 100%}
  .nl-form>button{flex:1 1 100%;padding:13px 0!important}
}
/* Tame oversized display headings on phones */
@media(max-width:640px){.h-resp{font-size:30px!important;line-height:1.14!important}}
@media(max-width:380px){.h-resp{font-size:26px!important}}
/* Featured blog card: side-by-side on desktop, stacked on phones */
@media(max-width:760px){
  .blog-feat{grid-template-columns:1fr!important}
  .blog-feat>img{height:200px}
}