/* ═══════════════════════════════════════════════════════════════════════
AIToolsay premium footer (scoped .aitsft) — 8px system, Inter, #3680ED
═══════════════════════════════════════════════════════════════════════ */
.aitsft{
/* Palette tokens */
--aits-blue: #3680ED;
--aits-blue-2: #2060C0;
--aits-blue-3: #60A4F5;
--aits-purple: #7048E8;
--aits-blue-tint: #EAF2FD;
--aits-blue-tint-2: #F4F8FE;
--aits-blue-line: #D8E6FB;
--aits-focus: rgba(54,128,237,.28);
--aits-ink: #0F172A;
--aits-ink-2: #1E293B;
--aits-txt: #475569;
--aits-mut: #64748B;
--aits-faint: #94A3B8;
--aits-bg: #F8FAFC;
--aits-bg-2: #F1F5F9;
--aits-card: #FFFFFF;
--aits-line: #E5E7EB;
--aits-line-2: #EEF2F7;
/* Dark bar */
--aits-nav: #0A0F1E;
--aits-nav-2: #050817;
--aits-nav-ln: rgba(255,255,255,.08);
--aits-nav-tx: rgba(255,255,255,.72);
--aits-nav-tx-2: rgba(255,255,255,.55);
/* Shadows */
--aits-sh-xs: 0 1px 2px rgba(15,23,42,.04);
--aits-sh-sm: 0 1px 3px rgba(15,23,42,.06);
--aits-sh-md: 0 4px 12px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.05);
--aits-sh-lg: 0 12px 40px rgba(15,23,42,.10);
--aits-sh-br: 0 6px 20px rgba(54,128,237,.28);
/* Motion */
--aits-t: .3s cubic-bezier(.16,1,.3,1);
--aits-t-f: .18s cubic-bezier(.16,1,.3,1);
/* Layout — matches the 1600px shell cap that seo-page sets via
`--seo-shell-max`, so on a 2560px monitor the header, content grid and
footer all share the same left/right edge instead of the footer
stopping 200px inside the content band. */
--aits-w: 1920px;
margin:0; padding:0;
background:var(--aits-card); color:var(--aits-txt);
font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size:14px; line-height:1.55; letter-spacing:-.005em;
border-top:1px solid var(--aits-line);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.aitsft *{box-sizing:border-box}
.aitsft a{color:inherit;text-decoration:none;transition:color var(--aits-t-f)}
.aitsft ul{list-style:none;margin:0;padding:0}
.aitsft h3{margin:0;font-weight:700}
.aitsft-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.aitsft-wrap{max-width:var(--aits-w);margin:0 auto;padding:0 32px}
.aitsft a:focus-visible,
.aitsft button:focus-visible,
.aitsft input:focus-visible,
.aitsft select:focus-visible{outline:none;box-shadow:0 0 0 3px var(--aits-focus);border-radius:8px}
/* ═══ SECTION 0 · Premium newsletter banner ═══════════════════════════ */
.aitsft-nlband{
position:relative;overflow:hidden;isolation:isolate;
padding:72px 0 56px;
background:linear-gradient(180deg, #F6F9FE 0%, #FFFFFF 100%);
border-bottom:1px solid var(--aits-line-2);
}
.aitsft-nlband-wrap{position:relative;z-index:2}
.aitsft-nlband-bg{position:absolute;inset:0;pointer-events:none;z-index:1}
/* Mesh gradient — three blurred conic-ish gradients layered for a
colorful, editorial ambient background instead of separate DOM orbs. */
.aitsft-nlband-mesh{
position:absolute;inset:-10% -5%;
background:
radial-gradient(38% 55% at 15% 25%, rgba(54,128,237,.42), transparent 65%),
radial-gradient(32% 42% at 88% 12%, rgba(112,72,232,.36), transparent 65%),
radial-gradient(30% 45% at 70% 92%, rgba(236,72,153,.20), transparent 65%),
radial-gradient(28% 40% at 25% 85%, rgba(6,182,212,.22), transparent 65%);
filter:blur(50px);opacity:.85;
}
.aitsft-nlband-grid{
position:absolute;inset:0;opacity:.4;
background-image:
linear-gradient(rgba(54,128,237,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(54,128,237,.05) 1px, transparent 1px);
background-size:48px 48px;
mask-image:radial-gradient(ellipse 1100px 480px at 50% 45%, #000 20%, transparent 75%);
-webkit-mask-image:radial-gradient(ellipse 1100px 480px at 50% 45%, #000 20%, transparent 75%);
}
.aitsft-nl{
position:relative;
display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;
background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 100%);
border:1px solid rgba(216,230,251,.9);border-radius:28px;
padding:56px 60px;
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 40px 100px -40px rgba(54,128,237,.32),
0 16px 48px -16px rgba(15,23,42,.12);
backdrop-filter:blur(16px) saturate(120%);
-webkit-backdrop-filter:blur(16px) saturate(120%);
transition:transform var(--aits-t), box-shadow var(--aits-t);
}
.aitsft-nl:hover{
transform:translateY(-2px);
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 48px 110px -40px rgba(54,128,237,.38),
0 20px 52px -18px rgba(15,23,42,.16);
}
/* Subtle noise texture for premium depth (pure CSS via svg data-uri). */
.aitsft-nl-noise{
position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
opacity:.35;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
/* Static soft glow around the card (was a rotating conic-gradient — too
distracting; kept the depth but killed the spin). */
.aitsft-nl-glow{
position:absolute;inset:-2px;border-radius:34px;z-index:-1;pointer-events:none;
background:
radial-gradient(60% 60% at 20% 30%, rgba(54,128,237,.40), transparent 70%),
radial-gradient(60% 60% at 80% 70%, rgba(112,72,232,.32), transparent 70%),
radial-gradient(50% 40% at 50% 100%, rgba(236,72,153,.20), transparent 75%);
filter:blur(28px);opacity:.55;
}
/* LEFT — pitch */
.aitsft-nl-left{min-width:0}
/* Sizing note for the whole left column: everything here was tuned around
a 44px headline with 12.5–13.5px supporting copy, which read small next
to the 14px form on the right. The pitch column now runs one step up
across the board (eyebrow 14.5 · headline 52 · subtitle 17 · features
15.5) with the icon tiles scaled to match — an icon that keeps its old
box while the text grows is what makes a scaled-up card look stretched
rather than bigger. Responsive steps at the foot of the file move with
these; changing one without the other is what re-crushes the phone
layout. */
.aitsft-nl-eyebrow{
display:inline-flex;align-items:center;gap:11px;max-width:100%;
padding:7px 7px 7px 7px;margin-bottom:22px;
background:linear-gradient(180deg, #fff 0%, rgba(255,255,255,.7) 100%);
border:1px solid var(--aits-blue-line);border-radius:99px;
box-shadow:0 4px 14px rgba(54,128,237,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
.aitsft-nl-eyebrow-mark{
width:31px;height:31px;flex-shrink:0;border-radius:50%;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#3680ED 0%,#7048E8 100%);
box-shadow:0 4px 10px rgba(54,128,237,.34);
}
.aitsft-nl-eyebrow-tx{
font-size:14.5px;font-weight:800;color:var(--aits-ink);letter-spacing:-.005em;
padding-right:4px;min-width:0;
}
.aitsft-nl-eyebrow-live{
display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
padding:6px 11px 6px 9px;border-radius:99px;
background:rgba(12,166,120,.10);color:#0CA678;
font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
border:1px solid rgba(12,166,120,.20);
}
.aitsft-nl-eyebrow-pulse{
width:7px;height:7px;border-radius:50%;background:#0CA678;
box-shadow:0 0 0 0 rgba(12,166,120,.55);
animation:aitsftPulse 2s ease-in-out infinite;
}
@keyframes aitsftPulse{
0%,100%{box-shadow:0 0 0 0 rgba(12,166,120,.55)}
50% {box-shadow:0 0 0 6px rgba(12,166,120,0)}
}
.aitsft-nl-title{
margin:0 0 15px;
font-size:52px;font-weight:800;line-height:1.05;letter-spacing:-.035em;
color:var(--aits-ink);
}
.aitsft-nl-title .aitsft-hl{
background:linear-gradient(90deg,#3680ED 0%,#7048E8 50%,#EC4899 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* The pitch has to land as ONE complete sentence. At 52ch the line broke
after "…straight to", orphaning "your inbox." on a line of its own, which
reads like the copy was cut off mid-thought. 62ch fits the sentence in two
even lines at this size, and `balance` splits it on a phrase boundary
instead of wherever the box happens to end. */
.aitsft-nl-sub{
margin:0 0 26px;font-size:17px;line-height:1.62;color:var(--aits-txt);
max-width:62ch;
text-wrap:balance;
}
/* Feature bullets (3 rows below the subtitle) */
/* Separates the benefit list from the social-proof card below it — with no
gap the two read as one block, which is what "Deep dives on trending AI"
sitting flush against "Join N readers" looked like.
⚠️ The selector needs BOTH classes. `.aitsft ul{list-style:none;margin:0;
padding:0}` above is (0,1,1) and a single-class `.aitsft-nl-feats` is
(0,1,0), so the margin written here was silently discarded and the real
gap was 0px — the original 92px never rendered once.
28px rather than that 92px: the column runs 20 / 14 / 24 above this point,
so 28 steps up for the heavier element without pushing the left column
~114px past the form it is centred against. */
.aitsft .aitsft-nl-feats{
display:flex;flex-direction:column;gap:12px;margin:0 0 28px;
}
.aitsft-nl-feats li{
display:flex;align-items:center;gap:13px;
font-size:15.5px;color:var(--aits-txt);letter-spacing:-.005em;
transition:transform var(--aits-t-f), color var(--aits-t-f);
}
.aitsft-nl-feats li:hover{transform:translateX(3px);color:var(--aits-ink-2)}
.aitsft-nl-feats li:hover .aitsft-nl-feats-ic{transform:scale(1.10) rotate(-5deg)}
.aitsft-nl-feats-ic{
transition:transform var(--aits-t-f), box-shadow var(--aits-t-f);
}
.aitsft-nl-feats li b{color:var(--aits-ink);font-weight:800}
.aitsft-nl-feats-ic{
width:28px;height:28px;flex-shrink:0;border-radius:9px;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 3px 8px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.24);
}
.aitsft-nl-feats-ic-1{background:linear-gradient(135deg,#3680ED 0%,#7048E8 100%);box-shadow:0 3px 8px rgba(54,128,237,.30), inset 0 1px 0 rgba(255,255,255,.24)}
.aitsft-nl-feats-ic-2{background:linear-gradient(135deg,#EC4899 0%,#F472B6 100%);box-shadow:0 3px 8px rgba(236,72,153,.30), inset 0 1px 0 rgba(255,255,255,.24)}
.aitsft-nl-feats-ic-3{background:linear-gradient(135deg,#F59E0B 0%,#F97316 100%);box-shadow:0 3px 8px rgba(245,158,11,.30), inset 0 1px 0 rgba(255,255,255,.24)}
/* Social-proof strip */
.aitsft-nl-proof{
display:flex;align-items:center;gap:16px;
padding:14px 16px;border-radius:18px;
background:rgba(255,255,255,.65);border:1px solid var(--aits-line-2);
backdrop-filter:blur(6px);
transition:background var(--aits-t-f), border-color var(--aits-t-f), transform var(--aits-t-f);
}
.aitsft-nl-proof:hover{
background:rgba(255,255,255,.85);border-color:var(--aits-blue-line);
transform:translateY(-1px);
}
.aitsft-nl-proof-avatars{display:inline-flex;align-items:center;flex-shrink:0}
.aitsft-nl-proof-av{
width:38px;height:38px;border-radius:50%;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
color:#fff;font-size:14px;font-weight:800;
border:2.5px solid #fff;margin-left:-10px;
box-shadow:0 2px 6px rgba(15,23,42,.14);
}
.aitsft-nl-proof-av:first-child{margin-left:0}
/* Real reader photo. `overflow:hidden` + inherited radius so a square
source is cropped to the circle instead of poking out of the stack, and
no background so a transparent PNG doesn't sit on a colour block. */
.aitsft-nl-proof-av-img{overflow:hidden;background:#EAF2FD;padding:0}
.aitsft-nl-proof-av-img img{
width:100%;height:100%;border-radius:inherit;
object-fit:cover;display:block;
}
.aitsft-nl-proof-more{
height:38px;padding:0 11px;border-radius:19px;margin-left:-6px;
border:2.5px solid #fff;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#0F172A 0%,#334155 100%);color:#fff;
font-size:12px;font-weight:800;letter-spacing:.02em;
box-shadow:0 2px 6px rgba(15,23,42,.20);
}
.aitsft-nl-proof-tx{min-width:0;line-height:1.38}
.aitsft-nl-proof-tx b{
display:block;font-size:14.5px;font-weight:800;color:var(--aits-ink);letter-spacing:-.01em;
}
.aitsft-nl-proof-tx em{
display:block;font-style:normal;font-size:12.5px;color:var(--aits-mut);
margin-top:3px;
}
/* RIGHT — glass form */
.aitsft-nl-right{min-width:0}
.aitsft-nl-form{
display:flex;flex-direction:column;gap:16px;
background:linear-gradient(180deg, #fff 0%, #FBFDFF 100%);
border:1px solid var(--aits-line);border-radius:22px;
padding:28px;
box-shadow:0 16px 40px -12px rgba(15,23,42,.14), inset 0 1px 0 #fff;
transition:transform var(--aits-t), box-shadow var(--aits-t), border-color var(--aits-t);
}
.aitsft-nl-form:hover{
transform:translateY(-2px);border-color:var(--aits-blue-line);
box-shadow:0 22px 48px -12px rgba(54,128,237,.20), inset 0 1px 0 #fff;
}
.aitsft-nl-form-head{
display:flex;align-items:center;gap:12px;
padding-bottom:16px;margin-bottom:2px;
border-bottom:1px dashed var(--aits-line);
}
.aitsft-nl-form-ic{
width:40px;height:40px;flex-shrink:0;border-radius:12px;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#F59E0B 0%,#EC4899 100%);
box-shadow:0 6px 14px rgba(245,158,11,.32), inset 0 1px 0 rgba(255,255,255,.24);
transition:transform var(--aits-t);
}
.aitsft-nl-form:hover .aitsft-nl-form-ic{transform:scale(1.08) rotate(-6deg)}
.aitsft-nl-form-head-chip{
display:inline-flex;align-items:center;gap:5px;flex-shrink:0;margin-left:auto;
padding:4px 10px 4px 8px;border-radius:99px;
background:rgba(12,166,120,.10);color:#0CA678;
border:1px solid rgba(12,166,120,.24);
font-size:9.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
}
.aitsft-nl-form-head-chip-dot{
width:5px;height:5px;border-radius:50%;background:#0CA678;
box-shadow:0 0 0 0 rgba(12,166,120,.55);
animation:aitsftPulse 2s ease-in-out infinite;
}
.aitsft-nl-form-head-tx{min-width:0;line-height:1.38}
.aitsft-nl-form-head-tx b{
display:block;font-size:15.5px;font-weight:800;color:var(--aits-ink);letter-spacing:-.01em;
}
.aitsft-nl-form-head-tx em{
display:block;font-style:normal;font-size:12.5px;color:var(--aits-mut);
margin-top:3px;
}
.aitsft-nl-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.aitsft-nl-fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.aitsft-nl-fld-lbl{
display:inline-flex;align-items:center;gap:7px;
font-size:11.5px;font-weight:800;color:var(--aits-ink);
letter-spacing:.10em;text-transform:uppercase;
transition:color var(--aits-t-f);
}
.aitsft-nl-fld-lbl-dot{
display:inline-block;width:5px;height:5px;border-radius:50%;
background:var(--aits-blue,#3680ED);
box-shadow:0 0 0 3px rgba(54,128,237,.14);
transition:box-shadow var(--aits-t-f);
}
.aitsft-nl-fld:focus-within .aitsft-nl-fld-lbl{color:var(--aits-blue)}
.aitsft-nl-fld:focus-within .aitsft-nl-fld-lbl-dot{box-shadow:0 0 0 4px rgba(54,128,237,.20)}
.aitsft-nl-fld-inp{
position:relative;
display:flex;align-items:center;gap:11px;
/* Faint inset base so an untouched field still reads as a fillable
well; it flattens to plain white on focus. */
background:linear-gradient(180deg,#FBFCFE 0%,#F4F7FC 100%);
border:1.5px solid var(--aits-line);border-radius:14px;
padding:11px 14px;min-height:56px;
box-shadow:inset 0 1px 2px rgba(15,23,42,.05);
transition:background var(--aits-t-f), border-color var(--aits-t-f), box-shadow var(--aits-t-f), transform var(--aits-t-f);
}
.aitsft-nl-fld-inp:hover{
background:#fff;
border-color:var(--aits-blue-line);
box-shadow:0 6px 14px -8px rgba(54,128,237,.5), inset 0 1px 0 rgba(255,255,255,.9);
}
.aitsft-nl-fld-inp:focus-within{background:#fff}
/* Filled-and-valid email gets a quiet confirmation tint */
.aitsft-nl-fld-inp:has(input:valid:not(:placeholder-shown)):not(:focus-within){
border-color:var(--aits-blue-line);
}
.aitsft-nl-fld-inp:focus-within{
border-color:var(--aits-blue);
box-shadow:
0 0 0 4px rgba(54,128,237,.16),
0 6px 18px rgba(54,128,237,.14),
inset 0 1px 0 rgba(255,255,255,.9);
}
/* Icon becomes a small gradient tile — feels premium vs. muted glyph. */
/* Tinted at rest, solid blue once the field is engaged — a permanently
saturated tile competed with the input text for attention. */
.aitsft-nl-fld-ic{
display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;flex-shrink:0;border-radius:10px;
color:var(--aits-blue-dark,#2060C0);
background:var(--aits-blue-tint,#EAF2FD);
box-shadow:inset 0 0 0 1px var(--aits-blue-line,rgba(54,128,237,.22));
transition:transform var(--aits-t-f), box-shadow var(--aits-t-f), background var(--aits-t-f), color var(--aits-t-f);
}
.aitsft-nl-fld-inp:hover .aitsft-nl-fld-ic{background:#DCEAFD}
.aitsft-nl-fld-ic svg{width:15px;height:15px}
.aitsft-nl-fld-inp:focus-within .aitsft-nl-fld-ic{
background:linear-gradient(140deg,var(--aits-blue,#3680ED),var(--aits-blue-dark,#2060C0));
color:#fff;
transform:scale(1.06);
box-shadow:0 6px 14px -6px rgba(54,128,237,.75), inset 0 1px 0 rgba(255,255,255,.3);
}
.aitsft-nl-fld-inp input{
flex:1;min-width:0;border:0;outline:0;background:transparent;
font-size:15px;color:var(--aits-ink);font-family:inherit;font-weight:600;
letter-spacing:-.005em;
}
.aitsft-nl-fld-inp input::placeholder{color:var(--aits-faint);font-weight:400}
/* Brand blue only — the old blue→violet ramp read as a different product.
Depth now comes from a light-to-dark blue gradient, not a hue shift. */
.aitsft-nl-btn{
display:inline-flex;align-items:center;justify-content:center;gap:12px;
padding:17px 24px;min-height:58px;
font-size:16px;font-weight:800;letter-spacing:.005em;
color:#fff;border:0;border-radius:14px;font-family:inherit;cursor:pointer;
background:linear-gradient(140deg,var(--aits-blue-light,#60A4F5) -10%,var(--aits-blue,#3680ED) 42%,var(--aits-blue-dark,#2060C0) 100%);
box-shadow:
0 12px 26px -10px rgba(54,128,237,.62),
inset 0 1px 0 rgba(255,255,255,.32);
transition:transform var(--aits-t-f), box-shadow var(--aits-t-f), filter var(--aits-t-f);
position:relative;overflow:hidden;margin-top:6px;isolation:isolate;
}
.aitsft-nl-btn::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(140deg,#7CB4F8 -10%,#4A8EEE 42%,#2A6BCE 100%);
opacity:0;transition:opacity var(--aits-t-f);
}
.aitsft-nl-btn:hover{
transform:translateY(-2px);
box-shadow:
0 20px 38px -12px rgba(54,128,237,.75),
inset 0 1px 0 rgba(255,255,255,.36);
}
.aitsft-nl-btn:hover::before{opacity:1}
.aitsft-nl-btn:active{transform:translateY(0) scale(.99);filter:brightness(.96)}
.aitsft-nl-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(54,128,237,.30),0 12px 26px -10px rgba(54,128,237,.6)}
.aitsft-nl-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;filter:saturate(.55)}
.aitsft-nl-btn:disabled .aitsft-nl-btn-shine{display:none}
/* Diagonal shine sweep on hover */
.aitsft-nl-btn-shine{
position:absolute;top:0;left:-50%;width:40%;height:100%;pointer-events:none;
background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.30) 50%, transparent 60%);
transform:skewX(-18deg);
transition:left .9s cubic-bezier(.16,1,.3,1);
}
.aitsft-nl-btn:hover .aitsft-nl-btn-shine{left:120%}
.aitsft-nl-btn-tx{position:relative;z-index:1}
.aitsft-nl-btn-ic{
display:inline-flex;position:relative;z-index:1;
transition:transform var(--aits-t-f);
}
.aitsft-nl-btn:hover .aitsft-nl-btn-ic{transform:translateX(5px)}
.aitsft-nl-meta{
display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
padding-top:8px;font-size:12.5px;color:var(--aits-mut);font-weight:600;
}
.aitsft-nl-meta-item{
display:inline-flex;align-items:center;gap:6px;line-height:1;
transition:color var(--aits-t-f);
}
.aitsft-nl-meta-item:hover{color:var(--aits-ink-2)}
.aitsft-nl-meta-item span[aria-hidden]{color:var(--aits-blue);display:inline-flex}
.aitsft-nl-msg{font-size:12.5px;min-height:0;text-align:center;font-weight:600}
.aitsft-nl-msg:empty{display:none}
.aitsft-nl-msg.ok{color:#0CA678}
.aitsft-nl-msg.err{color:#E03131}
/* ═══ SECTION 1 · Top grid (6 columns) ═══════════════════════════════ */
.aitsft-top{
display:grid;
grid-template-columns:
minmax(240px, 1.35fr) /* Brand */
repeat(4, minmax(0, 1fr)) /* Product · Discover · Company · Support */
minmax(220px, 1.05fr); /* Trust sidebar */
gap:40px 28px;
padding:80px 32px 56px;
align-items:start;
}
/* ─── Brand column ─── */
.aitsft-brand{min-width:0}
/* Logo + brand-badge use display:flex + width:fit-content so each takes
its own line without stretching full-width (was inline-flex, which put
them side by side on the same row in narrow viewports). */
.aitsft-logo{
display:flex;align-items:center;
width:fit-content;max-width:100%;
margin:12px 0 18px;
}
/* Explicit `height`, not `max-height`. Both logo files are ~3.2:1 (SVG
1575×489, PNG 504×162) while the ![]()
carries width="199" height="62"
as its aspect-ratio hint, so the old `max-height:48px` never applied:
the attribute height was already under the cap and the mark rendered at
40px. A real height is what makes it bigger; `width:auto` keeps each
file on its own intrinsic ratio. */
.aitsft-logo img{height:62px;width:auto;max-width:100%}
.aitsft-logo-d{display:none}
.aitsft-logo-tx{
display:inline-flex;align-items:center;gap:16px;
}
/* Sparkle-shape logo mark — animated gradient sheen + soft outer glow. */
.aitsft-logo-mark{
position:relative;display:inline-flex;width:64px;height:64px;
border-radius:18px;color:#fff;align-items:center;justify-content:center;
background:
linear-gradient(135deg,#3680ED 0%,#5B4CE6 50%,#7048E8 100%);
box-shadow:
0 12px 28px rgba(54,128,237,.38),
0 5px 12px rgba(112,72,232,.28),
inset 0 1px 0 rgba(255,255,255,.24);
overflow:hidden;
}
.aitsft-logo-mark::after{
content:"";position:absolute;inset:0;
background:linear-gradient(135deg, rgba(255,255,255,.35) 0%, transparent 55%);
pointer-events:none;
}
.aitsft-logo-mark svg{width:40px;height:40px;position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.20))}
.aitsft-logo-mark-glow{
position:absolute;inset:-6px;border-radius:24px;pointer-events:none;
background:radial-gradient(circle, rgba(112,72,232,.55), transparent 65%);
filter:blur(14px);opacity:.65;z-index:-1;
}
.aitsft-logo-wm{
display:inline-flex;align-items:baseline;gap:1px;line-height:1;
font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--aits-ink);
}
.aitsft-logo-wm b{
font-weight:800;
background:linear-gradient(135deg,#3680ED 0%,#7048E8 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.aitsft-logo-wm em{font-style:normal;font-weight:800;color:var(--aits-ink)}
/* Verified brand badge — trophy + "World's #1 AI tools directory" chip
Rectangular chip with rounded 14px corners (was pill), amber trophy
icon on a subtle amber-cream background, gradient "#1" text, animated
shine sweep on hover. */
.aitsft-brand-badge{
position:relative;overflow:hidden;isolation:isolate;
display:flex;align-items:center;gap:11px;
width:fit-content;max-width:100%;
padding:9px 14px 9px 9px;margin:0 0 18px;
background:
linear-gradient(180deg, #FFFFFF 0%, #FEFCE8 100%);
border:1px solid #FDE68A;border-radius:14px;
box-shadow:
0 1px 0 rgba(255,255,255,1) inset,
0 3px 10px rgba(245,158,11,.14),
0 1px 3px rgba(15,23,42,.04);
transition:transform var(--aits-t-f), border-color var(--aits-t-f), box-shadow var(--aits-t-f);
cursor:default;
}
.aitsft-brand-badge:hover{
transform:translateY(-2px);
border-color:#FCD34D;
box-shadow:
0 1px 0 rgba(255,255,255,1) inset,
0 8px 20px rgba(245,158,11,.22),
0 3px 8px rgba(15,23,42,.06);
}
/* Diagonal shine sweep on hover */
.aitsft-brand-badge-shine{
position:absolute;top:0;left:-40%;width:40%;height:100%;pointer-events:none;
background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
transform:skewX(-18deg);z-index:1;
transition:left .8s cubic-bezier(.16,1,.3,1);
}
.aitsft-brand-badge:hover .aitsft-brand-badge-shine{left:120%}
/* Trophy icon tile — amber gradient */
.aitsft-brand-badge-ic{
width:26px;height:26px;flex-shrink:0;border-radius:8px;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#F59E0B 0%,#EAB308 100%);
box-shadow:
0 4px 10px rgba(245,158,11,.36),
inset 0 1px 0 rgba(255,255,255,.30);
transition:transform var(--aits-t-f);
}
.aitsft-brand-badge:hover .aitsft-brand-badge-ic{transform:scale(1.08) rotate(-8deg)}
.aitsft-brand-badge-tx{line-height:1.2;min-width:0;position:relative;z-index:2}
.aitsft-brand-badge-tx b{
display:block;font-size:12px;font-weight:800;color:var(--aits-ink);letter-spacing:-.01em;
white-space:nowrap;
}
/* Gradient "#1" ranking accent — amber → orange */
.aitsft-brand-badge-hash{
display:inline-block;font-weight:900;
background:linear-gradient(90deg,#F59E0B 0%,#EA580C 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
letter-spacing:-.02em;
}
.aitsft-brand-badge-tx em{
display:flex;align-items:center;gap:6px;
font-style:normal;font-size:10px;color:var(--aits-mut);
font-weight:600;margin-top:2px;letter-spacing:.01em;
}
.aitsft-brand-badge-dot{
display:inline-block;width:5px;height:5px;border-radius:50%;
background:linear-gradient(135deg,#F59E0B 0%,#EA580C 100%);
box-shadow:0 0 0 0 rgba(245,158,11,.5);
animation:aitsftPulse 2.4s ease-in-out infinite;
}
.aitsft-tagline{
margin:0 0 22px;font-size:14px;line-height:1.6;color:var(--aits-txt);
max-width:34ch;letter-spacing:-.005em;
}
/* ══ Stat tiles — 2×3 grid, premium ══════════════════════════════════
Each tile owns its accent via nth-child hooks (blue/ink/green/pink/
purple/cyan). Labels are allowed to WRAP so "Free AI Tools" never
truncates. Card lifts + accent glow on hover + icon rotates. */
.aitsft-stats{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
margin-bottom:24px;
}
.aitsft-stat{
position:relative;isolation:isolate;
display:flex;align-items:center;gap:12px;padding:13px 14px;min-width:0;
background:var(--aits-card);
border:1px solid var(--aits-line);border-radius:14px;
box-shadow:0 1px 2px rgba(15,23,42,.03);
transition:transform var(--aits-t), border-color var(--aits-t), box-shadow var(--aits-t);
overflow:hidden;
--sc:#3680ED; --sc2:#60A4F5;
}
/* Top-fade tint accent per tile, powered by --sc */
.aitsft-stat::before{
content:"";position:absolute;left:0;right:0;top:0;height:60px;z-index:-1;
opacity:0;transition:opacity var(--aits-t);pointer-events:none;
background:linear-gradient(180deg, color-mix(in oklab, var(--sc) 10%, transparent) 0%, transparent 100%);
}
@supports not (background: color-mix(in oklab, red, blue)) {
.aitsft-stat::before{background:linear-gradient(180deg, rgba(54,128,237,.08) 0%, transparent 100%)}
}
.aitsft-stat:hover{
transform:translateY(-3px);
border-color:color-mix(in oklab, var(--sc) 40%, transparent);
box-shadow:0 10px 24px -8px color-mix(in oklab, var(--sc) 34%, transparent);
}
@supports not (background: color-mix(in oklab, red, blue)) {
.aitsft-stat:hover{border-color:var(--aits-blue-line);box-shadow:0 10px 24px -8px rgba(54,128,237,.28)}
}
.aitsft-stat:hover::before{opacity:1}
.aitsft-stat-ic{
width:34px;height:34px;flex-shrink:0;border-radius:10px;
display:inline-flex;align-items:center;justify-content:center;color:#fff;
background:linear-gradient(135deg, var(--sc) 0%, var(--sc2) 100%);
box-shadow:
0 4px 10px color-mix(in oklab, var(--sc) 30%, transparent),
inset 0 1px 0 rgba(255,255,255,.24);
transition:transform var(--aits-t);
}
@supports not (background: color-mix(in oklab, red, blue)) {
.aitsft-stat-ic{box-shadow:0 4px 10px rgba(54,128,237,.28), inset 0 1px 0 rgba(255,255,255,.24)}
}
.aitsft-stat:hover .aitsft-stat-ic{transform:scale(1.08) rotate(-6deg)}
.aitsft-stat-ic svg{width:16px;height:16px}
/* Per-stat color pairs. Keyed on position, not on the stat, because the
strip is live-filtered — a tile whose table is empty never renders, so
which colour a given figure gets depends on how many tiles survived.
Cover at least as many positions as there are tiles in the defaults or
the overflow silently falls back to the base blue. */
.aitsft-stat:nth-child(1){--sc:#3680ED; --sc2:#60A4F5}
.aitsft-stat:nth-child(2){--sc:#0F172A; --sc2:#334155}
.aitsft-stat:nth-child(3){--sc:#0CA678; --sc2:#22C55E}
.aitsft-stat:nth-child(4){--sc:#EC4899; --sc2:#F472B6}
.aitsft-stat:nth-child(5){--sc:#7048E8; --sc2:#A78BFA}
.aitsft-stat:nth-child(6){--sc:#06B6D4; --sc2:#22D3EE}
.aitsft-stat:nth-child(7){--sc:#F59E0B; --sc2:#FBBF24}
.aitsft-stat:nth-child(8){--sc:#EF4444; --sc2:#F97316}
.aitsft-stat:nth-child(9){--sc:#2060C0; --sc2:#3680ED}
.aitsft-stat:nth-child(10){--sc:#0891B2; --sc2:#06B6D4}
.aitsft-stat:nth-child(11){--sc:#7C3AED; --sc2:#8B5CF6}
.aitsft-stat-tx{min-width:0;flex:1;line-height:1.15;display:flex;flex-direction:column;gap:2px}
.aitsft-stat-tx b{
display:block;font-size:14.5px;font-weight:800;color:var(--aits-ink);
letter-spacing:-.02em;line-height:1;
}
.aitsft-stat-tx small{
display:block;font-size:11px;font-weight:600;color:var(--aits-mut);
letter-spacing:.005em;line-height:1.3;
/* wrap allowed — labels never truncate */
}
.aitsft-hl{color:var(--aits-blue)}
/* ─── Nav columns (2-6) · premium per-column styling ───
Each column exposes its own accent through the --col-c / --col-c2
custom props so the icon tile, header underline, and link-hover state
all pull from the same palette. Defaults to blue; per-column classes
below override. */
.aitsft-col{
--col-c: #3680ED;
--col-c2:#60A4F5;
--col-tint: rgba(54,128,237,.10);
min-width:0;
}
.aitsft-col-product {--col-c:#3680ED; --col-c2:#60A4F5; --col-tint:rgba(54,128,237,.10)}
.aitsft-col-discover {--col-c:#7048E8; --col-c2:#A78BFA; --col-tint:rgba(112,72,232,.10)}
.aitsft-col-company {--col-c:#EC4899; --col-c2:#F472B6; --col-tint:rgba(236,72,153,.10)}
.aitsft-col-support {--col-c:#0CA678; --col-c2:#22C55E; --col-tint:rgba(12,166,120,.10)}
.aitsft-col-h{
display:flex;align-items:center;gap:10px;
padding-bottom:14px;margin:0 0 12px;
position:relative;
border-bottom:1px dashed var(--aits-line);
}
/* Colored accent under the dashed rule — 40px slab in the column's hue. */
.aitsft-col-h::after{
content:"";position:absolute;left:0;bottom:-1px;width:40px;height:2px;
background:linear-gradient(90deg, var(--col-c) 0%, var(--col-c2) 100%);
border-radius:2px;
}
.aitsft-col-ic{
width:32px;height:32px;flex-shrink:0;border-radius:10px;color:#fff;
background:linear-gradient(135deg, var(--col-c) 0%, var(--col-c2) 100%);
border:0;box-shadow:0 4px 10px color-mix(in oklab, var(--col-c) 32%, transparent);
display:inline-flex;align-items:center;justify-content:center;
}
@supports not (background: color-mix(in oklab, red, blue)) {
.aitsft-col-ic{box-shadow:0 4px 10px rgba(54,128,237,.28)}
}
.aitsft-col-tx{
line-height:1;font-size:12px;font-weight:800;
color:var(--aits-ink);letter-spacing:.10em;text-transform:uppercase;
}
.aitsft-col ul{display:flex;flex-direction:column;gap:1px}
.aitsft-col li a{
position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:9px 12px;margin:0 -12px;border-radius:10px;
color:var(--aits-ink);line-height:1.3;
transition:background var(--aits-t-f), color var(--aits-t-f);
}
.aitsft-col-item{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.aitsft-col-item b{
font-size:13.5px;font-weight:600;color:var(--aits-ink);
display:inline-flex;align-items:center;gap:6px;letter-spacing:-.005em;
transition:color var(--aits-t-f);
}
.aitsft-col-item small{
font-size:11.5px;font-weight:500;color:var(--aits-mut);letter-spacing:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aitsft-col li a:hover{background:var(--col-tint)}
.aitsft-col li a:hover .aitsft-col-item b{color:var(--col-c)}
.aitsft-col-ar{
display:inline-flex;color:var(--aits-faint);flex-shrink:0;
opacity:0;transform:translateX(-4px);
transition:opacity var(--aits-t-f), transform var(--aits-t-f), color var(--aits-t-f);
}
.aitsft-col li a:hover .aitsft-col-ar{opacity:1;transform:translateX(0);color:var(--col-c)}
/* Inline badges (NEW / external / AI-sparkle) */
.aitsft-badge{
display:inline-flex;align-items:center;
padding:2px 7px;font-size:9px;font-weight:800;letter-spacing:.06em;
font-style:normal;line-height:1.3;border-radius:99px;
background:linear-gradient(135deg,#0CA678 0%,#22C55E 100%);color:#fff;
box-shadow:0 2px 4px rgba(12,166,120,.28);text-transform:uppercase;
}
.aitsft-ext,.aitsft-ai{
display:inline-flex;align-items:center;justify-content:center;
width:16px;height:16px;border-radius:5px;
color:var(--aits-mut);
background:var(--aits-bg);border:1px solid var(--aits-line);
transition:all var(--aits-t-f);
}
.aitsft-ai{color:var(--aits-purple);background:rgba(112,72,232,.10);border-color:rgba(112,72,232,.20)}
.aitsft-col li a:hover .aitsft-ext{color:var(--col-c);border-color:var(--col-c);background:transparent}
.aitsft-col li a:hover .aitsft-ai{color:var(--aits-purple);border-color:var(--aits-purple);background:rgba(112,72,232,.14)}
/* ─── Trust sidebar — premium redesign ─── */
.aitsft-side{display:flex;flex-direction:column;gap:14px;min-width:0}
/* Base card shape shared by trust + checks */
.aitsft-trust,
.aitsft-checks{
position:relative;isolation:isolate;
background:var(--aits-card);border:1px solid var(--aits-line);border-radius:18px;
padding:20px 18px;overflow:hidden;
box-shadow:0 1px 2px rgba(15,23,42,.03), 0 4px 12px rgba(15,23,42,.04);
transition:transform var(--aits-t), box-shadow var(--aits-t), border-color var(--aits-t);
}
/* Very subtle blue tint wash at top of each card */
.aitsft-trust::before,
.aitsft-checks::before{
content:"";position:absolute;left:0;right:0;top:0;height:70px;z-index:-1;
background:linear-gradient(180deg, rgba(54,128,237,.05) 0%, transparent 100%);
opacity:.8;pointer-events:none;
}
.aitsft-trust:hover,
.aitsft-checks:hover{
transform:translateY(-3px);
box-shadow:0 14px 32px -10px rgba(54,128,237,.24), 0 4px 12px -4px rgba(15,23,42,.08);
border-color:var(--aits-blue-line);
}
/* ══ TRUST CARD ══════════════════════════════════════════════════ */
.aitsft-trust-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.aitsft-trust-ic{
width:38px;height:38px;flex-shrink:0;border-radius:12px;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#0CA678 0%,#22C55E 100%);
box-shadow:0 6px 14px rgba(12,166,120,.34), inset 0 1px 0 rgba(255,255,255,.24);
transition:transform var(--aits-t), box-shadow var(--aits-t);
}
.aitsft-trust:hover .aitsft-trust-ic{
transform:scale(1.06) rotate(-6deg);
box-shadow:0 8px 18px rgba(12,166,120,.44), inset 0 1px 0 rgba(255,255,255,.28);
}
.aitsft-trust-head > div{min-width:0;flex:1;line-height:1.3}
.aitsft-trust-head b{display:block;font-size:13.5px;font-weight:800;color:var(--aits-ink);letter-spacing:-.015em}
.aitsft-trust-rate{
display:inline-flex;align-items:center;gap:7px;margin:6px 0 4px;flex-wrap:wrap;
padding:4px 9px 4px 6px;border-radius:99px;
background:linear-gradient(180deg, rgba(251,191,36,.10) 0%, rgba(251,191,36,.04) 100%);
border:1px solid rgba(251,191,36,.24);
}
.aitsft-stars{display:inline-flex;gap:1px;position:relative}
.aitsft-star{display:inline-flex;color:#E5E7EB;filter:drop-shadow(0 1px 1px rgba(251,191,36,.14))}
.aitsft-star svg{fill:currentColor;stroke:none}
.aitsft-star.on{color:#FBBF24}
.aitsft-star.half svg{fill:url(#aits-halfgold)}
.aitsft-trust-num{
font-size:12px;font-weight:800;letter-spacing:-.005em;
background:linear-gradient(90deg,#F59E0B 0%,#EAB308 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.aitsft-trust-head small{
display:block;font-size:11px;font-weight:600;color:var(--aits-mut);margin-top:2px;
}
/* Avatar stack (community proof) */
.aitsft-avatars{
display:flex;align-items:center;margin-top:14px;padding-top:12px;
border-top:1px dashed var(--aits-line);
}
.aitsft-av{
width:28px;height:28px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
color:#fff;font-size:11px;font-weight:800;
border:2.5px solid var(--aits-card);margin-left:-9px;
box-shadow:0 3px 6px rgba(15,23,42,.14);
transition:transform var(--aits-t-f), box-shadow var(--aits-t-f);
position:relative;
}
.aitsft-av:first-child{margin-left:0}
.aitsft-av:hover{transform:translateY(-3px) scale(1.10);z-index:2;box-shadow:0 6px 12px rgba(15,23,42,.24)}
.aitsft-av-more{
height:28px;padding:0 10px;border-radius:14px;margin-left:-4px;
border:2.5px solid var(--aits-card);
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#3680ED 0%,#7048E8 100%);color:#fff;
font-size:10px;font-weight:800;letter-spacing:.02em;
box-shadow:0 3px 8px rgba(54,128,237,.36);
transition:transform var(--aits-t-f), box-shadow var(--aits-t-f);
}
.aitsft-av-more:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(54,128,237,.44)}
/* ══ CHECKS CARD ═══════════════════════════════════════════════════ */
.aitsft-checks{display:flex;flex-direction:column;gap:2px}
.aitsft-check{
position:relative;
display:flex;align-items:center;gap:11px;
padding:8px 10px;margin:0 -10px;border-radius:10px;
font-size:12.5px;font-weight:600;color:var(--aits-ink-2);letter-spacing:-.005em;
transition:background var(--aits-t-f), color var(--aits-t-f);
}
/* Left accent bar reveals on hover */
.aitsft-check::before{
content:"";position:absolute;left:2px;top:10px;bottom:10px;width:2px;border-radius:2px;
background:linear-gradient(180deg,#3680ED 0%,#7048E8 100%);
opacity:0;transform:scaleY(0);
transition:opacity var(--aits-t-f), transform var(--aits-t-f);
}
.aitsft-check:hover{
background:linear-gradient(90deg, rgba(54,128,237,.06) 0%, transparent 100%);
color:var(--aits-ink);
}
.aitsft-check:hover::before{opacity:1;transform:scaleY(1)}
.aitsft-check-ic{
width:22px;height:22px;flex-shrink:0;border-radius:50%;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#3680ED 0%,#7048E8 100%);
box-shadow:0 3px 6px rgba(54,128,237,.32), inset 0 1px 0 rgba(255,255,255,.24);
transition:transform var(--aits-t-f), box-shadow var(--aits-t-f);
}
.aitsft-check:hover .aitsft-check-ic{transform:scale(1.08);box-shadow:0 4px 10px rgba(54,128,237,.42)}
/* Alternating check icon colors — cycles blue → green → pink → amber → purple */
.aitsft-check:nth-child(2) .aitsft-check-ic{background:linear-gradient(135deg,#0CA678 0%,#22C55E 100%);box-shadow:0 3px 6px rgba(12,166,120,.32), inset 0 1px 0 rgba(255,255,255,.24)}
.aitsft-check:nth-child(2):hover .aitsft-check-ic{box-shadow:0 4px 10px rgba(12,166,120,.42)}
.aitsft-check:nth-child(3) .aitsft-check-ic{background:linear-gradient(135deg,#EC4899 0%,#F472B6 100%);box-shadow:0 3px 6px rgba(236,72,153,.32), inset 0 1px 0 rgba(255,255,255,.24)}
.aitsft-check:nth-child(3):hover .aitsft-check-ic{box-shadow:0 4px 10px rgba(236,72,153,.42)}
.aitsft-check:nth-child(4) .aitsft-check-ic{background:linear-gradient(135deg,#F59E0B 0%,#FBBF24 100%);box-shadow:0 3px 6px rgba(245,158,11,.32), inset 0 1px 0 rgba(255,255,255,.24)}
.aitsft-check:nth-child(4):hover .aitsft-check-ic{box-shadow:0 4px 10px rgba(245,158,11,.42)}
.aitsft-check:nth-child(5) .aitsft-check-ic{background:linear-gradient(135deg,#7048E8 0%,#A78BFA 100%);box-shadow:0 3px 6px rgba(112,72,232,.32), inset 0 1px 0 rgba(255,255,255,.24)}
.aitsft-check:nth-child(5):hover .aitsft-check-ic{box-shadow:0 4px 10px rgba(112,72,232,.42)}
/* ═══ SECTION 2 · Feature strip — 6 items inside one white card. ══════ */
.aitsft-strip{
display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;
background:var(--aits-card);border:1px solid var(--aits-line);border-radius:16px;
padding:16px 12px;margin:0;box-shadow:var(--aits-sh-xs);
}
.aitsft-strip li{
display:flex;align-items:center;gap:12px;
padding:6px 14px;min-width:0;
}
.aitsft-strip-ic{
width:38px;height:38px;flex-shrink:0;border-radius:11px;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
transition:transform var(--aits-t);
}
.aitsft-strip li:hover .aitsft-strip-ic{transform:scale(1.08) rotate(-4deg)}
.aitsft-strip-ic-0{background:linear-gradient(135deg,#EC4899 0%,#F472B6 100%);box-shadow:0 6px 14px rgba(236,72,153,.28)}
.aitsft-strip-ic-1{background:linear-gradient(135deg,#7048E8 0%,#A78BFA 100%);box-shadow:0 6px 14px rgba(112,72,232,.28)}
.aitsft-strip-ic-2{background:linear-gradient(135deg,#0CA678 0%,#22C55E 100%);box-shadow:0 6px 14px rgba(12,166,120,.28)}
.aitsft-strip-ic-3{background:linear-gradient(135deg,#3680ED 0%,#60A4F5 100%);box-shadow:0 6px 14px rgba(54,128,237,.28)}
.aitsft-strip-ic-4{background:linear-gradient(135deg,#F59E0B 0%,#FBBF24 100%);box-shadow:0 6px 14px rgba(245,158,11,.28)}
.aitsft-strip-ic-5{background:linear-gradient(135deg,#EF4444 0%,#F87171 100%);box-shadow:0 6px 14px rgba(239,68,68,.28)}
.aitsft-strip-tx{min-width:0;line-height:1.3}
.aitsft-strip-tx b{display:block;font-size:13px;font-weight:800;color:var(--aits-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aitsft-strip-tx small{display:block;font-size:11px;color:var(--aits-mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
/* ═══ SECTION 3 · Quick access (4 blocks — premium polish) ═══════════
Each card owns its accent color via --qc / --qc2 / --qtint. Card lift
+ gradient border reveal on hover, header icon scales, per-row
accent bar slides in from the left. */
.aitsft-quick{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
margin-top:20px;margin-bottom:56px;
}
.aitsft-qblock{
--qc: #3680ED;
--qc2: #60A4F5;
--qtint: rgba(54,128,237,.06);
position:relative;isolation:isolate;
background:var(--aits-card);border:1px solid var(--aits-line);border-radius:20px;
padding:22px 20px 18px;min-width:0;
/* Three layers rather than two: a hairline of light along the top inner
edge so the card catches the page light like glass, a contact shadow to
seat it, and a wide soft one for lift. The old pair read flat next to
the gradient icon tile it contains. */
box-shadow:
inset 0 1px 0 rgba(255,255,255,.7),
0 1px 2px rgba(15,23,42,.04),
0 8px 24px -12px rgba(15,23,42,.10);
transition:transform var(--aits-t), box-shadow var(--aits-t), border-color var(--aits-t);
display:flex;flex-direction:column;overflow:hidden;
}
.aitsft-qblock-cats {--qc:#3680ED; --qc2:#60A4F5; --qtint:rgba(54,128,237,.06)}
.aitsft-qblock-trending {--qc:#EF4444; --qc2:#F97316; --qtint:rgba(239,68,68,.06)}
.aitsft-qblock-deals {--qc:#EC4899; --qc2:#F472B6; --qtint:rgba(236,72,153,.06)}
.aitsft-qblock-recent {--qc:#7048E8; --qc2:#A78BFA; --qtint:rgba(112,72,232,.06)}
/* Top gradient wash — the card's tint at 100% at the top fading to 0. */
.aitsft-qblock::before{
content:"";position:absolute;left:0;right:0;top:0;height:100px;
z-index:-1;opacity:.75;pointer-events:none;
background:linear-gradient(180deg, var(--qtint) 0%, transparent 100%);
}
/* Top edge shine bar that appears on hover — draws the eye. */
.aitsft-qblock::after{
content:"";position:absolute;left:18px;right:18px;top:0;height:2px;
background:linear-gradient(90deg, transparent, var(--qc), var(--qc2), transparent);
border-radius:0 0 2px 2px;
opacity:0;transform:translateY(-2px);
transition:opacity var(--aits-t), transform var(--aits-t);
}
.aitsft-qblock:hover{
transform:translateY(-4px);
box-shadow:
0 20px 40px -12px color-mix(in oklab, var(--qc) 28%, transparent),
0 8px 20px -8px rgba(15,23,42,.10);
border-color:color-mix(in oklab, var(--qc) 34%, transparent);
}
@supports not (background: color-mix(in oklab, red, blue)) {
.aitsft-qblock:hover{box-shadow:0 20px 40px -12px rgba(54,128,237,.28), 0 8px 20px -8px rgba(15,23,42,.10);border-color:var(--aits-blue-line)}
}
.aitsft-qblock:hover::after{opacity:1;transform:translateY(0)}
/* Header */
.aitsft-qhead{
position:relative;
display:flex;align-items:center;gap:11px;margin-bottom:16px;padding-bottom:14px;
border-bottom:0;
}
/* A hairline that carries the card's own hue and fades out, instead of the
dashed grey rule. Dashed borders read as a placeholder; a tinted gradient
rule ties the header to the tile above it. */
.aitsft-qhead::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,
color-mix(in oklab, var(--qc) 40%, transparent) 0%,
var(--aits-line) 42%,
transparent 100%);
}
@supports not (background: color-mix(in oklab, red, blue)) {
.aitsft-qhead::after{background:linear-gradient(90deg, var(--aits-line) 0%, var(--aits-line) 60%, transparent 100%)}
}
.aitsft-qhead-ic{
width:36px;height:36px;flex-shrink:0;border-radius:11px;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, var(--qc) 0%, var(--qc2) 100%);
box-shadow:0 6px 14px color-mix(in oklab, var(--qc) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.24);
transition:transform var(--aits-t), box-shadow var(--aits-t);
}
@supports not (background: color-mix(in oklab, red, blue)) {
.aitsft-qhead-ic{box-shadow:0 6px 14px rgba(54,128,237,.28), inset 0 1px 0 rgba(255,255,255,.24)}
}
.aitsft-qblock:hover .aitsft-qhead-ic{transform:scale(1.06) rotate(-4deg)}
.aitsft-qhead-tx{min-width:0;flex:1;line-height:1.25}
.aitsft-qhead-tx b{
display:block;font-size:13.5px;font-weight:800;color:var(--aits-ink);
letter-spacing:-.015em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aitsft-qhead-tx em{
display:block;font-style:normal;font-size:11px;font-weight:600;
color:var(--aits-mut);margin-top:2px;letter-spacing:.005em;
}
.aitsft-qhead-chip{
display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
padding:4px 9px;border-radius:99px;
font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
background:linear-gradient(180deg, color-mix(in oklab, var(--qc) 14%, #fff) 0%, color-mix(in oklab, var(--qc) 6%, #fff) 100%);
color:var(--qc);
border:1px solid color-mix(in oklab, var(--qc) 26%, transparent);
box-shadow:0 1px 2px color-mix(in oklab, var(--qc) 18%, transparent);
}
@supports not (background: color-mix(in oklab, red, blue)) {
.aitsft-qhead-chip{background:rgba(54,128,237,.10);border-color:rgba(54,128,237,.24);box-shadow:0 1px 2px rgba(54,128,237,.14)}
}
.aitsft-qhead-chip-blue {--qc:#3680ED}
.aitsft-qhead-chip-live {--qc:#EF4444}
.aitsft-qhead-chip-pink {--qc:#EC4899}
.aitsft-qhead-chip-purple{--qc:#7048E8}
.aitsft-qhead-chip-dot{
width:6px;height:6px;border-radius:50%;background:currentColor;
box-shadow:0 0 0 0 currentColor;
animation:aitsftPulse 2s ease-in-out infinite;
}
/* ─── Popular Categories — pills with lift ─── */
.aitsft-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:auto}
.aitsft-pill{
position:relative;overflow:hidden;
display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
font-size:11.5px;font-weight:700;color:var(--aits-ink-2);letter-spacing:-.005em;
background:var(--aits-bg);border:1px solid var(--aits-line);border-radius:99px;
transition:transform var(--aits-t-f), box-shadow var(--aits-t-f), color var(--aits-t-f), border-color var(--aits-t-f);
}
.aitsft-pill::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(135deg, var(--qc, #3680ED) 0%, var(--qc2, #7048E8) 100%);
opacity:0;transition:opacity var(--aits-t-f);
}
.aitsft-pill:hover{
color:#fff;border-color:transparent;transform:translateY(-2px);
box-shadow:0 8px 18px color-mix(in oklab, var(--qc, #3680ED) 36%, transparent);
}
@supports not (background: color-mix(in oklab, red, blue)) {
.aitsft-pill:hover{box-shadow:0 8px 18px rgba(54,128,237,.36)}
}
.aitsft-pill:hover::before{opacity:1}
/* ─── Trending Searches — medal-style top-3 badges ─── */
.aitsft-trending{
display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;margin:0 0 auto;padding:0;
list-style:none;
}
.aitsft-trending li a{
position:relative;
display:flex;align-items:center;gap:10px;
padding:7px 10px;margin:0 -10px;border-radius:10px;
font-size:12px;color:var(--aits-txt);font-weight:600;letter-spacing:-.005em;
transition:background var(--aits-t-f), color var(--aits-t-f);
}
/* Left accent bar that slides in on hover */
.aitsft-trending li a::before{
content:"";position:absolute;left:2px;top:8px;bottom:8px;width:2px;border-radius:2px;
background:linear-gradient(180deg, var(--qc) 0%, var(--qc2) 100%);
opacity:0;transform:scaleY(0);transform-origin:center;
transition:opacity var(--aits-t-f), transform var(--aits-t-f);
}
.aitsft-trending li a:hover{background:var(--qtint);color:var(--qc)}
.aitsft-trending li a:hover::before{opacity:1;transform:scaleY(1)}
.aitsft-trend-rank{
flex-shrink:0;width:22px;height:20px;border-radius:6px;
display:inline-flex;align-items:center;justify-content:center;
font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;
color:var(--aits-mut);letter-spacing:.02em;
background:var(--aits-bg);border:1px solid var(--aits-line);
transition:background var(--aits-t-f), color var(--aits-t-f), border-color var(--aits-t-f);
}
/* Top-3 get filled medal-style badges (gold / silver / bronze feel). */
.aitsft-trending li:nth-child(1) .aitsft-trend-rank{
background:linear-gradient(135deg,#F59E0B 0%,#EAB308 100%);color:#fff;border-color:transparent;
box-shadow:0 2px 6px rgba(245,158,11,.32);
}
.aitsft-trending li:nth-child(2) .aitsft-trend-rank{
background:linear-gradient(135deg,#94A3B8 0%,#CBD5E1 100%);color:#fff;border-color:transparent;
box-shadow:0 2px 6px rgba(148,163,184,.32);
}
.aitsft-trending li:nth-child(3) .aitsft-trend-rank{
background:linear-gradient(135deg,#EA580C 0%,#F97316 100%);color:#fff;border-color:transparent;
box-shadow:0 2px 6px rgba(234,88,12,.32);
}
.aitsft-trend-name{
flex:1;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aitsft-trend-ic{
color:#0CA678;display:inline-flex;flex-shrink:0;opacity:.75;
transition:transform var(--aits-t-f), color var(--aits-t-f);
}
.aitsft-trending li a:hover .aitsft-trend-ic{transform:translateY(-2px) scale(1.15);color:#0CA678;opacity:1}
/* Search-now inline form — sits below the trending list. Submits to
/search?q=... which the site already handles. Colored to match the
trending card's red-orange accent. */
.aitsft-trend-form{
display:flex;align-items:center;gap:8px;
margin:14px 0 0;padding:8px 8px 8px 12px;
background:linear-gradient(180deg, #FFFFFF 0%, #FFF7ED 100%);
border:1.5px solid var(--aits-line);border-radius:12px;
box-shadow:0 1px 2px rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.9);
transition:border-color var(--aits-t-f), box-shadow var(--aits-t-f), background var(--aits-t-f);
}
.aitsft-trend-form:hover{border-color:rgba(239,68,68,.32)}
.aitsft-trend-form:focus-within{
border-color:#EF4444;background:#fff;
box-shadow:
0 0 0 4px rgba(239,68,68,.14),
0 6px 14px rgba(239,68,68,.16),
inset 0 1px 0 rgba(255,255,255,.9);
}
.aitsft-trend-form-ic{
color:var(--aits-mut);display:inline-flex;flex-shrink:0;
transition:color var(--aits-t-f), transform var(--aits-t-f);
}
.aitsft-trend-form:focus-within .aitsft-trend-form-ic{color:#EF4444;transform:scale(1.08)}
.aitsft-trend-form-inp{
flex:1;min-width:0;border:0;outline:0;background:transparent;
font-family:inherit;font-size:12.5px;font-weight:600;color:var(--aits-ink);
letter-spacing:-.005em;padding:2px 0;
}
.aitsft-trend-form-inp::placeholder{color:var(--aits-faint);font-weight:500}
.aitsft-trend-form-inp::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* Enter kbd hint — visible when the field is empty, hides on focus */
.aitsft-trend-form-kbd{
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
width:22px;height:22px;border-radius:6px;
font-family:inherit;font-size:11px;font-weight:800;color:var(--aits-mut);
background:#fff;border:1px solid var(--aits-line);
box-shadow:0 1px 0 rgba(15,23,42,.06);
transition:opacity var(--aits-t-f), transform var(--aits-t-f);
}
.aitsft-trend-form:focus-within .aitsft-trend-form-kbd{opacity:0;transform:translateX(6px);pointer-events:none}
/* Submit button — filled red-orange, hidden by default, appears on focus */
.aitsft-trend-form-btn{
display:none;align-items:center;gap:5px;
padding:7px 12px;font-family:inherit;font-size:11.5px;font-weight:800;letter-spacing:.005em;
color:#fff;border:0;border-radius:8px;cursor:pointer;
background:linear-gradient(135deg,#EF4444 0%,#F97316 100%);
box-shadow:0 4px 10px rgba(239,68,68,.32), inset 0 1px 0 rgba(255,255,255,.20);
transition:transform var(--aits-t-f), box-shadow var(--aits-t-f), filter var(--aits-t-f);
}
.aitsft-trend-form:focus-within .aitsft-trend-form-btn{display:inline-flex}
.aitsft-trend-form-btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 6px 14px rgba(239,68,68,.40)}
.aitsft-trend-form-btn-ic{display:inline-flex;transition:transform var(--aits-t-f)}
.aitsft-trend-form-btn:hover .aitsft-trend-form-btn-ic{transform:translateX(2px)}
/* ─── Top Deals + Recently Added — richer rows ─── */
.aitsft-deals{display:flex;flex-direction:column;gap:2px;margin:0 0 auto;padding:0;list-style:none}
.aitsft-deals li a{
position:relative;
display:flex;align-items:center;gap:11px;
padding:9px 10px;margin:0 -10px;border-radius:12px;
color:var(--aits-ink);
transition:background var(--aits-t-f);
}
/* Left accent bar */
.aitsft-deals li a::before{
content:"";position:absolute;left:2px;top:12px;bottom:12px;width:2px;border-radius:2px;
background:linear-gradient(180deg, var(--qc) 0%, var(--qc2) 100%);
opacity:0;transform:scaleY(0);
transition:opacity var(--aits-t-f), transform var(--aits-t-f);
}
.aitsft-deals li a:hover{background:var(--qtint)}
.aitsft-deals li a:hover::before{opacity:1;transform:scaleY(1)}
.aitsft-deal-ic{
--c:#3680ED;
width:34px;height:34px;flex-shrink:0;border-radius:10px;
display:inline-flex;align-items:center;justify-content:center;
font-size:12.5px;font-weight:800;color:#fff;
background:linear-gradient(135deg, var(--c) 0%, color-mix(in oklab, var(--c) 78%, #000) 100%);
box-shadow:
0 4px 10px color-mix(in oklab, var(--c) 32%, transparent),
inset 0 1px 0 rgba(255,255,255,.28);
transition:transform var(--aits-t-f), box-shadow var(--aits-t-f);
}
@supports not (background: color-mix(in oklab, red, blue)) {
.aitsft-deal-ic{background:var(--c);box-shadow:0 4px 10px rgba(54,128,237,.28), inset 0 1px 0 rgba(255,255,255,.28)}
}
.aitsft-deals li a:hover .aitsft-deal-ic{transform:scale(1.06) rotate(-3deg)}
.aitsft-deal-tx{flex:1;min-width:0;line-height:1.3}
.aitsft-deal-tx b{
display:block;font-size:12.5px;font-weight:700;color:var(--aits-ink);
letter-spacing:-.005em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aitsft-deal-tx em{
display:block;font-style:normal;font-size:10.5px;font-weight:500;
color:var(--aits-mut);margin-top:1px;letter-spacing:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aitsft-deal-lbl{
font-size:9.5px;font-weight:800;letter-spacing:.05em;font-style:normal;
padding:3px 8px;border-radius:99px;line-height:1.4;flex-shrink:0;
background:linear-gradient(135deg,#0CA678 0%,#22C55E 100%);color:#fff;
box-shadow:0 2px 6px rgba(12,166,120,.28), inset 0 1px 0 rgba(255,255,255,.16);
text-transform:uppercase;
}
.aitsft-deal-new{
background:linear-gradient(135deg,#3680ED 0%,#60A4F5 100%);
box-shadow:0 2px 6px rgba(54,128,237,.32), inset 0 1px 0 rgba(255,255,255,.16);
}
.aitsft-deals li:nth-child(2n) .aitsft-deal-lbl{background:linear-gradient(135deg,#EC4899 0%,#F472B6 100%);box-shadow:0 2px 6px rgba(236,72,153,.28), inset 0 1px 0 rgba(255,255,255,.16)}
.aitsft-deals li:nth-child(3n) .aitsft-deal-lbl{background:linear-gradient(135deg,#F59E0B 0%,#FBBF24 100%);box-shadow:0 2px 6px rgba(245,158,11,.28), inset 0 1px 0 rgba(255,255,255,.16)}
.aitsft-deals li:nth-child(4n) .aitsft-deal-lbl{background:linear-gradient(135deg,#7048E8 0%,#A78BFA 100%);box-shadow:0 2px 6px rgba(112,72,232,.28), inset 0 1px 0 rgba(255,255,255,.16)}
.aitsft-deal-new,
.aitsft-deals li:nth-child(2n) .aitsft-deal-new,
.aitsft-deals li:nth-child(3n) .aitsft-deal-new,
.aitsft-deals li:nth-child(4n) .aitsft-deal-new{background:linear-gradient(135deg,#3680ED 0%,#60A4F5 100%);box-shadow:0 2px 6px rgba(54,128,237,.32), inset 0 1px 0 rgba(255,255,255,.16)}
/* Footer "view all" link */
.aitsft-qmore{
position:relative;
display:inline-flex;align-items:center;gap:6px;
margin-top:16px;padding-top:14px;border-top:0;
font-size:12px;font-weight:800;color:var(--qc);letter-spacing:-.005em;
transition:color var(--aits-t-f), gap var(--aits-t-f);
}
/* Matches the header rule rather than the old dashed grey — the card is
bracketed top and bottom by the same tinted hairline. It spans the card,
not just the link, so the negative inline offsets undo the block padding. */
.aitsft-qmore::before{
content:"";position:absolute;top:0;left:-20px;right:-20px;height:1px;
background:linear-gradient(90deg,
color-mix(in oklab, var(--qc) 34%, transparent) 0%,
var(--aits-line) 46%,
transparent 100%);
}
@supports not (background: color-mix(in oklab, red, blue)) {
.aitsft-qmore::before{background:linear-gradient(90deg, var(--aits-line) 0%, var(--aits-line) 62%, transparent 100%)}
}
.aitsft-qmore:hover{gap:10px}
.aitsft-qmore-ic{
display:inline-flex;transition:transform var(--aits-t-f);
}
.aitsft-qmore:hover .aitsft-qmore-ic{transform:translateX(4px)}
/* ═══ SECTION 4 · Premium dark bottom bar ═══════════════════════════ */
.aitsft-bar{
position:relative;isolation:isolate;
background:
radial-gradient(ellipse 60% 40% at 15% 0%, rgba(54,128,237,.28), transparent 60%),
radial-gradient(ellipse 55% 40% at 85% 100%, rgba(112,72,232,.24), transparent 55%),
linear-gradient(180deg, #0A0F1E 0%, #050817 55%, #030510 100%);
color:var(--aits-nav-tx);
padding:44px 0 24px;
margin-top:24px;
/* overflow stays visible so the language/theme dropdown menu can pop
above the bar without being clipped. Ambient orbs are clipped by
their own .aitsft-bar-bg wrapper. */
}
.aitsft-bar-bg{
position:absolute;inset:0;pointer-events:none;z-index:0;
overflow:hidden;border-radius:inherit;
}
/* Top hairline gradient */
.aitsft-bar-shine{
position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg, transparent, rgba(96,164,245,.55) 30%, rgba(167,139,250,.55) 70%, transparent);
z-index:2;
}
.aitsft-bar-orb{
position:absolute;pointer-events:none;border-radius:50%;filter:blur(70px);
z-index:0;
}
.aitsft-bar-orb-1{
top:-80px;left:10%;width:340px;height:340px;
background:radial-gradient(circle, rgba(54,128,237,.42), transparent 70%);
}
.aitsft-bar-orb-2{
bottom:-120px;right:8%;width:400px;height:400px;
background:radial-gradient(circle, rgba(112,72,232,.34), transparent 70%);
}
.aitsft-bar-grid{
position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size:44px 44px;
mask-image:radial-gradient(ellipse 1100px 400px at 50% 0%, #000 30%, transparent 75%);
-webkit-mask-image:radial-gradient(ellipse 1100px 400px at 50% 0%, #000 30%, transparent 75%);
}
/* Main row: brand hero on left, Language/Theme pills on right */
/* minmax(0,…) on BOTH tracks, not plain `1fr auto`.
A grid item defaults to min-width:auto, so a `1fr` track refuses to shrink
below its content's min-content width and the `auto` track sizes to its
own. Together they were resolving to 1456px inside a 1400px wrap — 56px of
overflow that gave EVERY page on the site a horizontal scrollbar, because
this footer is global. */
.aitsft-bar-main{
position:relative;z-index:2;
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:32px;align-items:start;
margin-bottom:32px;
}
/* Brand hero */
.aitsft-bar-brand{display:flex;flex-direction:column;gap:16px;min-width:0}
/* ═══ "Powered by Webexa Digital LLP" — premium horizontal lockup ═══
Layout: [ LOGO ] [ POWERED BY badge / Webexa Digital LLP / Collaborate → ]
One clickable glass card. Hover: lift + colored glow + shine sweep +
CTA arrow slides + logo plaque brightens. */
.aitsft-wex{
position:relative;overflow:hidden;isolation:isolate;
display:inline-flex;align-items:center;gap:16px;
align-self:flex-start; /* don't stretch full column width */
width:fit-content;max-width:100%;
padding:14px 22px 14px 14px;
background:
linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%);
border:1px solid rgba(255,255,255,.10);border-radius:18px;
color:#fff;text-decoration:none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 8px 24px -12px rgba(0,0,0,.5);
transition:transform var(--aits-t-f), border-color var(--aits-t-f), box-shadow var(--aits-t-f), background var(--aits-t-f);
}
/* Static ambient glow layer behind the card (blue + amber, matches brand). */
.aitsft-wex::before{
content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
background:
radial-gradient(60% 80% at 15% 50%, rgba(37,99,235,.20), transparent 65%),
radial-gradient(50% 90% at 85% 50%, rgba(245,158,11,.14), transparent 70%);
opacity:0;transition:opacity var(--aits-t-f);
}
.aitsft-wex:hover{
transform:translateY(-2px);
border-color:rgba(96,164,245,.40);
background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 16px 32px -14px rgba(37,99,235,.42),
0 6px 14px -6px rgba(245,158,11,.24);
}
.aitsft-wex:hover::before{opacity:1}
/* Diagonal shine sweep that slides across on hover */
.aitsft-wex-shine{
position:absolute;top:0;left:-45%;width:40%;height:100%;pointer-events:none;
background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
transform:skewX(-18deg);z-index:1;
transition:left .9s cubic-bezier(.16,1,.3,1);
}
.aitsft-wex:hover .aitsft-wex-shine{left:130%}
/* Logo plaque — light background makes the transparent PNG pop on dark bar */
.aitsft-wex-mark{
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
padding:12px 14px;border-radius:14px;
background:linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 6px 14px rgba(0,0,0,.32),
0 0 0 1px rgba(255,255,255,.06);
transition:transform var(--aits-t-f), box-shadow var(--aits-t-f);
}
.aitsft-wex:hover .aitsft-wex-mark{
transform:scale(1.04);
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 10px 20px rgba(37,99,235,.38),
0 0 0 1px rgba(96,164,245,.34);
}
.aitsft-wex-mark img{display:block;height:44px;width:auto}
/* Right-side text lockup */
.aitsft-wex-body{
display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;
min-width:0;line-height:1;
}
.aitsft-wex-eyebrow{display:inline-flex;align-items:center}
.aitsft-wex-badge{
display:inline-flex;align-items:center;gap:6px;
padding:3px 9px 3px 7px;border-radius:99px;
background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.30);
font-size:9px;font-weight:800;color:#FCD34D;letter-spacing:.16em;text-transform:uppercase;
}
.aitsft-wex-badge-dot{
width:5px;height:5px;border-radius:50%;
background:linear-gradient(135deg,#FDE047 0%,#F59E0B 100%);
box-shadow:0 0 0 0 rgba(245,158,11,.55);
animation:aitsftPulse 2s ease-in-out infinite;
}
.aitsft-wex-title{
display:block;margin-top:5px;
font-size:15px;font-weight:800;color:#fff;letter-spacing:-.015em;
white-space:nowrap;
}
.aitsft-wex-cta{
display:inline-flex;align-items:center;gap:5px;margin-top:3px;
font-size:11px;font-weight:700;color:rgba(255,255,255,.60);letter-spacing:.005em;
transition:color var(--aits-t-f), gap var(--aits-t-f);
}
.aitsft-wex-cta-ic{display:inline-flex;color:#60A5FA;transition:transform var(--aits-t-f), color var(--aits-t-f)}
.aitsft-wex:hover .aitsft-wex-cta{color:#93C5FD;gap:8px}
.aitsft-wex:hover .aitsft-wex-cta-ic{transform:translateX(3px);color:#FDE047}
/* Legacy AI Toolsay logo classes kept for any other footer that reuses them */
.aitsft-bar-logo{display:flex;align-items:center;width:fit-content;max-width:100%}
.aitsft-bar-logo img{max-height:36px;width:auto}
.aitsft-bar-logo-tx{display:inline-flex;align-items:center;gap:12px}
.aitsft-bar-logo-mark{
position:relative;display:inline-flex;width:38px;height:38px;
border-radius:12px;color:#fff;align-items:center;justify-content:center;
background:linear-gradient(135deg,#3680ED 0%,#5B4CE6 50%,#7048E8 100%);
box-shadow:0 8px 20px rgba(54,128,237,.40), inset 0 1px 0 rgba(255,255,255,.24);
overflow:hidden;
}
.aitsft-bar-logo-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(255,255,255,.28) 0%, transparent 55%)}
.aitsft-bar-logo-mark svg{width:22px;height:22px;position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.24))}
.aitsft-bar-logo-wm{display:inline-flex;align-items:baseline;gap:1px;line-height:1;font-size:22px;font-weight:800;letter-spacing:-.03em;color:#fff}
.aitsft-bar-logo-wm b{font-weight:800;background:linear-gradient(90deg,#60A4F5 0%,#A78BFA 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.aitsft-bar-logo-wm em{font-style:normal;font-weight:800;color:#fff}
.aitsft-bar-tag{
margin:0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.72);
letter-spacing:-.005em;max-width:36ch;
}
.aitsft-bar-trust{
display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;
}
.aitsft-bar-trust li{
display:inline-flex;align-items:center;gap:6px;
padding:6px 10px;border-radius:99px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
font-size:11px;font-weight:700;color:rgba(255,255,255,.82);letter-spacing:.005em;
}
.aitsft-bar-trust-ic{
width:18px;height:18px;flex-shrink:0;border-radius:50%;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
}
.aitsft-bar-trust-ic-1{background:linear-gradient(135deg,#3680ED 0%,#60A4F5 100%);box-shadow:0 2px 6px rgba(54,128,237,.34)}
.aitsft-bar-trust-ic-2{background:linear-gradient(135deg,#0CA678 0%,#22C55E 100%);box-shadow:0 2px 6px rgba(12,166,120,.34)}
.aitsft-bar-trust-ic-3{background:linear-gradient(135deg,#F59E0B 0%,#EC4899 100%);box-shadow:0 2px 6px rgba(236,72,153,.34)}
.aitsft-bar-trust-ic-4{background:linear-gradient(135deg,#06B6D4 0%,#22D3EE 100%);box-shadow:0 2px 6px rgba(6,182,212,.34)}
.aitsft-bar-trust-ic-5{background:linear-gradient(135deg,#7048E8 0%,#A78BFA 100%);box-shadow:0 2px 6px rgba(112,72,232,.34)}
.aitsft-bar-trust-ic-6{background:linear-gradient(135deg,#F59E0B 0%,#FBBF24 100%);box-shadow:0 2px 6px rgba(245,158,11,.34)}
.aitsft-bar-trust-ic-7{background:linear-gradient(135deg,#EF4444 0%,#F97316 100%);box-shadow:0 2px 6px rgba(239,68,68,.34)}
.aitsft-bar-trust-ic-8{background:linear-gradient(135deg,#EC4899 0%,#DB2777 100%);box-shadow:0 2px 6px rgba(236,72,153,.34)}
.aitsft-bar-trust-ic-9{background:linear-gradient(135deg,#0CA678 0%,#22C55E 100%);box-shadow:0 2px 6px rgba(12,166,120,.44)}
/* "LIVE NOW" chip variant — thin green border pulse to hint real-time. */
.aitsft-bar-trust-live{border-color:rgba(12,166,120,.34) !important;background:rgba(12,166,120,.08) !important}
.aitsft-bar-trust-live-dot{
display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;
box-shadow:0 0 0 0 rgba(255,255,255,.75);
animation:aitsftPulse 1.4s ease-in-out infinite;
}
/* Selector row */
/* min-width:0 so this can actually shrink inside its grid track — without it
the two 150px dropdowns below set a floor the track had to honour. */
.aitsft-bar-selects{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
/* ══ Premium custom dropdown (.aitsft-cs) ═══════════════════════════ */
.aitsft-cs{position:relative;display:inline-block;min-width:150px}
.aitsft-cs-btn{
display:flex;align-items:center;gap:10px;width:100%;
padding:11px 14px;font-family:inherit;text-align:left;
background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
border:1px solid rgba(255,255,255,.10);border-radius:12px;color:#fff;cursor:pointer;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
transition:background var(--aits-t-f), border-color var(--aits-t-f), transform var(--aits-t-f), box-shadow var(--aits-t-f);
}
.aitsft-cs-btn:hover{
background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100%);
border-color:rgba(96,164,245,.32);transform:translateY(-1px);
box-shadow:0 8px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}
.aitsft-cs.is-open .aitsft-cs-btn{
background:linear-gradient(180deg, rgba(54,128,237,.14) 0%, rgba(54,128,237,.06) 100%);
border-color:rgba(96,164,245,.44);
box-shadow:0 0 0 3px rgba(54,128,237,.18);
}
.aitsft-cs-ic{
display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;flex-shrink:0;border-radius:7px;color:#fff;
box-shadow:0 3px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.aitsft-cs-ic-lang{background:linear-gradient(135deg,#3680ED 0%,#7048E8 100%)}
.aitsft-cs-ic-theme{background:linear-gradient(135deg,#F59E0B 0%,#EC4899 100%)}
.aitsft-cs-val{
flex:1;min-width:0;font-size:12.5px;font-weight:700;letter-spacing:-.005em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aitsft-cs-ar{
display:inline-flex;color:rgba(255,255,255,.55);flex-shrink:0;
transform:rotate(90deg);
transition:transform var(--aits-t-f), color var(--aits-t-f);
}
.aitsft-cs.is-open .aitsft-cs-ar{transform:rotate(-90deg);color:#fff}
/* Menu panel */
/* Anchored to the RIGHT edge, not stretched from the left.
`left:0;right:0` sized this to its 150px parent, then min-width:240px
pushed it 90px wider — to the right, past the last control in the footer.
A `visibility:hidden` element still occupies layout, so that 90px sat in
the document's scroll width on every page whether or not anyone opened
the menu. Growing leftward from `right:0` keeps it inside the layout. */
.aitsft-cs-menu{
position:absolute;right:0;left:auto;bottom:calc(100% + 8px);z-index:60;
padding:8px;min-width:240px;
background:linear-gradient(180deg, #0F172A 0%, #050817 100%);
border:1px solid rgba(96,164,245,.28);border-radius:16px;
box-shadow:
0 24px 60px -12px rgba(0,0,0,.60),
0 8px 20px -6px rgba(54,128,237,.24),
inset 0 1px 0 rgba(255,255,255,.06);
opacity:0;visibility:hidden;
transform:translateY(6px) scale(.98);transform-origin:bottom center;
transition:opacity .18s ease, transform .18s ease, visibility 0s .18s;
pointer-events:none;
}
.aitsft-cs.is-open .aitsft-cs-menu{
opacity:1;visibility:visible;transform:translateY(0) scale(1);
transition:opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
pointer-events:auto;
}
.aitsft-cs-menu-h{
display:flex;align-items:center;gap:8px;padding:8px 10px 10px;
font-size:10.5px;font-weight:800;color:rgba(255,255,255,.55);
letter-spacing:.10em;text-transform:uppercase;
border-bottom:1px dashed rgba(255,255,255,.10);margin-bottom:6px;
}
.aitsft-cs-menu-h-ic{
width:18px;height:18px;flex-shrink:0;border-radius:6px;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
}
.aitsft-cs-menu-h-ic-lang{background:linear-gradient(135deg,#3680ED 0%,#7048E8 100%)}
.aitsft-cs-menu-h-ic-theme{background:linear-gradient(135deg,#F59E0B 0%,#EC4899 100%)}
.aitsft-cs-menu-list{
display:flex;flex-direction:column;gap:2px;max-height:320px;overflow-y:auto;
scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;
}
.aitsft-cs-menu-list::-webkit-scrollbar{width:6px}
.aitsft-cs-menu-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
/* Option row */
.aitsft-cs-opt{
display:flex;align-items:center;gap:10px;
padding:9px 10px;border-radius:10px;font-family:inherit;text-align:left;
background:transparent;border:0;color:rgba(255,255,255,.82);cursor:pointer;
transition:background var(--aits-t-f), color var(--aits-t-f);
}
.aitsft-cs-opt:hover{background:rgba(255,255,255,.05);color:#fff}
.aitsft-cs-opt.is-on{
background:linear-gradient(180deg, rgba(54,128,237,.18) 0%, rgba(54,128,237,.08) 100%);
color:#fff;
}
/* Flag emoji tile (used in both trigger button + option row) */
.aitsft-cs-flag,
.aitsft-cs-opt-flag{
display:inline-flex;align-items:center;justify-content:center;
flex-shrink:0;line-height:1;
}
.aitsft-cs-flag{
width:24px;height:24px;font-size:18px;border-radius:6px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.aitsft-cs-opt-flag{
width:30px;height:30px;font-size:22px;border-radius:8px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
transition:background var(--aits-t-f), border-color var(--aits-t-f), box-shadow var(--aits-t-f);
}
.aitsft-cs-opt.is-on .aitsft-cs-opt-flag{
background:rgba(54,128,237,.20);border-color:rgba(96,164,245,.44);
box-shadow:0 3px 8px rgba(54,128,237,.28);
}
.aitsft-cs-opt-ic{
display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;flex-shrink:0;border-radius:8px;color:#fff;
box-shadow:0 3px 8px rgba(0,0,0,.28);
}
.aitsft-cs-opt-ic-sun {background:linear-gradient(135deg,#F59E0B 0%,#FBBF24 100%)}
.aitsft-cs-opt-ic-moon{background:linear-gradient(135deg,#3680ED 0%,#7048E8 100%)}
.aitsft-cs-opt-ic-mon {background:linear-gradient(135deg,#334155 0%,#0F172A 100%);border:1px solid rgba(255,255,255,.10)}
.aitsft-cs-opt-tx{flex:1;min-width:0;line-height:1.3}
.aitsft-cs-opt-tx b{
display:block;font-size:13.5px;font-weight:700;letter-spacing:-.005em;
color:#fff;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aitsft-cs-opt-tx em{
display:block;font-style:normal;font-size:10.5px;font-weight:500;
color:rgba(255,255,255,.55);margin-top:2px;letter-spacing:.005em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aitsft-cs-opt.is-on .aitsft-cs-opt-tx em{color:rgba(255,255,255,.72)}
.aitsft-cs-opt-check{
display:inline-flex;color:#0CA678;flex-shrink:0;
opacity:0;transform:scale(.7);
transition:opacity var(--aits-t-f), transform var(--aits-t-f);
}
.aitsft-cs-opt.is-on .aitsft-cs-opt-check{opacity:1;transform:scale(1)}
/* ── Light-theme dropdown menu ────────────────────────────────────
The dropdown menu opens ABOVE the trigger (which sits in the always-
dark bottom bar), so on light pages the dark panel felt disconnected
from the surrounding light content. Overrides below swap the menu
surface to a light glass card while keeping the trigger dark. */
body.theme-light .aitsft-cs-menu{
background:linear-gradient(180deg, #FFFFFF 0%, #F6F9FE 100%);
border-color:rgba(216,230,251,.9);
box-shadow:
0 24px 60px -12px rgba(15,23,42,.18),
0 8px 20px -6px rgba(54,128,237,.16),
inset 0 1px 0 rgba(255,255,255,.9);
}
body.theme-light .aitsft-cs-menu-h{
color:#64748B;border-bottom-color:#E5E7EB;
}
body.theme-light .aitsft-cs-menu-list::-webkit-scrollbar-thumb{background:#CBD5E1}
body.theme-light .aitsft-cs-opt{color:#334155}
body.theme-light .aitsft-cs-opt:hover{background:#F1F5F9;color:#0F172A}
body.theme-light .aitsft-cs-opt.is-on{
background:linear-gradient(180deg, rgba(54,128,237,.10) 0%, rgba(54,128,237,.04) 100%);
color:#0F172A;
}
body.theme-light .aitsft-cs-opt-tx b{color:#0F172A}
body.theme-light .aitsft-cs-opt-tx em{color:#64748B}
body.theme-light .aitsft-cs-opt.is-on .aitsft-cs-opt-tx em{color:#334155}
body.theme-light .aitsft-cs-opt-flag{
background:#F1F5F9;border-color:#E5E7EB;
}
body.theme-light .aitsft-cs-opt.is-on .aitsft-cs-opt-flag{
background:rgba(54,128,237,.14);border-color:rgba(96,164,245,.44);
}
body.theme-light .aitsft-cs-opt-ic-mon{
background:linear-gradient(135deg,#94A3B8 0%,#64748B 100%);border:1px solid rgba(15,23,42,.10);
}
/* Divider hairline */
.aitsft-bar-hr{
height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent);
margin:0 auto 20px;max-width:calc(var(--aits-w) - 64px);
position:relative;z-index:2;
}
/* Legal chip row + socials */
.aitsft-bar-legal-row{
position:relative;z-index:2;
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding-bottom:20px;
}
.aitsft-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.aitsft-legal li{display:flex;align-items:center}
.aitsft-legal a{
display:inline-flex;align-items:center;padding:6px 12px;border-radius:99px;
font-size:11.5px;font-weight:600;color:rgba(255,255,255,.72);letter-spacing:-.005em;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
transition:all var(--aits-t-f);
}
.aitsft-legal a:hover{
color:#fff;background:rgba(54,128,237,.14);border-color:rgba(96,164,245,.32);
}
.aitsft-soc{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.aitsft-soc-a{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:10px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
color:rgba(255,255,255,.82);transition:all var(--aits-t);
}
.aitsft-soc-a:hover{color:#fff;transform:translateY(-3px);border-color:transparent;box-shadow:0 10px 24px rgba(54,128,237,.36)}
.aitsft-soc-x:hover {background:linear-gradient(135deg,#0f0f0f 0%,#000 100%)}
.aitsft-soc-linkedin:hover {background:linear-gradient(135deg,#0077B5 0%,#005885 100%)}
.aitsft-soc-youtube:hover {background:linear-gradient(135deg,#FF0000 0%,#CC0000 100%)}
.aitsft-soc-github:hover {background:linear-gradient(135deg,#181717 0%,#000 100%)}
.aitsft-soc-discord:hover {background:linear-gradient(135deg,#5865F2 0%,#4752C4 100%)}
.aitsft-soc-facebook:hover {background:linear-gradient(135deg,#1877F2 0%,#0F5AC7 100%)}
.aitsft-soc-instagram:hover{background:linear-gradient(135deg,#833AB4 0%,#FD1D1D 50%,#FCB045 100%)}
.aitsft-soc-rss:hover {background:linear-gradient(135deg,#F97316 0%,#EA580C 100%)}
.aitsft-soc-whatsapp:hover {background:linear-gradient(135deg,#25D366 0%,#128C7E 100%)}
.aitsft-soc-telegram:hover {background:linear-gradient(135deg,#2AABEE 0%,#229ED9 100%)}
.aitsft-soc-pinterest:hover{background:linear-gradient(135deg,#E60023 0%,#AD001B 100%)}
/* Copyright + made-with-love strip */
.aitsft-bar-btm{
position:relative;z-index:2;
display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.06);
}
.aitsft-bar-copy{
margin:0;font-size:12px;color:rgba(255,255,255,.60);line-height:1.5;letter-spacing:-.005em;
}
.aitsft-bar-copy b,.aitsft-bar-copy strong{color:#fff !important;font-weight:800}
/* The brand is a link now. Without this it takes the global anchor colour —
link-blue on a near-black bar — instead of the white the around it
is already forced to. Underline only on hover, so the line reads as a
copyright notice rather than as navigation. */
.aitsft-bar-copy a{
color:inherit;text-decoration:none;
transition:opacity .18s cubic-bezier(.16,1,.3,1);
}
.aitsft-bar-copy a:hover{color:inherit;text-decoration:underline;text-underline-offset:2px;opacity:.85}
.aitsft-bar-copy a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.45);border-radius:3px}
.aitsft-bar-made{
display:inline-flex;align-items:center;gap:7px;
margin:0;font-size:11.5px;color:rgba(255,255,255,.60);font-weight:600;letter-spacing:-.005em;
}
.aitsft-bar-made-heart{
display:inline-flex;align-items:center;justify-content:center;
color:#EC4899;
animation:aitsftHeart 1.8s ease-in-out infinite;
}
@keyframes aitsftHeart{
0%,100%{transform:scale(1)}
50% {transform:scale(1.18)}
}
@media (prefers-reduced-motion:reduce){.aitsft *{transition:none !important}}
/* ═══ Responsive ══════════════════════════════════════════════════════ */
/* Breakpoint sits BELOW the design width (1400) so viewers at max container
get the intended 28px column rhythm, not the compressed 24px fallback. */
@media (max-width:1399.98px){
.aitsft-top{grid-template-columns:minmax(240px,1.3fr) repeat(4, minmax(0,1fr)) minmax(220px,1fr);gap:32px 28px}
.aitsft-nl{padding:44px 44px;gap:48px}
.aitsft-nl-title{font-size:44px}
}
@media (max-width:1200px){
.aitsft-top{
grid-template-columns:minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
grid-template-areas:
"brand p d"
"brand c s"
"trust trust trust";
gap:40px 28px;
}
.aitsft-brand{grid-area:brand}
.aitsft-col-product{grid-area:p}
.aitsft-col-discover{grid-area:d}
.aitsft-col-company{grid-area:c}
.aitsft-col-support{grid-area:s}
.aitsft-side{grid-area:trust;flex-direction:row;flex-wrap:wrap}
.aitsft-trust,.aitsft-checks{flex:1;min-width:280px}
.aitsft-strip{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
/* Same 2-up as the phone breakpoint, so pairing the short Categories
card with the tall Trending one doesn't leave dead space here either. */
.aitsft-quick{grid-template-columns:repeat(2,1fr);align-items:start;margin-top:20px}
}
@media (max-width:900px){
.aitsft-wrap{padding:0 24px}
.aitsft-nlband{padding:48px 0 36px}
.aitsft-nl{
grid-template-columns:1fr;gap:36px;
padding:40px 32px;border-radius:24px;
}
.aitsft-nl-title{font-size:38px;margin-bottom:12px}
.aitsft-nl-sub{font-size:16px;margin-bottom:22px}
.aitsft .aitsft-nl-feats{margin-bottom:24px}
.aitsft-top{
grid-template-columns:1fr;
grid-template-areas:"brand" "p" "d" "c" "s" "trust";
gap:36px;padding:60px 24px 40px;
}
.aitsft-side{flex-direction:column}
.aitsft-trust,.aitsft-checks{min-width:0;width:100%}
.aitsft-strip{grid-template-columns:repeat(2,1fr);row-gap:4px;padding:14px 10px}
.aitsft-strip li{padding:8px 12px}
/* ─── Quick blocks: 2-up grid — NOT a swipe rail ──────────────────
This was a horizontal snap rail (flex + scroll-snap, cards at 87%
width) bought to keep the section one card tall. It cost more than it
saved: three of the four cards sat behind a sideways swipe nobody
goes looking for in a footer, and `flex` with default stretch gave
every card the height of the TALLEST — which is why Popular
Categories rendered with ~200px of dead space under its last pill.
A grid sizes each card to its own content, and `align-items:start`
is what keeps the short ones short. The height that buys back is
clawed back honestly: the Trending list stays two columns on phones
(see the 560 block) instead of running ten single rows, which was
the 557px card all on its own. */
.aitsft-quick{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
align-items:start;
gap:16px;
margin-top:20px;margin-bottom:40px;
padding-bottom:0;
overflow:visible;
}
.aitsft-qblock{min-width:0}
/* Touch devices latch :hover after a tap — without this a tapped card
stays lifted until you tap elsewhere. */
.aitsft-qblock:hover{transform:none}
/* Dark bar stacks brand + selects */
.aitsft-bar-main{grid-template-columns:1fr;gap:22px;margin-bottom:22px}
.aitsft-bar-selects{width:100%}
}
@media (max-width:560px){
.aitsft-wrap{padding:0 20px}
.aitsft-nlband{padding:36px 0 28px}
.aitsft-nl{padding:28px 20px;border-radius:22px;gap:26px}
.aitsft-nl-title{font-size:33px;letter-spacing:-.03em;margin-bottom:10px}
.aitsft-nl-sub{font-size:15.5px;margin-bottom:18px}
.aitsft .aitsft-nl-feats{gap:10px;margin-bottom:20px}
.aitsft-nl-fields{grid-template-columns:1fr;gap:12px}
.aitsft-nl-form{padding:22px;gap:14px;border-radius:18px}
.aitsft-nl-form-head{padding-bottom:14px;gap:10px}
.aitsft-nl-form-ic{width:32px;height:32px;border-radius:10px}
/* Keep the 52px+ tap target on phones even at tighter padding. */
.aitsft-nl-fld-inp{padding:10px 12px;min-height:52px}
.aitsft-nl-fld-ic{width:28px;height:28px}
.aitsft-nl-btn{padding:15px 20px;font-size:15px;min-height:54px}
.aitsft-nl-meta{gap:12px;font-size:11.5px;padding-top:6px}
.aitsft-nl-feats li{font-size:14.5px;gap:11px}
.aitsft-nl-feats-ic{width:25px;height:25px;border-radius:8px}
.aitsft-nl-proof{padding:12px 13px;gap:12px}
.aitsft-nl-proof-av{width:33px;height:33px;font-size:12.5px;margin-left:-9px}
.aitsft-nl-proof-more{height:33px;padding:0 9px;font-size:11px}
.aitsft-nl-proof-tx b{font-size:13.5px}
.aitsft-nl-proof-tx em{font-size:11.5px}
.aitsft-nl-form-head-chip{padding:3px 8px 3px 6px;font-size:9px}
/* The eyebrow label is longer than it was; let it wrap inside the chip
instead of pushing the WEEKLY pill off the card. */
.aitsft-nl-eyebrow{flex-wrap:wrap;gap:9px}
.aitsft-nl-eyebrow-tx{font-size:13.5px}
.aitsft-nl-eyebrow-mark{width:28px;height:28px}
.aitsft-stats{grid-template-columns:1fr 1fr}
/* Trim the top-grid bottom padding on mobile so the gap between the
checks card and the feature strip becomes a clean 20px. */
.aitsft-top{padding-bottom:20px}
/* Bigger brand logo on phones + extra breathing room above it */
.aitsft-logo{margin:22px 0 20px}
.aitsft-logo img{height:72px} /* ≈232px wide — fits a 390px screen */
.aitsft-logo-mark{width:72px;height:72px;border-radius:20px}
.aitsft-logo-mark svg{width:46px;height:46px}
.aitsft-logo-mark-glow{inset:-7px;border-radius:26px}
.aitsft-logo-wm{font-size:36px}
/* Nav columns on phones — bigger tap targets, chevron always visible */
.aitsft-col li a{padding:12px 12px}
.aitsft-col-item b{font-size:14px}
.aitsft-col-ar{opacity:1;transform:translateX(0);color:var(--aits-faint)}
/* Strip stacks 1-col on phones with a tiny row-gap so items don't touch. */
.aitsft-strip{grid-template-columns:1fr;padding:10px;row-gap:2px}
.aitsft-strip li{padding:10px 12px}
/* One card per row on phones — the 2-up grid above gets too narrow for
a deal title once the viewport drops under ~560px. */
.aitsft-quick{grid-template-columns:1fr;gap:14px;margin-top:20px}
.aitsft-qblock{padding:18px 16px 14px;border-radius:18px}
.aitsft-qhead{margin-bottom:14px;padding-bottom:12px;gap:10px}
.aitsft-qhead-ic{width:34px;height:34px;border-radius:10px}
.aitsft-qhead-tx b{font-size:14px}
/* Stays 2-up while there is room for a 128px column, and folds to one
only on the narrowest phones. Forcing `1fr` here turned ten short
rows into a 557px card — the single biggest reason the stacked
section used to run four screenfuls. */
.aitsft-trending{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:2px 10px}
.aitsft-trending li a{padding:9px 10px}
.aitsft-deals li a{padding:11px 10px}
.aitsft-deal-ic{width:36px;height:36px;font-size:13px}
.aitsft-deal-tx b{font-size:13px}
.aitsft-pill{padding:8px 14px;font-size:12px}
/* Dark bottom bar on phones — stacked, left-aligned, tap-friendly */
.aitsft-bar{padding:32px 0 20px;margin-top:16px}
.aitsft-bar-main{grid-template-columns:1fr;gap:20px;margin-bottom:24px}
/* Webexa lockup on mobile — tighter, still horizontal, full-width */
.aitsft-wex{width:100%;align-self:stretch;padding:12px 18px 12px 12px;gap:14px;border-radius:16px}
.aitsft-wex-mark{padding:10px 12px;border-radius:12px}
.aitsft-wex-mark img{height:36px}
.aitsft-wex-title{font-size:14px}
.aitsft-wex-cta{font-size:10.5px}
.aitsft-bar-selects{width:100%;gap:10px;flex-direction:column}
.aitsft-cs{width:100%;min-width:0}
.aitsft-cs-btn{padding:13px 14px}
.aitsft-cs-val{font-size:13px}
/* Menu drops UPWARD on mobile too (positioned bottom:calc(100% + 8px)) */
.aitsft-cs-menu{max-width:100%}
.aitsft-bar-hr{margin-bottom:18px}
.aitsft-bar-legal-row{flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:28px}
.aitsft-legal{gap:6px}
.aitsft-legal a{font-size:11px;padding:6px 11px}
.aitsft-bar-btm{flex-direction:column;align-items:flex-start;gap:10px;padding-top:24px}
/* Trust card avatars — shrink from 26 → 24px so 6+"+5K" all fit in
narrow viewports without the +5K wrapping to a new line. */
.aitsft-av,.aitsft-av-more{height:24px}
.aitsft-av{width:24px;font-size:10px}
.aitsft-av-more{padding:0 7px;font-size:9.5px}
}
@media (max-width:400px){
.aitsft-nl-eyebrow-tx{font-size:12.5px}
.aitsft-nl-eyebrow span:last-of-type{display:none} /* the WEEKLY pill */
.aitsft-nl-eyebrow-dot{display:none}
}
/* ═══ Dark mode ═══════════════════════════════════════════════════════ */
body.theme-dark .aitsft{
--aits-ink: #F3F4F6;
--aits-ink-2: #E5E7EB;
--aits-txt: #CBD5E1;
--aits-mut: #94A3B8;
--aits-faint: #64748B;
--aits-bg: #111827;
--aits-bg-2: #0F172A;
--aits-card: #0F172A;
--aits-line: rgba(255,255,255,.08);
--aits-line-2: rgba(255,255,255,.05);
--aits-blue-tint: rgba(54,128,237,.14);
--aits-blue-tint-2: rgba(54,128,237,.08);
--aits-blue-line: rgba(96,164,245,.28);
/* The page's own black, not `--aits-card`. The shell used to be the SAME
token as the panels sitting on it (#0F172A both), so every card inside the
footer was separated from it by nothing but a hairline. Dropping the shell
to the page surface gives them a real one-step lift and makes the footer
continuous with the body above it instead of a navy slab pinned to the
bottom of a black page. */
background:#0E0E11;
border-top-color:var(--aits-line);
}
/* --- Section 0 · Newsletter banner (dark) ---
Black, per spec, and ONLY this band: the footer shell below keeps its own
#0E0E11 and the page above is untouched. The old navy ramp
(#0B1121→#0F172A) read as a blue slab against the near-black footer, so
the mesh is pulled back too — at .60 those blue/violet radials tint the
whole band and "black" stops being black. */
body.theme-dark .aitsft-nlband{
background:#000;
border-bottom-color:rgba(255,255,255,.08);
}
body.theme-dark .aitsft-nlband-mesh{opacity:.34;filter:blur(72px)}
body.theme-dark .aitsft-nlband-grid{
background-image:
linear-gradient(rgba(96,164,245,.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(96,164,245,.10) 1px, transparent 1px);
opacity:.7;
}
/* One step up off pure black — the card has to stay a card. */
body.theme-dark .aitsft-nl{
background:linear-gradient(180deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.025) 100%);
border-color:rgba(255,255,255,.11);
box-shadow:
0 1px 0 rgba(255,255,255,.06) inset,
0 40px 100px -40px rgba(54,128,237,.42),
0 16px 48px -16px rgba(0,0,0,.5);
}
body.theme-dark .aitsft-nl-glow{opacity:.75}
body.theme-dark .aitsft-nl-eyebrow{
background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
border-color:rgba(96,164,245,.24);box-shadow:none;
}
body.theme-dark .aitsft-nl-eyebrow-tx{color:#F3F4F6}
body.theme-dark .aitsft-nl-eyebrow-live{
background:rgba(12,166,120,.18);border-color:rgba(12,166,120,.30);color:#5EEAD4;
}
body.theme-dark .aitsft-nl-noise{opacity:.15}
body.theme-dark .aitsft-nl-feats li{color:#CBD5E1}
body.theme-dark .aitsft-nl-feats li b{color:#F3F4F6}
body.theme-dark .aitsft-nl-form-head-chip{background:rgba(12,166,120,.18);color:#5EEAD4;border-color:rgba(12,166,120,.34)}
body.theme-dark .aitsft-nl-fld-lbl{color:#F3F4F6}
body.theme-dark .aitsft-nl-fld:focus-within .aitsft-nl-fld-lbl{color:#60A4F5}
body.theme-dark .aitsft-nl-proof{
background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);
}
body.theme-dark .aitsft-nl-proof:hover{background:rgba(255,255,255,.07);border-color:rgba(96,164,245,.32)}
/* The stack's separating ring is the surface BEHIND the avatars, so on the
black band it has to be neutral — #0F172A read as a navy outline once the
band stopped being navy. */
body.theme-dark .aitsft-nl-proof-av{border-color:#141417}
body.theme-dark .aitsft-nl-proof-av-img{background:rgba(255,255,255,.06)}
body.theme-dark .aitsft-nl-proof-more{border-color:#141417;background:linear-gradient(135deg,#334155 0%,#64748B 100%)}
body.theme-dark .aitsft-nl-form{
background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
border-color:rgba(255,255,255,.10);
box-shadow:0 16px 40px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
body.theme-dark .aitsft-nl-form-head{border-bottom-color:rgba(255,255,255,.08)}
body.theme-dark .aitsft-nl-fld-inp{background:rgba(255,255,255,.04);border-color:transparent;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
body.theme-dark .aitsft-nl-fld-inp:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
/* Tinted icon tile needs its own dark twin — the light blue wash is
invisible on the dark card. */
body.theme-dark .aitsft-nl-fld-ic{
background:rgba(96,164,245,.16);color:#93BEFF;
box-shadow:inset 0 0 0 1px rgba(96,164,245,.28);
}
body.theme-dark .aitsft-nl-fld-inp:hover .aitsft-nl-fld-ic{background:rgba(96,164,245,.24)}
body.theme-dark .aitsft-nl-fld-inp:focus-within .aitsft-nl-fld-ic{
background:linear-gradient(140deg,var(--aits-blue,#3680ED),var(--aits-blue-dark,#2060C0));color:#fff;
}
body.theme-dark .aitsft-nl-btn{box-shadow:0 12px 26px -12px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.24)}
body.theme-dark .aitsft-nl-btn:hover{box-shadow:0 20px 38px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.28)}
body.theme-dark .aitsft-nl-fld-inp:focus-within{background:rgba(255,255,255,.06);border-color:var(--aits-blue-3);box-shadow:0 0 0 4px rgba(54,128,237,.20)}
body.theme-dark .aitsft-nl-fld-inp input{color:#F3F4F6}
/* Brand-badge + logo wordmark (dark) */
body.theme-dark .aitsft-brand-badge{
background:linear-gradient(180deg, rgba(245,158,11,.10) 0%, rgba(245,158,11,.04) 100%);
border-color:rgba(245,158,11,.32);
box-shadow:
0 1px 0 rgba(255,255,255,.05) inset,
0 3px 10px rgba(245,158,11,.14);
}
body.theme-dark .aitsft-brand-badge:hover{
border-color:rgba(252,211,77,.50);
box-shadow:
0 1px 0 rgba(255,255,255,.06) inset,
0 8px 20px rgba(245,158,11,.24);
}
body.theme-dark .aitsft-brand-badge-tx b{color:#FEF3C7}
body.theme-dark .aitsft-brand-badge-tx em{color:rgba(254,243,199,.60)}
body.theme-dark .aitsft-brand-badge-shine{background:linear-gradient(105deg, transparent 40%, rgba(252,211,77,.20) 50%, transparent 60%)}
body.theme-dark .aitsft-logo-wm em{color:#F3F4F6}
body.theme-dark .aitsft-stat,
body.theme-dark .aitsft-trust,
body.theme-dark .aitsft-checks,
body.theme-dark .aitsft-qblock,
body.theme-dark .aitsft-strip{
background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
border-color:rgba(255,255,255,.08);
}
/* The card's glass highlight and shadows, dark twin. A 70%-white inner
hairline is a lit edge on a white card and a scratch on a dark one, and the
light ink shadow simply does not register on near-black. */
body.theme-dark .aitsft-qblock{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 1px 2px rgba(0,0,0,.4),
0 8px 24px -12px rgba(0,0,0,.7);
}
body.theme-dark .aitsft-pill{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:#CBD5E1}
/* The header rule is a gradient pseudo-element now, so the old
border-bottom-color override no longer reaches it. */
body.theme-dark .aitsft-qhead::after{
background:linear-gradient(90deg,
color-mix(in oklab, var(--qc) 52%, transparent) 0%,
rgba(255,255,255,.08) 42%,
transparent 100%);
}
@supports not (background: color-mix(in oklab, red, blue)) {
body.theme-dark .aitsft-qhead::after{background:linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.08) 60%, transparent 100%)}
}
/* Gradient pseudo-rule now, so the old border-top-color override is inert. */
body.theme-dark .aitsft-qmore::before{
background:linear-gradient(90deg,
color-mix(in oklab, var(--qc) 46%, transparent) 0%,
rgba(255,255,255,.08) 46%,
transparent 100%);
}
@supports not (background: color-mix(in oklab, red, blue)) {
body.theme-dark .aitsft-qmore::before{background:linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.08) 62%, transparent 100%)}
}
body.theme-dark .aitsft-trend-rank{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:#CBD5E1}
/* Search-now form (dark) */
body.theme-dark .aitsft-trend-form{
background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(239,68,68,.06) 100%);
border-color:rgba(255,255,255,.10);
box-shadow:0 1px 2px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}
body.theme-dark .aitsft-trend-form:hover{border-color:rgba(239,68,68,.44)}
body.theme-dark .aitsft-trend-form:focus-within{
background:rgba(255,255,255,.04);border-color:#F87171;
box-shadow:0 0 0 4px rgba(239,68,68,.20), 0 6px 14px rgba(239,68,68,.24);
}
body.theme-dark .aitsft-trend-form-inp{color:#F3F4F6}
body.theme-dark .aitsft-trend-form-kbd{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);color:#CBD5E1}
/* Top-3 medal ranks stay branded */
body.theme-dark .aitsft-trending li:nth-child(-n+3) .aitsft-trend-rank{border-color:transparent}
body.theme-dark .aitsft-qhead-chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
body.theme-dark .aitsft-qhead-chip-blue {color:#93C5FD}
body.theme-dark .aitsft-qhead-chip-live {color:#FCA5A5}
body.theme-dark .aitsft-qhead-chip-pink {color:#F9A8D4}
body.theme-dark .aitsft-qhead-chip-purple{color:#C4B5FD}
/* Nav column per-color tints in dark mode — keep the gradient icon tile
(looks great on dark bg) but soften the hover backgrounds. */
body.theme-dark .aitsft-col-product {--col-tint:rgba(54,128,237,.14)}
body.theme-dark .aitsft-col-discover {--col-tint:rgba(112,72,232,.14)}
body.theme-dark .aitsft-col-company {--col-tint:rgba(236,72,153,.14)}
body.theme-dark .aitsft-col-support {--col-tint:rgba(12,166,120,.14)}
body.theme-dark .aitsft-col-h{border-bottom-color:rgba(255,255,255,.08)}
body.theme-dark .aitsft-ext{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
body.theme-dark .aitsft-ai{background:rgba(112,72,232,.18);border-color:rgba(167,139,250,.32);color:#C4B5FD}
body.theme-dark .aitsft-logo-l{display:none}
body.theme-dark .aitsft-logo-d{display:inline}
body.theme-dark .aitsft-av{border-color:#0F172A}
body.theme-dark .aitsft-qmore{border-top-color:rgba(255,255,255,.06)}
body.theme-dark .aitsft-bar{
background:
radial-gradient(ellipse 60% 40% at 15% 0%, rgba(54,128,237,.34), transparent 60%),
radial-gradient(ellipse 55% 40% at 85% 100%, rgba(112,72,232,.28), transparent 55%),
linear-gradient(180deg, #050817 0%, #030510 55%, #010208 100%);
}