/* Penball v2 — multi-page + interactive package details (no frameworks) */
:root{
  --bg:#0e2f2b; --bg2:#0b2522;
  --text:#f3f4f6; --muted:rgba(243,244,246,.75);
  --brand:#f4efb2; --brand2:#d9cf7a;
  --stroke:rgba(244,239,178,.22);
  --shadow:0 18px 45px rgba(0,0,0,.35);
  --radius:18px; --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1200px 900px at 20% -10%, rgba(244,239,178,.10), transparent 55%),
    radial-gradient(900px 700px at 90% 10%, rgba(244,239,178,.08), transparent 50%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

/* Accessibility */
.skip{
  position:absolute; left:-999px; top:10px;
  background:var(--brand); color:#0a1c19;
  padding:10px 14px; border-radius:12px
}
.skip:focus{left:10px; z-index:9999}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0
}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(14,47,43,.85), rgba(14,47,43,.55));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 20px; position:relative
}

.brand{display:flex; align-items:center; gap:12px}
.logo{border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,.25)}
.logo.sm{border-radius:10px}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text span{font-size:.86rem; color:var(--muted)}

.navlinks{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.navlinks a{padding:10px 10px; border-radius:12px; color:rgba(243,244,246,.88)}
.navlinks a:hover{background:rgba(255,255,255,.06)}
.navlinks a.active{
  background:rgba(244,239,178,.14);
  border:1px solid rgba(244,239,178,.20);
  color:var(--brand)
}

.nav-toggle{display:none; border:0; background:transparent; color:var(--text)}
.burger{width:22px; height:2px; background:var(--text); display:block; position:relative; border-radius:999px}
.burger:before,.burger:after{content:""; position:absolute; left:0; width:22px; height:2px; background:var(--text); border-radius:999px}
.burger:before{top:-7px}
.burger:after{top:7px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
  color:#0a1c19; font-weight:850;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 14px 30px rgba(0,0,0,.25);
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:10px 12px; font-size:.95rem}
.btn-ghost{
  background:transparent; border:1px solid var(--stroke);
  color:var(--text); box-shadow:none;
}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-block{width:100%}

/* Hero */
.hero{padding:72px 0 80px}
.hero-grid{display:grid; gap:22px; grid-template-columns: 1.35fr .85fr; align-items:stretch}

.kicker{
  display:inline-flex; gap:10px; align-items:center;
  color:var(--brand); font-weight:850
}
.kicker:before{
  content:""; width:10px; height:10px; background:var(--brand);
  border-radius:999px; box-shadow:0 0 0 6px rgba(244,239,178,.12)
}

h1{margin:12px 0 10px; font-size:clamp(2rem, 4vw, 3.1rem); line-height:1.06}
.lead{color:rgba(243,244,246,.86); font-size:1.06rem; max-width:62ch}
.hero-cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}

.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

.card-title{margin:0 0 12px; font-size:1.05rem}
.tag{
  display:inline-flex; padding:6px 10px; border-radius:999px;
  background:rgba(244,239,178,.12);
  border:1px solid rgba(244,239,178,.20);
  color:var(--brand); font-weight:900; font-size:.85rem
}

.muted{color:var(--muted)}
.small{font-size:.92rem}
/* Centered hero variant (use on all pages) */
.hero-center{
  text-align:center;
  padding-top: 6px; /* optional */
}

.hero-center .kicker{
  justify-content:center;
}

.hero-center .lead{
  margin-left:auto;
  margin-right:auto;
}

.hero-center .hero-cta{
  justify-content:center;
}

/* Sections */
.section{padding:54px 0}
.section.alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06)
}

.section-head{margin-bottom:24px; text-align:center}
.section-head h2{
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
  color: var(--brand);
  margin: 0 0 8px;
}
.section-head p{
  max-width:700px;
  margin: 0 auto;
}

