:root{
    --void:#0D0F12;
    --panel:#16191E;
    --panel-2:#1B1F26;
    --ink:#EDEAE2;
    --ink-dim:#8B909A;
    --ember:#C9823D;
    --ember-dim:#7A5330;
    --signal:#3E8FA6;
    --signal-dim:#26505C;
    --line:#262A31;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--void);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
  }

  h1,h2,h3,.display{
    font-family:'Newsreader', serif;
    font-weight:500;
    letter-spacing:-0.01em;
  }

  a{color:inherit; text-decoration:none;}

  img{max-width:100%; display:block;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  @media (max-width:640px){
    .wrap{padding:0 20px;}
  }

  /* ---------- Focus visibility ---------- */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--ember);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  /* ---------- Nav ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(13,15,18,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }

  nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 32px;
    max-width:1180px;
    margin:0 auto;
    position:relative;
  }

  .brand{
    display:flex;
    flex-direction:column;
    line-height:1.1;
  }

  .brand-name{
    font-family:'Newsreader', serif;
    font-size:1.25rem;
    font-weight:600;
  }

  .brand-sub{
    font-size:0.68rem;
    color:var(--ink-dim);
    letter-spacing:0.02em;
  }

  .nav-links{
    display:flex;
    gap:28px;
    font-size:0.92rem;
  }

  .nav-links a{
    color:var(--ink-dim);
    transition:color 0.2s ease;
    padding:6px 0;
    border-bottom:1px solid transparent;
  }

  .nav-links a:hover,
  .nav-links a.active{
    color:var(--ink);
    border-bottom-color:var(--ember);
  }

  .nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--line);
    color:var(--ink);
    font-size:1rem;
    padding:8px 12px;
    cursor:pointer;
  }

  @media (max-width:800px){
    .nav-links{
      display:none;
      position:absolute;
      top:100%;
      left:0;
      right:0;
      flex-direction:column;
      gap:0;
      background:var(--void);
      border-bottom:1px solid var(--line);
      padding:8px 32px 16px;
    }
    .nav-links.open{display:flex;}
    .nav-links a{padding:12px 0; border-bottom:1px solid var(--line);}
    .nav-toggle{display:block;}
    header{position:sticky;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:88vh;
    display:flex;
    align-items:center;
    background:
      radial-gradient(ellipse 70% 55% at 22% 30%, rgba(201,130,61,0.14), transparent 60%),
      radial-gradient(ellipse 60% 60% at 85% 80%, rgba(62,143,166,0.10), transparent 65%),
      var(--void);
    overflow:hidden;
  }

  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, transparent 1px, transparent 2px);
    pointer-events:none;
  }

  .hero-inner{
    position:relative;
    z-index:2;
    padding:120px 0 100px;
  }

  .hero-eyebrow{
    color:var(--ember);
    font-size:0.85rem;
    margin-bottom:22px;
  }

  .hero h1{
    font-size:clamp(2.6rem, 6vw, 4.6rem);
    max-width:14ch;
    line-height:1.05;
  }

  .hero h1 em{
    font-style:italic;
    color:var(--ember);
  }

  .hero-sub{
    margin-top:26px;
    max-width:48ch;
    font-size:1.15rem;
    color:var(--ink-dim);
  }

  .hero-paths{
    margin-top:44px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
  }

  .path-chip{
    border:1px solid var(--line);
    padding:14px 22px;
    border-radius:2px;
    font-size:0.95rem;
    transition:border-color 0.25s ease, background 0.25s ease;
    background:rgba(255,255,255,0.02);
  }

  .path-chip:hover{
    border-color:var(--ember-dim);
    background:rgba(201,130,61,0.06);
  }

  .path-chip.cool:hover{
    border-color:var(--signal-dim);
    background:rgba(62,143,166,0.08);
  }

  /* ---------- CirclesLab strip ---------- */
  .lab-strip{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:22px 0;
    font-size:0.92rem;
    color:var(--ink-dim);
  }

  .lab-strip strong{color:var(--ink); font-weight:500;}

  /* ---------- Section shell ---------- */
  section{
    padding:96px 0;
  }

  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:48px;
    flex-wrap:wrap;
  }

  .section-head h2{
    font-size:clamp(1.7rem, 3vw, 2.3rem);
  }

  .section-tag{
    font-size:0.85rem;
  }

  .see-all{
    font-size:0.92rem;
    border-bottom:1px solid var(--line);
    padding-bottom:2px;
    white-space:nowrap;
  }

  /* ---------- Games teaser (warm room) ---------- */
  .games-section{
    background:linear-gradient(180deg, var(--void) 0%, #14100D 50%, var(--void) 100%);
  }

  .games-section .section-tag{color:var(--ember);}
  .games-section .see-all:hover{border-color:var(--ember-dim); color:var(--ember);}

  .game-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }

  @media (max-width:820px){
    .game-grid{grid-template-columns:1fr;}
  }

  .game-card{
    background:var(--panel);
    border:1px solid var(--line);
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
    text-decoration:none;
    transition:background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  }

  .game-card:hover{
    background:var(--panel-2);
    border-color:var(--ember-dim);
    transform:translateY(-3px);
  }

  .game-card .thumb{
    aspect-ratio:16/10;
    overflow:hidden;
    position:relative;
    border-bottom:1px solid var(--line);
    background:var(--surface);
  }

  .game-card .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.45s ease;
  }

  .game-card:hover .thumb img{
    transform:scale(1.05);
  }

  .game-card .status{
    display:inline-block;
    font-size:0.75rem;
    font-weight:600;
    color:var(--ember);
    letter-spacing:0.04em;
    margin-bottom:8px;
    text-transform:uppercase;
  }

  .game-card .body{
    padding:22px 24px;
    display:flex;
    flex-direction:column;
    flex:1;
  }

  .game-card h3{
    font-size:1.25rem;
    margin-bottom:8px;
    color:var(--ink);
  }

  .game-card p{
    font-size:0.88rem;
    color:var(--ink-dim);
    line-height:1.5;
    margin:0;
  }

  /* ---------- Tools section (cool room) ---------- */
  .tools-section .section-tag{color:var(--signal);}
  .tools-section .see-all:hover{border-color:var(--signal-dim); color:var(--signal);}

  .tool-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
  }

  @media (max-width:900px){
    .tool-grid{grid-template-columns:1fr;}
  }

  .tool-card{
    border:1px solid var(--line);
    background:var(--panel);
  }

  .tool-card .thumb{
    aspect-ratio:16/10;
    overflow:hidden;
    border-bottom:1px solid var(--line);
  }

  .tool-card .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.5s ease;
  }

  .tool-card:hover .thumb img{
    transform:scale(1.04);
  }

  .tool-card .body{
    padding:24px 24px 26px;
  }

  .tool-card h3{
    font-size:1.15rem;
    margin-bottom:10px;
  }

  .tool-card p{
    font-size:0.9rem;
    color:var(--ink-dim);
    margin-bottom:16px;
  }

  .tool-link{
    font-size:0.86rem;
    color:var(--signal);
    border-bottom:1px solid var(--signal-dim);
    padding-bottom:1px;
  }

  /* ---------- Reviews callout ---------- */
  .reviews-callout{
    border:1px solid var(--ember-dim);
    background:rgba(201,130,61,0.05);
    padding:36px 32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    margin-top:56px;
  }

  .reviews-callout h3{
    font-size:1.25rem;
    margin-bottom:6px;
  }

  .reviews-callout p{
    color:var(--ink-dim);
    font-size:0.92rem;
    max-width:52ch;
  }

  .reviews-callout .path-chip{flex-shrink:0;}

  /* ---------- Community teaser ---------- */
  .community-section{
    border-top:1px solid var(--line);
  }

  .community-copy{
    max-width:60ch;
    color:var(--ink-dim);
  }

  .community-copy strong{color:var(--ink); font-weight:500;}

  /* ---------- Footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:56px 0 40px;
  }

  .footer-grid{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:32px;
  }

  .footer-brand .brand-name{margin-bottom:6px;}

  .footer-links{
    display:flex;
    gap:40px;
    flex-wrap:wrap;
  }

  .footer-col h4{
    font-size:0.78rem;
    color:var(--ink-dim);
    margin-bottom:12px;
    font-weight:500;
  }

  .footer-col a{
    display:block;
    font-size:0.92rem;
    margin-bottom:8px;
    color:var(--ink-dim);
  }

  .footer-col a:hover{color:var(--ink);}

  .footer-bottom{
    margin-top:48px;
    padding-top:24px;
    border-top:1px solid var(--line);
    font-size:0.82rem;
    color:var(--ink-dim);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
  }

/* ===================== Shared subpage styles ===================== */

.page-hero{
  padding:70px 0 56px;
  border-bottom:1px solid var(--line);
}

.page-hero .kicker{
  font-size:0.85rem;
  color:var(--ember);
  margin-bottom:14px;
}

.page-hero.cool .kicker{color:var(--signal);}

.page-hero h1{
  font-size:clamp(2.1rem, 4.5vw, 3.2rem);
  max-width:20ch;
}

.page-hero p.lead{
  margin-top:18px;
  max-width:56ch;
  color:var(--ink-dim);
  font-size:1.08rem;
}

/* ---- image placeholder (used until real screenshots are confirmed) ---- */
.shot{
  aspect-ratio:16/9;
  border:1px dashed var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 14px),
    var(--panel);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-dim);
  font-size:0.82rem;
  text-align:center;
  padding:16px;
}

.shot-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin:28px 0;
}

@media (max-width:760px){
  .shot-row{grid-template-columns:1fr;}
}

/* ---- project entry (case study block) ---- */
.project{
  padding:64px 0;
  border-bottom:1px solid var(--line);
}

.project:last-child{border-bottom:none;}

.project-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.project-head h2{font-size:1.9rem;}

.project-meta{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:0.82rem;
  color:var(--ink-dim);
  margin-top:8px;
}

.project-meta span strong{color:var(--ink); font-weight:500;}

.status-pill{
  border:1px solid var(--ember-dim);
  color:var(--ember);
  font-size:0.78rem;
  padding:5px 12px;
  white-space:nowrap;
  height:fit-content;
}

.status-pill.cool{border-color:var(--signal-dim); color:var(--signal);}
.status-pill.paused{border-color:var(--line); color:var(--ink-dim);}

.project-body{
  max-width:72ch;
  color:var(--ink-dim);
}

