*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

:root{
  --bg:#f6f9ff;
  --panel:rgba(255,255,255,.88);
  --text:#071426;
  --muted:#5b6b7f;
  --brand:#0b69ff;
  --brand2:#2aa7ff;
  --ink:#062046;
  --border:rgba(10,20,40,.10);
  --shadow:0 18px 40px rgba(10,20,40,.12);
  --r:18px;

  /* Polish tokens */
  --focus: 0 0 0 3px rgba(42,167,255,.28);
  --shadow2: 0 10px 28px rgba(10,20,40,.10);
  --shadow3: 0 26px 70px rgba(10,20,40,.16);
}

body{
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* keep paragraphs readable */
p{ max-width:70ch; }

.muted{ color: var(--muted); }

/* Focus styles */
:focus{ outline:none; }
:focus-visible{ box-shadow:var(--focus); border-radius:12px; }

/* Link transitions */
a{
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .12s ease;
}

/* Container (your header uses .container) */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}

/* === Dragon background === */
body.dragon-theme::before{
  content:"";
  position:fixed;
  inset:-10%;
  z-index:-2;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(11,105,255,.14), transparent 60%),
    radial-gradient(700px 500px at 85% 20%, rgba(42,167,255,.12), transparent 60%),
    url("../assets/dragon-wrap.png");
  background-repeat:no-repeat;
  background-position:left top, right top, center 160px;
  background-size:auto, auto, min(1400px, 110vw);
  opacity:.28;
}
body.dragon-theme::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:linear-gradient(
    to bottom,
    rgba(246,249,255,.98) 0,
    rgba(246,249,255,.95) 140px,
    rgba(246,249,255,.5) 360px,
    rgba(246,249,255,0) 560px
  );
}

/* =========================
   HORIZONTAL HEADER + NAV
   ========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(10,20,40,.06);
}

.header-inner{
  margin:0 auto;
  padding:.85rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:inherit;
}

.brand-logo{
  width:38px;
  height:38px;
  object-fit:contain;
  display:block;
}

.brand-title,
.brand-name{
  font-weight:950;
  color:var(--ink);
  letter-spacing:.6px;
  line-height:1;
  font-size:1.05rem;
}

.brand:hover .brand-title,
.brand:hover .brand-name{
  color:#041a38;
}

.nav{
  display:flex;
  gap:.35rem;
  align-items:center;
}

.nav a{
  text-decoration:none;
  font-weight:850;
  color:#0a2e4a;
  padding:.55rem .75rem;
  border-radius:14px;
  border:1px solid transparent;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.nav a:hover{
  background:rgba(11,105,255,.08);
  border-color:rgba(11,105,255,.10);
}

.nav a.active{
  background:rgba(11,105,255,.14);
  color:var(--brand);
  border:1px solid rgba(11,105,255,.25);
  box-shadow:0 10px 22px rgba(11,105,255,.14);
}

.nav-toggle{
  display:none;
  border:1px solid rgba(11,105,255,.25);
  background:rgba(11,105,255,.10);
  border-radius:12px;
  padding:.45rem .65rem;
  cursor:pointer;
  min-height:44px;
  min-width:44px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.nav-toggle:hover{
  background: rgba(11,105,255,.14);
  border-color: rgba(11,105,255,.35);
  box-shadow: 0 10px 18px rgba(11,105,255,.12);
}
.nav-toggle:active{ transform: scale(.98); }

/* Main content wrapper */
.main{
  max-width:1200px;
  margin:0 auto;
  padding: clamp(1.4rem, 3vw, 2.2rem) 1rem;
}

/* Mobile dropdown nav */
@media (max-width:860px){
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .header-inner{ position:relative; }

  .nav.open{
    display:flex;
    position:absolute;
    top:70px;
    left:1rem;
    right:1rem;
    flex-direction:column;
    gap:.25rem;
    background:rgba(255,255,255,.96);
    border:1px solid var(--border);
    border-radius:16px;
    padding:.75rem;
    box-shadow:var(--shadow3);
    backdrop-filter: blur(12px);
  }

  .nav.open a{
    width:100%;
    justify-content:flex-start;
    padding:.7rem .85rem;
    border-radius:14px;
  }
}

