/* ============================================================
   PERILLO TECHNOLOGIES — styles.css
   All site styling. No inline styles in the HTML.
   Brand: dark background, salmon #b86860 / teal #5898a0,
   rounded cards, system font stack (no external fonts).
   ============================================================ */

:root{
  --salmon:#b86860;
  --salmon-700:#a75a53;
  --salmon-100:#fdeeed;

  --teal:#5898a0;
  --teal-700:#437b82;
  --teal-100:#e7f4f6;

  --ink:#0f172a;
  --muted:#5b6475;
  --bg:#0b0f14;
  --surface:#0f1620;
  --card:#121c28;
  --border:rgba(255,255,255,.10);
  --shadow:0 18px 45px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:rgba(255,255,255,.92);
  background:radial-gradient(1200px 700px at 20% -10%, rgba(88,152,160,.22) 0%, transparent 60%),
             radial-gradient(900px 600px at 85% -20%, rgba(184,104,96,.18) 0%, transparent 60%),
             var(--bg);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{width:min(1120px, 92vw);margin-inline:auto}

/* ---- Header ---- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,15,20,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{display:flex;gap:12px;align-items:center}
.brand .logo-img{
  width:38px;height:38px;border-radius:12px;display:block;
  background:#0b0f14;padding:6px;border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.brand .wordmark{display:flex;flex-direction:column;line-height:1.1}
.brand .wordmark strong{letter-spacing:.4px}
.brand .wordmark span{font-size:.8rem;color:rgba(255,255,255,.68)}

.nav-links{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}
.nav-links a{
  padding:8px 10px;border-radius:12px;
  color:rgba(255,255,255,.86)
}
.nav-links a:hover{background:rgba(255,255,255,.06)}
.nav-links a.active{background:rgba(255,255,255,.06)}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:14px;
  font-weight:700;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow);
  white-space:nowrap;
  cursor:pointer;
}
.btn-primary{
  background:linear-gradient(135deg, var(--salmon), var(--salmon-700));
  border-color:rgba(184,104,96,.55);
  color:rgba(255,255,255,.96);
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost:hover{background:rgba(255,255,255,.07)}

.mobile-toggle{
  display:none;background:none;border:0;font-size:22px;
  color:rgba(255,255,255,.9);cursor:pointer;padding:6px 8px;border-radius:10px;
}
.mobile-toggle:hover{background:rgba(255,255,255,.06)}

/* ---- Focus styles (accessibility) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}

/* ---- Hero ---- */
.hero{padding:78px 0 48px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.80);
  letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;
}
.dot{width:8px;height:8px;border-radius:99px;background:var(--teal);box-shadow:0 0 0 4px rgba(88,152,160,.18)}
h1{
  font-size:clamp(2.0rem, 2.7vw + 1.1rem, 3.2rem);
  line-height:1.12;margin:14px 0 12px;
}
.lead{color:rgba(255,255,255,.74);font-size:1.1rem;margin:0 0 22px;max-width:60ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:18px;color:rgba(255,255,255,.68);font-size:.95rem}