.project-body p{margin-bottom:16px;}
.project-body strong{color:var(--ink); font-weight:500;}

.project-body h4{
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:0.95rem;
  color:var(--ink);
  margin:26px 0 10px;
}

.project-body ul{padding-left:20px; margin-bottom:16px;}
.project-body li{margin-bottom:6px;}

.project-links{
  margin-top:22px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.project-links a{
  font-size:0.9rem;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}

.project-links a:hover{border-color:var(--ember-dim); color:var(--ember);}

/* ---- timeline (for World 001's arc) ---- */
.timeline{
  margin:28px 0;
  border-left:1px solid var(--line);
  padding-left:24px;
}

.timeline-step{
  position:relative;
  padding-bottom:26px;
}

.timeline-step::before{
  content:"";
  position:absolute;
  left:-29px;
  top:4px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--ember);
}

.timeline-step h4{margin:0 0 6px !important;}

/* ---- tool detail row (Tools page) ---- */
.tool-detail{
  display:flex;
  flex-direction:column;
  padding:56px 0;
  border-bottom:1px solid var(--line);
}

.tool-detail:last-child{border-bottom:none;}

.tool-detail-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:center;
  margin-bottom:8px;
}

.tool-detail:nth-child(even) .tool-detail-grid .tool-detail-media{order:2;}

@media (max-width:800px){
  .tool-detail-grid{grid-template-columns:1fr;}
  .tool-detail:nth-child(even) .tool-detail-grid .tool-detail-media{order:0;}
}

.tool-detail-media{
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:4px;
  border:1px solid var(--line);
  background:var(--surface);
}

.tool-detail-media img, .tool-detail-media .shot{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border:none;
  transition:transform 0.4s ease;
}

.tool-detail-media:hover img{
  transform:scale(1.03);
}

.tool-detail-copy h3{font-size:1.6rem; margin-bottom:12px; color:var(--ink);}
.tool-detail-copy p{color:var(--ink-dim); margin-bottom:16px; line-height:1.6;}

/* ---- community photo grid ---- */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin:36px 0;
}

@media (max-width:760px){
  .photo-grid{grid-template-columns:repeat(2, 1fr);}
}

.photo-grid .shot{aspect-ratio:1/1;}

/* ---- reviews program tiers ---- */
.tier-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin:40px 0;
}

@media (max-width:800px){
  .tier-grid{grid-template-columns:1fr;}
}

.tier-card{
  border:1px solid var(--line);
  background:var(--panel);
  padding:32px;
}

.tier-card h3{font-size:1.3rem; margin-bottom:12px;}
.tier-card p{color:var(--ink-dim); margin-bottom:18px;}

.tier-card .fields{
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:16px;
}

.tier-card .fields h5{
  font-family:'Work Sans', sans-serif;
  font-size:0.78rem;
  color:var(--ink-dim);
  font-weight:500;
  margin-bottom:10px;
}

.tier-card .fields ul{list-style:none; font-size:0.88rem; color:var(--ink-dim);}
.tier-card .fields li{padding:4px 0; border-bottom:1px dotted var(--line);}
.tier-card .fields li:last-child{border-bottom:none;}

.notice{
  border-left:2px solid var(--ember);
  padding:14px 18px;
  background:rgba(201,130,61,0.05);
  font-size:0.9rem;
  color:var(--ink-dim);
  margin-top:20px;
}

/* ---- form ---- */
.form-wrap{
  max-width:640px;
  margin-top:36px;
}

.form-row{margin-bottom:20px;}

.form-row label{
  display:block;
  font-size:0.85rem;
  color:var(--ink-dim);
  margin-bottom:8px;
}

.form-row input, .form-row textarea, .form-row select{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink);
  padding:12px 14px;
  font-family:'Work Sans', sans-serif;
  font-size:0.95rem;
}

.form-row textarea{resize:vertical; min-height:120px;}

.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:none;
  border-color:var(--ember-dim);
}

.submit-btn{
  background:var(--ember);
  color:var(--void);
  border:none;
  padding:14px 30px;
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  transition:background 0.2s ease;
}

.submit-btn:hover{background:#DA9550;}

.checkbox-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:0.88rem;
  color:var(--ink-dim);
}

.checkbox-row input{width:auto; margin-top:3px;}

.form-status{
  margin-top:16px;
  padding:14px 18px;
  border-radius:2px;
  font-size:0.92rem;
  display:none;
}
.form-status.success{
  display:block;
  background:rgba(62,143,166,0.15);
  border:1px solid var(--signal);
  color:var(--ink);
}
.form-status.error{
  display:block;
  background:rgba(201,130,61,0.15);
  border:1px solid var(--ember);
  color:var(--ink);
}

/* ---- lightbox ---- */
.lightbox-overlay{
  position:fixed; inset:0;
  background:rgba(13,15,18,0.93);
  display:flex; align-items:center; justify-content:center;
  z-index:200; opacity:0; pointer-events:none;
  transition:opacity 0.2s ease;
  padding:48px;
}
.lightbox-overlay.active{opacity:1; pointer-events:auto;}
.lightbox-overlay img{max-width:100%; max-height:100%; border:1px solid var(--line); cursor:zoom-out;}
.lightbox-close{
  position:absolute; top:24px; right:32px;
  color:var(--ink-dim); font-size:0.9rem; cursor:pointer;
}

/* ---- video thumbnail / inline embed ---- */
.video-shot{
  position:relative;
  cursor:pointer;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  aspect-ratio:16 / 9;
  background-color:var(--surface);
}

.video-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.3s ease;
}

.video-shot:hover img{
  transform:scale(1.03);
}

.video-shot .play-badge{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(13,15,18,0.35);
  transition:background 0.2s ease;
}

.video-shot:hover .play-badge{background:rgba(13,15,18,0.5);}

.video-shot .play-badge span{
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(13,15,18,0.75);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  font-size:1.1rem;
}

.video-shot .video-caption{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:8px 10px;
  font-size:0.78rem;
  color:var(--ink);
  background:linear-gradient(to top, rgba(13,15,18,0.85), transparent);
}

.video-shot iframe{width:100%; height:100%; border:none;}

/* ---- about page headshot layout, responsive ---- */
.about-hero-grid{
  grid-template-columns:220px 1fr;
}
@media (max-width:600px){
  .about-hero-grid{
    grid-template-columns:1fr;
  }
  .about-hero-grid .shot{
    aspect-ratio:16/10;
    max-width:220px;
  }
}

/* ---- scroll-triggered reveals ---- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.reveal-in{opacity:1; transform:translateY(0);}
@media (max-width:600px){
  .reveal{transform:translateY(8px); transition:opacity 0.4s ease, transform 0.4s ease;}
}

/* ---- community video tiles ---- */
.photo-grid video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:var(--panel);
}

/* ---- per-section typography ---- */
body.section-games{
  font-family:'Public Sans', sans-serif;
}
body.section-games h1,
body.section-games h2,
body.section-games h3,
body.section-games .display{
  font-family:'Fraunces', serif;
}

body.section-tools{
  font-family:'IBM Plex Sans', sans-serif;
}
body.section-tools h1,
body.section-tools h2,
body.section-tools h3,
body.section-tools .display{
  font-family:'Space Grotesk', sans-serif;
}

/* nav and footer always stay in the general hub fonts, regardless of section */
body.section-games header, body.section-games header *,
body.section-games footer, body.section-games footer *,
body.section-tools header, body.section-tools header *,
body.section-tools footer, body.section-tools footer *{
  font-family:'Work Sans', sans-serif;
}
body.section-games header .brand-name, body.section-games header .brand-name *,
body.section-games footer .brand-name, body.section-games footer .brand-name *,
body.section-tools header .brand-name, body.section-tools header .brand-name *,
body.section-tools footer .brand-name, body.section-tools footer .brand-name *{
  font-family:'Newsreader', serif;
}


/* ==========================================================================
   HERO GLOWING BELL / LAMP STAGE (FRONT PAGE ONLY)
   ========================================================================== */

.hero-light-stage {
  position: relative;
  margin-top: 24px;
  padding-top: 130px;
  --_size: 220px;
  --base-clr: #b7b5b4;
  --degofrot: 0.8;
  font-size: calc(var(--_size) * 0.01);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 0.5s ease;
}

.hero-light-stage .bell-container {
  width: 80em;
  height: 80em;
  opacity: 1;
  cursor: pointer;
  position: absolute;
  top: -10px;
  left: 40px;
  margin: 0;
  transform-origin: 50% -60px;
  animation: 5s ease-in-out infinite bell-swing;
  z-index: 20;
}

@media (max-width: 640px) {
  .hero-light-stage {
    padding-top: 110px;
    --_size: 180px;
  }
  .hero-light-stage .bell-container {
    top: -5px;
    left: 10px;
  }
}

@keyframes bell-swing {
  0% { rotate: calc(1deg * var(--degofrot)); }
  50% { rotate: calc(-1deg * var(--degofrot)); }
  100% { rotate: calc(1deg * var(--degofrot)); }
}

.hero-light-stage .bell-container * {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  pointer-events: none;
}