/* Grids / Cards */
.grid{display:grid; gap:14px}
.cards{grid-template-columns: repeat(3, minmax(0,1fr))}
.card{
  padding:16px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.card h3{margin:0 0 8px}
.section .card h3{color: var(--brand)}
.card p{margin:0; color:var(--muted)}

/* Team section */
.team{grid-template-columns: repeat(4, minmax(0, 1fr))}
.team-card{text-align:center; padding:14px}
.team-photo{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 12px;
}

/* Tabs */
.tabs{display:flex; gap:10px; margin:22px 0 16px; flex-wrap:wrap}
.tab{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  color: rgba(243,244,246,.9);
  padding:10px 14px;
  border-radius:999px;
  font-weight:850;
  cursor:pointer;
}
.tab.is-active{
  background: rgba(244,239,178,.14);
  border-color: rgba(244,239,178,.28);
  color: var(--brand);
}
.tabpanel{display:none}
.tabpanel.is-active{display:block}

/* Pricing */
.pricing{display:grid; gap:14px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items:stretch}
.price-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  padding:18px;
  position:relative;
  display:flex;
  flex-direction:column;
  text-align:left;
}

.price-card h3{
  margin:0 0 6px;
  color: var(--brand);
  padding-right: 110px; /* space for pill */
  line-height: 1.15;
  white-space: normal; /* IMPORTANT: remove nowrap */
}

.price{
  margin:0 0 14px;
  font-size:1.45rem;
  color:var(--brand);
  font-weight:950;
  line-height:1.1;
}
.price span{font-size:.95rem; color:var(--muted); font-weight:850}

.price-card ul{
  margin:0 0 16px;
  padding-left:18px;
  color:rgba(243,244,246,.88);
}
.price-card li{margin:9px 0; line-height:1.4}

.price-card .actions{margin-top:auto; display:grid; gap:10px}

.price-card.featured{
  background:linear-gradient(180deg, rgba(244,239,178,.12), rgba(255,255,255,.04));
  border-color:rgba(244,239,178,.28);
  box-shadow:var(--shadow);
}

.pill{
  position:absolute;
  top:12px; right:12px;
  background:rgba(244,239,178,.18);
  border:1px solid rgba(244,239,178,.30);
  color:var(--brand);
  padding:6px 10px;
  border-radius:999px;
  font-size:.84rem;
  font-weight:950;
  white-space: nowrap;
  z-index:2;
}

/* Panels / Lists */
.panel{padding:18px; border-radius:var(--radius); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08)}
.two{grid-template-columns: 1fr 1fr}

.steps{margin:0; padding-left:18px; color:rgba(243,244,246,.88)}
.steps li{margin:10px 0}

.check{margin:0; padding-left:0; list-style:none}
.check li{margin:10px 0; color:rgba(243,244,246,.88)}
.check li:before{content:"✓"; color:var(--brand); font-weight:950; margin-right:10px}

.notice{
  background:rgba(244,239,178,.10);
  border:1px solid rgba(244,239,178,.18);
  padding:14px 16px;
  border-radius:var(--radius);
  margin-bottom:14px
}

/* Forms */
.form{display:grid; gap:12px}
label{display:grid; gap:6px; font-weight:850; color:rgba(243,244,246,.92)}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(244,239,178,.45);
  box-shadow:0 0 0 4px rgba(244,239,178,.10)
}
textarea{resize:vertical}

/* Footer */
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer h4{
  margin: 0 0 10px;
  font-size: .95rem;
  letter-spacing: .02em;
  color: rgba(243,244,246,.92);
}

.footer .brand img{
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 12px;
}

.footer .brand{display:flex; align-items:center; gap:10px}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer-links a{color: rgba(243,244,246,.72)}
.footer-links a:hover{color: var(--brand)}

.footer-social{
  display:flex;
  gap:14px;
  margin-top:14px;
}

.footer-social a{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  color:rgba(243,244,246,.75);
  transition:all .2s ease;
}
.footer-social a:hover{
  background:rgba(244,239,178,.15);
  color:var(--brand);
  transform:translateY(-2px);
}
.footer-social svg{width:18px; height:18px}

.footer-bottom{
  padding: 14px 0 18px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Home section variations */
.section.industries{background:transparent}
.section.industries .card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
  border-color: rgba(244,239,178,.12);
}
.section.industries .card h3{color:var(--brand)}

.section.why{position:relative}
.section.why:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 20% 30%, rgba(244,239,178,.10), transparent 55%),
    radial-gradient(900px 500px at 80% 60%, rgba(244,239,178,.06), transparent 55%);
  pointer-events:none;
}
.section.why .container{position:relative}
.section.why .panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.14));
  border-color: rgba(255,255,255,.10);
}