.hero-panel{
  background:linear-gradient(180deg, rgba(18,28,40,.92), rgba(18,28,40,.72));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero-panel:before{
  content:"";
  position:absolute;inset:-2px;
  background:radial-gradient(420px 220px at 20% 10%, rgba(184,104,96,.22) 0%, transparent 60%),
             radial-gradient(420px 220px at 80% 20%, rgba(88,152,160,.22) 0%, transparent 60%);
  pointer-events:none;
}
.hero-panel > *{position:relative}
.hero-panel h3{margin:0 0 6px}
.hero-panel .panel-sub{margin:0;color:rgba(255,255,255,.72)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.kpi{
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:12px;
}
.kpi strong{display:block;font-size:1.05rem}
.kpi span{color:rgba(255,255,255,.68);font-size:.9rem}

/* ---- Sections ---- */
section{padding:66px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.section-title{font-size:1.9rem;margin:0}
.section-sub{color:rgba(255,255,255,.70);margin:8px 0 0;max-width:70ch}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

.card{
  background:linear-gradient(180deg, rgba(18,28,40,.92), rgba(18,28,40,.70));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.card h3{margin:8px 0 6px;font-size:1.08rem}
.card p{margin:0;color:rgba(255,255,255,.70)}
.icon{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(88,152,160,.35), rgba(184,104,96,.35));
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.95);
  font-size:1.3rem;
}

/* ---- Process ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:16px;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(184,104,96,.16);
  border:1px solid rgba(184,104,96,.38);
  color:rgba(255,255,255,.88);
  padding:6px 10px;border-radius:999px;font-size:.85rem;font-weight:700;
  margin-bottom:10px;
}
.pill i{display:inline-block;width:10px;height:10px;border-radius:99px;background:var(--salmon)}
.pill-teal{background:rgba(88,152,160,.16);border-color:rgba(88,152,160,.38)}
.pill-teal i{background:var(--teal)}
.pill-neutral{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.pill-neutral i{background:rgba(255,255,255,.6)}
.pill-row{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.step p{margin:0;color:rgba(255,255,255,.70)}

/* ---- Trust strip ---- */
.trust-strip{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  padding:8px 0;
}
.trust-strip .pill{margin-bottom:0}

/* ---- CTA strip ---- */
.cta-strip{
  border-radius:var(--radius);
  padding:26px;
  background:linear-gradient(135deg, rgba(184,104,96,.32), rgba(88,152,160,.28));
  border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  box-shadow:var(--shadow);
}
.cta-strip h3{margin:0 0 6px}
.cta-strip p{margin:6px 0 0;color:rgba(255,255,255,.82)}

/* ---- Contact page ---- */
.contact-hero{padding:64px 0 8px}
.contact-hero h1{margin:12px 0 10px}
.contact-hero p{color:rgba(255,255,255,.74);font-size:1.08rem;margin:0;max-width:60ch}

.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:start}

label{color:rgba(255,255,255,.78);font-weight:650}
.required{color:var(--salmon)}
input, textarea{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.92);
  margin:6px 0 14px;
  outline:none;
  font-family:inherit;
  font-size:1rem;
}
input:focus, textarea:focus{
  border-color:rgba(88,152,160,.65);
  box-shadow:0 0 0 4px rgba(88,152,160,.18);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column}

/* Honeypot — visually hidden but reachable to bots */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px;height:1px;
  opacity:0;
  overflow:hidden;
}

.cf-turnstile{margin:0 0 14px}

.form-message{
  margin-top:12px;padding:12px 14px;border-radius:14px;
  font-size:.95rem;
}
.form-message--success{
  background:rgba(88,152,160,.16);
  border:1px solid rgba(88,152,160,.5);
  color:#d8f0f2;
}
.form-message--error{
  background:rgba(184,104,96,.16);
  border:1px solid rgba(184,104,96,.5);
  color:#f7ddda;
}
.form-message[hidden]{display:none}

.sidebar-card{margin-bottom:16px}
.sidebar-card h3{margin-top:0}
.sidebar-item{margin:0 0 12px}
.sidebar-item .tiny{margin-bottom:2px}
.sidebar-item .value{font-weight:800}
.sidebar-item .value a:hover{color:var(--teal)}

/* ---- Footer ---- */
footer{padding:40px 0 64px;color:rgba(255,255,255,.58)}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}
.footgrid h4{margin:0 0 10px;color:rgba(255,255,255,.85)}
.footgrid ul{list-style:none;margin:0;padding:0}
.footgrid li{margin:8px 0}
.footgrid a:hover{color:rgba(255,255,255,.9)}
.footer-desc{margin-top:12px}
.footer-bottom{margin-top:18px}
.tiny{font-size:.88rem;color:rgba(255,255,255,.58)}

/* ---- Responsive ---- */
@media (max-width: 980px){
  .hero-grid,.grid,.grid-2,.steps,.contact-grid,.footgrid,.form-row{grid-template-columns:1fr}
  .nav-links{
    display:none;
    position:absolute;top:62px;right:4%;
    background:rgba(15,22,32,.97);
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    padding:10px;
    box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex;flex-direction:column;gap:8px;min-width:220px;align-items:stretch}
  .mobile-toggle{display:inline-block}
  .cta-strip{flex-direction:column;align-items:flex-start}
}