.hero-light-stage .rope {
  height: 70px;
  width: 2em;
  translate: 0 -70%;
  background: linear-gradient(90deg, #2d54744d 0%, #000b 30%, transparent 100%),
    repeating-linear-gradient(-70deg, #252525, #888 2%, #3a3a3a 3%);
}

.hero-light-stage .bell-top {
  width: 14%;
  height: 14%;
  border-radius: 50%;
  translate: 0 -28em;
  background: var(--base-clr);
  box-shadow: inset -1em -0.5em 2em 0.5em #fff, inset 1em -1em 2em 3em #000,
    0 -0.1em 0.4em 0.3em #c6eaffa8;
}

.hero-light-stage .bell-base {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  translate: 0 -24%;
  background: var(--base-clr);
  box-shadow: 0 -0.1em 0.4em 0.2em #c6eaffa8;
}
.hero-light-stage .bell-base:before {
  content: "";
  background-image: radial-gradient(circle at -80% -12%, transparent 50em, var(--base-clr) 50em);
  position: absolute;
  translate: -18em 20em;
  width: 100%;
  height: 80%;
}
.hero-light-stage .bell-base:after {
  content: "";
  background-image: radial-gradient(circle at -80% -12%, transparent 50.1em, #cacaca 50.3em, var(--base-clr) 50.5em);
  position: absolute;
  translate: 18em 20em;
  width: 100%;
  height: 80%;
  transform: rotateY(180deg);
}
.hero-light-stage .bell-base:nth-child(4) {
  filter: brightness(3) blur(1em);
  scale: 0.74 0.84;
  translate: 0em -11em;
}

.hero-light-stage .shadow-l1 {
  width: 30em;
  height: 42em;
  border-radius: 50%;
  rotate: 12deg;
  translate: -3em -6em;
  filter: blur(2em);
  background: #797a80;
}
.hero-light-stage .shadow-l2 {
  width: 130%;
  height: 90%;
  filter: blur(5em);
  translate: -6em 9em;
}
.hero-light-stage .shadow-l2::before {
  display: block;
  content: "";
  width: 68%;
  height: 64%;
  border-radius: 50%;
  rotate: -54deg;
  translate: -8em 2em;
  scale: 1;
  background: #000000;
}

.hero-light-stage .glow {
  width: 100%;
  height: 100%;
  filter: brightness(2) blur(2em);
  transition: opacity 0.5s ease;
}
.hero-light-stage .glow::before {
  clip-path: polygon(9% 83%, 12% 79%, 15% 74%, 18% 68%, 20% 62%, 22% 56%, 23% 50%, 24% 43%, 25% 38%, 25% 34%, 26% 29%, 26% 26%, 27% 22%, 29% 19%, 30% 15%, 32% 13%, 34% 10%, 37% 7%, 41% 5%, 44% 4%, 47% 3%, 51% 3%, 55% 3%, 58% 5%, 62% 6%, 73% 29%, 72% 25%, 70% 20%, 67% 16%, 63% 12%, 60% 9%, 58% 8%, 55% 7%, 52% 6%, 48% 6%, 44% 8%, 41% 9%, 37% 12%, 36% 14%, 33% 16%, 31% 20%, 30% 23%, 29% 26%, 28% 31%, 27% 36%, 27% 39%, 26% 44%, 26% 48%, 26% 52%, 25% 56%, 23% 61%, 22% 65%, 21% 69%, 19% 72%, 17% 75%, 15% 78%, 13% 81%);
  width: 100%;
  height: 80%;
  translate: 0 6em;
  scale: 0.94 0.94;
  background: #fff3;
  display: block;
  content: "";
}

.hero-light-stage .glow2 {
  width: 100%;
  height: 100%;
  filter: brightness(1) blur(0.3em);
  opacity: 0.1;
  transition: opacity 0.5s ease;
}
.hero-light-stage .glow2::before {
  clip-path: polygon(9.21% 83%, 12.28% 79%, 15.35% 74%, 18.41% 68%, 20.46% 62%, 22.51% 56%, 23.53% 50%, 24.55% 43%, 25.58% 34%, 26.6% 29%, 27.62% 22%, 29.16% 18.5%, 30.95% 15.75%, 32.74% 13%, 34.78% 10%, 37.85% 7%, 41.94% 5%, 45.01% 4%, 48.08% 3%, 52.17% 3%, 56.27% 3%, 64.01% 6.36%, 55.75% 4.5%, 47.83% 4.75%, 42.84% 5.88%, 39.51% 7.88%, 36.45% 10.38%, 33.38% 14.88%, 30.69% 19%, 29.67% 22.5%, 28.8% 26.72%, 28.21% 31.36%, 26.92% 38.44%, 26.57% 43.67%, 25.51% 48.34%, 25% 54.34%, 23.4% 60.69%, 21.23% 65.38%, 18.41% 71.5%, 16.88% 74.75%, 12.28% 80.5%);
  width: 100%;
  height: 84%;
  translate: -1em 8.4em;
  scale: 1;
  background: #fff3;
  display: block;
  content: "";
}

.hero-light-stage .left-glow {
  --lgc: #5d819666;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  translate: 0 -24%;
  background: transparent;
  box-shadow: inset 1em 0em 1em 0.2em var(--lgc);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.hero-light-stage .left-glow2 {
  --lgc2: #5d819666;
  width: 49%;
  height: 50%;
  background-image: radial-gradient(circle at -80% -12%, transparent 50em, var(--lgc2) 50.3em, transparent 50.4em);
  position: absolute;
  translate: -18em 20em;
  filter: blur(0.4em);
}
.hero-light-stage .r-glow {
  --rgc: #cca37f;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  translate: 0 -24%;
  background: transparent;
  box-shadow: inset -1em 0em 1em 0.2em var(--rgc);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.hero-light-stage .r-glow2 {
  --rgc: #cca37f;
  width: 50%;
  height: 50%;
  background-image: radial-gradient(circle at -80% -12%, transparent 50.1em, var(--rgc) 50.3em, transparent 50.6em);
  position: absolute;
  translate: 18em 20em;
  transform: rotateY(180deg);
  filter: blur(0.4em);
}

.hero-light-stage .mid-ring {
  width: 72%;
  height: 18%;
  border-radius: 50%;
  translate: 0 10em;
  background: linear-gradient(90deg, black 40%, var(--base-clr) 90%);
  box-shadow: 0 0.8em 1em 0em #27282b;
}
.hero-light-stage .mid-ring.small {
  width: 68%;
  height: 14%;
  translate: 0 10.4em;
  box-shadow: 0 -0.8em 1em 0.2em #fff6;
}
.hero-light-stage .mid-ring::before,
.hero-light-stage .mid-ring::after {
  content: "";
  display: block;
  background: #000;
  width: 2em;
  height: 2em;
  top: 10%;
  border-radius: 50%;
  position: absolute;
}
.hero-light-stage .mid-ring::after { right: -2%; }
.hero-light-stage .mid-ring::before { left: -2%; }

.hero-light-stage .bell-buff-t {
  background: #fff2;
  width: 72%;
  height: 12%;
  border-radius: 50%;
  translate: 0 16em;
  filter: blur(1em);
}
.hero-light-stage .bell-buff {
  background: linear-gradient(90deg, black 40%, var(--base-clr) 90%);
  width: 88%;
  height: 20%;
  border-radius: 50% 50% 50% 50% / 50% 50% 30% 30%;
  translate: 0 20em;
  box-shadow: inset 1em 0 2em -1em #5d819666, inset -1em 0 2em -1em #fff;
}
.hero-light-stage .bell-btm {
  width: 88%;
  height: 18%;
  border-radius: 50%;
  translate: 0 23em;
  background: linear-gradient(90deg, black 40%, var(--base-clr) 90%);
}
.hero-light-stage .bell-btm2 {
  width: 74%;
  height: 12%;
  border-radius: 50%;
  translate: 0 24em;
  background: #fffff6;
  box-shadow: 0 0 1.2em 0.8em #ffe9d4, -0.8em 0.2em 2em 1em #cca37f,
    -5.4em -0.6em 3em -1em #ce6e1abb, 6em -0.6em 3em -1em #ce6e1abb,
    inset 0em 30.3em 0.3em -30em #c7962d, inset 0 -2em 2em -2em #ffe9d4,
    inset 0em -1em 2em 1em #ce6e1a66;
  filter: brightness(1);
  transition: filter 0.5s ease-in-out, box-shadow 0.5s ease;
}

.hero-light-stage .bell-ring-container {
  width: 74%;
  height: 24%;
  border-radius: 50% 50% 50% 50% / 25% 25% 0% 0%;
  translate: 0 29.2em;
  overflow: hidden;
}
.hero-light-stage .bell-ring {
  width: 12em;
  height: 12em;
  background: #fff;
  border-radius: 50%;
  translate: 0 -6em;
  box-shadow: 0 0.8em 1em -0.3em #f8e1d0, inset 0 -6em 4em -4em #e3b695,
    inset 0 1em 3em 1em #fff4, inset 0 2em 3em 1em #fff,
    inset 0 100em 0 100em #2c2c2c;
  transition: all 0.5s ease-in-out;
}

.hero-light-stage .bell-rays {
  mix-blend-mode: soft-light;
  box-shadow: inset 0 -21em 4em -20em #000;
  width: 100%;
  height: 140%;
  translate: 0 -4em;
  border-radius: 50%;
  transition: opacity 0.5s ease-in-out;
}
.hero-light-stage .bell-rays::before {
  content: "";
  display: block;
  width: 100em;
  height: 100em;
  transform-origin: 50% 50%;
  position: absolute;
  left: -21em;
  top: -77em;
  border-radius: 100%;
  filter: blur(0.6em);
  background: repeating-conic-gradient(at 50% 50%, #fff3 0%, transparent 0.6%, #fff3 0.8%);
  animation: radiate 1s linear infinite;
}

.hero-light-stage .volumetric {
  width: 160%;
  height: 380%;
  translate: 0 160em;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.6s ease-in-out;
}
.hero-light-stage .volumetric .vl {
  width: 100%;
  height: 100%;
  transform-origin: 50% 20em;
  rotate: 22deg;
  box-shadow: inset 40em 0 25em -20em #fff3;
}
.hero-light-stage .volumetric .vr {
  width: 100%;
  height: 100%;
  transform-origin: 50% 20em;
  rotate: -22deg;
  box-shadow: inset -40em 0 25em -20em #fff3;
}

/* ================= OFF STATE (Darkness & Hiding in Shadows) ================= */
.hero-light-stage.off .bell-btm2 {
  filter: brightness(0.04);
  box-shadow: none;
}
.hero-light-stage.off .bell-ring {
  background: #000;
  box-shadow: inset 0 100em 0 100em #000;
}
.hero-light-stage.off .bell-rays {
  opacity: 0;
}
.hero-light-stage.off .volumetric {
  opacity: 0;
}
.hero-light-stage.off .glow,
.hero-light-stage.off .glow2 {
  opacity: 0;
}

/* Buttons sitting in darkness when OFF */
.hero-light-stage.off .hero-paths .path-chip {
  opacity: 0.22;
  filter: brightness(0.4) blur(1.5px);
  transform: translateY(4px);
  border-color: rgba(38, 42, 49, 0.4);
  background: rgba(13, 15, 18, 0.4);
  box-shadow: none;
}

.hero-light-stage.off .hero-paths .path-chip:hover,
.hero-light-stage.off .hero-paths .path-chip:focus-visible {
  opacity: 0.85;
  filter: brightness(0.9) blur(0);
  transform: translateY(0);
  border-color: var(--ember-dim);
}

/* ================= ON STATE (Light Pool & Illuminated Buttons) ================= */
.hero-light-stage .hero-paths {
  position: relative;
  z-index: 25;
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-light-stage .path-chip {
  position: relative;
  z-index: 26;
  pointer-events: auto;
  opacity: 1;
  filter: brightness(1) blur(0);
  transform: translateY(0);
  backdrop-filter: blur(8px);
  background: rgba(22, 25, 30, 0.85);
  border-color: rgba(201, 130, 61, 0.55);
  box-shadow:
    0 10px 30px rgba(201, 130, 61, 0.22),
    0 0 18px rgba(201, 130, 61, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-light-stage .path-chip.cool {
  border-color: rgba(62, 143, 166, 0.65);
  box-shadow:
    0 10px 30px rgba(62, 143, 166, 0.22),
    0 0 18px rgba(62, 143, 166, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hero-light-stage .path-chip:hover {
  transform: translateY(-2px);
  border-color: var(--ember);
  box-shadow:
    0 14px 36px rgba(201, 130, 61, 0.35),
    0 0 24px rgba(201, 130, 61, 0.25);
}

/* Interactive Hint */
.lamp-interactive-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 22px;
  font-size: 0.82rem;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  user-select: none;
  transition: all 0.3s ease;
  position: relative;
  z-index: 25;
}

.lamp-interactive-hint:hover {
  color: var(--ink);
  border-color: var(--ember-dim);
  background: rgba(201, 130, 61, 0.08);
}

.lamp-interactive-hint .hint-icon {
  color: var(--ember);
  animation: hint-spark 2.4s ease-in-out infinite;
}

@keyframes hint-spark {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

.hero-light-stage.off .lamp-interactive-hint .hint-text::after {
  content: "Click lantern to turn on light";
}
.hero-light-stage:not(.off) .lamp-interactive-hint .hint-text::after {
  content: "Lantern ON (Click to dim)";
}
/* ==========================================================================
   HARDWARE & RENDERING PERFORMANCE (GPU COMPOSITING & CPU OFFLOADING)
   ========================================================================== */

/* Offload heavy project/tool sections from CPU layout until scrolled into view */
.project,
.tool-detail,
.tier-card,
.photo-grid {
  content-visibility: auto;
  contain-intrinsic-size: 0 450px;
}

/* Force hardware acceleration and dedicated GPU composite layer promotion */
.reveal,
.reveal-in {
  will-change: transform, opacity;
  transform: translateZ(0);
}

.hero-light-stage .bell-container {
  will-change: transform;
  transform: translateZ(0);
}

.hero-light-stage .bell-rays::before {
  will-change: transform;
  transform: translateZ(0);
}

.hero-light-stage .volumetric {
  will-change: opacity, transform;
  transform: translateZ(0);
}

/* Optimize image bitmap handling */
img {
  content-visibility: auto;
}

/* ---- 404 3D Rolling Cube Stage ---- */
.error-404-hero {
  padding: 40px 0 20px;
  text-align: center;
  position: relative;
}

.error-stage-wrap {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  background: radial-gradient(circle at 50% 50%, rgba(232,122,56,0.08) 0%, transparent 70%);
  margin: 0 auto;
}

.error-stage-wrap * {
  transform-style: preserve-3d;
}

.error-rail {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateX(-30deg) rotateY(-30deg);
  font-family: 'Anton', 'Work Sans', sans-serif;
  pointer-events: none;
}

.error-rail .stamp {
  position: absolute;
  width: 180px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(18, 20, 24, 0.95);
  border: 1px solid rgba(232, 122, 56, 0.25);
  color: var(--ember);
  font-size: 6.5rem;
  font-weight: 700;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 15px rgba(232,122,56,0.15);
  border-radius: 4px;
}

.error-rail .stamp:nth-child(1) { animation: stampSlide 40000ms -2300ms linear infinite; }
.error-rail .stamp:nth-child(2) { animation: stampSlide 40000ms -4300ms linear infinite; }
.error-rail .stamp:nth-child(3) { animation: stampSlide 40000ms -6300ms linear infinite; }
.error-rail .stamp:nth-child(4) { animation: stampSlide 40000ms -8300ms linear infinite; }
.error-rail .stamp:nth-child(5) { animation: stampSlide 40000ms -10300ms linear infinite; }
.error-rail .stamp:nth-child(6) { animation: stampSlide 40000ms -12300ms linear infinite; }
.error-rail .stamp:nth-child(7) { animation: stampSlide 40000ms -14300ms linear infinite; }
.error-rail .stamp:nth-child(8) { animation: stampSlide 40000ms -16300ms linear infinite; }
.error-rail .stamp:nth-child(9) { animation: stampSlide 40000ms -18300ms linear infinite; }
.error-rail .stamp:nth-child(10) { animation: stampSlide 40000ms -20300ms linear infinite; }
.error-rail .stamp:nth-child(11) { animation: stampSlide 40000ms -22300ms linear infinite; }
.error-rail .stamp:nth-child(12) { animation: stampSlide 40000ms -24300ms linear infinite; }
.error-rail .stamp:nth-child(13) { animation: stampSlide 40000ms -26300ms linear infinite; }
.error-rail .stamp:nth-child(14) { animation: stampSlide 40000ms -28300ms linear infinite; }
.error-rail .stamp:nth-child(15) { animation: stampSlide 40000ms -30300ms linear infinite; }
.error-rail .stamp:nth-child(16) { animation: stampSlide 40000ms -32300ms linear infinite; }
.error-rail .stamp:nth-child(17) { animation: stampSlide 40000ms -34300ms linear infinite; }
.error-rail .stamp:nth-child(18) { animation: stampSlide 40000ms -36300ms linear infinite; }
.error-rail .stamp:nth-child(19) { animation: stampSlide 40000ms -38300ms linear infinite; }
.error-rail .stamp:nth-child(20) { animation: stampSlide 40000ms -40300ms linear infinite; }

@keyframes stampSlide {
  0% {
    transform: rotateX(90deg) rotateZ(-90deg) translateZ(-180px) translateY(120px);
  }
  100% {
    transform: rotateX(90deg) rotateZ(-90deg) translateZ(-180px) translateY(-3880px);
  }
}

.error-world {
  transform: rotateX(-30deg) rotateY(-30deg);
  font-family: 'Anton', 'Work Sans', sans-serif;
}

.error-world .forward {
  position: absolute;
  animation: boxSlide 2000ms linear infinite;
}

.error-world .box {
  width: 180px;
  height: 180px;
  transform-origin: 100% 100%;
  animation: boxRoll 2000ms cubic-bezier(1.000, 0.010, 1.000, 1.000) infinite;
}

.error-world .box .wall {
  position: absolute;
  width: 180px;
  height: 180px;
  background: rgba(13, 15, 18, 0.85);
  border: 1px solid rgba(232, 122, 56, 0.7);
  box-shadow: 0 0 25px rgba(232, 122, 56, 0.25), inset 0 0 15px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  border-radius: 2px;
}

.error-world .box .wall::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 6.5rem;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(255,255,255,0.6);
}

.error-world .box .wall:nth-child(1) {
  transform: translateZ(90.0px);
}

.error-world .box .wall:nth-child(2) {
  transform: rotateX(180deg) translateZ(90.0px);
}

.error-world .box .wall:nth-child(3) {
  transform: rotateX(90deg) translateZ(90.0px);
}
.error-world .box .wall:nth-child(3)::before {
  transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
  animation: zeroFour 4000ms -2000ms linear infinite;
}

.error-world .box .wall:nth-child(4) {
  transform: rotateX(-90deg) translateZ(90.0px);
}
.error-world .box .wall:nth-child(4)::before {
  transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
  animation: zeroFour 4000ms -2000ms linear infinite;
}

.error-world .box .wall:nth-child(5) {
  transform: rotateY(90deg) translateZ(90.0px);
}
.error-world .box .wall:nth-child(5)::before {
  transform: rotateX(180deg) translateZ(-1px);
  animation: zeroFour 4000ms linear infinite;
}

.error-world .box .wall:nth-child(6) {
  transform: rotateY(-90deg) translateZ(90.0px);
}
.error-world .box .wall:nth-child(6)::before {
  transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
  animation: zeroFour 4000ms linear infinite;
}

@keyframes zeroFour {
  0% { content: '4'; }
  49.9% { content: '4'; }
  50% { content: '0'; }
  99.9% { content: '0'; }
  100% { content: '4'; }
}

@keyframes boxRoll {
  0%   { transform: rotateZ(0deg); }
  85%  { transform: rotateZ(90deg); }
  87%  { transform: rotateZ(88deg); }
  90%  { transform: rotateZ(90deg); }
  100% { transform: rotateZ(90deg); }
}

@keyframes boxSlide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-180px); }
}

@media (max-width: 640px) {
  .error-stage-wrap {
    height: 280px;
    transform: scale(0.72);
  }
}


/* ---- Interactive Animated Ember Folder Component ---- */
.folder-card {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 24px 28px;
  border-radius: 4px;
  margin: 32px 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.folder-card:hover {
  border-color: var(--ember-dim);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.folder-widget {
  position: relative;
  width: 90px;
  height: 72px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.folder-card:hover .folder-widget,
.folder-widget:hover {
  transform: translateY(-6px);
}

.folder__back {
  position: relative;
  width: 90px;
  height: 72px;
  background: #252a32;
  border-radius: 0px 4px 4px 4px;
  border: 1px solid rgba(232, 122, 56, 0.4);
}

.folder__back::after {
  position: absolute;
  bottom: 99%;
  left: 0;
  content: "";
  width: 28px;
  height: 9px;
  background: #252a32;
  border-top: 1px solid rgba(232, 122, 56, 0.4);
  border-left: 1px solid rgba(232, 122, 56, 0.4);
  border-right: 1px solid rgba(232, 122, 56, 0.4);
  border-radius: 4px 4px 0 0;
}

.folder-widget .paper {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 10%);
  width: 72%;
  height: 82%;
  background: #d8d3c9;
  border-radius: 3px;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #121418;
  font-family: 'Work Sans', sans-serif;
  letter-spacing: 0.05em;
}

.folder-widget .paper:nth-child(2) {
  background: #e8e3d8;
  width: 80%;
  height: 72%;
}

.folder-widget .paper:nth-child(3) {
  background: #fdfbf7;
  width: 88%;
  height: 62%;
}

.folder-card:hover .folder-widget .paper:nth-child(1),
.folder-widget:hover .paper:nth-child(1) {
  transform: translate(-50%, -24px) rotate(-4deg);
}

.folder-card:hover .folder-widget .paper:nth-child(2),
.folder-widget:hover .paper:nth-child(2) {
  transform: translate(-50%, -16px) rotate(2deg);
}

.folder-card:hover .folder-widget .paper:nth-child(3),
.folder-widget:hover .paper:nth-child(3) {
  transform: translate(-50%, -8px) rotate(-1deg);
}

.folder__front {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #e87a38 0%, #b85418 100%);
  border-radius: 4px;
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 12px rgba(232, 122, 56, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder__front::after {
  content: "CL";
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
}

.folder-card:hover .folder-widget .folder__front,
.folder-widget:hover .folder__front {
  transform: skew(12deg) scaleY(0.65);
}

.folder-card:hover .folder-widget .folder__front.right,
.folder-widget:hover .folder__front.right {
  transform: skew(-12deg) scaleY(0.65);
}

.folder-card-body {
  flex: 1;
}

.folder-card-body h3 {
  margin: 0 0 6px 0;
  font-size: 1.15rem;
  color: var(--ink);
}

.folder-card-body p {
  margin: 0 0 14px 0;
  font-size: 0.9rem;
  color: var(--ink-dim);
  line-height: 1.5;
}

.folder-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.82rem;
  border-radius: 3px;
}

.tag-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(232, 122, 56, 0.12);
  color: var(--ember);
  border: 1px solid rgba(232, 122, 56, 0.3);
  margin-right: 6px;
  margin-bottom: 6px;
}

.tag-badge.badge-green {
  background: rgba(52, 199, 89, 0.12);
  color: #4cd964;
  border-color: rgba(52, 199, 89, 0.3);
}

@media (max-width: 640px) {
  .folder-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
  }
}


/* ---- Character Watcher Component ---- */
.watcher-outer {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto 12px;
}

.watcher-track {
  width: 100%;
  height: 155px;
  position: relative;
  overflow: visible;
}

.chloe-character {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(18px) translateX(var(--chx, 0px));
  display: inline-block;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
  width: 186px;
  height: 138px;
}

.chloe-character.dragging { cursor: grabbing; }

.watcher-outer .error-message {
  position: absolute;
  top: -35%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 120px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  pointer-events: none;
  z-index: 10;
}

.watcher-outer .error-message.is-active {
  opacity: 1;
  visibility: visible;
}

.watcher-outer .error-text {
  font-family: 'Work Sans', sans-serif;
  font-size: 28px;
  font-weight: 600;
  fill: var(--ember);
}

.watcher-outer .eyeWhite {
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  overflow: hidden;
}

.watcher-outer .eyeball-left,
.watcher-outer .eyeball-right {
  position: absolute;
  top: 74px;
  left: 50%;
  z-index: 2;
  transition: transform 120ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.watcher-outer .eyeball-left  { transform: translateX(-50%) translateX(-32px); }
.watcher-outer .eyeball-right { transform: translateX(-50%) translateX(32px); }

.watcher-outer .mask {
  position: relative;
  z-index: 3;
}

.watcher-outer .mask svg {
  width: 186px;
  height: 138px;
}

@media (max-width: 640px) {
  .watcher-track { height: 130px; }
  .chloe-character { transform: translateY(10px) translateX(var(--chx, 0px)) scale(0.85); transform-origin: top left; }
}


/* ---- Global Search Modal & Command Palette ---- */
.floating-search-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 25, 31, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(232, 122, 56, 0.35);
  color: var(--ink);
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  padding: 0 12px;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1), 
              padding 0.32s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.25s ease, 
              box-shadow 0.25s ease, 
              transform 0.2s ease;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
}

.floating-search-btn:hover,
.floating-search-btn:focus-visible {
  max-width: 210px;
  padding: 0 16px;
  transform: translateY(-2px);
  border-color: var(--ember);
  box-shadow: 0 12px 30px rgba(232, 122, 56, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.floating-search-btn svg {
  color: var(--ember);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.search-btn-text {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  margin-left: 0;
  transition: opacity 0.25s ease, max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.25s ease;
}

.floating-search-btn:hover .search-btn-text,
.floating-search-btn:focus-visible .search-btn-text {
  opacity: 1;
  max-width: 110px;
  margin-left: 8px;
  margin-right: 8px;
}

.search-trigger-kbd {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  padding: 0;
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--ink-dim);
  font-family: monospace;
  transition: opacity 0.25s ease, max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1), padding 0.25s ease;
}

.floating-search-btn:hover .search-trigger-kbd,
.floating-search-btn:focus-visible .search-trigger-kbd {
  opacity: 1;
  max-width: 40px;
  padding: 2px 6px;
}

.search-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 20px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.search-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.search-modal-container {
  width: 100%;
  max-width: 640px;
  background: #14171d;
  border: 1px solid rgba(232, 122, 56, 0.4);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-16px) scale(0.98);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 80vh;
}

.search-modal-overlay.is-open .search-modal-container {
  transform: translateY(0) scale(1);
}

.search-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input-wrap .search-icon {
  color: var(--ember);
  flex-shrink: 0;
}

.search-input-wrap input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 1.05rem;
  font-family: 'Work Sans', sans-serif;
  outline: none;
}

.search-input-wrap input::placeholder {
  color: var(--ink-dim);
  font-size: 0.95rem;
}

.search-kbd {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  color: var(--ink-dim);
  font-family: monospace;
}

.search-quick-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(18, 21, 26, 0.8);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.search-quick-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  flex-shrink: 0;
  margin-right: 4px;
}

.quick-pref-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.quick-pref-btn:hover {
  border-color: var(--ember-dim);
  color: var(--ink);
  background: rgba(232, 122, 56, 0.1);
}

.quick-pref-btn strong {
  color: var(--ember);
}

.search-results-wrap {
  padding: 12px 14px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-result-item {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  transition: all 0.18s ease;
}

.search-result-item:hover,
.search-result-item.is-selected {
  background: rgba(232, 122, 56, 0.12);
  border-color: rgba(232, 122, 56, 0.35);
  transform: translateX(4px);
}

.search-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.search-item-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
}

.search-item-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(232, 122, 56, 0.15);
  color: var(--ember);
  border: 1px solid rgba(232, 122, 56, 0.3);
}

.search-item-snippet {
  font-size: 0.85rem;
  color: var(--ink-dim);
  line-height: 1.4;
  margin-bottom: 4px;
}

.search-item-url {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  font-family: monospace;
}

.search-highlight {
  background: rgba(232, 122, 56, 0.3);
  color: #ffaa6b;
  border-radius: 2px;
  padding: 0 3px;
  font-weight: 600;
}

.search-empty-state {
  padding: 36px 20px;
  text-align: center;
  color: var(--ink-dim);
}

.search-empty-state p {
  margin: 0 0 6px 0;
  font-size: 0.95rem;
}

.search-empty-sub {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.4);
}

.search-modal-footer {
  padding: 10px 20px;
  background: rgba(14, 16, 20, 0.95);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ink-dim);
}

.search-footer-shortcuts {
  display: flex;
  gap: 12px;
}

.search-footer-shortcuts kbd {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.7rem;
}

/* Accessibility Modes */
html.pref-oled-contrast {
  --bg: #000000 !important;
  --surface: #0a0a0c !important;
  --line: #1c1f24 !important;
}

html.pref-reduce-motion *,
html.pref-reduce-motion *::before,
html.pref-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}

html.pref-clean-sans,
html.pref-clean-sans h1,
html.pref-clean-sans h2,
html.pref-clean-sans h3,
html.pref-clean-sans h4,
html.pref-clean-sans .lead,
html.pref-clean-sans p {
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif !important;
}

/* ---- Social Share Dock (for IJAS & Game Pages) ---- */
.post-share-dock-wrap {
  margin: 40px 0 24px;
}

.dock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.dock-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  font-weight: 600;
}