/* =========================
   PAGE SECTIONS / HEADERS
   ========================= */
.section{ margin-top: 2.2rem; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom: 1.1rem; }
.section-head h2{ font-size: 1.55rem; letter-spacing:-.01em; color: var(--ink); }

/* =========================
   HERO + BUTTONS + LAYOUT
   ========================= */
.hero{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow2);
  padding: clamp(1.25rem, 2.8vw, 2rem);
  max-width: 1200px;
  margin: 0 auto;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 1.3rem;
  align-items: start;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .75rem;
  border-radius:999px;
  border:1px solid rgba(11,105,255,.18);
  background: rgba(11,105,255,.08);
  color: var(--ink);
  font-weight: 900;
  width: fit-content;
  margin-bottom: .9rem;
}

.hero h1{
  font-size:2.2rem;
  line-height:1.15;
  color:var(--ink);
  margin-bottom:.8rem;
  letter-spacing:-0.02em;
}

.hero p{
  color:var(--muted);
  margin-bottom:1.2rem;
  font-size:1.03rem;
}

.hero-text .lead{ font-size: 1.06rem; }

.cta-row{ display:flex; gap:.65rem; flex-wrap:wrap; margin-top:.9rem; }

.trust{ margin-top: 1.1rem; display:grid; gap:.45rem; }
.trust-item{ display:flex; align-items:center; gap:.55rem; color: var(--muted); font-weight: 750; }
.trust-item i{ color: var(--brand); }

.btn{
  display:inline-block;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  font-weight:900;
  padding:.75rem 1.3rem;
  border-radius:14px;
  text-decoration:none;
  box-shadow:0 12px 26px rgba(11,105,255,.25);
  border:1px solid rgba(255,255,255,0);
  transform:translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .12s ease;
}

.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(11,105,255,.22);
  filter: saturate(1.05) brightness(1.02);
}
.btn:active{ transform: translateY(0); opacity:.96; }
.btn:focus-visible{ box-shadow: var(--focus), 0 16px 34px rgba(11,105,255,.22); }

.btn.ghost{
  background: rgba(255,255,255,.75);
  color: var(--ink);
  border: 1px solid rgba(11,105,255,.22);
  box-shadow: 0 10px 18px rgba(10,20,40,.06);
}
.btn.ghost:hover{
  background: rgba(11,105,255,.08);
  border-color: rgba(11,105,255,.35);
}

.btn.sm{ padding:.55rem .75rem; border-radius:12px; font-weight:900; }

/* right side hero card */
.hero-card{
  background: rgba(255,255,255,.78);
  border:1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.hero-card-top{ padding: 1rem 1rem .75rem 1rem; }
.mini-title{ font-weight: 950; color: var(--ink); }
.mini-muted{ color: var(--muted); font-weight: 750; margin-top: .2rem; }

.hero-list{ display:grid; gap:.55rem; padding: 0 1rem 1rem 1rem; }
.hero-li{
  display:flex; align-items:center; gap:.6rem;
  padding: .55rem .65rem;
  border-radius: 14px;
  border:1px solid rgba(10,20,40,.08);
  background: rgba(255,255,255,.72);
  color: var(--ink);
  font-weight: 800;
}
.hero-li i{ color: var(--brand); }

.hero-img img{
  display:block;
  width:100%;
  height: 220px;
  object-fit: cover;
  border-top: 1px solid rgba(10,20,40,.08);
}

/* Utility panel */
.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
}

/* =========================
   CARDS (What we do)
   ========================= */
.cards-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
.card{
  background: rgba(255,255,255,.78);
  border:1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  padding: 1.1rem;
}
.card .icon{
  width: 46px; height: 46px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(11,105,255,.10);
  border:1px solid rgba(11,105,255,.18);
  margin-bottom: .7rem;
}
.card .icon i{ color: var(--brand); font-size: 1.15rem; }
.card h3{ font-size: 1.1rem; color: var(--ink); margin-bottom: .35rem; letter-spacing:-.01em; }
.card p{ margin: 0; }

