/* ===== Storevink — shared styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --sky-pale:#EAF6FE;
  --sky:#4FB4E8;
  --sky-deep:#1E7FB8;
  --ink:#0A2E45;
  --white:#FFFFFF;
  --accent:#FF9F5A;
  --accent-soft:#FFE7D3;
  --shadow: 0 10px 30px rgba(30,127,184,0.12);
  --radius: 20px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-0.01em;
}
p{line-height:1.65; margin:0 0 1em; color:#3A5A70;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ===== Background blobs ===== */
.bg-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

/* ===== NAV ===== */
.nav-wrap{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(79,180,232,0.15);
  transition:box-shadow .3s ease;
}
.nav-wrap.scrolled{ box-shadow:0 4px 20px rgba(30,127,184,0.08); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  max-width:1180px; margin:0 auto;
}
.logo{
  display:flex; align-items:center; gap:8px;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.4rem;
  color:var(--ink);
}
.logo .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--accent);
  display:inline-block;
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.4); opacity:.6;}
}
.nav-links{
  display:flex; gap:6px; align-items:center;
}
.nav-links a{
  padding:9px 16px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  color:var(--sky-deep);
  transition:background .25s ease, color .25s ease, transform .2s ease;
  position:relative;
}
.nav-links a:hover{ background:var(--sky-pale); transform:translateY(-1px); }
.nav-links a.active{ background:var(--sky); color:#fff; }
.nav-cta{
  background:var(--ink) !important;
  color:#fff !important;
  padding:10px 20px !important;
}
.nav-cta:hover{ background:var(--sky-deep) !important; }
.burger{ display:none; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:1rem;
  border:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--ink); color:#fff;
  box-shadow:0 8px 20px rgba(10,46,69,0.25);
}
.btn-primary:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 14px 28px rgba(10,46,69,0.32); }
.btn-secondary{
  background:#fff; color:var(--sky-deep);
  border:2px solid var(--sky);
}
.btn-secondary:hover{ background:var(--sky-pale); transform:translateY(-3px); }
.btn-accent{
  background:var(--accent); color:#fff;
  box-shadow:0 8px 20px rgba(255,159,90,0.35);
}
.btn-accent:hover{ transform:translateY(-3px) scale(1.03); }

/* ===== Sections generic ===== */
section{ position:relative; padding:100px 0; }
.eyebrow{
  display:inline-block;
  background:var(--sky-pale);
  color:var(--sky-deep);
  padding:6px 16px;
  border-radius:999px;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.section-head{ max-width:640px; margin:0 auto 56px; text-align:center; }
.section-head h2{ font-size:clamp(1.8rem,3.5vw,2.6rem); color:var(--ink); }
.section-head p{ font-size:1.1rem; }

/* ===== Reveal on scroll ===== */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* ===== Cards ===== */
.card{
  background:#fff;
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow);
  border:1px solid rgba(79,180,232,0.1);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(30,127,184,0.18); }

/* ===== Floating icons (signature motif) ===== */
.floaters{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.floater{
  position:absolute;
  animation:bob 6s ease-in-out infinite;
  opacity:.85;
}
@keyframes bob{
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-22px) rotate(4deg); }
}

/* ===== Footer ===== */
footer{
  background:var(--ink);
  color:#cfe6f5;
  padding:64px 0 28px;
  margin-top:60px;
}
footer h4{ color:#fff; font-size:1rem; margin-bottom:14px; }
footer a{ color:#a9cee2; transition:color .2s ease; font-size:.95rem; }
footer a:hover{ color:#fff; }
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:32px;
  margin-bottom:40px;
}
.footer-links li{ margin-bottom:10px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.85rem; color:#87b4cb;
}
.footer-logo{
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.3rem; color:#fff; margin-bottom:10px; display:block;
}
.social-row{ display:flex; gap:12px; margin-top:16px; }
.social-row a{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.social-row a:hover{ background:var(--sky); transform:translateY(-3px); }

/* ===== Utility ===== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.center{ text-align:center; }
.mt-lg{ margin-top:48px; }
.tag-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--sky-pale); color:var(--sky-deep);
  padding:6px 14px; border-radius:999px; font-size:.85rem; font-weight:600;
}

/* Page hero shared */
.page-hero{
  padding:70px 0 60px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); }

/* Marquee */
.marquee-wrap{
  overflow:hidden;
  background:var(--sky-pale);
  padding:18px 0;
  border-top:1px solid rgba(79,180,232,.2);
  border-bottom:1px solid rgba(79,180,232,.2);
}
.marquee{
  display:flex;
  gap:48px;
  white-space:nowrap;
  animation:scroll-left 22s linear infinite;
  width:max-content;
}
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.marquee span{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size:1.1rem;
  color:var(--sky-deep);
  display:flex; align-items:center; gap:12px;
}

/* Forms */
.form-field{ margin-bottom:20px; text-align:left; }
.form-field label{ display:block; font-weight:600; margin-bottom:8px; font-size:.9rem; color:var(--ink); }
.form-field input, .form-field textarea, .form-field select{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:2px solid #DCEEF9;
  font-family:'Inter',sans-serif;
  font-size:1rem;
  background:var(--sky-pale);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:none; border-color:var(--sky); background:#fff; transform:translateY(-1px);
}
.form-field textarea{ resize:vertical; min-height:120px; }

/* ================================================================
   GLASS + DASHBOARD SYSTEM — layered on top of existing components
   ================================================================ */

/* Ambient gradient mesh backdrop for hero-type sections */
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(79,180,232,0.22), transparent 60%),
    radial-gradient(500px 380px at 85% 15%, rgba(255,159,90,0.14), transparent 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(79,180,232,0.16), transparent 60%);
}
.orb{
  position:absolute; border-radius:50%; filter:blur(2px);
  background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(79,180,232,0.35));
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 20px 50px rgba(30,127,184,0.18), inset 0 0 20px rgba(255,255,255,0.5);
  animation:orb-float 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes orb-float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(10px,-24px) scale(1.05); }
  66%{ transform:translate(-14px,-8px) scale(.97); }
}