.dock-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: rgba(24, 27, 34, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.dock-item {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dock-item svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.dock-item:hover {
  transform: translateY(-4px) scale(1.14);
  background: rgba(232, 122, 56, 0.15);
  border-color: var(--ember);
  color: var(--ember);
}

.dock-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #101216;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.dock-item:hover .dock-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}


/* ---- Animated SVG Clipboard Component ---- */
.clipboard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.clipboard-btn svg {
  width: 20px;
  height: 20px;
  overflow: visible;
}

.clipboard-btn svg path {
  stroke-width: 1.5;
  stroke: var(--ink);
  fill: transparent;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.3s ease;
}

.clipboard-btn svg path.page {
  transform-origin: center;
}

.clipboard-btn svg path.check {
  transform-origin: center;
  stroke-dasharray: 8;
  stroke-dashoffset: 8;
  stroke: var(--ember);
}

.clipboard-btn:hover svg path {
  stroke: var(--ember);
}

.clipboard-btn.copied svg path.page {
  animation: clipboardPageDrop 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.clipboard-btn.copied svg path.check {
  stroke-dashoffset: 0;
  stroke: #4cd964 !important;
  transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease;
}

@keyframes clipboardPageDrop {
  0% {
    transform: rotate(0deg) translateY(0);
    opacity: 1;
  }
  30% {
    transform: rotate(12deg) translateY(6px);
    opacity: 0.8;
  }
  100% {
    transform: rotate(18deg) translateY(14px);
    opacity: 0;
  }
}


/* ---- Character Watcher Expressions & Follow Kinematics ---- */
.chloe-character {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(calc(18px + var(--chy, 0px))) translateX(var(--chx, 0px));
  display: inline-block;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
  width: 186px;
  height: 138px;
  z-index: 100;
  will-change: transform;
}

.chloe-character.is-following {
  filter: drop-shadow(0 12px 28px rgba(232, 122, 56, 0.25));
}

/* Winking state */
.chloe-character.is-winking .eyeball-right,
.chloe-character.is-winking .eyeWhite svg ellipse:first-child {
  transform: scaleY(0.08);
  transform-origin: center;
  transition: transform 0.15s ease;
}

/* Happy blushing cheek glow */
.chloe-character.is-happy .mask svg path.mouth {
  stroke: #ff9e58;
}

/* Sad state */
.chloe-character.is-sad .mask svg path.mouth {
  stroke: #d9534f;
}


/* ---- Mascot Eye-Roll, Head Shake & Escalating Skipped Outlines ---- */
.chloe-character.is-eyerolling .eyeball-left,
.chloe-character.is-eyerolling .eyeball-right {
  animation: eyeRollCircular 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

.chloe-character.is-nodding-no {
  animation: headNodNo 0.8s ease-in-out infinite !important;
}

@keyframes eyeRollCircular {
  0%   { transform: translateX(-50%) translate(-8px, -10px); }
  25%  { transform: translateX(-50%) translate(8px, -10px); }
  50%  { transform: translateX(-50%) translate(8px, 10px); }
  75%  { transform: translateX(-50%) translate(-8px, 10px); }
  100% { transform: translateX(-50%) translate(-8px, -10px); }
}

@keyframes headNodNo {
  0%, 100% { transform: translateY(calc(18px + var(--chy, 0px))) translateX(var(--chx, 0px)) rotate(0deg); }
  20%      { transform: translateY(calc(18px + var(--chy, 0px))) translateX(calc(var(--chx, 0px) - 12px)) rotate(-12deg); }
  40%      { transform: translateY(calc(18px + var(--chy, 0px))) translateX(calc(var(--chx, 0px) + 12px)) rotate(12deg); }
  60%      { transform: translateY(calc(18px + var(--chy, 0px))) translateX(calc(var(--chx, 0px) - 8px)) rotate(-8deg); }
  80%      { transform: translateY(calc(18px + var(--chy, 0px))) translateX(calc(var(--chx, 0px) + 8px)) rotate(8deg); }
}

/* Escalating Skipped Field Outlines */
input.skip-lvl-1,
textarea.skip-lvl-1,
select.skip-lvl-1 {
  border-color: var(--ember) !important;
  box-shadow: 0 0 0 3px rgba(232, 122, 56, 0.4) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

input.skip-lvl-2,
textarea.skip-lvl-2,
select.skip-lvl-2 {
  border-color: #ff6a3d !important;
  box-shadow: 0 0 0 6px rgba(255, 106, 61, 0.6), 0 0 16px rgba(232, 122, 56, 0.4) !important;
  animation: skipPulse2 0.8s alternate infinite ease-in-out !important;
}

input.skip-lvl-3,
textarea.skip-lvl-3,
select.skip-lvl-3 {
  border-color: #ff3333 !important;
  box-shadow: 0 0 0 9px rgba(255, 51, 51, 0.75), 0 0 28px rgba(255, 51, 51, 0.6) !important;
  animation: skipPulse3 0.5s alternate infinite ease-in-out !important;
}

@keyframes skipPulse2 {
  0%   { box-shadow: 0 0 0 4px rgba(255, 106, 61, 0.4), 0 0 8px rgba(232, 122, 56, 0.3); }
  100% { box-shadow: 0 0 0 7px rgba(255, 106, 61, 0.7), 0 0 20px rgba(232, 122, 56, 0.55); }
}

@keyframes skipPulse3 {
  0%   { box-shadow: 0 0 0 6px rgba(255, 51, 51, 0.5), 0 0 14px rgba(255, 51, 51, 0.4); transform: scale(0.995); }
  100% { box-shadow: 0 0 0 11px rgba(255, 51, 51, 0.85), 0 0 32px rgba(255, 51, 51, 0.7); transform: scale(1.005); }
}


/* ---- Animated Star Rating & Reviews Carousel ---- */
.rating-burst-group {
  margin: 12px 0;
}

.rating__stars {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.rating__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rating__label {
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.rating__label:hover {
  transform: scale(1.18);
}

.rating__star {
  display: block;
  overflow: visible;
  width: 28px;
  height: 28px;
}

.rating__star-ring,
.rating__star-fill,
.rating__star-line,
.rating__star-stroke {
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.rating__star-ring,
.rating__star-fill,
.rating__star-line {
  stroke: var(--ember);
}

.rating__star-fill {
  fill: var(--ember);
  transform: scale(0);
  transition: fill 0.3s ease, transform 0.3s ease;
}

.rating__star-line {
  stroke-dasharray: 12 13;
  stroke-dashoffset: -13;
}

.rating__star-stroke {
  stroke: rgba(255, 255, 255, 0.25);
  transition: stroke 0.3s ease;
}

/* Star selection states */
.rating__label--active .rating__star-fill {
  transform: scale(1);
  animation-name: starFillAnim;
}

.rating__label--active .rating__star-ring {
  animation-name: starRingAnim;
}

.rating__label--active .rating__star-line {
  animation-name: starLineAnim;
}

.rating__label--active .rating__star-stroke {
  animation-name: starStrokeAnim;
}

.rating__label--delay1 .rating__star-ring,
.rating__label--delay1 .rating__star-fill,
.rating__label--delay1 .rating__star-line { animation-delay: 0.04s; }

.rating__label--delay2 .rating__star-ring,
.rating__label--delay2 .rating__star-fill,
.rating__label--delay2 .rating__star-line { animation-delay: 0.08s; }

.rating__label--delay3 .rating__star-ring,
.rating__label--delay3 .rating__star-fill,
.rating__label--delay3 .rating__star-line { animation-delay: 0.12s; }

.rating__label--delay4 .rating__star-ring,
.rating__label--delay4 .rating__star-fill,
.rating__label--delay4 .rating__star-line { animation-delay: 0.16s; }

.rating__label--delay5 .rating__star-ring,
.rating__label--delay5 .rating__star-fill,
.rating__label--delay5 .rating__star-line { animation-delay: 0.2s; }

.rating-status-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ember);
  margin-top: 6px;
  min-height: 1.3em;
  transition: opacity 0.25s ease;
}

@keyframes starRingAnim {
  from, 20% { opacity: 1; r: 8px; stroke-width: 14px; transform: scale(0); }
  35%       { opacity: 0.6; r: 8px; stroke-width: 14px; transform: scale(1); }
  50%, to   { opacity: 0; r: 16px; stroke-width: 0; transform: scale(1); }
}

@keyframes starFillAnim {
  from, 40% { transform: scale(0); }
  60%       { transform: scale(1.25); }
  80%       { transform: scale(0.92); }
  to        { transform: scale(1); }
}

@keyframes starStrokeAnim {
  from    { transform: scale(1); }
  20%, to { transform: scale(0); }
}

@keyframes starLineAnim {
  from, 40% { stroke-dasharray: 1 23; stroke-dashoffset: 1; }
  60%, to   { stroke-dasharray: 12 13; stroke-dashoffset: -13; }
}

/* ---- Continuous Scrolling Review Carousel ---- */
.review-marquee-wrap {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: 18px 0;
  padding: 8px 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.review-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}

.review-marquee-wrap:hover .review-marquee-track {
  animation-play-state: paused;
}

.review-mini-card {
  flex: 0 0 320px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 16px 18px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.review-mini-card:hover {
  border-color: var(--ember-dim);
  transform: translateY(-2px);
}

.review-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.reviewer-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}

.review-stars {
  color: var(--ember);
  font-size: 0.85rem;
  letter-spacing: 2px;
}

.review-quote {
  font-size: 0.84rem;
  color: var(--ink-dim);
  line-height: 1.45;
  margin: 0;
  font-style: italic;
}

.review-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(232, 122, 56, 0.08);
  border: 1px solid rgba(232, 122, 56, 0.25);
  border-radius: 4px;
  padding: 12px 18px;
  margin-top: 14px;
}

.review-cta-text {
  font-size: 0.86rem;
  color: var(--ink-dim);
}

.review-cta-text strong {
  color: var(--ink);
}

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   Galaxy Cosmic Button Component
   ========================================================================== */
.galaxy-btn {
  --cut: 1px;
  --active: 0;
  --transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --spark: 2s;
  --btn-hue: 245; /* Cosmic violet default */
  --bg: radial-gradient(
      120% 120% at 120% 120%,
      hsl(var(--btn-hue) calc(var(--active) * 95%) 92% / calc(var(--active) * 0.75)) 25%,
      transparent 55%
    ) calc(60px - (var(--active) * 60px)) 0 / 100% 100% no-repeat,
    radial-gradient(
      120% 120% at 110% 110%,
      hsl(var(--btn-hue) calc(var(--active) * 90%) 65% / calc(var(--active) * 0.9)) 20%,
      transparent 60%
    ) calc(60px - (var(--active) * 60px)) 0 / 100% 100% no-repeat,
    hsl(var(--btn-hue) calc(var(--active) * 90% + 20%) calc(12% - (var(--active) * 5%)));

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  color: #f0f0f5;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  padding: 0.65em 1.35em;
  border-radius: 9999px;
  background: var(--bg);
  box-shadow:
    0 0 calc(var(--active) * 35px) calc(var(--active) * 10px) hsl(var(--btn-hue) 95% 60% / 0.35),
    0 1px 0 0 hsl(var(--btn-hue) 80% 60% / calc(var(--active) * 0.6 + 0.2)) inset,
    0 -1px 0 0 hsl(var(--btn-hue) 80% 20% / 0.5) inset;
  transform: scale(calc(1 + (var(--active) * 0.04)));
  transition: box-shadow var(--transition), transform var(--transition), background var(--transition), color var(--transition);
  transform-style: preserve-3d;
  perspective: 600px;
  overflow: hidden;
  user-select: none;
  vertical-align: middle;
}

.galaxy-btn:is(:hover, :focus-visible) {
  --active: 1;
  color: #ffffff;
}

.galaxy-btn:active {
  transform: scale(0.97);
}

/* Color Themes */
.galaxy-btn--ember {
  --btn-hue: 24; /* Warm Ember */
}

.galaxy-btn--cool {
  --btn-hue: 195; /* Cyan / Signal */
}

.galaxy-btn--cosmic {
  --btn-hue: 250; /* Indigo Galaxy */
}

/* Sizing Options */
.galaxy-btn--sm {
  font-size: 0.82rem;
  padding: 0.45em 0.95em;
}

.galaxy-btn--lg {
  font-size: 1.05rem;
  padding: 0.85em 1.75em;
}

/* Galaxy Internal Layers */
.galaxy-btn .spark {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  overflow: hidden;
  mask: linear-gradient(white, transparent 60%);
  -webkit-mask: linear-gradient(white, transparent 60%);
  animation: sparkFlip calc(var(--spark) * 2) infinite steps(2, end);
  pointer-events: none;
}

@keyframes sparkFlip {
  to { transform: rotate(360deg); }
}

.galaxy-btn .spark:before {
  content: "";
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  top: 0%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -15%) rotate(-90deg);
  opacity: calc((var(--active) * 0.7) + 0.35);
  background: conic-gradient(
    from 0deg,
    transparent 0 330deg,
    white 360deg
  );
  transition: opacity var(--transition);
  animation: sparkRotate var(--spark) linear infinite both;
}

@keyframes sparkRotate {
  to { transform: translate(-50%, -15%) rotate(90deg); }
}

.galaxy-btn .spark:after {
  content: "";
  position: absolute;
  inset: var(--cut);
  border-radius: 9999px;
}

.galaxy-btn .backdrop {
  position: absolute;
  inset: var(--cut);
  background: var(--bg);
  border-radius: 9999px;
  transition: background var(--transition);
  pointer-events: none;
}

.galaxy-btn .galaxy__container {
  position: absolute;
  inset: 0;
  opacity: calc(var(--active) * 0.9 + 0.15);
  transition: opacity var(--transition);
  mask: radial-gradient(circle at center, white 50%, transparent 95%);
  -webkit-mask: radial-gradient(circle at center, white 50%, transparent 95%);
  pointer-events: none;
}

.galaxy-btn .galaxy {
  position: absolute;
  width: 120%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  opacity: var(--active);
  transition: opacity var(--transition);
  pointer-events: none;
}

.galaxy-btn .galaxy__ring {
  height: 200%;
  width: 200%;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-28%, -40%) rotateX(-24deg) rotateY(-30deg) rotateX(90deg);
  transform-style: preserve-3d;
}

/* Particles / Stars */
.galaxy-btn .star {
  height: calc(var(--size, 3) * 1px);
  aspect-ratio: 1;
  background: white;
  border-radius: 50%;
  position: absolute;
  opacity: var(--alpha, 0.7);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(10deg) rotate(0deg) translateY(calc(var(--distance, 50) * 1px));
  animation: galaxyOrbit calc(var(--duration, 10) * 1s) calc(var(--delay, 0) * -1s) infinite linear;
}

@keyframes galaxyOrbit {
  to {
    transform: translate(-50%, -50%) rotate(10deg) rotate(360deg) translateY(calc(var(--distance, 50) * 1px));
  }
}

.galaxy-btn .star--static {
  animation: none;
  top: 50%;
  left: 50%;
  max-height: 3px;
  filter: brightness(3);
  opacity: 0.85;
  animation:
    starMoveX calc(var(--duration, 8) * 0.15s) calc(var(--delay, 0) * -0.1s) infinite linear,
    starMoveY calc(var(--duration, 8) * 0.25s) calc(var(--delay, 0) * -0.2s) infinite linear;
}

.galaxy-btn:hover .star--static {
  animation-play-state: paused;
}

@keyframes starMoveX {
  0%   { transform: translate(-40px, 0); }
  100% { transform: translate(40px, 0); }
}

@keyframes starMoveY {
  0%   { transform: translate(0, -20px); }
  100% { transform: translate(0, 20px); }
}

.galaxy-btn .galaxy-text {
  position: relative;
  z-index: 2;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .galaxy-btn .spark,
  .galaxy-btn .spark:before,
  .galaxy-btn .star,
  .galaxy-btn .star--static {
    animation: none !important;
  }
}

body.reduced-motion .galaxy-btn .spark,
body.reduced-motion .galaxy-btn .spark:before,
body.reduced-motion .galaxy-btn .star,
body.reduced-motion .galaxy-btn .star--static {
  animation: none !important;
}

/* ==========================================================================
   Interactive Alternating Timeline Component
   ========================================================================== */
.tl-container {
  max-width: 960px;
  margin: 36px auto;
  position: relative;
}

.main-timeline {
  position: relative;
  padding: 16px 0;
}

.main-timeline::after {
  content: "";
  position: absolute;
  width: 2px;
  background: linear-gradient(180deg, var(--ember) 0%, var(--signal) 50%, var(--accent) 100%);
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.tl-block {
  position: relative;
  width: 50%;
  padding-bottom: 28px;
}

.tl-block.left {
  left: 0;
  padding-right: 36px;
}

.tl-block.right {
  left: 50%;
  padding-left: 36px;
}

/* Central glowing node */
.tl-block::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--void);
  border: 3px solid var(--ember);
  box-shadow: 0 0 12px rgba(224, 90, 43, 0.6);
  top: 24px;
  border-radius: 50%;
  z-index: 3;
}

.tl-block.left::after {
  right: -8px;
}

.tl-block.right::after {
  left: -8px;
  border-color: var(--signal);
  box-shadow: 0 0 12px rgba(62, 143, 166, 0.6);
}

/* Pointer arrow */
.tl-block.left::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 24px;
  border-width: 10px 0 10px 12px;
  border-style: solid;
  border-color: transparent transparent transparent var(--line);
  z-index: 2;
}

.tl-block.right::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 24px;
  border-width: 10px 12px 10px 0;
  border-style: solid;
  border-color: transparent var(--line) transparent transparent;
  z-index: 2;
}