/* =========================
   PRODUCT GRID (Homepage + Shop)
   ========================= */
.product-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}

.product{
  background: rgba(255,255,255,.78);
  border:1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  overflow:hidden;
  display:flex;
  flex-direction: column;
  min-height: 100%;
}

.product img{
  width:100%;
  height: 200px;
  object-fit: cover;
  display:block;
  border-bottom: 1px solid rgba(10,20,40,.08);
}

.product h3{
  padding: .9rem 1rem 0 1rem;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing:-.01em;
}

.product p{
  padding: .35rem 1rem 0 1rem;
  margin-bottom: .8rem;
}

.product-foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:.8rem;
  padding: .9rem 1rem 1rem 1rem;
  border-top: 1px solid rgba(10,20,40,.08);
}

.price{
  font-weight: 950;
  color: var(--ink);
  letter-spacing:.2px;
}

.actions{ display:flex; gap:.45rem; flex-wrap:wrap; }

/* =========================
   CTA PANEL
   ========================= */
.cta-panel{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem;
  background: rgba(255,255,255,.78);
  border:1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
}

/* =========================
   FORMS / TABLES (admin)
   ========================= */
.field{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem; }
.label{ font-weight:900; color:var(--ink); }

.input,.select,.textarea{
  width:100%;
  padding:.75rem .85rem;
  border-radius:14px;
  border:1px solid rgba(10,20,40,.14);
  background: rgba(255,255,255,.82);
  color:var(--text);
  font-weight:700;
}
.textarea{ min-height:120px; resize:vertical; }

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(10,20,40,.10);
  background: rgba(255,255,255,.70);
}
.table th,.table td{ padding:.85rem .8rem; border-bottom:1px solid rgba(10,20,40,.08); text-align:left; vertical-align:top; }
.table th{ color:var(--ink); font-weight:950; background: rgba(11,105,255,.06); }
.table tr:last-child td{ border-bottom:0; }

.kbd-pill{
  display:inline-flex; align-items:center;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(11,105,255,.18);
  background: rgba(255,255,255,.65);
  color: var(--muted);
  font-weight:900;
  font-size:.85rem;
}
.kbd-pill.on{
  color: var(--brand);
  border-color: rgba(11,105,255,.30);
  background: rgba(11,105,255,.10);
}

/* =========================
   FOOTER
   ========================= */
.site-footer{
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  margin-top: 2.2rem;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.4rem;
  padding: 1.8rem 0;
}

.footer-title{
  font-weight: 950;
  color: var(--ink);
  letter-spacing: .2px;
  margin-bottom: .65rem;
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap: .55rem;
}

.footer-links a{
  text-decoration:none;
  color:#0a2e4a;
  font-weight: 800;
  padding: .45rem .55rem;
  border-radius: 12px;
  border: 1px solid transparent;
  display:inline-flex;
  align-items:center;
  gap: .55rem;
}

.footer-links a:hover{
  background: rgba(11,105,255,.08);
  border-color: rgba(11,105,255,.10);
}

.footer-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top: .9rem;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .65rem;
  border-radius: 999px;
  border:1px solid rgba(11,105,255,.18);
  background: rgba(255,255,255,.65);
  color: var(--muted);
  font-weight: 800;
  font-size: .9rem;
}

.badge i{ color: var(--brand); }

.footer-bottom{
  padding: 1rem 0 1.2rem 0;
  border-top: 1px solid rgba(10,20,40,.08);
  color: var(--muted);
  font-weight: 700;
  font-size: .95rem;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-img img{ height: 200px; }
  .cards-3{ grid-template-columns: 1fr; }
  .product-grid{ grid-template-columns: 1fr; }
  .cta-panel{ flex-direction: column; align-items:flex-start; }
}

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}


/* ===== Make sections feel grounded (less "floating") ===== */