/* Client results */
.section.results .cards{grid-template-columns: repeat(3, minmax(0,1fr))}
.section.results .card{
  text-align:left;
  background: linear-gradient(180deg, rgba(244,239,178,.10), rgba(255,255,255,.03));
  border-color: rgba(244,239,178,.20);
}
.section.results .card h3{margin:0 0 8px; font-size:1.05rem}
.section.results .metric{
  display:block;
  font-size:1.8rem;
  font-weight:950;
  color:var(--brand);
  letter-spacing:-.02em;
  margin-bottom:4px;
}

/* Testimonials */
.section.testimonials{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section.testimonials .card{background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10)}
.section.testimonials .stars{color:var(--brand); font-weight:950; letter-spacing:.08em}
.section.testimonials blockquote{margin:10px 0 0; color:rgba(243,244,246,.88)}
.section.testimonials .who{margin-top:12px; color:var(--muted); font-size:.92rem}

/* Contact page extras */
.contact-actions{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.contact-divider{height:1px; background: rgba(255,255,255,.08); margin: 16px 0}
.contact-subtitle{margin: 0 0 10px; font-size: 1rem}

.contact-social{display:flex; flex-direction:column; gap:8px}
.contact-social a{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(243,244,246,.78);
  font-weight:700;
  transition: all .18s ease;
}
.contact-social a:hover{
  border-color: rgba(244,239,178,.30);
  background: rgba(244,239,178,.08);
  color: var(--brand);
  transform: translateY(-2px);
}

.tipbox{
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* Modal (single clean version) */
.modal{position:fixed; inset:0; display:none; z-index:1000}
.modal.is-open{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55)}
.modal-dialog{
  position:relative;
  width:min(760px, calc(100% - 28px));
  margin:72px auto 24px;
  background: linear-gradient(180deg, rgba(18,54,50,.98), rgba(10,33,30,.98));
  border:1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding:18px;
}
.modal-close{
  position:absolute; top:14px; right:14px;
  width:38px; height:38px; border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: var(--text);
  cursor:pointer;
}
.modal-body h3{margin:0 0 8px; font-size:1.4rem; color:var(--brand)}
.modal-body p{margin:0 0 12px; color:rgba(243,244,246,.86)}
.modal-body ul{margin:0 0 14px; padding-left:18px; color:rgba(243,244,246,.88)}
.modal-body li{margin:8px 0}
.meta-row{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 14px}
.chip{
  display:inline-flex;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(243,244,246,.92);
  font-weight:800;
  font-size:.9rem
}

/* =====================
   Responsive
   ===================== */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr}
  .cards{grid-template-columns: repeat(2, minmax(0,1fr))}
  .pricing{grid-template-columns: repeat(2, minmax(0,1fr))}
  .footer-grid{grid-template-columns: 1fr 1fr}
  .team{grid-template-columns: repeat(2, minmax(0, 1fr))}
}

@media (max-width: 720px){
  .nav-toggle{
    display:inline-flex;
    padding:10px 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.16)
  }
  .navlinks{
    display:none;
    position:absolute; right:16px; top:60px;
    flex-direction:column; align-items:stretch;
    gap:8px; padding:10px;
    border-radius:16px;
    width:min(340px, calc(100vw - 32px));
    background:rgba(14,47,43,.95);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow)
  }
  .navlinks.is-open{display:flex}

  .cards{grid-template-columns: 1fr}
  .pricing{grid-template-columns: 1fr}
  .two{grid-template-columns: 1fr}
  .modal-dialog{margin:56px auto 18px}

  /* IMPORTANT: fix Client results overriding its own more specific rule */
  .section.results .cards{grid-template-columns: 1fr}
}

@media (max-width: 520px){
  .footer-grid{grid-template-columns: 1fr}
  .team{grid-template-columns: 1fr}

  /* Make result headings calmer on tiny screens */
  .section.results .card h3{
    font-size: 1.02rem;
    line-height: 1.2;
  }
  .section.results .metric{
    font-size: 1.5rem;
    line-height: 1.05;
  }
}