/* Timeline Card */
.tl-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.tl-card:hover {
  border-color: var(--ember-dim);
  background: var(--panel-2);
  transform: translateY(-3px);
}

.tl-block.right .tl-card:hover {
  border-color: var(--signal-dim);
}

.tl-img-container {
  width: 100%;
  height: 160px;
  position: relative;
  overflow: hidden;
  background: #101216;
}

.tl-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(60%) brightness(0.9);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.tl-card:hover .tl-img-container img {
  filter: saturate(100%) brightness(1);
  transform: scale(1.05);
}

.tl-card-body {
  padding: 16px 20px;
}

.tl-step-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
  background: rgba(224, 90, 43, 0.12);
  color: var(--ember);
  border: 1px solid rgba(224, 90, 43, 0.25);
}

.tl-block.right .tl-step-badge {
  background: rgba(62, 143, 166, 0.12);
  color: var(--signal);
  border-color: rgba(62, 143, 166, 0.25);
}

.tl-card h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.tl-card p {
  font-size: 0.88rem;
  color: var(--ink-dim);
  line-height: 1.5;
  margin: 0;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
  .main-timeline::after {
    left: 20px;
  }

  .tl-block {
    width: 100%;
    padding-left: 48px;
    padding-right: 0;
    left: 0 !important;
  }

  .tl-block.left::after,
  .tl-block.right::after {
    left: 12px;
    right: auto;
  }

  .tl-block.left::before,
  .tl-block.right::before {
    left: 36px;
    right: auto;
    border-width: 10px 12px 10px 0;
    border-color: transparent var(--line) transparent transparent;
  }
}

