/* ---------- TOOLS PAGE ---------- */
.real-panel-shot{
  position:absolute;
  inset:12px;
  width:calc(100% - 24px);
  height:calc(100% - 24px);
  object-fit:contain;
  object-position:top center;
  filter:saturate(.94) contrast(1.02) brightness(.93);
  transform:none;
  border:1px solid rgba(222,201,164,.12);
  border-radius:12px;
  background:#050d0b;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
}
.tool-visual:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(3,10,8,.015),rgba(3,10,8,.07));
  box-shadow:inset 0 0 34px rgba(0,0,0,.20);
}

body.tools-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 79% 10%,rgba(84,105,79,.12),transparent 31%),
    linear-gradient(180deg,#06110e 0%,#081510 40%,#06100d 100%);
}
nav a.active-nav{
  color:#f1dfbb;
  background:linear-gradient(180deg,rgba(183,121,55,.18),rgba(183,121,55,.09));
  border-color:rgba(183,137,75,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 5px 16px rgba(0,0,0,.12);
}
.tools-hero{
  position:relative;
  overflow:hidden;
  background:#06110e;
  border-bottom:1px solid var(--soft);
}
.tools-hero:before{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:58%;
  height:100%;
  background:url("../media/reference-70a9d414534cd289.jpg") 52% 56%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
  filter:brightness(.84) saturate(.86) contrast(1.03);
  opacity:.82;
  pointer-events:none;
}
.tools-hero:after{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:66%;
  background:linear-gradient(90deg,#06110e 0%,rgba(6,17,14,.68) 24%,rgba(6,17,14,.24) 58%,rgba(6,17,14,.08) 100%);
  pointer-events:none;
}
.tools-hero-inner{
  position:relative;
  z-index:1;
  width:var(--shell);
  min-height:320px;
  margin:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px 0 58px;
}
.tools-hero h1{
  font:400 clamp(3.4rem,5.5vw,6.2rem)/.94 Georgia,"Times New Roman",serif;
  color:var(--cream);
  margin:10px 0 18px;
}
.tools-hero p{
  max-width:50ch;
  color:var(--muted);
  line-height:1.7;
  margin:0;
}
.tools-layout{
  width:var(--shell);
  margin:auto;
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:34px;
  padding:46px 0 84px;
}
.tools-sidebar{
  position:sticky;
  top:142px;
  align-self:start;
}
.side-box{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(15,31,24,.86),rgba(9,20,16,.92));
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.14);
}
.side-title{
  padding:19px 20px 14px;
  border-bottom:1px solid var(--soft);
}
.side-title strong{
  display:block;
  color:var(--cream2);
  font:400 1.15rem Georgia,"Times New Roman",serif;
}
.side-nav{
  display:flex;
  flex-direction:column;
  padding:8px;
}
.side-nav button{
  text-align:left;
  color:#9e927b;
  background:transparent;
  border:0;
  border-radius:10px;
  padding:11px 12px;
  cursor:pointer;
}
.side-nav button:hover,
.side-nav button.active{
  color:#e0cba5;
  background:rgba(183,121,55,.08);
}
.side-note{
  margin-top:14px;
  border:1px solid var(--soft);
  border-radius:14px;
  padding:18px;
  color:#8c816c;
  font-size:.83rem;
  line-height:1.55;
}
.search-row{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:30px;
}
.tool-search{
  flex:1;
  min-height:46px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#07130f;
  color:var(--text);
  padding:0 16px;
  outline:none;
}
.tool-search:focus{
  border-color:rgba(191,137,74,.58);
  box-shadow:0 0 0 3px rgba(183,121,55,.06);
}
.view-chip{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  padding:0 15px;
  border:1px solid var(--line);
  border-radius:12px;
  color:#a8997f;
  font-size:.84rem;
  background:rgba(255,255,255,.012);
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin:0 0 20px;
}
.section-head h2{
  font:400 clamp(2rem,3vw,3.2rem)/1 Georgia,"Times New Roman",serif;
  margin:6px 0 0;
  color:var(--cream);
}
.section-head p{
  max-width:42ch;
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:.9rem;
}
.available-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:18px;
}
.tool-card{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(145deg,#0d1d17,#081510);
  box-shadow:0 22px 60px rgba(0,0,0,.20);
}
.tool-visual{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  min-height:0;
  border-bottom:1px solid var(--soft);
  background:
    radial-gradient(circle at 70% 30%,rgba(91,116,89,.13),transparent 38%),
    #06110e;
}
.tool-copy{
  padding:26px;
}
.tool-copy h3{
  font:400 clamp(1.8rem,2.6vw,2.7rem)/1 Georgia,"Times New Roman",serif;
  margin:8px 0 12px;
}
.tool-copy p{
  color:var(--muted);
  line-height:1.58;
  max-width:46ch;
}
.tool-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:20px;
}
.status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.72rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#b99661;
}
.status:before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:#b77937;
  box-shadow:0 0 12px rgba(183,121,55,.55);
}
.card-action{
  text-decoration:none;
  color:#d9c39d;
  font-size:.86rem;
}
.card-action:hover{color:#fff0cf}
.swatch-stage{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  padding:30px;
}
.palette-panel{
  border:1px solid rgba(226,205,169,.12);
  border-radius:15px;
  background:rgba(4,13,10,.62);
  padding:18px;
}
.palette-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin-top:14px;
}
.swatch{
  aspect-ratio:1/1.2;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.06);
}
.gradient-panel{
  border:1px solid rgba(226,205,169,.12);
  border-radius:15px;
  background:rgba(4,13,10,.52);
  padding:18px;
}
.gradient-strip{
  height:34px;
  border-radius:9px;
  margin:10px 0;
  border:1px solid rgba(255,255,255,.05);
}
.multi-stage{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:28px;
}
.monitor{
  width:88%;
  height:76%;
  border:1px solid rgba(226,205,169,.16);
  border-radius:16px;
  background:#07120f;
  padding:14px;
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.monitor-main{
  border-radius:10px;
  background:linear-gradient(145deg,#223126,#0f2119);
  border:1px solid rgba(255,255,255,.04);
}
.monitor-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:10px;
}
.monitor-side div{
  border-radius:10px;
  background:linear-gradient(145deg,#161f1a,#223027);
  border:1px solid rgba(255,255,255,.04);
}
.v2-badge{
  position:absolute;
  right:28px;
  top:24px;
  z-index:3;
  border:1px solid rgba(183,121,55,.38);
  background:rgba(8,20,16,.85);
  color:#d6bd91;
  border-radius:999px;
  padding:8px 12px;
  font-size:.7rem;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.final-section{
  margin-top:50px;
}
.final-card{
  display:grid;
  grid-template-columns:42% 58%;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(145deg,#0d1d17,#081510);
}
.slideshow-stage{
  min-height:300px;
  position:relative;
  overflow:hidden;
  border-right:1px solid var(--soft);
  background:
    radial-gradient(circle at 35% 35%,rgba(107,125,91,.15),transparent 32%),
    #091612;
}
.frames{
  position:absolute;
  inset:28px;
}
.photo-frame{
  position:absolute;
  width:46%;
  height:58%;
  border-radius:10px;
  border:1px solid rgba(224,202,164,.15);
  background:linear-gradient(145deg,#273228,#111c17);
  box-shadow:0 15px 30px rgba(0,0,0,.24);
}
.f1{left:5%;top:14%;transform:rotate(-4deg)}
.f2{left:29%;top:7%;transform:rotate(3deg)}
.f3{left:51%;top:22%;transform:rotate(-2deg)}
.final-copy{
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.final-copy h3{
  font:400 2.4rem/1 Georgia,"Times New Roman",serif;
  margin:8px 0 14px;
}
.final-copy p{
  color:var(--muted);
  line-height:1.6;
  max-width:52ch;
}
.progress-wrap{
  margin-top:20px;
  max-width:460px;
}
.progress-label{
  display:flex;
  justify-content:space-between;
  color:#a29175;
  font-size:.78rem;
  margin-bottom:8px;
}
.progress{
  height:7px;
  border-radius:999px;
  background:#07110e;
  border:1px solid rgba(225,202,164,.08);
  overflow:hidden;
}
.progress span{
  display:block;
  width:92%;
  height:100%;
  background:linear-gradient(90deg,#76512f,#b77937);
}
.workshop-section{
  margin-top:50px;
}
.workshop-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.work-card{
  min-height:190px;
  border:1px solid var(--soft);
  border-radius:15px;
  padding:22px;
  background:rgba(12,27,21,.62);
  display:flex;
  flex-direction:column;
}
.work-card h3{
  font:400 1.45rem/1.05 Georgia,"Times New Roman",serif;
  margin:10px 0 10px;
}
.work-card p{
  color:#8e836e;
  font-size:.86rem;
  line-height:1.5;
}
.work-card .status{
  margin-top:auto;
  padding-top:16px;
}
.tools-footer-note{
  margin-top:26px;
  border:1px dashed rgba(183,121,55,.22);
  border-radius:14px;
  padding:20px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  color:#91856f;
  line-height:1.5;
}
.tools-footer-note strong{
  color:#c8b18a;
  font-weight:400;
}
@media(max-width:1100px){
  .tools-layout{grid-template-columns:1fr}
  .tools-sidebar{position:static}
  .side-box{display:none}
  .side-note{display:none}
  .available-grid{grid-template-columns:1fr}
  .final-card{grid-template-columns:1fr}
  .slideshow-stage{border-right:0;border-bottom:1px solid var(--soft)}
}
@media(max-width:760px){
  .tools-hero:before{width:100%;opacity:.34;filter:brightness(.72) saturate(.78);background-position:35% 54%;-webkit-mask-image:none;mask-image:none}
  .tools-hero:after{width:100%;background:linear-gradient(90deg,rgba(6,17,14,.96) 0%,rgba(6,17,14,.78) 55%,rgba(6,17,14,.42) 100%)}
  .tools-hero-inner{min-height:250px;padding:48px 0 40px}
  .tools-hero h1{font-size:3.7rem}
  .tools-layout{padding-top:28px;gap:20px}
  .search-row{flex-direction:column;align-items:stretch}
  .view-chip{justify-content:center}
  .section-head{display:block}
  .section-head p{margin-top:12px}
  .swatch-stage{grid-template-columns:1fr;padding:18px}
  .gradient-panel{display:none}
  .monitor{width:95%}
  .workshop-grid{grid-template-columns:1fr}
  .tools-footer-note{display:block}
  .tools-footer-note .btn{margin-top:14px}
}


/* v3.8.0 TOOLS REFINEMENT */
.tools-hero-inner{min-height:350px;padding:72px 0 64px}
.tools-hero h1{max-width:10ch}
.tools-hero p{font-size:.98rem;max-width:54ch}

.tools-status-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:24px;
}
.tools-status-row span{
  padding:8px 11px;
  border:1px solid rgba(183,137,75,.20);
  border-radius:999px;
  background:rgba(183,121,55,.035);
  color:#9f9178;
  font-size:.74rem;
}
.tools-status-row strong{color:#c9b184;font-weight:400}

.available-grid{grid-template-columns:1fr 1fr;gap:20px}
.tool-visual{min-height:300px}
.tool-copy{padding:30px}
.tool-copy p{font-size:.94rem;line-height:1.62}

.final-card{grid-template-columns:44% 56%}
.final-copy{padding:40px}
.final-copy h3{font-size:2.65rem}
.progress-label span:last-child{color:#c5ad81}

.dev-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:16px;
}
.dev-feature{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(145deg,#0d1d17,#081510);
  box-shadow:0 20px 55px rgba(0,0,0,.18);
}
.dev-feature-visual{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  min-height:0;
  border-bottom:1px solid var(--soft);
  background:#06110e;
}
.dev-feature-visual img{
  position:absolute;
  inset:12px;
  width:calc(100% - 24px);
  height:calc(100% - 24px);
  object-fit:contain;
  object-position:top center;
  filter:saturate(.95) contrast(1.02) brightness(.93);
  border:1px solid rgba(222,201,164,.12);
  border-radius:12px;
  background:#050d0b;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
}
.dev-feature-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(3,10,8,.01),rgba(3,10,8,.06));
  box-shadow:inset 0 0 32px rgba(0,0,0,.18);
}
.dev-feature-copy{padding:30px}
.dev-feature-copy h3{
  font:400 clamp(2rem,2.8vw,3rem)/1 Georgia,"Times New Roman",serif;
  margin:8px 0 12px;
}
.dev-feature-copy p{color:#9b9079;line-height:1.6;max-width:56ch}
.dev-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:20px 0;
}
.dev-fact{
  border:1px solid rgba(222,201,164,.09);
  border-radius:11px;
  padding:13px 14px;
  background:rgba(255,255,255,.015);
}
.dev-fact small{
  display:block;
  color:#8d816c;
  font-size:.67rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:5px;
}
.dev-fact strong{
  color:#d3bd94;
  font:400 1.15rem Georgia,"Times New Roman",serif;
}
.dev-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:16px;
}
.work-card{min-height:0;padding:27px}
.work-card h3{font-size:1.75rem}
.work-card p{font-size:.9rem;line-height:1.58}
.update-card{background:linear-gradient(145deg,rgba(20,38,30,.76),rgba(10,22,17,.72))}
.dev-mini-preview{
  height:74px;
  margin:4px 0 18px;
  border:1px solid rgba(222,201,164,.08);
  border-radius:11px;
  position:relative;
  overflow:hidden;
  background:#07130f;
}
.dev-mini-preview:before,
.dev-mini-preview:after{
  content:"";
  position:absolute;
  left:12px;right:12px;
  height:13px;
  border-radius:5px;
  background:linear-gradient(90deg,#192a22,#31463a,#182921);
}
.dev-mini-preview:before{top:13px;transform:translateX(-8px)}
.dev-mini-preview:after{bottom:13px;transform:translateX(9px)}

.tools-footer-note{
  margin-top:30px;
  padding:24px 26px;
  background:rgba(183,121,55,.025);
}

@media(max-width:1100px){
  .dev-grid{grid-template-columns:1fr}
  .dev-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}
}
@media(max-width:760px){
  .dev-side{grid-template-columns:1fr}
  .dev-facts{grid-template-columns:1fr}
}


/* v3.8.2 LOWER TOOLS REFINEMENT */

/* Stock Slideshow Builder — cinematic preview, not a fake panel */
.slideshow-stage{
  min-height:360px;
  background:
    radial-gradient(circle at 50% 42%,rgba(183,121,55,.08),transparent 38%),
    #07120f;
}
.slideshow-cinema{
  position:absolute;
  inset:22px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:13px;
}
.slideshow-main,
.slideshow-side{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(222,201,164,.13);
  border-radius:13px;
  background:#050d0b;
  box-shadow:0 18px 38px rgba(0,0,0,.26);
}
.slideshow-main img,
.slide-mini img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.76) saturate(.82);
}
.slideshow-main:after,
.slide-mini:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(3,9,7,.52));
}
.slideshow-main .preview-label{
  position:absolute;
  left:14px;
  bottom:12px;
  z-index:2;
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#c9b184;
}
.slideshow-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:10px;
  padding:10px;
  border-color:rgba(222,201,164,.08);
  background:#081510;
}
.slide-mini{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(222,201,164,.10);
  border-radius:9px;
}
.slide-mini:first-child{transform:translateX(-2px)}
.slide-mini:last-child{transform:translateX(3px)}
.final-card{grid-template-columns:46% 54%}
.final-copy{padding:42px}
.final-copy h3{font-size:2.75rem}
.progress{height:6px}
.progress span{width:90%}