/* Glass panel — frosted, elevated container for hero showcases */
.glass-panel{
  position:relative;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:28px;
  box-shadow:0 30px 70px rgba(30,127,184,0.18), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* Smaller frosted chip used for floating widgets inside a glass panel */
.glass-chip{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.8);
  border-radius:16px;
  box-shadow:0 16px 36px rgba(30,127,184,0.16);
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease;
}
.glass-chip:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(30,127,184,0.22); }

/* Tilt-on-hover wrapper (JS applies transform via mousemove) */
.tilt{
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
  transform-style:preserve-3d;
  will-change:transform;
}

/* Floating widget positioning helper for hero composition */
.float-widget{
  position:absolute;
  animation:widget-drift 7s ease-in-out infinite;
  z-index:2;
}
@keyframes widget-drift{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-16px); }
}

/* Mini sparkline bars (CSS-only) */
.sparkline{ display:flex; align-items:flex-end; gap:4px; height:44px; }
.sparkline i{
  flex:1; display:block; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, var(--sky), var(--sky-deep));
  animation:bar-grow 1.2s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes bar-grow{ from{ transform:scaleY(0); transform-origin:bottom; } to{ transform:scaleY(1); transform-origin:bottom; } }

/* Donut ring (CSS conic-gradient) */
.donut{
  width:84px; height:84px; border-radius:50%;
  background:conic-gradient(var(--sky-deep) calc(var(--pct,72) * 1%), var(--sky-pale) 0);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  animation:donut-in 1.1s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes donut-in{ from{ background:conic-gradient(var(--sky-pale) 0, var(--sky-pale) 0); } }
.donut::after{
  content:''; position:absolute; inset:8px; border-radius:50%; background:#fff;
}
.donut span{
  position:relative; z-index:1; font-weight:700; color:var(--sky-deep); font-size:.95rem;
}

/* Status pill with live-pulse dot, dashboard style */
.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--sky-pale); color:var(--sky-deep);
  padding:6px 12px; border-radius:999px; font-size:.8rem; font-weight:700;
}
.status-pill .live-dot{
  width:7px; height:7px; border-radius:50%; background:#3FC97A;
  box-shadow:0 0 0 0 rgba(63,201,122,.6);
  animation:live-ping 1.8s ease-out infinite;
}
@keyframes live-ping{
  0%{ box-shadow:0 0 0 0 rgba(63,201,122,.5); }
  70%{ box-shadow:0 0 0 8px rgba(63,201,122,0); }
  100%{ box-shadow:0 0 0 0 rgba(63,201,122,0); }
}

/* Cursor-follow glow inside glass panels */
.glow-follow{
  position:absolute; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(79,180,232,0.35), transparent 70%);
  pointer-events:none; z-index:0;
  transition:transform .12s linear, opacity .3s ease;
  opacity:0;
}
.glass-panel:hover .glow-follow{ opacity:1; }

/* Blob illustration shape (organic accent, image-4 inspired) */
.blob-shape{
  border-radius:62% 38% 55% 45% / 48% 45% 55% 52%;
  animation:blob-morph 10s ease-in-out infinite;
}
@keyframes blob-morph{
  0%,100%{ border-radius:62% 38% 55% 45% / 48% 45% 55% 52%; }
  50%{ border-radius:45% 55% 40% 60% / 55% 40% 60% 45%; }
}

/* Responsive */
@media (max-width:900px){
  .grid-2{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0;
    background:#fff; flex-direction:column; padding:16px 24px 24px;
    box-shadow:0 12px 24px rgba(0,0,0,0.08);
    transform:translateY(-140%); transition:transform .3s ease;
    align-items:stretch;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ text-align:center; padding:12px; }
  .burger{
    display:flex; flex-direction:column; gap:5px;
    background:none; border:none; padding:8px;
  }
  .burger span{ width:24px; height:2.5px; background:var(--ink); border-radius:2px; }
  .grid-3, .grid-4{ grid-template-columns:1fr; }
  section{ padding:64px 0; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}