/* =====================================================================
   cybertrickz.info — Homepage design system (Constructivist / Bauhaus)
   HOMEPAGE ONLY. Every rule is scoped under body.home .ct-home so it can
   never leak onto tool pages, articles, header, or footer, and so it wins
   the specificity war against the global Customizer .ct-* kit without
   !important. All colour comes from custom properties. Shadows are hard
   offset (0 blur). Radius is binary (0 or 9999px). No gradients.
   ===================================================================== */

/* ---- TOKENS (scoped to homepage, not global :root) ---- */
body.home .ct-home{
  --ct-navy:#01133f;
  --ct-navy-hover:#012456;
  --ct-cyan:#3e92cc;
  --ct-blue:#004fa3;
  --ct-amber:#f0b429;
  --ct-canvas:#f5f5f5;
  --ct-white:#ffffff;
  --ct-ink:#01133f;
  --ct-radius-sharp:0;
  --ct-radius-round:9999px;
  --ct-bd:2px;                 /* mobile border width */
  --ct-shadow-sm:4px 4px 0 0 var(--ct-ink);
  --ct-shadow-md:6px 6px 0 0 var(--ct-ink);
  --ct-shadow-lg:8px 8px 0 0 var(--ct-ink);
  --ct-shadow-sm-cyan:4px 4px 0 0 var(--ct-cyan);
  --ct-shadow-md-cyan:6px 6px 0 0 var(--ct-cyan);
  --ct-shadow-lg-cyan:8px 8px 0 0 var(--ct-cyan);
}

/* ---- BASE ---- */
body.home .ct-home{
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-weight:500;
  line-height:1.65;
  color:var(--ct-navy);
  -webkit-text-fill-color:var(--ct-navy);
  font-size:1.0625rem;
}
body.home .ct-home *{box-sizing:border-box;}
body.home .ct-home section{border-bottom:var(--ct-bd) solid var(--ct-ink);}
body.home .ct-home h1,
body.home .ct-home h2,
body.home .ct-home h3{
  font-family:'Syne',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:0.92;
  margin:0;
}
body.home .ct-home p{margin:0;}
body.home .ct-home .ct-inner{max-width:1200px;margin:0 auto;padding:56px 20px;}

/* ---- EYEBROW / LABEL (DM Mono) ---- */
body.home .ct-home .ct-eyebrow{
  font-family:'DM Mono',ui-monospace,monospace;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.75rem;
  margin:0 0 18px;
  display:inline-block;
}

/* ---- BUTTONS ---- */
body.home .ct-home .ct-btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:'DM Mono',ui-monospace,monospace;
  font-weight:500;text-transform:uppercase;letter-spacing:0.08em;
  font-size:.85rem;
  padding:16px 28px;
  border:var(--ct-bd) solid var(--ct-ink);
  border-radius:var(--ct-radius-sharp);
  box-shadow:var(--ct-shadow-sm);
  text-decoration:none;cursor:pointer;
  transition:all 200ms ease-out;
}
body.home .ct-home .ct-btn--primary{background:var(--ct-navy);color:var(--ct-white);-webkit-text-fill-color:var(--ct-white);}
body.home .ct-home .ct-btn--outline{background:var(--ct-white);color:var(--ct-navy);-webkit-text-fill-color:var(--ct-navy);}
body.home .ct-home .ct-btn:hover,
body.home .ct-home .ct-btn:focus-visible{box-shadow:var(--ct-shadow-lg);transform:translate(-2px,-2px);}
body.home .ct-home .ct-btn:active{transform:translate(2px,2px);box-shadow:none;}
/* button variants on navy backgrounds use cyan offset shadow */
body.home .ct-home .ct-on-navy .ct-btn{box-shadow:var(--ct-shadow-sm-cyan);}
body.home .ct-home .ct-on-navy .ct-btn:hover,
body.home .ct-home .ct-on-navy .ct-btn:focus-visible{box-shadow:var(--ct-shadow-lg-cyan);}
body.home .ct-home .ct-btn--cyan{background:var(--ct-cyan);color:var(--ct-navy);-webkit-text-fill-color:var(--ct-navy);border-color:var(--ct-ink);}

/* ---- FOCUS (visible on light AND navy) ---- */
body.home .ct-home a:focus-visible,
body.home .ct-home button:focus-visible{outline:3px solid var(--ct-ink);outline-offset:2px;}
body.home .ct-home .ct-on-navy a:focus-visible,
body.home .ct-home .ct-on-navy button:focus-visible{outline:3px solid var(--ct-cyan);outline-offset:2px;}

