/* ========== CSS FOUNDATION ========== */
/* System-friendly fonts as per your properties */
:root,
:host {
 --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
               "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  /* Rings/Shadows you provided (Tw-like semantics for consistency) */
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;

  /* Color palette (neutral + brand) */
  --brand-500: #7580FF; /* indigo */
  --brand-600: #4338ca;
  --brand-700: #3730a3;
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-300: #cbd5e1;
  --ink-200: #e5e7eb; /* your border color */
  --ink-100: #f1f5f9;
  --white: #fff;

  /* Gradients (from your share) */
  --gradient-hero: linear-gradient(135deg, hsl(330 100% 90%), hsl(280 60% 85%));
  --gradient-accent: linear-gradient(90deg, hsl(235 100% 70%), hsl(75 100% 70%));
  --gradient-subtle: linear-gradient(180deg, hsl(330 100% 95%), hsl(280 30% 98%));

  /* Spacing scale (fluid with clamp for ultra-responsiveness) */
  --space-1: clamp(6px, 0.35vw, 8px);
  --space-2: clamp(10px, 0.6vw, 12px);
  --space-3: clamp(14px, 0.9vw, 16px);
  --space-4: clamp(18px, 1.2vw, 24px);
  --space-5: clamp(24px, 1.8vw, 32px);
  --space-6: clamp(32px, 2.4vw, 40px);
  --space-7: clamp(40px, 3.2vw, 56px);
  --space-8: clamp(56px, 4.4vw, 80px);

  /* Section gaps */
  --section-gap-y: var(--space-8);

  /* Container widths to match the layout rhythm in screenshot */
  --container-sm: 680px;
  --container-md: 960px;
  --container-lg: 1140px;
  --container-xl: 1280px;

  /* Radius & shadows */
  --radius: 7px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 6px 24px rgba(2, 6, 23, .08);
  --shadow-lg: 0 18px 60px rgba(2, 6, 23, .12);

  /* Fluid Type Scale (super responsive) */
  --fs-900: clamp(2.2rem, 2.2rem + 1.8vw, 4rem);   /* H1 */
  --fs-800: clamp(1.8rem, 1.8rem + 1.2vw, 3rem);   /* H2 */
  --fs-700: clamp(1.5rem, 1.5rem + 0.9vw, 2.25rem);/* H3 */
  --fs-600: clamp(1.25rem, 1.25rem + 0.6vw, 1.75rem);/* H4 */
  --fs-500: clamp(1.125rem, 1.125rem + 0.4vw, 1.375rem);/* H5 */
  --fs-400: clamp(1rem, 1rem + 0.3vw, 1.125rem);  /* H6 / body-lg */
  --fs-body: clamp(.95rem, .95rem + 0.2vw, 1.05rem);
  --fs-small: clamp(.85rem, .85rem + 0.1vw, .95rem);

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-normal: 1.5;

  /* Button sizing */
  --btn-h: 48px;
  --btn-px: 20px;
  --btn-radius: 999px;
}

/* Base reset (lean, matches your provided defaults) */
html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--font-sans); }
*, *::before, *::after { box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol, menu { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }

/* Typography */
body { color: var(--ink-900); background-color: #fff; font-size: var(--fs-body); font-family: var(--font-sans); /* picks up Poppins from :root */ }
h1 { font-size: var(--fs-900); line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-800); line-height: var(--lh-tight); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-700); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-600); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-500); line-height: var(--lh-normal); }
h6 { font-size: var(--fs-400); line-height: var(--lh-normal); text-transform: none; }
p { line-height: var(--lh-normal); color: var(--ink-700); }
small, .text-small { font-size: var(--fs-small); }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Containers aligned to screenshot rhythm */
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container, .container-sm, .container-md, .container-lg, .container-xl { width: 100%; margin-inline: auto; padding-inline: 16px; }