/* Transition Studio — visual effect sample instead of an empty card */
.transition-preview{
  height:132px;
  margin:4px 0 19px;
  border:1px solid rgba(222,201,164,.09);
  border-radius:12px;
  overflow:hidden;
  position:relative;
  background:#07120f;
}
.transition-preview .tr-a,
.transition-preview .tr-b{
  position:absolute;
  top:0;
  bottom:0;
  width:60%;
  overflow:hidden;
}
.transition-preview .tr-a{left:0;clip-path:polygon(0 0,83% 0,67% 100%,0 100%)}
.transition-preview .tr-b{right:0;clip-path:polygon(33% 0,100% 0,100% 100%,17% 100%)}
.transition-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.67) saturate(.75);
}
.transition-preview .cut-line{
  position:absolute;
  top:-12%;
  bottom:-12%;
  left:50%;
  width:2px;
  background:linear-gradient(180deg,transparent,#b77937 24%,#e0aa68 50%,#b77937 76%,transparent);
  transform:rotate(10deg);
  box-shadow:0 0 18px rgba(183,121,55,.42);
}
.transition-preview .tr-label{
  position:absolute;
  left:12px;
  bottom:9px;
  z-index:3;
  color:#c8b18a;
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* Multiscreen Builder 2.0 — planned update info */
.update-card{padding:29px}
.update-card h3{font-size:1.9rem;margin-bottom:12px}
.update-points{
  display:grid;
  gap:8px;
  margin:18px 0 22px;
}
.update-point{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:10px 11px;
  border:1px solid rgba(222,201,164,.085);
  border-radius:9px;
  background:rgba(255,255,255,.013);
  color:#9c9079;
  font-size:.8rem;
  line-height:1.42;
}
.update-point:before{
  content:"";
  width:5px;height:5px;
  flex:0 0 5px;
  border-radius:50%;
  background:#a9753e;
  margin-top:5px;
}

/* Workshop CTA — important, but still calm */
.tools-footer-note{
  margin-top:30px;
  border:1px solid rgba(183,137,75,.30);
  border-radius:16px;
  padding:27px 29px;
  background:
    radial-gradient(circle at 88% 40%,rgba(183,121,55,.09),transparent 28%),
    linear-gradient(145deg,rgba(15,31,24,.82),rgba(8,20,16,.72));
  box-shadow:0 16px 42px rgba(0,0,0,.14);
}
.tools-footer-note strong{
  display:block;
  color:#d4bd94;
  font:400 1.55rem Georgia,"Times New Roman",serif;
  margin-bottom:5px;
}
.tools-footer-note .btn{
  min-height:44px;
  padding:0 20px;
  background:rgba(183,121,55,.22);
  border-color:rgba(183,137,75,.38);
  white-space:nowrap;
}

@media(max-width:1100px){
  .slideshow-cinema{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .slideshow-stage{min-height:320px}
  .slideshow-cinema{inset:14px;grid-template-columns:1fr}
  .slideshow-side{display:none}
}