/* =========================================================
   1. HERO — asymmetric split (stacked mobile)
   ========================================================= */
body.home .ct-home .ct-hero{display:grid;grid-template-columns:1fr;}
body.home .ct-home .ct-hero__left{background:var(--ct-white);padding:56px 20px;display:flex;flex-direction:column;justify-content:center;}
body.home .ct-home .ct-hero__eyebrow{color:var(--ct-blue);-webkit-text-fill-color:var(--ct-blue);}
body.home .ct-home .ct-hero__title{font-size:clamp(2.75rem,7vw,6rem);color:var(--ct-navy);-webkit-text-fill-color:var(--ct-navy);}
body.home .ct-home .ct-hero__sub{margin:24px 0 32px;max-width:46ch;font-size:1.0625rem;color:var(--ct-navy);-webkit-text-fill-color:var(--ct-navy);}
body.home .ct-home .ct-hero__cta{display:flex;flex-wrap:wrap;gap:16px;}
body.home .ct-home .ct-hero__right{position:relative;background:var(--ct-navy);min-height:340px;overflow:hidden;}
/* geometric composition */
body.home .ct-home .ct-shape{position:absolute;}
body.home .ct-home .ct-shape--circle{width:190px;height:190px;border-radius:var(--ct-radius-round);background:var(--ct-cyan);border:4px solid var(--ct-ink);top:14%;left:16%;}
body.home .ct-home .ct-shape--square{width:150px;height:150px;background:var(--ct-amber);border:4px solid var(--ct-ink);transform:rotate(45deg);top:40%;left:44%;}
body.home .ct-home .ct-shape--tribox{width:150px;height:150px;background:var(--ct-white);border:4px solid var(--ct-ink);bottom:12%;right:12%;display:flex;align-items:center;justify-content:center;}
body.home .ct-home .ct-shape--tri{width:82px;height:82px;background:var(--ct-navy);clip-path:polygon(50% 0%,0% 100%,100% 100%);}

/* =========================================================
   2. TOOL CARD GRID (canvas)
   ========================================================= */
body.home .ct-home .ct-tools{background:var(--ct-canvas);}
body.home .ct-home .ct-tools__head{max-width:720px;margin:0 auto 44px;text-align:center;}
body.home .ct-home .ct-tools__eyebrow{color:var(--ct-blue);-webkit-text-fill-color:var(--ct-blue);}
body.home .ct-home .ct-tools__title{font-size:clamp(2rem,4vw,3.5rem);color:var(--ct-navy);-webkit-text-fill-color:var(--ct-navy);}
body.home .ct-home .ct-tools__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;}
body.home .ct-home .ct-card{
  position:relative;background:var(--ct-navy);
  border:var(--ct-bd) solid var(--ct-ink);border-radius:var(--ct-radius-sharp);
  box-shadow:var(--ct-shadow-md-cyan);
  padding:60px 40px;min-height:350px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  text-decoration:none;transition:all 200ms ease-out;
}
body.home .ct-home .ct-card:hover,
body.home .ct-home .ct-card:focus-visible{background:var(--ct-navy-hover);transform:translateY(-6px);box-shadow:var(--ct-shadow-lg-cyan);}
body.home .ct-home .ct-card__icon{
  width:80px;height:80px;border-radius:var(--ct-radius-round);
  background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:24px;
  color:var(--ct-white);-webkit-text-fill-color:var(--ct-white);
}
body.home .ct-home .ct-card__title{font-size:1.75rem;letter-spacing:1px;color:var(--ct-white);-webkit-text-fill-color:var(--ct-white);margin-bottom:14px;}
body.home .ct-home .ct-card__desc{font-size:1rem;line-height:1.6;color:rgba(255,255,255,0.85);-webkit-text-fill-color:rgba(255,255,255,0.85);flex:1;}
body.home .ct-home .ct-card__arrow{font-size:2rem;font-weight:900;line-height:1;margin-top:22px;color:var(--ct-white);-webkit-text-fill-color:var(--ct-white);transition:transform 200ms ease-out;}
body.home .ct-home .ct-card:hover .ct-card__arrow,
body.home .ct-home .ct-card:focus-visible .ct-card__arrow{transform:translateX(10px);}
/* corner mark, rotates shape across the grid via :nth-child */
body.home .ct-home .ct-card__corner{position:absolute;top:14px;right:14px;width:14px;height:14px;}
body.home .ct-home .ct-card:nth-child(3n+1) .ct-card__corner{background:var(--ct-cyan);border-radius:var(--ct-radius-round);}
body.home .ct-home .ct-card:nth-child(3n+2) .ct-card__corner{background:var(--ct-amber);}
body.home .ct-home .ct-card:nth-child(3n+3) .ct-card__corner{background:var(--ct-white);clip-path:polygon(50% 0%,0% 100%,100% 100%);}
/* popular badge */
body.home .ct-home .ct-badge{
  position:absolute;top:-13px;right:22px;
  font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;
  background:var(--ct-amber);color:var(--ct-navy);-webkit-text-fill-color:var(--ct-navy);
  border:2px solid var(--ct-ink);border-radius:var(--ct-radius-round);padding:6px 14px;
}

