/* ============================================================
   THIRD EYE — OBSIDIAN
   Cinematic gallery redesign · midnight-blue deep accent
   Loaded AFTER styles.css to retheme the existing structure.
   ============================================================ */

:root{
  /* cooler, deeper cinematic black */
  --bg:#040506;
  --bg-2:#080a0d;
  --bg-3:#0b0e12;
  /* midnight-blue deep accent family */
  --mid:#2a4673;
  --mid-bright:#4d7ec2;
  --mid-soft:#22365c;
  --mid-deep:#101d33;
  --mid-ink:#0a1424;
  /* recolour the jewel vars so every accented element reads gold + midnight */
  --em:#4d7ec2;   /* steel blue */
  --sa:#f5d37a;   /* bright gold */
  --am:#6f9bd8;   /* light midnight */
  --ro:#e8b84b;   /* mid gold */
  --te:#3f6bb0;   /* deep azure */
}

body.ob{
  background:
    radial-gradient(130% 90% at 50% -15%, #0a1626 0%, transparent 48%),
    radial-gradient(80% 60% at 90% 10%, rgba(77,126,194,.08) 0%, transparent 55%),
    var(--bg);
}
body.ob ::selection{background:rgba(77,126,194,.32);color:#eaf2ff}

/* divider: gold core with a faint midnight halo */
body.ob .divider{
  background:linear-gradient(90deg,transparent,var(--mid) 12%,#c9922a 38%,#f5d37a 50%,#c9922a 62%,var(--mid) 88%,transparent);
  opacity:.5;
}

/* ============================================================
   NAVBAR — letterboxed cinematic bar
   ============================================================ */
body.ob nav.scrolled{
  background:rgba(4,5,6,.92);
  border-bottom:1px solid rgba(201,146,42,.16);
  box-shadow:0 1px 0 rgba(77,126,194,.12);
}
body.ob .nav-brand .bt small{color:var(--mid-bright)}
body.ob .nav-brand .bt b{white-space:nowrap}
body.ob .nav-brand .bt small{white-space:nowrap}

/* ============================================================
   HERO — cinematic spotlight, centered
   ============================================================ */
body.ob .hero{min-height:100vh;padding:7rem 0 3rem;overflow:hidden;display:flex;align-items:center}
body.ob .hero::before{ /* top + bottom letterbox vignette */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,5,6,.9) 0%,transparent 14%,transparent 82%,rgba(4,5,6,.96) 100%),
    radial-gradient(120% 75% at 50% 42%, transparent 40%, rgba(4,5,6,.55) 100%);
}
body.ob .hero-grid{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1.5rem;max-width:1000px;margin:0 auto;
}
body.ob .hero-visual{order:-1;min-height:300px;width:100%}
body.ob .hero-copy{display:flex;flex-direction:column;align-items:center}

/* recolour drifting orbs to a midnight + gold mix */
body.ob .orb-1{background:radial-gradient(circle,rgba(77,126,194,.4),transparent 70%)}
body.ob .orb-2{background:radial-gradient(circle,rgba(245,211,122,.34),transparent 70%)}
body.ob .orb-3{background:radial-gradient(circle,rgba(42,70,115,.5),transparent 70%)}
body.ob .beam{background:linear-gradient(180deg,transparent,rgba(77,126,194,.3),transparent)}

/* eyebrow centered with twin rules */
body.ob .eyebrow{justify-content:center;color:var(--gold)}

/* title block */
body.ob .hero h1{display:flex;flex-direction:column;align-items:center}
body.ob .hero .l1{font-size:clamp(2.5rem,6vw,5rem);letter-spacing:.07em}
body.ob .hero .l2{font-size:clamp(3rem,7vw,6rem);margin-top:-.12em}
body.ob .hero .l3{color:var(--mid-bright);opacity:.9;margin-top:.4rem}
body.ob .hero-tag{font-size:1.4rem;color:rgba(201,146,42,.66);margin:1rem 0 .8rem}
body.ob .hero-value{margin:0 auto;text-align:center;font-size:1rem;max-width:42ch}
body.ob .hero-ctas{justify-content:center;margin-top:.4rem}

/* ----- the cinematic logo stage ----- */
body.ob .hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
/* deep spotlight pool behind the emblem */
body.ob .hero-visual::before{
  content:"";position:absolute;width:560px;height:560px;border-radius:50%;
  background:
    radial-gradient(circle, rgba(77,126,194,.24) 0%, transparent 42%),
    radial-gradient(circle, rgba(201,146,42,.22) 0%, transparent 32%);
  filter:blur(8px);
  animation:obSpot 7s ease-in-out infinite alternate;
}
@keyframes obSpot{from{opacity:.6;transform:scale(.94)}to{opacity:1;transform:scale(1.06)}}

/* rotating conic "eye-scan" sweep, masked to a ring */
body.ob .hero-tilt::before{
  content:"";position:absolute;left:50%;top:50%;width:300px;height:300px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(245,211,122,.5) 26deg, rgba(77,126,194,.4) 40deg, transparent 70deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle, transparent 49%, #000 50%, #000 52%, transparent 53%);
  mask:radial-gradient(circle, transparent 49%, #000 50%, #000 52%, transparent 53%);
  animation:obScan 6s linear infinite;
}
@keyframes obScan{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* dilating iris ring (pulse) */
body.ob .hero-tilt::after{
  content:"";position:absolute;left:50%;top:50%;width:220px;height:220px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  border:1px solid rgba(245,211,122,.28);
  animation:obIris 4.5s ease-in-out infinite;
}
@keyframes obIris{0%,100%{width:210px;height:210px;opacity:.5}50%{width:280px;height:280px;opacity:.12}}

body.ob .hero-logo{
  width:min(190px,52%);
  animation:obBreathe 5s ease-in-out infinite alternate;
}
body.ob .hero-orbit{max-width:400px !important}
@keyframes obBreathe{
  from{filter:drop-shadow(0 0 16px rgba(77,126,194,.35)) drop-shadow(0 0 8px rgba(201,146,42,.3))}
  to{filter:drop-shadow(0 0 48px rgba(245,211,122,.6)) drop-shadow(0 0 26px rgba(77,126,194,.5))}
}

/* scroll cue centered */
body.ob .scroll-line{left:50%;transform:translateX(-50%)}

/* ============================================================
   SECTION SPOTLIGHTS (cheap radial tints)
   ============================================================ */
body.ob #why,body.ob #process,body.ob #roi,body.ob #contact{
  background-image:radial-gradient(80% 60% at 50% 0%, rgba(77,126,194,.07), transparent 60%);
}
body.ob .canada{
  background-image:radial-gradient(70% 80% at 50% 40%, rgba(77,126,194,.08), transparent 65%);
}

/* ============================================================
   SERVICES — cinematic plate
   ============================================================ */
body.ob .svc-item.open{background:linear-gradient(180deg,rgba(16,29,51,.5),transparent)}
body.ob .svc-row::before{background:linear-gradient(90deg,rgba(77,126,194,.14),transparent 60%)}
body.ob .svc-deliver li::before{color:var(--mid-bright)}

/* ============================================================
   INDUSTRIES — gallery cards with midnight wash
   ============================================================ */
body.ob .ind-card{background:radial-gradient(circle at 30% 0%, rgba(16,29,51,.55), var(--bg))}
body.ob .ind-card:hover{background:radial-gradient(circle at 30% 0%, rgba(22,40,72,.8), var(--bg-2))}
body.ob .ind-card::after{background:linear-gradient(90deg,var(--mid-bright),var(--gold-bright))}
body.ob .ind-link{color:var(--mid-bright)}
body.ob .ind-card:hover .ind-link{color:var(--gold-bright)}

/* ============================================================
   WHY cards / quote
   ============================================================ */
body.ob .quote-block{
  background:linear-gradient(135deg,rgba(77,126,194,.12),rgba(201,146,42,.04));
  border-color:rgba(77,126,194,.22);
}
body.ob .why-card:hover{background:var(--mid-deep)}

/* ============================================================
   COMPARISON — "us" column glows midnight
   ============================================================ */
body.ob .cmp-head .cmp-us{background:rgba(77,126,194,.12);color:var(--gold-bright)}
body.ob .cmp-us{background:rgba(77,126,194,.06)}
body.ob .cmp .yes{color:var(--mid-bright)}
body.ob .cmp .no{color:#9c5a52}

/* ============================================================
   CASE STUDIES — cinematic frame
   ============================================================ */
body.ob .cs{background:linear-gradient(135deg,rgba(16,29,51,.5),var(--bg-2))}
body.ob .cs::before{background:linear-gradient(180deg,var(--mid-bright),var(--gold-bright))}
body.ob .cs-result{background:linear-gradient(135deg,rgba(77,126,194,.16),rgba(201,146,42,.05))}
body.ob .cs-result strong{color:var(--gold-bright)}

/* ============================================================
   PROCESS eye — add a midnight aura
   ============================================================ */
body.ob .proc-eye{filter:drop-shadow(0 0 26px rgba(77,126,194,.25))}
body.ob .proc-step:hover .proc-num{background:rgba(77,126,194,.2);color:var(--mid-bright);border-color:var(--mid-bright)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
body.ob .tst:hover{background:var(--mid-deep)}
body.ob .tst .ln{background:linear-gradient(90deg,var(--mid-bright),transparent)}
body.ob .tst .who{color:var(--gold-bright)}

/* ============================================================
   CANADA chips
   ============================================================ */
body.ob .chip:hover{background:rgba(77,126,194,.16);border-color:var(--mid-bright);color:#eaf2ff}

/* ============================================================
   ROI — midnight console
   ============================================================ */
body.ob .roi-panel{
  background:linear-gradient(160deg,var(--mid-deep),var(--bg-2));
  border-color:rgba(77,126,194,.3);
  box-shadow:0 0 50px rgba(16,29,51,.6) inset;
}
body.ob .roi-field input[type=range]{background:rgba(77,126,194,.3)}
body.ob .roi-goals button.active{background:rgba(77,126,194,.2);border-color:var(--mid-bright);color:var(--gold-bright)}
body.ob .roi-roas strong{color:var(--mid-bright)}

/* ============================================================
   FORM
   ============================================================ */
body.ob form input:focus,body.ob form select:focus,body.ob form textarea:focus{
  border-color:var(--mid-bright);box-shadow:0 0 0 3px rgba(77,126,194,.12);
}
body.ob .cdetail:hover::before{background:var(--mid-bright)}

/* ============================================================
   FOOTER
   ============================================================ */
body.ob footer{background:linear-gradient(180deg,var(--bg),var(--mid-deep))}
body.ob .soc:hover{border-color:var(--mid-bright);color:var(--mid-bright);box-shadow:0 6px 18px rgba(77,126,194,.25)}

/* ============================================================
   MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  body.ob .hero-visual::before,
  body.ob .hero-tilt::before,
  body.ob .hero-tilt::after,
  body.ob .hero-logo{animation:none}
}
@media (max-width:980px){
  body.ob .hero-visual::before{width:480px;height:480px}
  body.ob .hero-tilt::before{width:320px;height:320px}
}

/* ============================================================
   HERO STARFIELD (twinkling motes)
   ============================================================ */
.ob-stars{position:absolute;inset:0;pointer-events:none;z-index:1}
.ob-stars i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#cfe0ff;opacity:0;
  box-shadow:0 0 4px rgba(173,208,255,.7);
  animation:obTwinkle linear infinite;
}
@keyframes obTwinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.85;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .ob-stars{display:none} }