/* =========================================================
   Consciousness Creates Reality LLC — Corporate Warm (Option 2)
   Clean, consistent, no hardcoded dark rgba.
   Replace the entire stylesheet with this file.
   ========================================================= */

:root{
  /* Core surfaces */
  --bg:#f4f3ef;              /* stone background */
  --panel:#ffffff;           /* cards */
  --panel2:#faf9f7;          /* secondary cards */
  --border:#dedbd2;

  /* Text */
  --text:#1f2933;            /* main */
  --muted:#6b7280;           /* secondary */
  --muted2:#8a909d;          /* tertiary */

  /* Accent (warm/stone) */
  --accent:#8b857a;
  --accentSoft:#efece5;

  /* Shadows / radius */
  --shadow:0 10px 26px rgba(0,0,0,0.10);
  --shadow2:0 18px 44px rgba(0,0,0,0.08);
  --radius:18px;
  --max:1120px;

  /* Header */
  --headerBg:rgba(244,243,239,0.82);

  /* Pills / badges */
  --badgeBg:var(--accentSoft);
  --badgeText:rgba(31,41,51,0.75);
  --badgeIcon:rgba(31,41,51,0.65);

  /* Buttons */
  --btnBg:#ffffff;
  --btnHover:#f2f1ed;
  --btnText:var(--text);

  /* Primary CTA (subtle, no blue) */
  --ctaBg:var(--accentSoft);
  --ctaBorder:#cfcabf;
  --ctaHover:rgba(31,41,51,0.08);

  /* Icon bubbles */
  --iconBg:rgba(31,41,51,0.06);
  --iconBorder:rgba(31,41,51,0.18);
  --iconColor:rgba(31,41,51,0.70);

  /* Notice */
  --noticeBg:#f6f5f1;
  --noticeBorder:#c9c3b6;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

.container{max-width:var(--max);margin:0 auto;padding:0 22px}

/* Skip link */
.skip{position:absolute;left:-999px;width:1px;height:1px;overflow:hidden}
.skip:focus{
  left:20px;top:20px;width:auto;height:auto;padding:10px 12px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  z-index:10000
}

/* Header */
header{
  position:sticky;top:0;z-index:1000;
  background:var(--headerBg);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0
}

.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-0.02em}
.logo{
  width:40px;height:40px;border-radius:14px;
  background:var(--badgeBg);
  border:1px solid var(--border);
  display:grid;place-items:center;
}
.logo svg{width:22px;height:22px;color:var(--badgeIcon)}

.small{color:var(--muted);font-size:13px;font-weight:600}

.links{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(31,41,51,0.75);
  font-weight:800;
  font-size:14px
}
.links a{padding:8px 10px;border-radius:12px}
.links a:hover{
  background:rgba(31,41,51,0.06);
  text-decoration:none
}

.cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:16px;
  border:1px solid var(--ctaBorder);
  background:var(--ctaBg);
  font-weight:900;font-size:14px;white-space:nowrap;
}
.cta:hover{background:var(--ctaHover);text-decoration:none}
.cta svg{width:18px;height:18px;color:var(--iconColor)}

/* Sections */
section{padding:52px 0}
.hero{padding-top:54px}

/* Layout */
.grid-hero{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px;
  align-items:start
}
@media(max-width:920px){.grid-hero{grid-template-columns:1fr}}

.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--border);
  color:var(--badgeText);
  background:var(--badgeBg);
  font-weight:900;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;
}
.badge svg{width:16px;height:16px;color:var(--badgeIcon)}

h1{
  margin:14px 0 10px;
  font-size:46px;
  line-height:1.08;
  letter-spacing:-0.04em;
  color:var(--text);
}
@media(max-width:520px){h1{font-size:36px}}

.lead{
  color:var(--muted);
  font-size:18px;
  margin:22px 0 22px;
  max-width:75ch
}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:16px;
  border:1px solid var(--border);
  background:var(--btnBg);
  color:var(--btnText);
  font-weight:900;font-size:14px;
}
.btn:hover{background:var(--btnHover);text-decoration:none}
.btn.primary{
  border-color:var(--ctaBorder);
  background:var(--ctaBg);
}
.btn.primary:hover{background:var(--ctaHover)}
.btn svg{width:18px;height:18px;color:var(--iconColor)}

/* Cards */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-illus{overflow:hidden}
.hero-illus img{width:100%;height:250px;object-fit:cover}
.block{padding:20px}

.hero-list{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--muted);
}
.hero-list li{margin:8px 0}

h2{
  font-size:28px;
  letter-spacing:-0.02em;
  margin:0 0 12px;
  color:var(--text);
}
.section-lead{
  color:var(--muted);
  margin:0 0 28px;
  max-width:85ch
}

/* Grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.grid-3{grid-template-columns:1fr}}

.kicker{
  color:var(--muted2);
  font-weight:900;font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase
}
h3{
  margin:8px 0 4px;
  font-size:18px;
  letter-spacing:-0.02em;
  color:var(--text);
}

.price{
  margin-top:4px;
  font-size:13px;
  color:var(--muted2);
  font-weight:900
}

p{margin:10px 0;color:var(--muted)}

.subhead{
  margin:14px 0 6px;
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted2)
}

.list{margin:8px 0 0;padding-left:18px;color:var(--muted)}
.list li{margin:8px 0}

/* Icon bubble */
.icon{
  width:44px;height:44px;border-radius:16px;
  border:1px solid var(--iconBorder);
  background:var(--iconBg);
  display:grid;place-items:center;
}
.icon svg{width:20px;height:20px;color:var(--iconColor)}

/* Split blocks */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:920px){.split{grid-template-columns:1fr}}

/* FAQ grid */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:920px){.faq{grid-template-columns:1fr}}
.qa h3{margin:0 0 8px;font-size:16px}
.qa p{margin:0;color:var(--muted)}

/* Notice */
.notice{
  border-left:4px solid var(--noticeBorder);
  background:var(--noticeBg);
  box-shadow:var(--shadow2);
}
.notice strong{color:var(--text)}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  background:var(--bg);
  padding:28px 0;
}
.footer .row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer .links2{
  display:flex;flex-direction:column;gap:10px;
  color:rgba(31,41,51,0.75);
  font-weight:800;font-size:14px
}
.footer .links2 a:hover{
  color:var(--text);
  text-decoration:none
}

/* micro animations */
[data-animate]{
  opacity:0;transform:translateY(10px);
  transition:opacity 650ms ease, transform 650ms ease;
  will-change:opacity, transform
}
[data-animate].is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  [data-animate]{opacity:1;transform:none;transition:none}
}

/* Services layout v4 */
.services-grid{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.services-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
@media(max-width:980px){
  .services-row{ grid-template-columns:1fr; }
}
.service-primary{ background: var(--panel); }
.service-secondary{ background: var(--panel2); }