/* Give sections a soft panel background */
.section{
  margin-top: 1.6rem;
  padding: 1.1rem;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(10,20,40,.08);
  border-radius: var(--r);
  box-shadow: 0 10px 26px rgba(10,20,40,.06);
}

/* Keep the hero as the main “big” card */
.hero{
  box-shadow: 0 18px 44px rgba(10,20,40,.12);
}

/* Reduce the dragon overlay slightly so content reads better */
body.dragon-theme::before{ opacity: .18; }

/* ===== Mobile fixes ===== */
@media (max-width: 700px){

  /* Prevent cramped header spacing */
  .main{ padding: 1rem .9rem; }

  /* Hero: better spacing + readable heading */
  .hero{ padding: 1.05rem; }
  .hero h1{ font-size: 1.65rem; line-height: 1.15; }
  .hero p{ font-size: 1rem; margin-bottom: .9rem; }

  /* Buttons stack nicely */
  .cta-row{ gap: .55rem; }
  .cta-row .btn{
    width: 100%;
    text-align:center;
    display:flex;
    justify-content:center;
  }

  /* Trust list tighter */
  .trust{ margin-top: .9rem; }

  /* Right card spacing tighter */
  .hero-card-top{ padding: .9rem; }
  .hero-list{ padding: 0 .9rem .9rem .9rem; }
  .hero-img img{ height: 170px; }

  /* Cards and products: reduce padding and make images less tall */
  .card{ padding: .95rem; }
  .product img{ height: 170px; }

  /* Footer spacing */
  .footer-grid{ padding: 1.2rem 0; }
}
/* =========================
   FOOTER FIX (desktop + mobile)
   ========================= */

/* Make footer feel like a proper section */
.site-footer{
  background: rgba(255,255,255,.82);
  border-top: 1px solid rgba(10,20,40,.10);
  padding: 1.2rem 0 0 0;
}

/* Better column spacing + keep columns aligned left */
.footer-grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.2rem;
  align-items:start;
  justify-items:start;
  padding: 1.3rem 0 1.1rem 0;
}

/* Don’t let links look “full width” */
.footer-links a{
  width: fit-content;
}

/* Make badges sit nicer */
.footer-badges{
  margin-top: .85rem;
  gap: .6rem;
}
.badge{
  padding: .42rem .65rem;
  font-size: .9rem;
  background: rgba(255,255,255,.80);
}

/* Bottom row looks cleaner */
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: .95rem 0 1.1rem 0;
}

/* ===== Mobile ===== */
@media (max-width: 900px){
  .site-footer{ padding: 1rem 0 0 0; }

  .footer-grid{
    grid-template-columns: 1fr;
    gap: 1.1rem;
    padding: 1rem 0;
  }

  .footer-title{ margin-bottom: .45rem; }

  .footer-links{ gap: .35rem; }
  .footer-links a{ padding: .45rem .55rem; }

  .footer-bottom{
    flex-direction: column;
    align-items:flex-start;
  }
}
/* =========================
   FOOTER - STRONG OVERRIDE
   Paste at VERY bottom of styles.css
   ========================= */

.site-footer{
  background: transparent !important;
  border-top: 0 !important;
  margin-top: 2.2rem !important;
}