/* ==========================================================================
   3D Isometric Stacked Layers Component
   ========================================================================== */
.layers-visual-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 32px 0;
  padding: 26px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.layers-visual-head {
  text-align: center;
  margin-bottom: 18px;
}

.layers-visual-head h4 {
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 6px;
}

.layers-visual-head p {
  font-size: 0.86rem;
  color: var(--ink-dim);
  max-width: 54ch;
  margin: 0 auto;
}

.isometric-layers {
  width: 440px;
  max-width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.65));
}

.isometric-layers g.layer {
  transform: translate(var(--offset-x, 0px), var(--offset-y, 0px));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  animation: layerHover 4s ease-in-out infinite;
  cursor: pointer;
}

.isometric-layers g.layer:nth-of-type(1) { animation-delay: 0s; }
.isometric-layers g.layer:nth-of-type(2) { animation-delay: 0.4s; }
.isometric-layers g.layer:nth-of-type(3) { animation-delay: 0.8s; }
.isometric-layers g.layer:nth-of-type(4) { animation-delay: 1.2s; }

.isometric-layers g.layer:hover {
  transform: translate(var(--offset-x, 0px), calc(var(--offset-y, 0px) - 8px)) scale(1.03);
  filter: brightness(1.25);
}

.isometric-layers text {
  font-family: 'Space Grotesk', 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 6.5px;
  transform: skew(-68deg, 22deg) translate(calc(49px * var(--size, 100) / 100), calc(7px * var(--size, 100) / 100)) scaleY(0.5);
  fill: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.05em;
}

