/* ============================================================
   ProStore Landing – enhanced, colourful & logo–aligned
   ============================================================ */

/* ───────── ROOT + RESET ───────── */
:root{
  /* logo-derived navy & harmonious tints */
  --clr-primary:#102841;          /* main navy (from logo) */
  --clr-primary-dark:#081a2d;     /* deeper shade */
  --clr-primary-light:#164d80;    /* lighter tint */

  /* warm accent to contrast navy (CTA, badges, links) */
  --clr-accent:#FDB940;           /* gold / honey */

  /* neutrals */
  --clr-dark:#222;
  --clr-light:#f7f9fc;
  --clr-grey:#666;
  --radius:10px;
  --shadow:0 4px 12px rgba(0,0,0,.08);
  --max:1200px;
  font-size:16px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Roboto',sans-serif;color:var(--clr-dark);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}

/* ───────── UTILITIES ───────── */
.container{width:90%;max-width:var(--max);margin-inline:auto}

.btn-primary,
.btn-secondary,
.nav-btn,
.plan-card button,
.register-btn{
  display:inline-block;padding:.75rem 1.6rem;border:none;border-radius:var(--radius);
  font-weight:600;cursor:pointer;text-decoration:none;transition:.25s;
}

/* primary actions */
.btn-primary,.nav-btn{background:var(--clr-accent);color:var(--clr-primary-dark)}
.btn-primary:hover,.nav-btn:hover{filter:brightness(.9)}

/* secondary outline */
.btn-secondary{
  background:transparent;color:var(--clr-accent);border:2px solid var(--clr-accent);
}
.btn-secondary:hover{background:var(--clr-accent);color:var(--clr-primary-dark)}

/* subtle link-style button */
.btn-link{color:var(--clr-accent);font-weight:500;text-decoration:none;margin-left:1rem}
.btn-link:hover{text-decoration:underline}

.section-title{text-align:center;font-size:2.1rem;margin-bottom:.3rem;color:var(--clr-primary)}
.section-tag{text-align:center;color:var(--clr-grey);margin-bottom:2rem}

/* ───────── HEADER ───────── */
.site-header{
  background:#fff;position:sticky;top:0;z-index:50;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.logo img{height:46px}
.main-nav ul{display:flex;gap:2rem;list-style:none}
.main-nav a{color:var(--clr-dark);font-weight:500;text-decoration:none;transition:color .25s}
.main-nav a:hover{color:var(--clr-accent)}
#hamburger{display:none;font-size:1.9rem;background:none;border:none;color:var(--clr-dark)}
.nav-btn{padding:.55rem 1.2rem;font-size:.88rem}

/* ───────── HERO ───────── */
.hero{
  /* soft radial over subtle navy for depth */
  background:radial-gradient(circle at 30% 30%,var(--clr-primary-light) 0%,var(--clr-primary) 70%,var(--clr-primary-dark) 100%);
  color:#fff;padding:5rem 0 4rem;
}
.hero-grid{display:grid;gap:2.2rem;align-items:center}
.hero-text h1{font-size:2.5rem;line-height:1.2;margin-bottom:1.1rem}
.hero-text .brand{color:var(--clr-accent)}
.subtitle{color:#e5e8ee;margin-bottom:1.2rem}
.hero-bullets{list-style:none;margin:1.2rem 0 2.3rem}
.hero-bullets li{margin-bottom:.45rem}
.hero-bullets li::before{
  content:"●";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;
  background:var(--clr-accent);margin-right:.6rem;vertical-align:middle;
}
.cta-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:1rem}

/* let artwork always show full */
.hero-art img{
  width:100%;max-width:560px;border-radius:var(--radius);
  box-shadow:var(--shadow);object-fit:contain;
}

/* ───────── FEATURES ───────── */
.section-features{padding:5rem 0;background:#fff}
.feature-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.feature-card{
  background:var(--clr-light);padding:2.2rem;border-radius:var(--radius);
  box-shadow:var(--shadow);text-align:center;transition:transform .25s,background .25s;
}
.feature-card:hover{
  transform:translateY(-6px);
  background:#eef3fb;
}
.feature-card img{height:58px;margin-bottom:1.1rem;filter:invert(19%) sepia(39%) saturate(667%) hue-rotate(169deg) brightness(93%) contrast(92%);}
.feature-card h3{margin-bottom:.6rem;color:var(--clr-primary)}

/* ───────── SOLUTIONS STRIP ───────── */
.solutions-strip{
  background:linear-gradient(135deg,var(--clr-primary-dark),var(--clr-primary));
  color:#fff;padding:4.5rem 0;
}
.strip-grid{display:grid;gap:2.3rem;align-items:center}
.strip-grid h2{font-size:2rem;margin-bottom:.6rem}
.accent{color:var(--clr-accent)}
.check-list{list-style:none;margin-top:1.1rem;padding-left:0}
.check-list li{margin-bottom:.5rem;position:relative;padding-left:1.6rem}
.check-list li::before{
  content:"✓";position:absolute;left:0;color:var(--clr-accent);font-weight:bold;
}
.strip-grid img{width:100%;max-width:520px;border-radius:var(--radius);box-shadow:var(--shadow)}

/* ───────── PRICING ───────── */
.pricing-section{padding:5rem 0;background:#fff}
.price-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:2.2rem}
.plan-card{
  background:var(--clr-light);border-radius:var(--radius);padding:2.6rem 2rem;text-align:center;
  box-shadow:var(--shadow);position:relative;transition:transform .25s,box-shadow .25s;
}
.plan-card:hover{transform:translateY(-6px);box-shadow:0 6px 14px rgba(0,0,0,.1)}
.plan-card.popular::after{
  content:'Most Popular';position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:var(--clr-accent);color:var(--clr-primary-dark);font-size:.72rem;font-weight:700;
  padding:.25rem .7rem;border-radius:0 0 var(--radius) var(--radius);
}
.plan-card h3{margin-bottom:.5rem;color:var(--clr-primary)}
.price-tag{font-size:2.1rem;margin-bottom:.3rem;color:var(--clr-accent)}
.price-tag span{font-size:.9rem;color:var(--clr-grey)}
.plan-card ul{list-style:none;text-align:left;margin:1.3rem 0 1.9rem}
.plan-card ul li{margin:.45rem 0;position:relative;padding-left:1.4rem}
.plan-card ul li::before{
  content:"•";position:absolute;left:0;color:var(--clr-primary-light);font-size:1.1rem;line-height:1;
}
.plan-card button{
  width:100%;background:var(--clr-primary);color:#fff;font-weight:600;
}
.plan-card button:hover{background:var(--clr-primary-dark)}

/* ───────── ABOUT SECTION ───────── */
.about-section{background:var(--clr-light);padding:5rem 0}
.about-grid{display:grid;gap:2.3rem;align-items:center}
.about-grid img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.about-section h2{color:var(--clr-primary);font-size:2rem}
.about-section .lead{color:var(--clr-primary-light);font-weight:600;margin:1rem 0}

/* ───────── FOOTER ───────── */
.site-footer{background:#0b192a;color:#cbd1dc;padding:3.5rem 0 1.3rem}
.footer-grid{
  display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:2.2rem
}
.site-footer h4{color:#fff;margin-bottom:.8rem}
.footer-grid ul{list-style:none}
.footer-grid a{color:#cbd1dc;text-decoration:none;transition:color .25s}
.footer-grid a:hover{color:var(--clr-accent)}
.contact li{margin-bottom:.4rem}
.footer-bottom{
  text-align:center;font-size:.9rem;color:#68707b;border-top:1px solid #16202b;padding-top:1rem
}

/* ───────── REGISTRATION MODAL ───────── */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;
  align-items:center;justify-content:center;padding:1rem;z-index:100
}
.modal-content{
  background:#fff;max-width:500px;width:100%;border-radius:var(--radius);
  padding:2.3rem;box-shadow:var(--shadow);position:relative;animation:zoom .25s ease
}
@keyframes zoom{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.close{position:absolute;top:10px;right:14px;font-size:1.9rem;cursor:pointer;border:none;background:none;color:var(--clr-grey)}
.modal-content h2{text-align:center;margin-bottom:1rem;color:var(--clr-primary)}
.modal-content input{
  width:100%;padding:.7rem .85rem;margin-bottom:1rem;border:1px solid #ccd1d7;border-radius:var(--radius);
}
.register-btn{width:100%;margin-top:.2rem;background:var(--clr-accent);color:var(--clr-primary-dark)}
.register-btn:hover{filter:brightness(.9)}

/* ───────── RESPONSIVE ───────── */
@media (min-width:800px){
  .hero-grid{grid-template-columns:1fr 1fr}
  .strip-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  #hamburger{display:block}
  .main-nav{
    position:fixed;inset:0 0 0 40%;background:#fff;transform:translateX(100%);
    transition:transform .3s;padding:4rem 2rem;box-shadow:-2px 0 8px rgba(0,0,0,.05);
  }
  .main-nav.open{transform:translateX(0)}
  .main-nav ul{flex-direction:column;gap:1.3rem}
  .hero-text h1{font-size:2.1rem}
  .hero{padding:4rem 0 3.5rem}
}
@media (max-width:576px){
  .cta-wrap .btn-primary{width:100%}
  .btn-link{margin-left:0}
}