/* ---- Core theme (TIGARSEC) ---- */
:root{
  --bg:#0c1b2a;        /* deep navy */
  --bg-2:#102538;
  --card:#11293f;
  --line:rgba(255,255,255,.09);
  --text:#e9f1fa;
  --muted:#9fb3c8;
  --accent:#1aa3ff;    /* cyber blue */
  --ok:#31d39b;
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.55 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  color:var(--text); background:radial-gradient(1200px 700px at 10% -10%, #123152 0%, transparent 60%) , var(--bg);
}
.container{max-width:1140px;margin:0 auto;padding:0 20px}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:10;background:rgba(12,27,42,.8);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:900;letter-spacing:.1em}
.brand em{font-style:normal;color:var(--muted);font-weight:700}
.brand__logo{height:34px;width:auto;display:block}     /* adjust to your preferred height */
.shield{width:34px;height:34px;border-radius:10px;background:linear-gradient(160deg,var(--card),#0e2135);box-shadow:var(--shadow);display:inline-block;position:relative}
.shield::after{content:"";position:absolute;inset:9px;border-radius:6px;border:2px solid var(--accent);opacity:.9}
.menu a{color:var(--text);text-decoration:none;margin-left:16px;padding:10px;border-radius:10px}
.menu a:hover{background:rgba(26,163,255,.1)}
.btn{display:inline-block;background:transparent;border:1.5px solid var(--accent);color:var(--accent);padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:800}
.btn--primary{background:var(--accent);color:#001423;border-color:var(--accent)}
.btn--ghost:hover{background:rgba(26,163,255,.12)}
.btn--block{display:block;width:100%}

/* ---- Hero ---- */
.hero{padding:72px 0;background:
  radial-gradient(1000px 600px at 85% -10%, #0f2237 0%, transparent 60%),
  linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%)}
.hero__grid{display:grid;gap:28px;grid-template-columns:1.1fr .9fr;align-items:center}
h1{font-size:clamp(28px,5vw,46px);line-height:1.1;margin:0 0 12px}
.lead{color:var(--muted);max-width:52ch}
.cta-row{margin:18px 0 6px;display:flex;gap:12px;flex-wrap:wrap}
.bullets{color:var(--muted);padding-left:18px}
.accent{color:var(--accent)}
.card{background:linear-gradient(180deg,var(--card),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.hero__card h3{margin:4px 0 8px}

/* 1) Stop margin-collapse on every major block */
.section, .card, .footer { 
  display: flow-root;             /* creates its own layout context */
  position: relative;             /* also prevents rare collapsing combos */
}

/* 2) Clamp leading/trailing margins inside sections */
.section .container > :first-child { margin-top: 0 !important; }
.section .container > :last-child  { margin-bottom: 0 !important; }

/* ---- Sections ---- */
.section{padding:70px 0;border-top:1px solid var(--line)}
.section--alt{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01))}
.section__intro{color:var(--muted);max-width:60ch}
h2{font-size:clamp(24px,4vw,34px);margin:0 0 8px}

details{background:#0b1d2d;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:10px 0}
summary{cursor:pointer;font-weight:700;outline:none}
details[open]{box-shadow:0 0 0 3px rgba(26,163,255,.14)}

/* ---- Grids & cards ---- */
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cards .card h3{margin:6px 0 8px}

/* ---- SOC ---- */
.soc{display:grid;gap:24px;grid-template-columns:1.2fr .8fr;align-items:start}
.checklist,.dash{list-style:none;margin:0;padding:0}
.checklist li{padding-left:24px;margin:8px 0;position:relative}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:900}
.dash li{padding-left:16px;margin:8px 0;position:relative;color:var(--text)}
.dash li::before{content:"—";position:absolute;left:0;color:var(--muted)}

/* ---- Pricing ---- */
/* .pricing{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch} */

/* Pricing grid: 1 col (mobile), 2 cols (tablet), 3 cols (desktop) */
.pricing{display:grid;gap:18px;grid-template-columns:1fr;align-items:stretch}     /* phones */
@media (min-width:700px){.pricing{ grid-template-columns:repeat(2, minmax(0, 1fr)); }}      /* tablets */
@media (min-width:1100px){.pricing{ grid-template-columns:repeat(3, minmax(0, 1fr)); }}     /* desktop => 3/2 layout */
.price{font-weight:900;font-size:28px;margin:6px 0}
.price span{font-size:.9rem;color:var(--muted)}
.card--pop{outline:2px solid var(--accent);position:relative}
.ribbon{position:absolute;top:14px;right:-40px;transform:rotate(35deg);background:var(--accent);color:#001423;font-weight:800;padding:5px 60px;border-radius:8px}

/* Extra pricing visuals */
.card .badge{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.04em;padding:6px 10px;border-radius:999px;background:var(--accent);color:#001423;margin-bottom:10px;}
.badge--outline{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.card--alt{background:linear-gradient(180deg, #0f2440, var(--bg-2));border:1px dashed var(--line)}

/* ---- About ---- */
.about{display:grid;gap:24px;grid-template-columns:1.2fr .8fr}

/* Testimonial carousel */
.t-carousel{position:relative}
.t-item{display:none; text-align:center; margin:0; animation: t-fade .15s ease;}
.t-item.is-active{display:block}
.t-avatar{width:72px; height:72px; border-radius:50%; object-fit:cover;display:block; margin:0 auto 10px; border:2px solid var(--line);box-shadow:0 4px 16px rgba(0,0,0,.25);}

/* If you want NO placeholder until you have real images, keep avatar commented out (as in HTML). */
.t-item blockquote{margin:0 0 6px; color:var(--text)}
.t-meta{opacity:.85}

.t-dots{display:flex; gap:8px; margin-top:12px; justify-content:center}
.t-dot{width:8px; height:8px; border-radius:50%; border:0; cursor:pointer;background:rgba(255,255,255,.25)}
.t-dot.is-active{background:var(--accent)}

@keyframes t-fade{
  from{opacity:0; transform:translateY(4px)}
  to{opacity:1; transform:translateY(0)}
}

/* ---- Contact ---- */
.contact{display:grid;gap:24px;grid-template-columns:1fr 1fr}
.form label{display:block;margin-bottom:10px;color:var(--muted)}
.form input,.form textarea{
  width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);
  background:#0b1d2d;color:var(--text);outline:none
}
.form input:focus,.form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,163,255,.15)}
.contact__list{list-style:none;padding:0;margin:0;color:var(--muted)}
.mini{color:var(--muted);font-size:.92rem}

/* ---- Footer ---- */
/* .footer{border-top:1px solid var(--line);padding:28px 0;background:rgba(0,0,0,.25)}
.footer__row{display:flex;justify-content:space-between;align-items:center;gap:12px} */

/* 3) Footer: make it a proper block with its own spacing */
.footer{
  background: #0b1d2d;            /* solid, not translucent */
  border-top: 1px solid var(--line);
  padding: 0;                     /* we’ll use min-height instead */
}

.footer__row{
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 96px;               /* guarantees breathing room */
  padding: 0 20px;                /* side padding */
}
.footer p{ margin: 0 !important; } /* kill default <p> margins */


/* ---- Responsive ---- */
@media (max-width: 980px){
  .hero__grid,.soc,.about,.contact{grid-template-columns:1fr}
}