/* Turn the footer content into a panel/card */
.site-footer .footer-grid{
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr !important;
  gap: 1.4rem !important;
  align-items: start !important;

  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(10,20,40,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(10,20,40,.08) !important;

  padding: 1.25rem 1.25rem 1.05rem 1.25rem !important;
}

/* Make link lists tighter + stop them looking "floaty" */
.site-footer .footer-links{
  gap: .3rem !important;
}
.site-footer .footer-links a{
  padding: .38rem .55rem !important;
  border-radius: 12px !important;
  width: fit-content !important;
}

/* Badges tighter */
.site-footer .footer-badges{
  gap: .45rem !important;
  margin-top: .75rem !important;
}
.site-footer .badge{
  padding: .38rem .6rem !important;
  font-size: .88rem !important;
}

/* Bottom row: attach to the card */
.site-footer .footer-bottom{
  border-top: 0 !important;
  margin-top: .8rem !important;

  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(10,20,40,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(10,20,40,.08) !important;

  padding: .85rem 1.25rem !important;
}

/* Mobile: stacked + neat */
@media (max-width: 900px){
  .site-footer .footer-grid{
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
    gap: 1rem !important;
  }
  .site-footer .footer-bottom{
    padding: .8rem 1rem !important;
  }
}
/* ===== Simplified Footer ===== */

.site-footer{
  margin-top: 2rem;
  padding: 1.2rem 0;
  background: rgba(255,255,255,.82);
  border-top: 1px solid rgba(10,20,40,.10);
}

.simple-footer{
  display: flex;
  flex-direction: column;
  gap: .7rem;
  font-size: .95rem;
}

.footer-left{
  font-weight: 800;
  color: var(--ink);
}

.footer-links-row,
.footer-social{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.simple-footer a{
  text-decoration: none;
  color: #0a2e4a;
  font-weight: 800;
  padding: .35rem .55rem;
  border-radius: 12px;
  border: 1px solid transparent;
}

.simple-footer a:hover{
  background: rgba(11,105,255,.08);
  border-color: rgba(11,105,255,.10);
}

.footer-copy{
  margin-top: .4rem;
}

/* Desktop layout */
@media (min-width: 900px){
  .simple-footer{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer-copy{
    margin-top: 0;
  }
}
/* ===== Ultra Simple Footer ===== */

.site-footer{
  margin-top: 2rem;
}

.footer-frame{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  background: rgba(255,255,255,.82);
  border: 1px solid rgba(10,20,40,.10);
  border-radius: var(--r);
  box-shadow: var(--shadow2);

  padding: .9rem 1.1rem;
}

.footer-copy{
  font-weight: 800;
  color: var(--muted);
}

.footer-icons{
  display: flex;
  gap: .55rem;
}

.footer-icons a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 12px;
  border: 1px solid rgba(11,105,255,.18);

  background: rgba(255,255,255,.75);
  color: var(--ink);
  text-decoration: none;

  transition: all .15s ease;
}

.footer-icons a:hover{
  background: rgba(11,105,255,.10);
  border-color: rgba(11,105,255,.30);
  color: var(--brand);
}

/* Mobile */
@media (max-width: 700px){
  .footer-frame{
    flex-direction: column;
    text-align: center;
    gap: .6rem;
  }
}
/* Hero product mini gallery */
.hero-gallery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:.45rem;
  padding:.6rem;
}

.hero-gallery img{
  width:100%;
  height:110px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(10,20,40,.08);
}

@media (max-width:700px){
  .hero-gallery img{
    height:90px;
  }
}
@media (max-width: 700px){
  .cards-3{ gap: .85rem; }
  .card .icon{ width: 44px; height: 44px; }
  .table th,.table td{ padding: .7rem .6rem; }
}
.desc-wrapper .full-desc {
  display: none;
}

.desc-wrapper.expanded .short-desc {
  display: none;
}

.desc-wrapper.expanded .full-desc {
  display: block;
}

.read-more-btn {
  display: inline-block;
  margin-top: .4rem;
  font-size: .9rem;
  font-weight: 900;
  color: var(--brand);
  cursor: pointer;
}
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items:center; gap:8px; }

  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;                 /* adjust if your header height differs */
    padding: 12px;
    display: none;
    flex-direction: column;
    gap: 8px;
    background: rgba(0,0,0,.75);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .main-nav.open { display: flex; }

  .site-header { position: sticky; }
  .site-header .container { position: relative; }
  
  
  /* InspirePC Pricing Page */

.pricing-page {
    background:
        radial-gradient(circle at top right, rgba(82, 196, 255, 0.18), transparent 35%),
        linear-gradient(180deg, #f7fcff 0%, #ffffff 100%);
}

.container {
    width: min(1150px, 92%);
    margin: 0 auto;
}

.pricing-hero {
    padding: 80px 0 50px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr;
    gap: 35px;
    align-items: center;
}

.hero-pill {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: #e5f7ff;
    color: #0077aa;
    font-weight: 700;
    margin-bottom: 18px;
}

.pricing-hero h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    margin: 0 0 18px;
    color: #102030;
}

.pricing-hero p {
    font-size: 1.1rem;
    color: #4b5b66;
    max-width: 650px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 13px 22px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
}

.btn-primary {
    background: linear-gradient(135deg, #00aaff, #0077ff);
    color: #fff;
    box-shadow: 0 10px 25px rgba(0, 119, 255, 0.25);
}

.btn-secondary {
    background: #ffffff;
    color: #0077aa;
    border: 1px solid #ccefff;
}

.hero-card,
.price-card,
.intro-box,
.discount-box,
.cta-box {
    background: rgba(255,255,255,0.85);
    border: 1px solid #dff4ff;
    border-radius: 24px;
    box-shadow: 0 14px 40px rgba(0, 80, 120, 0.08);
}

.hero-card {
    padding: 30px;
    text-align: center;
}

.hero-card h2 {
    margin-top: 0;
    color: #0077aa;
}

.big-price {
    font-size: 3.4rem !important;
    font-weight: 900;
    color: #00aaff !important;
    margin: 10px 0;
}

.intro-box,
.discount-box,
.cta-box {
    padding: 28px;
    margin-bottom: 30px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 30px;
}

.price-card {
    padding: 24px;
}

.price-card h3 {
    margin-top: 0;
    color: #102030;
    border-bottom: 1px solid #e5f7ff;
    padding-bottom: 12px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid #f0f8fc;
}

.price-row span {
    color: #344955;
}

.price-row strong {
    color: #0077ff;
    white-space: nowrap;
}

.discount-box {
    background: linear-gradient(135deg, #e5f7ff, #ffffff);
}

.cta-box {
    text-align: center;
    margin-bottom: 60px;
}

.cta-box p {
    max-width: 700px;
    margin: 0 auto 24px;
}

@media (max-width: 800px) {
    .hero-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-hero {
        padding-top: 50px;
    }

    .price-row {
        align-items: flex-start;
    }
}

/* Upgrade Pricing Page Fix */

.pricing-page {
    padding: 60px 0;
    background: #f4f9ff;
}

.pricing-page .container {
    width: min(1150px, 92%);
    margin: 0 auto;
}

.pricing-hero {
    padding: 50px 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: 40px;
    align-items: center;
}

.hero-pill {
    display: inline-block;
    background: #e3f6ff;
    color: #0077aa;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 700;
    margin-bottom: 15px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 13px 22px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
}

.btn-primary {
    background: linear-gradient(135deg, #00aaff, #0077ff);
    color: #fff;
}

.btn-secondary {
    background: #fff;
    color: #0077aa;
    border: 1px solid #bdefff;
}

.hero-card,
.intro-box,
.price-card,
.discount-box,
.cta-box {
    background: rgba(255,255,255,0.9);
    border: 1px solid #d8efff;
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 12px 35px rgba(0, 80, 140, 0.08);
}

.big-price {
    font-size: 3rem;
    font-weight: 900;
    color: #00aaff;
    margin: 10px 0;
}

.intro-box,
.discount-box,
.cta-box {
    margin-bottom: 30px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.price-card h3 {
    margin-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e3f6ff;
}

.price-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #eef8ff;
}

.price-row strong {
    color: #0077ff;
    white-space: nowrap;
}

.cta-box {
    text-align: center;
}

@media (max-width: 800px) {
    .hero-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .hero-actions {
        flex-direction: column;
    }
}

/* FORCE FIX - Upgrade page */

main.pricing-page {
    display: block;
    padding: 60px 0;
    background: linear-gradient(180deg, #f4f9ff, #ffffff);
}

main.pricing-page .container {
    max-width: 1150px;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}

main.pricing-page .hero-grid {
    display: grid !important;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 40px;
    align-items: center;
}

main.pricing-page .pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 35px auto;
}

main.pricing-page .hero-card,
main.pricing-page .intro-box,
main.pricing-page .price-card,
main.pricing-page .discount-box,
main.pricing-page .cta-box {
    background: #ffffff;
    border: 1px solid #d9efff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 12px 35px rgba(0, 80, 140, 0.08);
}

main.pricing-page .hero-pill {
    display: inline-block;
    background: #e3f6ff;
    color: #0077aa;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 800;
    margin-bottom: 14px;
}

main.pricing-page .hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 25px;
}

main.pricing-page .btn-primary,
main.pricing-page .btn-secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border-radius: 14px;
    text-decoration: none !important;
    font-weight: 800;
}

main.pricing-page .btn-primary {
    background: linear-gradient(135deg, #00aaff, #0077ff);
    color: #ffffff !important;
}

main.pricing-page .btn-secondary {
    background: #ffffff;
    color: #0077aa !important;
    border: 1px solid #bdefff;
}

main.pricing-page .big-price {
    font-size: 3rem !important;
    font-weight: 900;
    color: #00aaff !important;
    margin: 10px 0;
}

main.pricing-page .price-card h3 {
    margin-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e3f6ff;
}

main.pricing-page .price-row {
    display: flex !important;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #eef8ff;
}

main.pricing-page .price-row strong {
    color: #0077ff;
    white-space: nowrap;
}

main.pricing-page .discount-box,
main.pricing-page .cta-box {
    margin: 30px auto;
}

main.pricing-page .cta-box {
    text-align: center;
}

@media (max-width: 800px) {
    main.pricing-page .hero-grid,
    main.pricing-page .pricing-grid {
        grid-template-columns: 1fr;
    }

    main.pricing-page .hero-actions {
        flex-direction: column;
    }
}


/* InspirePC Upgrade Pricing Page */

.upgrade-pricing-page {
    background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 100%);
    padding: 55px 0;
}

.upgrade-wrap {
    width: min(1150px, 92%);
    margin: 0 auto;
}

.upgrade-hero {
    padding: 30px 0 35px;
}

.upgrade-hero-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr;
    gap: 40px;
    align-items: center;
}

.upgrade-pill {
    display: inline-block;
    background: #e3f6ff;
    color: #0077aa;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 800;
    margin-bottom: 16px;
}

.upgrade-hero h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    margin: 0 0 16px;
}