.isometric-layers .side-left {
  fill: rgba(0, 0, 0, 0.4);
}

.isometric-layers .side-right {
  fill: rgba(255, 255, 255, 0.22);
}

@keyframes layerHover {
  0%, 100% {
    transform: translate(var(--offset-x, 0px), var(--offset-y, 0px));
  }
  50% {
    transform: translate(var(--offset-x, 0px), calc(var(--offset-y, 0px) + 4px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .isometric-layers g.layer {
    animation: none !important;
  }
}

body.reduced-motion .isometric-layers g.layer {
  animation: none !important;
}

@media (max-width: 540px) {
  .layers-visual-wrap {
    padding: 20px 12px;
  }
  .isometric-layers {
    width: 100%;
    min-width: 260px;
  }
}

/* ==========================================================================
   Nature Garden & Breather Mode Component
   ========================================================================== */
.nature-garden-stage {
  position: relative;
  width: 100%;
  height: 380px;
  background: radial-gradient(circle at 50% 100%, rgba(72, 187, 120, 0.16) 0%, rgba(10, 14, 18, 0.98) 75%);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.9), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.night-sky-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at bottom, #091a14 0%, #050709 100%);
  z-index: 1;
}

/* Twinkling sky stars */
.sky-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 4px #ffffff;
  animation: starTwinkle 3s infinite ease-in-out alternate;
}
.star--1 { top: 18%; left: 15%; animation-delay: 0.2s; }
.star--2 { top: 12%; left: 45%; animation-delay: 1.1s; }
.star--3 { top: 25%; right: 20%; animation-delay: 0.7s; }
.star--4 { top: 32%; left: 28%; animation-delay: 1.8s; }
.star--5 { top: 15%; right: 40%; animation-delay: 2.3s; }
.star--6 { top: 8%; right: 12%; animation-delay: 1.4s; }

@keyframes starTwinkle {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.4); }
}

.flowers-stage {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 580px;
  z-index: 2;
  display: flex;
  justify-content: center;
}

/* Flower Stems */
.flower {
  position: absolute;
  bottom: 12px;
  transform-origin: bottom center;
  z-index: 3;
}

.flower--6 { left: 8%; transform: rotate(-22deg); }
.flower--4 { left: 22%; transform: rotate(-8deg); }
.flower--1 { left: 34%; transform: rotate(-14deg); }
.flower--2 { left: 50%; transform: translateX(-50%); z-index: 4; }
.flower--3 { right: 34%; transform: rotate(14deg); }
.flower--5 { right: 22%; transform: rotate(9deg); }
.flower--7 { right: 8%; transform: rotate(24deg); }