/* Sections */
.section { padding-block: var(--section-gap-y); }
.gradient-hero { background: var(--gradient-hero); }
.gradient-accent { background: var(--gradient-accent); color: #0b1220; }
.gradient-subtle { background: var(--gradient-subtle); }

/* Header */
.site-header { position: sticky; top: 0; backdrop-filter: saturate(140%) blur(8px); background: rgba(255,255,255,.7); z-index: 100; }

/* Cards (for features, images, testimonials placeholders) */
.card-ghost { border: 1px solid #ffffff4d; /* .border-white/30 */ background: rgba(255,255,255,.5); box-shadow: var(--shadow-sm); border-radius: var(--radius); }
.card-solid { border: 1px solid var(--ink-200); background: #fff; box-shadow: var(--shadow-md); border-radius: var(--radius); }

/* Buttons — unify Bootstrap + custom tokens */
.btn { padding-inline: var(--btn-px); border-radius: var(--radius); font-weight: 600; }
.btn-primary { background: var(--brand-500); border-color: var(--brand-500); }
.btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn-outline-primary { color: var(--brand-600); border-color: var(--brand-600); }
.btn-outline-primary:hover { color: #fff; background: var(--brand-600); border-color: var(--brand-600); }

/* Utility */
.border-light { border: 1px solid var(--ink-200); }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.section-gap-tight { --section-gap-y: var(--space-6); }
.section-gap-loose { --section-gap-y: calc(var(--space-8) * 1.2); }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.text-gradient { background: linear-gradient(90deg, #6366f1, #22c55e); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Hero height feel like screenshot without content */
.hero { padding-block: clamp(56px, 8vw, 120px); }

/* Footer */
.site-footer { background: #0b1220; color: #cbd5e1; }
.site-footer a { color: #cbd5e1; }
.site-footer .brand-mark { background: linear-gradient(135deg, #22d3ee, #a78bfa); }

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Example responsive helpers (you can extend as needed) */
@media (min-width: 992px) {
  .hero { padding-block: clamp(80px, 8vw, 160px); }
}

/* Ring helper (use with focus-visible) */
.focus-ring:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 2px var(--tw-ring-offset-color),
    0 0 0 4px var(--tw-ring-color);
}

/* Placeholder skeletons you can keep or remove while filling content */
.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #eceff1, #f6f7f8, #eceff1);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}


a:hover{
  text-decoration: none;
}




/* ===========Header================ */
.nav-link{
  margin-right: 20px;
  font-size: 14px;
  font-weight: 500;
}





/* ===== Hero — pixel-refined ===== */
#hero { position: relative; overflow: clip;}

/* subtle radial glow behind the phone */
#hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 420px at calc(70% + 80px) 42%, rgba(60,120,180,.18), transparent 60%),
    radial-gradient(420px 320px at calc(72%) 56%, rgba(120,40,200,.12), transparent 65%);
  pointer-events:none;
}

/* badge */
#hero .badge-ai{
  display:inline-flex; align-items:center; gap:8px;
  height: 28px; padding: 0 12px;
  background: rgba(255, 255, 255, 0.411);
  border: 1px solid #ffffff4d; /* .border-white/30 */
  border-radius: 999px;
  font: 600 12.5px/1 var(--font-sans);
  color:#0b1220;
  box-shadow: 0 6px 12px rgba(2,6,23,.08);
  backdrop-filter: saturate(140%) blur(4px);
}
#hero .badge-ai .icon{ font-size: 14px; line-height: 0; }
#hero .badge-ai .label{ transform: translateY(.5px); }

/* Heading */
#hero .fw-800{ font-weight: 800; }
#hero .hero-title{
  margin: 6px 0 var(--space-4);
  letter-spacing: -.02em;
  line-height: 1.06;
  /* a bit larger than base fs-900 for the hero look */
  font-size: clamp(2.4rem, 2rem + 3vw, 3.75rem);
  color:#0b1220;
}
#hero .hero-title-accent{ margin-top: .15em; }

/* Creator gradient (blue→teal) and lime Toolkit */
#hero .creator{
  background: linear-gradient(90deg, #5a7cf9 0%, #45c2d3 52%, #86efac 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display:inline-block;
}
#hero .toolkit {
  font-weight: 800;
  background: linear-gradient(90deg, #86efac 0%, #bef264 50%, #facc15 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* Subcopy */
#hero .hero-sub{
  max-width: 58ch;
  font-size: clamp(1rem, .98rem + .25vw, 1.15rem);
  color: var(--ink-700);
}

/* CTA buttons — exact pill feel */
#hero .cta-row{
  display:flex; flex-wrap:wrap; gap: 16px;
}
#hero .btn-hero{
  height: 54px; padding-inline: 22px; border-radius: 8px; font-weight: 700;
  display:inline-flex; align-items:center;
}
#hero .btn-hero .arrow{ margin-left: 10px; font-weight: 700; transform: translateY(-1px); }

/* white ghost button */
#hero .btn-ghost{
  border:1px solid var(--ink-200);
  background:#fff; color:#0b1220;
}
#hero .btn-ghost:hover{ background:#f8fafc; }

/* Media block */
#hero .hero-media{
  position:relative; width: min(520px, 92%); padding: 20px 0;
}
#hero .hero-media .phone{
  width:40%; height:auto; display:block; border-radius: 18px;
}

/* Bubbles */
#hero .bubble{
  position:absolute; display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:#0b1220;
  border:1px solid var(--ink-200);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: clamp(.92rem, .9rem + .18vw, 1rem);
  line-height:1.15;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(2,6,23,.12);
}
#hero .bubble svg{ opacity:.9; }
#hero .bubble-top{
  top: 0px; right: -100px;
  translate: 0 -6%;
}
#hero .bubble-bottom{
  bottom: 0px; left: -50px;
  translate: 0 8%;
}

