/* =========================================================
   Learning Rewired Studio — /studio/ product showcase
   Premium "luxury digital workshop" layer
   Foundations: deep navy / soft black · warm off-white surfaces
   Accents: cyan (restraint) · GOLD for premium / unlock moments
   ========================================================= */

:root{
  --st-ink:#07111f;
  --st-navy:#0a1830;
  --st-blue:#2563eb;
  --st-blue-d:#1d4fd7;
  --st-cyan:#16b8d9;
  --st-teal:#0789a2;
  --st-gold:#e0a93f;
  --st-gold-l:#f4d58a;
  --st-gold-d:#9a6a04;
  --st-paper:#f7f4ee;       /* warm off-white work surface */
  --st-line:#e6ebf1;
}

html{scroll-behavior:smooth;}
::selection{background:rgba(37,99,235,.2);}

/* ---------- keyframes ---------- */
@keyframes st-pulse{0%,100%{opacity:.4;}50%{opacity:1;}}
@keyframes st-sheen{from{background-position:0% 50%;}to{background-position:200% 50%;}}
@keyframes st-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes st-scan{0%{transform:translateY(-110%);}100%{transform:translateY(1100%);}}
@keyframes st-shimmer{0%{background-position:-180% 0;}100%{background-position:180% 0;}}

.st-float{animation:st-float 8s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  .st-float,[class*="st-"]{animation:none !important;}
}

/* ---------- scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
[data-reveal].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){[data-reveal]{opacity:1 !important;transform:none !important;}}

/* ---------- hover states ---------- */
.h-blue{transition:background .2s,box-shadow .2s,transform .2s;}
.h-blue:hover{background:var(--st-blue-d) !important;transform:translateY(-1px);}
.h-gold{transition:background .2s,box-shadow .2s,transform .2s;}
.h-gold:hover{background:#caa043 !important;transform:translateY(-1px);}
.h-ghost{transition:border-color .2s,color .2s,background .2s;}
.h-ghost:hover{border-color:#9fb4cc !important;}
.h-ghost-d{transition:border-color .2s,color .2s,background .2s;}
.h-ghost-d:hover{border-color:rgba(244,213,138,.6) !important;color:#fff !important;}
.h-link{transition:color .2s,gap .2s;}
.h-link:hover{color:var(--st-blue-d) !important;}

.st-tool{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s;}
.st-tool:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(7,17,31,.42) !important;border-color:rgba(244,213,138,.4) !important;}
.st-tool:hover .st-tool-go{gap:11px !important;color:var(--st-gold-l) !important;}

.st-suite-card{transition:transform .25s,box-shadow .25s,border-color .25s;}
.st-suite-card:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(7,17,31,.12) !important;}

/* premium plan lift */
.st-plan{transition:transform .25s,box-shadow .25s,border-color .25s;}
.st-plan:hover{transform:translateY(-4px);box-shadow:0 30px 64px rgba(7,17,31,.16) !important;}

/* ---------- critique scan lens ---------- */
.st-scanwrap{position:relative;overflow:hidden;}
.st-scanline{position:absolute;left:0;right:0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(96,165,250,.18) 50%,transparent);
  animation:st-scan 3.4s cubic-bezier(.55,0,.45,1) infinite;}

/* ---------- gold shimmer text ---------- */
.st-shimmer{
  background:linear-gradient(100deg,var(--st-gold),#fff6e0 42%,var(--st-gold) 72%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:st-sheen 6s linear infinite;}

/* ---------- builder flow connector ---------- */
.st-flow-dot{transition:background .3s,box-shadow .3s,color .3s;}

/* ---------- FAQ ---------- */
.st-faq[open] .st-faq-sign{transform:rotate(45deg);}
.st-faq-sign{transition:transform .2s;}
.st-faq summary::-webkit-details-marker{display:none;}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  [data-r="hero"]{grid-template-columns:1fr !important;gap:42px !important;}
  [data-r="h1"]{font-size:46px !important;}
  [data-r="promise"]{grid-template-columns:1fr !important;}
  [data-r="tools"]{grid-template-columns:1fr 1fr !important;}
  [data-r="suite"]{grid-template-columns:1fr !important;}
  [data-r="plans"]{grid-template-columns:1fr !important;max-width:480px;margin-left:auto;margin-right:auto;}
  [data-r="flow"]{grid-template-columns:1fr !important;}
  [data-r="critique"]{grid-template-columns:1fr !important;}
  [data-r="faq"]{grid-template-columns:1fr !important;gap:24px !important;}
}
@media (max-width:620px){
  [data-r="h1"]{font-size:37px !important;}
  [data-r="tools"]{grid-template-columns:1fr !important;}
  [data-r="sec-h"]{font-size:30px !important;}
  [data-r="xform"]{grid-template-columns:1fr !important;}
}