.flower__line {
  width: 3.5px;
  height: 0;
  background: linear-gradient(to top, #1c4532, #48bb78);
  border-radius: 4px;
  margin: 0 auto;
  position: relative;
  transition: height 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.flower--6 .flower__line { height: 140px; }
.flower--4 .flower__line { height: 190px; }
.flower--1 .flower__line { height: 235px; }
.flower--2 .flower__line { height: 280px; }
.flower--3 .flower__line { height: 225px; }
.flower--5 .flower__line { height: 185px; }
.flower--7 .flower__line { height: 135px; }

/* Flower Petals & Bloom */
.flower__leafs {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 54px;
  height: 54px;
  transition: transform 1.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.8s;
}

.nature-garden-stage.bloomed .flower__leafs {
  transform: translateX(-50%) scale(1);
}

.flower__leaf {
  position: absolute;
  width: 24px;
  height: 40px;
  border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
  opacity: 0.88;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
}

/* 1: Cyan / Electric Blue */
.flower__leafs--1 .flower__leaf {
  background: linear-gradient(to top, #00d2ff, #70e2ff);
}
/* 2: Hero Ember / Rose Pink */
.flower__leafs--2 .flower__leaf {
  background: linear-gradient(to top, #e05a2b, #ff76a5);
}
/* 3: Golden / Amber */
.flower__leafs--3 .flower__leaf {
  background: linear-gradient(to top, #d97706, #ffd166);
}
/* 4: Mint / Emerald */
.flower__leafs--4 .flower__leaf {
  background: linear-gradient(to top, #059669, #6ee7b7);
}
/* 5: Violet / Purple */
.flower__leafs--5 .flower__leaf {
  background: linear-gradient(to top, #7c3aed, #c084fc);
}
/* 6: Coral / Peach */
.flower__leafs--6 .flower__leaf {
  background: linear-gradient(to top, #ea580c, #fed7aa);
}
/* 7: Sky / Ice Blue */
.flower__leafs--7 .flower__leaf {
  background: linear-gradient(to top, #0284c7, #bae6fd);
}

.flower__leaf--1 { top: 0; left: 15px; transform: rotate(0deg); }
.flower__leaf--2 { top: 7px; left: 27px; transform: rotate(60deg); }
.flower__leaf--3 { top: 7px; left: 3px; transform: rotate(-60deg); }
.flower__leaf--4 { top: 16px; left: 15px; transform: rotate(180deg); }

.flower__white-circle {
  position: absolute;
  top: 16px;
  left: 19px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px #ffffff, 0 0 24px rgba(255, 255, 255, 0.8);
}

/* Ambient Floating Fireflies */
.flower__light {
  position: absolute;
  width: 4.5px;
  height: 4.5px;
  background: #ffeaa7;
  border-radius: 50%;
  box-shadow: 0 0 10px 3px #ffeaa7;
  animation: fireflyFloat 3.8s ease-in-out infinite alternate;
}

.flower__light--1 { top: -12px; left: 6px; animation-delay: 0.2s; }
.flower__light--2 { top: 18px; left: 38px; animation-delay: 0.8s; }
.flower__light--3 { top: -16px; left: 28px; animation-delay: 1.4s; }
.flower__light--4 { top: 28px; left: -6px; animation-delay: 2.1s; }

@keyframes fireflyFloat {
  0%   { transform: translate(0, 0) scale(0.8); opacity: 0.35; }
  100% { transform: translate(10px, -18px) scale(1.3); opacity: 1; }
}

/* Stem Leaves */
.flower__line__leaf {
  position: absolute;
  width: 18px;
  height: 9px;
  background: #48bb78;
  border-radius: 9px 0;
  box-shadow: 0 0 6px rgba(72, 187, 120, 0.4);
}

.flower__line__leaf--1 { top: 35%; left: 4px; transform: rotate(-25deg); }
.flower__line__leaf--2 { top: 55%; right: 4px; transform: rotate(25deg); border-radius: 0 9px; }
.flower__line__leaf--3 { top: 25%; right: 4px; transform: rotate(30deg); border-radius: 0 9px; }
.flower__line__leaf--4 { top: 75%; left: 4px; transform: rotate(-20deg); }

/* Ambient Lush Grass Layer */
.growing-grass {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 110px;
  z-index: 5;
  pointer-events: none;
}

.grass {
  position: absolute;
  bottom: 0;
  width: 2.5px;
  background: linear-gradient(to top, #143627, #48bb78);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
  animation: grassSway 3.2s ease-in-out infinite alternate;
}

.grass--1  { left: 3%;  height: 60px; transform: rotate(-14deg); animation-delay: 0.1s; }
.grass--2  { left: 8%;  height: 85px; transform: rotate(8deg);   animation-delay: 0.5s; width: 3px; background: linear-gradient(to top, #143627, #68d391); }
.grass--3  { left: 14%; height: 50px; transform: rotate(-8deg);  animation-delay: 0.9s; }
.grass--4  { left: 19%; height: 75px; transform: rotate(12deg);  animation-delay: 1.4s; }
.grass--5  { left: 26%; height: 95px; transform: rotate(-16deg); animation-delay: 0.3s; width: 3.5px; }
.grass--6  { left: 31%; height: 65px; transform: rotate(6deg);   animation-delay: 1.1s; }
.grass--7  { left: 37%; height: 90px; transform: rotate(-10deg); animation-delay: 1.8s; background: linear-gradient(to top, #143627, #68d391); }
.grass--8  { left: 43%; height: 55px; transform: rotate(14deg);  animation-delay: 0.6s; }
.grass--9  { left: 48%; height: 105px;transform: rotate(-6deg);  animation-delay: 1.3s; width: 3.5px; }
.grass--10 { left: 54%; height: 70px; transform: rotate(10deg);  animation-delay: 0.4s; }
.grass--11 { left: 60%; height: 95px; transform: rotate(-12deg); animation-delay: 1.7s; width: 3px; }
.grass--12 { left: 66%; height: 55px; transform: rotate(8deg);   animation-delay: 0.8s; }
.grass--13 { left: 72%; height: 90px; transform: rotate(-15deg); animation-delay: 1.2s; background: linear-gradient(to top, #143627, #68d391); }
.grass--14 { left: 78%; height: 65px; transform: rotate(11deg);  animation-delay: 0.2s; }
.grass--15 { left: 84%; height: 80px; transform: rotate(-9deg);  animation-delay: 1.5s; width: 3px; }
.grass--16 { left: 89%; height: 50px; transform: rotate(16deg);  animation-delay: 0.7s; }
.grass--17 { left: 94%; height: 85px; transform: rotate(-18deg); animation-delay: 1.9s; }
.grass--18 { left: 98%; height: 60px; transform: rotate(7deg);   animation-delay: 1.0s; }

@keyframes grassSway {
  0%   { transform: rotate(-10deg); }
  100% { transform: rotate(12deg); }
}

/* Layered Rolling Terrain Land */
.garden-land {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.land-mound {
  position: absolute;
  bottom: 0;
}

.mound--back {
  left: -10%;
  width: 120%;
  height: 46px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(to top, #040d0a 0%, #0d2c1f 80%, #1a4f38 100%);
  opacity: 0.9;
}

.mound--mid {
  left: -5%;
  width: 65%;
  height: 38px;
  border-radius: 65% 35% 0 0;
  background: linear-gradient(to top, #05130e 0%, #123d2b 85%, #276749 100%);
  box-shadow: 0 -2px 12px rgba(72, 187, 120, 0.2);
}

.mound--front {
  right: -5%;
  width: 60%;
  height: 34px;
  border-radius: 35% 65% 0 0;
  background: linear-gradient(to top, #061711 0%, #174b35 85%, #38a169 100%);
  box-shadow: 0 -2px 14px rgba(72, 187, 120, 0.25);
}

/* Global Breather Modal Overlay */
.nature-breather-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.nature-breather-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.nature-breather-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 12, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nature-breather-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 540px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
}

.nature-breather-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.nature-breather-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

.nature-breather-sub {
  font-size: 0.82rem;
  color: var(--ink-dim);
  margin: 2px 0 0;
}

.nature-breather-close {
  background: transparent;
  border: 0;
  color: var(--ink-dim);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0 8px;
  transition: color 0.2s ease;
}

.nature-breather-close:hover {
  color: var(--ink);
}

@media (max-width: 600px) {
  .nature-garden-stage {
    height: 320px;
  }
  .flowers-stage {
    transform: scale(0.85);
    transform-origin: bottom center;
  }
  .nature-breather-content {
    margin: 10px;
    max-height: 90vh;
  }
}

@media (max-width: 400px) {
  .nature-garden-stage {
    height: 290px;
  }
  .flowers-stage {
    transform: scale(0.72);
    transform-origin: bottom center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grass,
  .flower__light,
  .sky-star {
    animation: none !important;
  }
}

/* Studio architecture, shared accessibility and professional contact */
.studio-paths{padding:80px 0;background:linear-gradient(180deg,rgba(0,210,255,.025),transparent)}
.studio-path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.studio-path-grid>a{display:block;padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:transform .2s ease,border-color .2s ease}
.studio-path-grid>a:hover{transform:translateY(-4px);border-color:var(--signal)}
.studio-path-grid span{font:600 .76rem 'Work Sans',sans-serif;color:var(--signal);letter-spacing:.14em}.studio-path-grid h3{margin:12px 0 8px}.studio-path-grid p{color:var(--ink-dim)}
.insights-placeholder{border-top:1px solid var(--line)}
.contact-professional{display:grid;grid-template-columns:minmax(230px,.7fr) minmax(0,1fr);gap:clamp(30px,7vw,90px);align-items:start}.contact-professional aside{position:sticky;top:100px}.contact-professional aside h2{margin-bottom:12px}.contact-professional aside h3{margin:28px 0 8px}.contact-professional aside a{color:var(--signal)}.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.form-note{font-size:.8rem;color:var(--ink-dim);margin:12px 0}.form-row small{display:block;text-align:right;color:var(--ink-dim);margin-top:6px}
*:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
@media(max-width:760px){.studio-path-grid,.contact-professional{grid-template-columns:1fr}.contact-professional aside{position:static}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.studio-path-grid>a:hover{transform:none}}