/* spacing polish for large screens */
@media (min-width: 992px){
  #hero { padding-block: clamp(40px, 3vw, 144px); }
  #hero .hero-title{ margin-bottom: 22px; }
  #hero .hero-media{ margin-top: 6px; }
}

/* keep bubbles visible on narrow screens */
@media (max-width: 575.98px){
  #hero .hero-media{ width: 86%; }
  #hero .bubble-top{ right: -8px; }
  #hero .bubble-bottom{ left: -10px; }
  #hero {text-align: center;}
  .hero-top{margin-bottom: 40px;}
  #hero .btn-hero{width: 100%; justify-content: center;}
}






/* ===== Features ===== */
#features h2 { font-size: var(--fs-800); font-weight: 700; }
#features .lead { color: var(--ink-700); }

/* card polish (reuses .card-solid) */
#features .card-solid { border-radius: var(--radius); transition: transform .25s ease, box-shadow .25s ease; }
#features .card-solid:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* icon boxes */
#features .icon-box{
  width: 46px; height: 46px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 12px; color:#4b5563;
}
#features .icon-box.indigo { background:#eef2ff; color:#6366f1; }
#features .icon-box.lime   { background:#f7fee7; color:#65a30d; }
#features .icon-box.purple { background:#faf5ff; color:#a855f7; }






/* ===== Social Proof ===== */
#social-proof h2 {
  font-size: var(--fs-800);
  font-weight: 700;
}

#social-proof p {
  color: var(--ink-700);
  max-width: 60ch;
  margin-inline: auto;
}

#social-proof .proof-img {
  position: relative;
  aspect-ratio: 1 / 1;          /* force all squares */
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

#social-proof .proof-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

#social-proof .proof-img:hover img {
  transform: scale(1.05);
}





/* ===== Testimonials ===== */
#testimonials h2{ font-size: var(--fs-800); font-weight: 700; }

/* card */
#testimonials .t-card{
  background:#fff;
  border:1px solid var(--ink-200);
  border-radius: 10px;             /* slightly round like the reference */
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap:14px;
}

/* stars */
#testimonials .t-stars{ display:flex; gap:4px; }
#testimonials .t-stars .star{
  width:16px; height:16px; fill:#f59e0b; display:block;
}

/* text */
#testimonials .t-quote{ color: var(--ink-700); line-height: 1.55; margin: 2px 0 10px; }
#testimonials .t-name{ font-weight: 700; color: var(--ink-900); display:block; }
#testimonials .t-role{ color: var(--ink-500); font-size:.92rem; }





/* ===== CTA ===== */
#cta {
  color:#ffffff;

}

#cta .cta-title {
  font-size: var(--fs-800);
  font-weight: 700;
}

#cta .cta-sub {
  color: #ffffff;
  max-width: 65ch;
  margin-inline: auto;
}

#cta .btn {
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 1rem;
}

/* store badge buttons */
#cta .store-btn {
  display:flex;
  align-items:center;
  gap:10px;
  background:#000;
  color:#fff;
  border-radius: 8px;
  padding: 8px 16px;
  text-decoration:none;
  min-width: 160px;
  justify-content:center;
}
#cta .store-btn:hover { background:#111; }
#cta .store-btn svg { flex-shrink:0; }
#cta .store-btn small {
  font-size:.7rem;
  line-height:1.2;
}
#cta .store-btn strong {
  font-size:1rem;
  line-height:1.2;
}




/* ===== Footer ===== */
.site-footer {
  background: #0b1220;
  color: #cbd5e1;
  font-size: 0.95rem;
}

.site-footer .footer-blurb {
  max-width: 34ch;
  color: #94a3b8; /* softer, closer to design */
}

.site-footer .brand-badge {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
  background: linear-gradient(135deg, #6366f1 0%, #22c55e 100%);
}

.site-footer .footer-heading {
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  letter-spacing: .2px;
}

.site-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer .footer-links a {
  display: inline-block;
  padding: .3rem 0;
  color: #94a3b8; /* dimmer link */
  text-decoration: none;
  font-size: 0.9rem;
}

.site-footer .footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer .footer-sep {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.267);
}

/* column spacing fix */
@media (min-width: 992px) {
  #site-footer .row > [class*="col-lg-2"] {
    margin-left: 2rem; /* adds breathing room between link columns */
  }
}