/* SPARKD Design System – iOS‑inspired, modern, minimal */
/* Lite mode placeholder for heavy hero video */
.hero-video--placeholder{background:linear-gradient(135deg,#f0f0f0,#e5e5e5);width:100%;height:56.25vw;max-height:640px;display:block;border-radius:16px}
:root{
  --bg:#ffffff;
  --fg:#000000;
  --accent:#2cbcff;
  --g1:#9358f7; /* purple */
  --g2:#6197ee; /* blue */
  --g3:#2cbcff; /* cyan */
  --hairline: rgba(0,0,0,.07);
  --muted: rgba(0,0,0,.55);
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;
  --shadow-soft: 0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 1px rgba(0,0,0,.035), 0 6px 20px rgba(0,0,0,.08);
  --shadow-raise: 0 12px 30px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  --focus: 0 0 0 6px rgba(44,188,255,.22), 0 1px 0 rgba(255,255,255,.6) inset;
}

:root{scroll-behavior:smooth}
html,body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,"Noto Sans",sans-serif;background:var(--bg);color:var(--fg)}

/* Typography helpers */
.text-gradient{background:linear-gradient(120deg,var(--g1),var(--g2),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.text-shadow-sm{text-shadow:0 1px 2px rgba(0,0,0,.22)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;border-radius:14px;padding:.7rem 1rem;line-height:1;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;background:#fff;border:1px solid var(--hairline);box-shadow:var(--shadow-soft);color:var(--fg);-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-raise)}
.btn:active{transform:translateY(0);filter:saturate(1.05)}

/* Primary gradient CTA */
.btn-primary{border:0;color:#fff;background-image:linear-gradient(135deg,var(--g1) 0%,var(--g2) 50%,var(--g3) 100%);box-shadow:0 10px 24px rgba(98,151,238,.35), 0 2px 6px rgba(0,0,0,.08)}
.btn-primary:hover{box-shadow:0 14px 34px rgba(98,151,238,.45), 0 3px 10px rgba(0,0,0,.10)}

/* Solid black button */
.btn-black{border:0;background:#000;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.08)}
.btn-black:hover{box-shadow:0 14px 34px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.10)}

/* Minimal outline */
.btn-outline{background:transparent;border:1px solid var(--hairline);color:var(--fg);box-shadow:none}
.btn-outline:hover{background:rgba(0,0,0,.03);box-shadow:var(--shadow-soft)}

/* Gradient outline button variant */
.btn-gradient-outline{
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg,var(--g1),var(--g2),var(--g3)) border-box;
  border:1px solid transparent;
  color: var(--fg);
  box-shadow: none;
}
.btn-gradient-outline:hover{
  background:
    linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)) padding-box,
    linear-gradient(135deg,var(--g1),var(--g2),var(--g3)) border-box;
  box-shadow: var(--shadow-soft);
}

/* Compact control buttons inside cards */
.btn-control{
  padding: .4rem .6rem;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

/* Ghost subtle */
.btn-ghost{background:rgba(0,0,0,.04);border:0}
.btn-ghost:hover{background:rgba(0,0,0,.06)}

/* Cards */
.card{background:var(--bg);border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);position:relative}
.card:hover{box-shadow:var(--shadow-raise)}
.card-compact{border-radius:var(--radius-md)}

/* Fancy gradient border wrapper (optional) */
.with-gradient-border{background:
  linear-gradient(var(--bg),var(--bg)) padding-box,
  linear-gradient(135deg,var(--g1),var(--g2),var(--g3)) border-box;
  border:1px solid transparent;border-radius:var(--radius-lg)
}

/* Optional: apply gradient border to all cards globally
.card{background:
  linear-gradient(var(--bg),var(--bg)) padding-box,
  linear-gradient(135deg,var(--g1),var(--g2),var(--g3)) border-box;
  border:1px solid transparent;
}
*/

/* Responsive video frame to match card to intrinsic video size */
.video-frame{position:relative}
.video-frame video{display:block;width:100%;height:auto;object-fit:contain}

/* Ensure cards shrink-wrap to their content height in grids */
.video-card{height:auto}

/* Inputs */
.input{appearance:none;background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:.65rem .9rem;box-shadow:var(--shadow-soft);width:100%;transition:box-shadow .2s ease,border-color .2s ease}
.input::placeholder{color:var(--muted)}
.input:focus{outline:none;border-color:rgba(44,188,255,.45);box-shadow:var(--focus)}
textarea.input{resize:vertical}

/* Sections */
section{background:var(--bg)}

/* Hero background video setup */
.hero{position:relative;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;filter:saturate(1.05)}
/* Fade the video towards the bottom so it ends just under the buttons */
/* Ensure hero has enough height for the video but not beyond buttons */
.hero{min-height: 72vh;}
.hero-video{mask-image:none;-webkit-mask-image:none}
@media (min-width: 768px){
  .hero{min-height: 68vh;}
  .hero-video{mask-image:none;-webkit-mask-image:none}
}
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom, rgba(255,255,255,.86) 0%, rgba(255,255,255,.60) 22%, rgba(255,255,255,.32) 44%, rgba(255,255,255,0) 62%)}

/* Utility fallbacks if tailwind fails */
.container{max-width:72rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
/* Ensure the CTA row sits above the video mask */
.cta-row{position:relative; z-index:2}

/* Small detail chips */
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;border-radius:999px;border:1px solid var(--hairline);background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.6) inset}

/* Links */
a:hover{filter:saturate(1.05)}

/* Gradient icons via CSS mask using site accent gradient */
.icon-gradient{display:inline-block;background:linear-gradient(120deg,var(--g1),var(--g2),var(--g3));-webkit-mask:var(--icon-url) center/contain no-repeat;mask:var(--icon-url) center/contain no-repeat}

/* Modal overlay for success banner */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-card{max-width:28rem;width:100%}

/* Section background video strip (mid-page) */
.section-bg{position:relative;overflow:hidden}
.section-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;filter:saturate(1.05)}
.section-bg-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom, rgba(255,255,255,.90) 0%, rgba(255,255,255,.65) 20%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.20) 60%, rgba(255,255,255,.40) 78%, rgba(255,255,255,.85) 100%)}
.section-bg-content{position:relative; z-index:2}
.section-bg section{background:transparent}
.section-bg .card{background:rgba(255,255,255,.86)}
.section-bg .btn-outline{background:rgba(255,255,255,.72)}
.section-bg .btn.btn-primary{filter:saturate(1.05)}
/* Tighten spacing between quote and On-demand title */
.section-bg #on-demand h2{margin-top:0}

/* Match hero intake button hover for On-demand "View examples" */
#on-demand a.btn.btn-outline{
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,0.6);
}
#on-demand a.btn.btn-outline:hover{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Production Process: use brand gradient background */
#process{
  background-image: linear-gradient(120deg,var(--g1),var(--g2),var(--g3));
}
#process h2,
#process h3{
  color:#fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}

/* About SPARKD: use brand gradient background */
#about{
  background-image: linear-gradient(120deg,var(--g1),var(--g2),var(--g3));
}
#about h2,
#about h3{
  color:#fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}

/* Footer: brand gradient and white text/links */
footer{
  background-image: linear-gradient(120deg,var(--g1),var(--g2),var(--g3));
}
footer, footer p, footer a{
  color:#fff !important;
}
footer a:hover{
  opacity:.9;
}

/* Social icons in footer */
.icon-white{display:inline-block;background:#fff;-webkit-mask:var(--icon-url) center/contain no-repeat;mask:var(--icon-url) center/contain no-repeat}