.upgrade-hero p {
    max-width: 680px;
    color: #445566;
    font-size: 1.08rem;
    line-height: 1.7;
}

.upgrade-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.upgrade-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border-radius: 14px;
    text-decoration: none !important;
    font-weight: 800;
}

.upgrade-btn.primary {
    background: linear-gradient(135deg, #00aaff, #0077ff);
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(0, 119, 255, 0.22);
}

.upgrade-btn.secondary {
    background: #ffffff;
    color: #0077aa !important;
    border: 1px solid #bdefff;
}

.upgrade-best-card,
.upgrade-info-box,
.upgrade-card,
.upgrade-discount-box,
.upgrade-cta-box {
    background: rgba(255,255,255,0.95);
    border: 1px solid #d8efff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 14px 38px rgba(0, 80, 140, 0.08);
}

.upgrade-best-card h2,
.upgrade-card h3,
.upgrade-info-box h2,
.upgrade-discount-box h2,
.upgrade-cta-box h2 {
    margin-top: 0;
}

.upgrade-price-big {
    font-size: 3.2rem !important;
    font-weight: 900;
    color: #00aaff !important;
    margin: 8px 0;
}

.upgrade-info-box,
.upgrade-discount-box,
.upgrade-cta-box {
    margin-bottom: 30px;
}

.upgrade-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.upgrade-card h3 {
    padding-bottom: 12px;
    border-bottom: 1px solid #e3f6ff;
}

.upgrade-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid #eef8ff;
}