/* =========================================================
   3. STATS BAND (amber, navy text)
   ========================================================= */
body.home .ct-home .ct-stats{background:var(--ct-amber);}
body.home .ct-home .ct-stats__grid{display:grid;grid-template-columns:1fr;}
body.home .ct-home .ct-stat{text-align:center;padding:36px 20px;border-bottom:var(--ct-bd) solid var(--ct-ink);}
body.home .ct-home .ct-stat:last-child{border-bottom:0;}
body.home .ct-home .ct-stat__figure{
  width:120px;height:120px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  border:var(--ct-bd) solid var(--ct-ink);background:var(--ct-white);
}
body.home .ct-home .ct-stat:nth-child(4n+1) .ct-stat__figure{border-radius:var(--ct-radius-round);}
body.home .ct-home .ct-stat:nth-child(4n+3) .ct-stat__figure{transform:rotate(45deg);}
body.home .ct-home .ct-stat:nth-child(4n+3) .ct-stat__num{transform:rotate(-45deg);}
body.home .ct-home .ct-stat__num{font-family:'Syne',sans-serif;font-weight:800;font-size:2.6rem;line-height:1;color:var(--ct-navy);-webkit-text-fill-color:var(--ct-navy);}
body.home .ct-home .ct-stat__label{font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;margin-top:12px;color:var(--ct-navy);-webkit-text-fill-color:var(--ct-navy);}

/* =========================================================
   4. ARTICLE TEASER ROW (blue, white text)
   ========================================================= */
body.home .ct-home .ct-articles{background:var(--ct-blue);}
body.home .ct-home .ct-articles__head{margin:0 auto 40px;text-align:center;}
body.home .ct-home .ct-articles__eyebrow{color:var(--ct-white);-webkit-text-fill-color:var(--ct-white);}
body.home .ct-home .ct-articles__title{font-size:clamp(2rem,4vw,3.5rem);color:var(--ct-white);-webkit-text-fill-color:var(--ct-white);}
body.home .ct-home .ct-articles__row{display:grid;grid-template-columns:1fr;gap:30px;}
body.home .ct-home .ct-article{background:var(--ct-navy);border:var(--ct-bd) solid var(--ct-ink);box-shadow:var(--ct-shadow-md-cyan);text-decoration:none;display:flex;flex-direction:column;transition:all 200ms ease-out;}
body.home .ct-home .ct-article:hover,
body.home .ct-home .ct-article:focus-visible{transform:translateY(-6px);box-shadow:var(--ct-shadow-lg-cyan);}
body.home .ct-home .ct-article__thumb{aspect-ratio:16/9;border-bottom:var(--ct-bd) solid var(--ct-ink);overflow:hidden;filter:grayscale(100%);transition:filter 200ms ease-out;display:flex;align-items:center;justify-content:center;}
body.home .ct-home .ct-article:hover .ct-article__thumb,
body.home .ct-home .ct-article:focus-visible .ct-article__thumb{filter:grayscale(0);}
body.home .ct-home .ct-article__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
body.home .ct-home .ct-article:nth-child(even) .ct-article__thumb{border-radius:var(--ct-radius-round);}
/* geometric fallback when a post has no featured image */
body.home .ct-home .ct-article__thumb--ph{background:var(--ct-cyan);position:relative;}
body.home .ct-home .ct-article__thumb--ph::after{content:"";width:64px;height:64px;background:var(--ct-navy);clip-path:polygon(50% 0%,0% 100%,100% 100%);}
body.home .ct-home .ct-article:nth-child(even) .ct-article__thumb--ph::after{clip-path:none;border-radius:var(--ct-radius-round);}
body.home .ct-home .ct-article__body{padding:28px 26px;}
body.home .ct-home .ct-article__meta{font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--ct-cyan);-webkit-text-fill-color:var(--ct-cyan);margin-bottom:12px;}
body.home .ct-home .ct-article__title{font-size:1.35rem;line-height:1.05;color:var(--ct-white);-webkit-text-fill-color:var(--ct-white);text-transform:none;letter-spacing:-0.01em;}
body.home .ct-home .ct-article__excerpt{margin-top:14px;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,0.85);-webkit-text-fill-color:rgba(255,255,255,0.85);}

