/* ============================================================
   CodebyCarter — tiny.css
   "Six small wins competitors aren't doing."
   Palette: deep navy + electric cyan + azure + lavender + pink.
   Intentionally distinct from Vision's green emerald palette.
   ============================================================ */

.tiny{
  background:
    radial-gradient(900px 500px at 75% 20%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(700px 500px at 20% 80%, rgba(167,139,250,.18), transparent 60%),
    linear-gradient(170deg, #050B1A 0%, #0E1A33 50%, #0A1426 100%);
  color:#F5F5F7;
  padding:clamp(120px,14vw,200px) 0;
  position:relative;overflow:hidden;
  --t-cyan:#22D3EE;
  --t-azure:#3B82F6;
  --t-lavender:#A78BFA;
  --t-pink:#EC4899;
  --t-ice:#E0F2FE;
}
.tiny::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.7;
}
.tiny-dot{position:absolute;border-radius:50%;pointer-events:none;filter:blur(50px);opacity:.32}
.tiny-dot--1{width:360px;height:360px;background:var(--t-cyan);top:5%;right:-5%;animation:tinyDrift1 22s ease-in-out infinite}
.tiny-dot--2{width:280px;height:280px;background:var(--t-pink);bottom:10%;left:-5%;animation:tinyDrift2 18s ease-in-out infinite}
.tiny-dot--3{width:200px;height:200px;background:var(--t-lavender);top:50%;left:55%;animation:tinyDrift3 26s ease-in-out infinite}
@keyframes tinyDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-70px,40px)}}
@keyframes tinyDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-30px)}}
@keyframes tinyDrift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,50px) scale(1.15)}}

.tiny .shell{position:relative;z-index:2}

.tiny-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t-cyan);font-weight:700;
  padding:8px 16px;border:1px solid rgba(34,211,238,.40);border-radius:99px;
  background:rgba(34,211,238,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tiny-eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--t-cyan);
  box-shadow:0 0 16px var(--t-cyan);animation:pulse 2s ease-in-out infinite;
}

.tiny-h{
  font-size:clamp(38px,7vw,90px);line-height:1;letter-spacing:-.035em;font-weight:600;
  margin:26px 0 22px;color:#F5F5F7;max-width:18ch;
}
.tiny-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,var(--t-cyan),var(--t-lavender) 50%,var(--t-pink));
  background-size:200% 200%;animation:hue 6s linear infinite;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tiny-sub{
  font-size:clamp(16px,1.5vw,20px);color:#C2D8EC;max-width:62ch;line-height:1.6;
  margin-bottom:50px;
}
.tiny-sub b{color:#F5F5F7;font-weight:600}

/* ---------- Six-card grid ---------- */
.tiny-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.tiny-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.tiny-grid{grid-template-columns:1fr}}

.tiny-card{
  padding:24px;border-radius:20px;
  background:rgba(8,16,38,.55);
  border:1px solid rgba(34,211,238,.20);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;flex-direction:column;
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease,background .35s ease,box-shadow .35s ease;
}
.tiny-card:hover{
  transform:translateY(-4px);
  border-color:rgba(34,211,238,.55);
  background:rgba(34,211,238,.06);
  box-shadow:0 22px 50px rgba(34,211,238,.20);
}

.tiny-demo{
  height:130px;border-radius:12px;
  background:rgba(0,0,0,.50);
  margin-bottom:18px;
  display:grid;place-items:center;
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}

.tiny-name{font-size:17px;font-weight:600;color:#F5F5F7;letter-spacing:-.01em;line-height:1.2}
.tiny-desc{font-size:13.5px;line-height:1.55;color:#C2D8EC;margin-top:8px;flex:1}
.tiny-tag{
  display:inline-block;align-self:flex-start;margin-top:14px;
  padding:5px 10px;border-radius:99px;
  background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.30);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t-cyan);font-weight:700;
}

/* ============================================================
   Six demo visuals
   ============================================================ */

/* 1. Click-to-call button */
.tiny-demo--call .tiny-call{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 18px;border-radius:99px;
  background:linear-gradient(135deg,var(--t-cyan),var(--t-azure));
  color:#0A0A0F;font-weight:700;font-size:14px;letter-spacing:-.005em;
  box-shadow:0 10px 28px rgba(34,211,238,.40);
  animation:callBob 2.6s ease-in-out infinite;
}
@keyframes callBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* 2. Open-now status */
.tiny-demo--open .tiny-open{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 16px;border-radius:99px;
  background:rgba(0,0,0,.45);border:1px solid rgba(34,211,238,.40);
  color:#F5F5F7;font-size:13px;font-weight:500;
}
.tiny-demo--open .tiny-open-dot{
  width:9px;height:9px;border-radius:50%;background:var(--t-cyan);
  box-shadow:0 0 0 0 rgba(34,211,238,.7);
  animation:bookingPulse 2s ease-in-out infinite;
}

/* 3. Live SMS chat */
.tiny-demo--sms{align-items:flex-start;padding:14px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.tiny-sms{padding:10px 14px;border-radius:14px;font-size:12.5px;line-height:1.4;max-width:75%}
.tiny-sms-them{background:rgba(255,255,255,.10);color:#F5F5F7;align-self:flex-start;border-bottom-left-radius:4px}
.tiny-sms-you{
  background:linear-gradient(135deg,var(--t-cyan),var(--t-lavender));color:#0A0A0F;
  align-self:flex-end;border-bottom-right-radius:4px;font-weight:500;
  animation:smsAppear 4s ease-in-out infinite;
}
@keyframes smsAppear{
  0%,40%{opacity:0;transform:translateY(8px)}
  50%,90%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(8px)}
}

/* 4. Auto-reply notification */
.tiny-demo--reply .tiny-notif{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:14px;
  background:rgba(0,0,0,.55);border:1px solid rgba(167,139,250,.30);
  max-width:90%;
}
.tiny-notif-ic{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--t-lavender),var(--t-pink));
  display:grid;place-items:center;color:#0A0A0F;font-weight:700;font-size:18px;
}
.tiny-notif-h{font-size:13px;font-weight:600;color:#F5F5F7;letter-spacing:-.005em}
.tiny-notif-s{font-size:11px;color:#9DB6D4;margin-top:2px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em}

/* 5. Sticky quote bar */
.tiny-demo--sticky{padding:14px}
.tiny-sticky{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 16px;border-radius:14px;width:100%;
  background:linear-gradient(135deg,var(--t-azure),var(--t-pink));
  color:#F5F5F7;font-weight:600;font-size:12.5px;
  box-shadow:0 10px 28px rgba(59,130,246,.30);
}
.tiny-sticky-cta{
  padding:6px 12px;border-radius:99px;background:#0A0A0F;color:var(--t-cyan);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;
}

/* 6. Trust badges row */
.tiny-demo--trust{flex-wrap:wrap;display:flex;gap:6px;align-items:center;justify-content:center;padding:12px}
.tiny-trust{
  padding:6px 10px;border-radius:99px;
  background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.30);
  color:#F5F5F7;font-size:10.5px;font-weight:600;letter-spacing:-.005em;
}
.tiny-trust b{color:var(--t-cyan);font-weight:700}