.upgrade-row strong {
    color: #0077ff;
    white-space: nowrap;
}

.upgrade-discount-box {
    background: linear-gradient(135deg, #e9f8ff, #ffffff);
}

.upgrade-cta-box {
    text-align: center;
}

.upgrade-cta-box p {
    max-width: 700px;
    margin: 0 auto 24px;
}

@media (max-width: 800px) {
    .upgrade-hero-grid,
    .upgrade-grid {
        grid-template-columns: 1fr;
    }

    .upgrade-actions {
        flex-direction: column;
    }
}

/* InspirePC Professional Upgrade Pricing Page */

.upgrade-pricing-page {
    background:
        radial-gradient(circle at top right, rgba(0, 170, 255, 0.16), transparent 35%),
        linear-gradient(180deg, #f4f9ff 0%, #ffffff 100%);
    padding: 70px 0;
}

.upgrade-wrap {
    max-width: 1150px;
    width: 92%;
    margin: 0 auto;
}

.upgrade-hero-grid {
    display: grid !important;
    grid-template-columns: 1.3fr 0.8fr;
    gap: 34px;
    align-items: center;
    margin-bottom: 34px;
}

.upgrade-pill {
    display: inline-block;
    background: #e3f6ff;
    color: #0077aa;
    border: 1px solid #bdefff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.upgrade-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.05;
    margin: 0 0 18px;
    color: #07182b;
}

.upgrade-hero p {
    max-width: 680px;
    font-size: 1.08rem;
    line-height: 1.7;
    color: #415466;
}

.upgrade-actions {
    display: flex !important;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.upgrade-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 14px;
    text-decoration: none !important;
    font-weight: 900;
    transition: 0.2s ease;
}

.upgrade-btn.primary {
    background: linear-gradient(135deg, #00aaff, #006eff);
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(0, 119, 255, 0.25);
}

.upgrade-btn.secondary {
    background: #ffffff;
    color: #0077aa !important;
    border: 1px solid #bdefff;
}

.upgrade-btn:hover {
    transform: translateY(-2px);
}

.upgrade-best-card,
.upgrade-info-box,
.upgrade-card,
.upgrade-discount-box,
.upgrade-cta-box {
    background: rgba(255,255,255,0.92);
    border: 1px solid #d8efff;
    border-radius: 26px;
    padding: 30px;
    box-shadow: 0 18px 45px rgba(0, 60, 120, 0.09);
}

.upgrade-best-card {
    position: relative;
    overflow: hidden;
}

.upgrade-best-card::before {
    content: "POPULAR";
    position: absolute;
    top: 20px;
    right: -36px;
    background: #00aaff;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 7px 42px;
    transform: rotate(35deg);
}

.upgrade-best-card h2 {
    color: #07182b;
    margin-top: 0;
}

.upgrade-price-big {
    font-size: 3.5rem !important;
    font-weight: 950;
    color: #0077ff !important;
    margin: 8px 0;
}

.upgrade-info-box {
    margin-bottom: 30px;
    border-left: 5px solid #00aaff;
}

.upgrade-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.upgrade-card h3 {
    margin-top: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid #e3f6ff;
    color: #07182b;
    font-size: 1.3rem;
}

.upgrade-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid #eef8ff;
    color: #35485c;
}

.upgrade-row:last-child {
    border-bottom: none;
}

.upgrade-row strong {
    background: #eaf7ff;
    color: #006eff;
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 900;
}

.upgrade-discount-box {
    margin-bottom: 30px;
    background: linear-gradient(135deg, #e8f8ff, #ffffff);
}

.upgrade-discount-box h2,
.upgrade-cta-box h2 {
    margin-top: 0;
    color: #07182b;
}

.upgrade-cta-box {
    text-align: center;
}

.upgrade-cta-box p {
    max-width: 720px;
    margin: 0 auto 25px;
    color: #415466;
}

@media (max-width: 850px) {
    .upgrade-hero-grid,
    .upgrade-grid {
        grid-template-columns: 1fr;
    }

    .upgrade-actions {
        flex-direction: column;
    }

    .upgrade-btn {
        width: 100%;
    }
}