/* =========================================================
   5. FINAL CTA BAND (navy)
   ========================================================= */
body.home .ct-home .ct-cta{position:relative;background:var(--ct-navy);overflow:hidden;}
body.home .ct-home .ct-cta__inner{position:relative;z-index:1;text-align:center;}
body.home .ct-home .ct-cta__eyebrow{color:var(--ct-cyan);-webkit-text-fill-color:var(--ct-cyan);}
body.home .ct-home .ct-cta__title{font-size:clamp(2rem,5vw,4rem);color:var(--ct-white);-webkit-text-fill-color:var(--ct-white);max-width:16ch;margin:0 auto 30px;}
body.home .ct-home .ct-cta__cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}
body.home .ct-home .ct-cta__shape{position:absolute;opacity:.15;pointer-events:none;}
body.home .ct-home .ct-cta__shape--circle{width:320px;height:320px;border-radius:var(--ct-radius-round);background:var(--ct-cyan);top:50%;left:-120px;transform:translateY(-50%);}
body.home .ct-home .ct-cta__shape--square{width:300px;height:300px;background:var(--ct-amber);top:50%;right:-110px;transform:translateY(-50%) rotate(45deg);}

/* =========================================================
   RESPONSIVE — mobile-first, up at 640 / 1024
   ========================================================= */
@media (min-width:640px){
  body.home .ct-home .ct-stats__grid{grid-template-columns:1fr 1fr;}
  body.home .ct-home .ct-stat{border-right:var(--ct-bd) solid var(--ct-ink);}
  body.home .ct-home .ct-stat:nth-child(2n){border-right:0;}
  body.home .ct-home .ct-stat:nth-last-child(-n+2){border-bottom:0;}
  body.home .ct-home .ct-articles__row{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1024px){
  body.home .ct-home{--ct-bd:4px;
    --ct-shadow-sm:4px 4px 0 0 var(--ct-ink);
    --ct-shadow-md:6px 6px 0 0 var(--ct-ink);
    --ct-shadow-lg:8px 8px 0 0 var(--ct-ink);
    --ct-shadow-sm-cyan:4px 4px 0 0 var(--ct-cyan);
    --ct-shadow-md-cyan:6px 6px 0 0 var(--ct-cyan);
    --ct-shadow-lg-cyan:8px 8px 0 0 var(--ct-cyan);
  }
  body.home .ct-home .ct-inner{padding:80px 40px;}
  body.home .ct-home .ct-hero{grid-template-columns:55fr 45fr;}
  body.home .ct-home .ct-hero__left{padding:96px 64px;}
  body.home .ct-home .ct-hero__right{min-height:520px;}
  body.home .ct-home .ct-stats__grid{grid-template-columns:repeat(4,1fr);}
  body.home .ct-home .ct-stat{border-bottom:0;border-right:var(--ct-bd) solid var(--ct-ink);}
  body.home .ct-home .ct-stat:last-child{border-right:0;}
  body.home .ct-home .ct-stat:nth-child(2n){border-right:var(--ct-bd) solid var(--ct-ink);}
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion:reduce){
  body.home .ct-home *,
  body.home .ct-home *::before,
  body.home .ct-home *::after{transition:none !important;}
  body.home .ct-home .ct-btn:hover,body.home .ct-home .ct-btn:focus-visible,
  body.home .ct-home .ct-btn:active,
  body.home .ct-home .ct-card:hover,body.home .ct-home .ct-card:focus-visible,
  body.home .ct-home .ct-article:hover,body.home .ct-home .ct-article:focus-visible,
  body.home .ct-home .ct-card:hover .ct-card__arrow{transform:none;}
}
/* card focus */
body.home .ct-home .ct-card:focus-visible,
body.home .ct-home .ct-article:focus-visible{outline:3px solid var(--ct-cyan);outline-offset:3px;}