/* ============================================================================
   STAD - index.html ONLY detail layer  (DARK theme kept)
   Adds the reference's design details on top of styles.css:
   • streaky "ray" lines behind the dark hero card
   • vertical light-stripe + dotted texture behind the testimonial band
   • soft-square accent blobs + a big quote mark
   Loaded AFTER styles.css. Other pages untouched.
   ============================================================================ */

/* ---- HERO: fine vertical streak lines across the dark card (reference look) ---- */
.hero-card{isolation:isolate;}
.hero-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.055) 0 1px,
    transparent 1px 9px);
  -webkit-mask-image:radial-gradient(120% 130% at 50% 100%,#000 15%,transparent 78%);
          mask-image:radial-gradient(120% 130% at 50% 100%,#000 15%,transparent 78%);
}
.hero-card > *{position:relative;z-index:1;}

/* ---- FEATURE bands keep dark but gain faint vertical guide lines ---- */
.band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.035) 0 1px,transparent 1px 46px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);}
.band{position:relative;overflow:hidden;}
.band .wrap{position:relative;z-index:1;}

/* ============================================================================
   TESTIMONIAL - rebuilt as a dark band with vertical stripes + dots + quote
   ============================================================================ */
.tst{position:relative;overflow:hidden;
  background:linear-gradient(155deg,#0b1830,#070c16 70%);
  border-block:1px solid var(--line-2);}
.tst::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background:repeating-linear-gradient(90deg,
    rgba(62,166,255,.06) 0 2px,transparent 2px 40px);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 80%);
          mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 80%);}
/* dotted matrix (top-right, like the reference) */
.tst::after{content:"";position:absolute;inset-block-start:36px;inset-inline-end:6%;
  width:180px;height:120px;pointer-events:none;opacity:.5;
  background:radial-gradient(rgba(62,166,255,.5) 1.6px,transparent 1.7px) 0 0/16px 16px;
  -webkit-mask-image:linear-gradient(120deg,#000,transparent);
          mask-image:linear-gradient(120deg,#000,transparent);}
.tst .wrap{position:relative;z-index:1;}
/* oversized quote mark */
.tst .qmark{position:absolute;inset-block-start:8px;inset-inline-start:4%;z-index:0;
  font-family:var(--font-num);font-weight:var(--fw-bold);font-size:220px;line-height:.7;
  color:rgba(62,166,255,.12);user-select:none;pointer-events:none;}
.tst .tst-card{background:rgba(14,21,36,.72);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);}