:root{
  --bg1:#0b0b12;
  --fg:#f5f5f5;
  --muted:#c9ccda;
  --accent:#00e5ff;
  --accent2:#ff914d;
  --panel:rgba(15,15,30,.62);
  --line:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background:linear-gradient(135deg,var(--bg1) 0%,#121225 40%,#0f1826 100%);
  color:var(--fg);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* Shared JingleEngle header/nav */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  color:inherit;
  text-decoration:none;
}
.logo{
  height:clamp(52px,7vw,90px);
  width:auto;
  display:block;
}
.brand-text{
  display:none;
  font-weight:900;
  letter-spacing:.4px;
}
.site-nav{display:flex;align-items:center}
.site-nav ul{
  display:flex;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.site-nav a{
  color:#b8bfd8;
  font-weight:600;
  padding:10px 12px;
  border-radius:10px;
  position:relative;
  z-index:0;
  transition:color .3s;
  font-family:'Gruppo',sans-serif;
  font-size:1.6rem;
  text-decoration:none;
}
.site-nav a:hover{color:#fff}
.site-nav a::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:12px;
  padding:2px;
  z-index:-1;
  background:conic-gradient(from 0deg,var(--accent),var(--accent2),var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .2s;
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after{
  opacity:1;
  animation:spin 3s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.menu-btn{
  display:none;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:#151526;
  color:var(--fg);
  font-weight:700;
  font-family:'Gruppo',sans-serif;
  font-size:1.3rem;
  cursor:pointer;
}

@media (max-width:940px){
  .menu-btn{display:inline-flex}
  .site-nav ul{display:none}
  .site-nav[aria-expanded="true"] ul{
    display:flex;
    width:100%;
    padding:10px 0;
  }
  .nav{flex-wrap:wrap}
}

/* Shared hero */
.hero{
  min-height:38vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:126px 18px 28px;
  background:
    radial-gradient(circle at 8% 10%, rgba(255,145,77,.18), transparent 42%),
    radial-gradient(circle at 75% 65%, rgba(0,229,255,.12), transparent 48%),
    rgba(0,0,0,.35);
}
.title{
  font-family:'Unbounded',Inter,system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(38px,6vw,74px);
  margin:0;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.subtitle{
  max-width:840px;
  margin:14px auto 0;
  color:#c2c6d6;
  font-size:1.75rem;
  line-height:1.25;
  font-family:'Poiret One',cursive;
}

/* Home page */
.home-hero{
  min-height:100vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:126px 18px 48px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(255,145,77,.18), transparent 42%),
    radial-gradient(circle at 75% 65%, rgba(0,229,255,.12), transparent 48%),
    rgba(0,0,0,.35);
}
.home-hero > div{position:relative; z-index:1}
.home-title{
  font-size:clamp(36px,6.5vw,72px);
  margin:0;
  font-weight:900;
  font-family:'Unbounded',Inter,system-ui,sans-serif;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}
.home-subtitle{
  max-width:820px;
  margin:14px auto 26px;
  color:#c2c6d6;
  font-size:2rem;
  line-height:1.25;
  font-family:'Poiret One',cursive;
}
.btn-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  font-weight:800;
  background:linear-gradient(45deg,var(--accent),var(--accent2));
  color:#0b0b12;
  border:1px solid rgba(255,255,255,.1);
  font-family:'Gruppo',sans-serif;
  font-size:1.3rem;
}
.btn:hover{transform:translateY(-1px)}
.overlay{position:absolute;pointer-events:none;opacity:.78;z-index:0}
.overlay.texture1{top:16%;left:5%;width:clamp(260px,27vw,430px)}
.overlay.texture2{bottom:5%;right:6%;width:clamp(360px,34vw,560px)}

.about-section{
  max-width:1100px;
  margin:36px auto 0;
  padding:0 18px;
}
.about-card{
  border-radius:24px;
  padding:28px;
  background:var(--panel);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  display:grid;
  gap:22px;
  grid-template-columns:1.1fr .9fr;
  align-items:start;
}
.about-card h2{
  margin:0 0 10px;
  font-family:'Gruppo',sans-serif;
  font-size:3rem;
  line-height:1;
}
.about-card p{
  margin:0;
  color:#c2c6d6;
  line-height:1.65;
  font-size:1.05rem;
}
.about-tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.about-tags span{
  padding:8px 11px;
  border-radius:999px;
  background:linear-gradient(45deg,rgba(0,229,255,.15),rgba(255,145,77,.15));
  border:1px solid rgba(255,255,255,.08);
  color:#e7ebfb;
  font-family:'Gruppo',sans-serif;
  font-size:1.25rem;
}
@media (max-width:840px){
  .about-card{grid-template-columns:1fr}
  .overlay{opacity:.35}
}

/* Art page */
.construction-wrap{max-width:980px;margin:32px auto 0;padding:0 18px}
.construction-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:30px;
  background:var(--panel);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  text-align:center;
}
.construction-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:26px;
  padding:2px;
  z-index:0;
  background:conic-gradient(from 0deg,var(--accent),var(--accent2),var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.28;
  pointer-events:none;
}
.construction-card > *{position:relative;z-index:1}
.badge{
  display:inline-block;
  margin-bottom:14px;
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(45deg,var(--accent),var(--accent2));
  color:#0b0b12;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.86rem;
}
.construction-card h2{
  margin:0 0 12px;
  font-family:'Gruppo',sans-serif;
  font-size:clamp(2.4rem,5vw,4rem);
  line-height:1;
}
.construction-card p{margin:0 auto;max-width:760px;color:#c2c6d6;line-height:1.6;font-size:1.08rem}
.preview-list{
  margin:24px auto 0;
  max-width:720px;
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.preview-item{
  padding:14px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(255,145,77,.08));
  border:1px solid rgba(255,255,255,.08);
  color:#d9def0;
  font-family:'Gruppo',sans-serif;
  font-size:1.35rem;
}

/* Guitar hub */
.guitar-hero{
  min-height:32vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:112px 18px 24px;
  background:
    radial-gradient(circle at 8% 10%, rgba(255,145,77,.18), transparent 42%),
    radial-gradient(circle at 75% 65%, rgba(0,229,255,.12), transparent 48%),
    rgba(0,0,0,.35);
}
.tools{
  max-width:1100px;
  margin:30px auto 0;
  padding:0 18px;
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.tool-card{
  display:block;
  border-radius:16px;
  padding:18px;
  background:var(--panel);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  position:relative;
  overflow:hidden;
  min-height:170px;
}
.tool-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  padding:2px;
  z-index:0;
  background:conic-gradient(from 0deg,var(--accent),var(--accent2),var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.22;
  transition:opacity .25s;
}
.tool-card:hover::after{opacity:.6}
.tool-content{position:relative;z-index:1}
.tool-emoji{font-size:2.2rem;margin-bottom:8px}
.tool-title{font-family:'Gruppo',sans-serif;font-size:1.8rem;margin:0 0 6px;line-height:1}
.tool-desc{color:#c2c6d6;margin:0;line-height:1.5}

/* Content grids */
.music-grid,
.video-grid,
.social-grid{
  max-width:1280px;
  margin:24px auto 72px;
  padding:0 18px;
  display:grid;
  gap:22px;
}
.music-grid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.video-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.social-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); max-width:1180px}

.music-card,
.video-card,
.social-card{
  padding:16px;
  border-radius:18px;
  background:var(--panel);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  position:relative;
  overflow:hidden;
}
.music-card{min-height:360px}
.social-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  min-height:150px;
  padding:20px;
}
.music-card::after,
.video-card::after,
.social-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:20px;
  padding:2px;
  z-index:0;
  background:conic-gradient(from 0deg,var(--accent),var(--accent2),var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.14;
  transition:opacity .25s;
  pointer-events:none;
}
.music-card:hover::after,
.video-card:hover::after,
.social-card:hover::after{opacity:.44}
.music-card > *,
.video-card > *,
.social-card > *{position:relative;z-index:1}

.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.card-head h2,
.social-card h2{
  margin:0;
  font-family:'Gruppo',sans-serif;
  font-size:1.85rem;
  line-height:1;
}
.social-card h2{font-size:2rem;margin-bottom:8px}
.social-card p{margin:0;color:#c2c6d6;line-height:1.5}
.platform{
  flex:0 0 auto;
  color:#0b0b12;
  font-weight:800;
  font-size:.84rem;
  padding:6px 9px;
  border-radius:999px;
  background:linear-gradient(45deg,var(--accent),var(--accent2));
}
.media-wrap{
  width:100%;
  overflow:hidden;
  border-radius:14px;
  background:#090b14;
  border:1px solid rgba(255,255,255,.08);
}
.media-wrap.wide{aspect-ratio:16/9}
.media-wrap.soundcloud{height:360px}
.media-wrap iframe,
.video-wrap iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.video-wrap{
  position:relative;
  z-index:1;
  aspect-ratio:16/9;
  width:100%;
  overflow:hidden;
  border-radius:14px;
  background:#090b14;
}
.link-panel{
  min-height:170px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  padding:18px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(0,229,255,.10),rgba(255,145,77,.10));
  border:1px solid rgba(255,255,255,.1);
}
.link-icon,
.social-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:16px;
  font-size:2rem;
  background:rgba(0,0,0,.22);
}
.social-icon{
  width:48px;
  height:48px;
  font-size:1.8rem;
  background:linear-gradient(45deg,rgba(0,229,255,.16),rgba(255,145,77,.16));
}
.link-panel p{margin:0 0 10px;color:#c2c6d6}
.open-link,
.source-link{
  display:inline-block;
  margin-top:12px;
  color:#00e5ff;
  font-weight:700;
  font-size:.95rem;
}
.open-link{margin-top:0}

/* Contact */
.contact-wrap{max-width:980px;margin:32px auto 0;padding:0 18px}
.contact-card{
  border-radius:24px;
  padding:30px;
  background:var(--panel);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  text-align:center;
}
.contact-card h2{
  margin:0 0 12px;
  font-family:'Gruppo',sans-serif;
  font-size:clamp(2.4rem,5vw,4rem);
  line-height:1;
}
.contact-card p{margin:0 auto 20px;max-width:700px;color:#c2c6d6;line-height:1.6}
.contact-button{
  display:inline-block;
  padding:13px 18px;
  border-radius:12px;
  font-weight:900;
  background:linear-gradient(45deg,var(--accent),var(--accent2));
  color:#0b0b12;
}

/* Shared footer */
.site-footer{
  margin-top:70px;
  border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 15% 10%, rgba(0,229,255,.10), transparent 36%),
    radial-gradient(circle at 85% 85%, rgba(255,145,77,.10), transparent 40%),
    rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
  color:#cbd1e3;
}
.footer-inner{
  max-width:1180px;
  margin:0 auto;
  padding:34px 18px 22px;
  display:grid;
  gap:26px;
  grid-template-columns:1.35fr .8fr .9fr;
}
.footer-brand h2{
  margin:0 0 10px;
  font-family:'Unbounded',Inter,sans-serif;
  font-size:1.45rem;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.footer-brand p{
  margin:0;
  max-width:560px;
  line-height:1.6;
  color:#c2c6d6;
}
.footer-col h3{
  margin:0 0 12px;
  color:#f5f5f5;
  font-family:'Gruppo',sans-serif;
  font-size:1.55rem;
}
.footer-links{
  display:grid;
  gap:8px;
  padding:0;
  margin:0;
  list-style:none;
}
.footer-links a{
  color:#b8bfd8;
  transition:color .2s;
}
.footer-links a:hover{color:#fff}
.footer-note{
  border-top:1px solid rgba(255,255,255,.07);
  max-width:1180px;
  margin:0 auto;
  padding:16px 18px 20px;
  display:flex;
  gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
  color:#94a0bf;
  font-family:'Gruppo',sans-serif;
  font-size:1.1rem;
}
.footer-pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(45deg,rgba(0,229,255,.16),rgba(255,145,77,.16));
  border:1px solid rgba(255,255,255,.08);
  color:#dce4ff;
}
@media (max-width:760px){
  .footer-inner{grid-template-columns:1fr}
  .footer-note{display:block}
}

/* =========================================================
   JingleEngle ornamental pass
   Low-CPU: static gradients, borders, masks, and hover-only motion.
   ========================================================= */

/* A quiet cosmic/metallic texture over the whole site */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(0,229,255,.075) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 28%, rgba(255,145,77,.065) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 72%, rgba(255,255,255,.035) 0 1px, transparent 2px),
    linear-gradient(115deg, rgba(255,255,255,.018) 0 1px, transparent 1px 34px),
    linear-gradient(25deg, rgba(0,229,255,.025) 0 1px, transparent 1px 46px);
  background-size: 380px 380px, 520px 520px, 310px 310px, 36px 36px, 48px 48px;
  opacity:.78;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(70vw 42vh at 8% 12%, rgba(255,145,77,.105), transparent 62%),
    radial-gradient(58vw 50vh at 92% 22%, rgba(0,229,255,.10), transparent 62%),
    radial-gradient(55vw 55vh at 50% 115%, rgba(141,116,255,.055), transparent 65%);
}

/* Header: thin jeweled underline and soft glass lift */
.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.65), rgba(255,145,77,.65), transparent);
  opacity:.72;
}

.logo{
  filter:drop-shadow(0 0 10px rgba(0,229,255,.18)) drop-shadow(0 0 12px rgba(255,145,77,.10));
}

/* Hero frames: elegant, static corner ornamentation */
.hero,
.home-hero,
.guitar-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.hero > *,
.home-hero > *,
.guitar-hero > *{
  position:relative;
  z-index:2;
}

.hero::before,
.home-hero::before,
.guitar-hero::before{
  content:"";
  position:absolute;
  inset:18px;
  z-index:1;
  pointer-events:none;
  border-radius:28px;
  opacity:.32;
  background:
    linear-gradient(90deg, rgba(0,229,255,.75), transparent 18%, transparent 82%, rgba(255,145,77,.75)) top left / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,145,77,.65), transparent 18%, transparent 82%, rgba(0,229,255,.65)) bottom left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,.70), transparent 22%, transparent 78%, rgba(255,145,77,.70)) top left / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255,145,77,.70), transparent 22%, transparent 78%, rgba(0,229,255,.70)) top right / 1px 100% no-repeat;
}

.hero::after,
.home-hero::after,
.guitar-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 34%, rgba(0,229,255,.06), transparent 26%),
    radial-gradient(circle at 86% 68%, rgba(255,145,77,.07), transparent 30%),
    linear-gradient(90deg, rgba(0,0,0,.16), transparent 24%, transparent 76%, rgba(0,0,0,.16));
}

/* Ornamented title treatment */
.title,
.home-title{
  letter-spacing:-.035em;
  text-shadow:
    0 0 24px rgba(0,229,255,.10),
    0 0 24px rgba(255,145,77,.08);
}

.title::selection,
.home-title::selection{
  background:rgba(0,229,255,.22);
}

/* Section/callout panels get small corner glyphs without extra markup */
.about-card,
.construction-card,
.contact-card,
.music-card,
.video-card,
.social-card,
.tool-card{
  box-shadow:
    0 20px 50px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.about-card::before,
.construction-card::before,
.contact-card::before,
.music-card::before,
.video-card::before,
.social-card::before,
.tool-card::before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:0;
  pointer-events:none;
  border-radius:14px;
  opacity:.34;
  background:
    linear-gradient(90deg, rgba(0,229,255,.65), transparent 42px) top left / 90px 1px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,.65), transparent 42px) top left / 1px 90px no-repeat,
    linear-gradient(270deg, rgba(255,145,77,.65), transparent 42px) bottom right / 90px 1px no-repeat,
    linear-gradient(0deg, rgba(255,145,77,.65), transparent 42px) bottom right / 1px 90px no-repeat;
}

.about-card > *,
.construction-card > *,
.contact-card > *,
.music-card > *,
.video-card > *,
.social-card > *,
.tool-card > *{
  position:relative;
  z-index:1;
}

/* Card headings: a tiny engraved glint */
.card-head h2,
.social-card h2,
.tool-title,
.construction-card h2,
.contact-card h2,
.about-card h2{
  text-shadow:0 0 16px rgba(0,229,255,.08);
}

/* Media frames feel more crafted */
.media-wrap,
.video-wrap,
.link-panel{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 12px 30px rgba(0,0,0,.24);
}

.media-wrap::before,
.video-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 18%, transparent 82%, rgba(0,229,255,.08));
  opacity:.45;
  z-index:2;
}

/* Make sure overlays stay vivid on the landing page */
.overlay{
  filter:drop-shadow(0 0 18px rgba(0,229,255,.10)) drop-shadow(0 0 12px rgba(255,145,77,.10));
}

/* Buttons: richer but still clean */
.btn,
.contact-button{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 10px 26px rgba(0,0,0,.25),
    0 0 24px rgba(0,229,255,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}

.btn:hover,
.contact-button:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 14px 32px rgba(0,0,0,.34),
    0 0 28px rgba(255,145,77,.12);
}

/* Decorative separators on dense pages */
.music-grid::before,
.video-grid::before,
.social-grid::before,
.tools::before{
  content:"";
  grid-column:1/-1;
  height:1px;
  margin:0 8% 2px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.38), rgba(255,145,77,.38), transparent);
  opacity:.85;
}

/* Footer: polished lower edge */
.site-footer{
  position:relative;
  overflow:hidden;
}

.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(0,229,255,.09), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(255,145,77,.08), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 42px);
  background-size:auto, auto, 42px 42px;
}

.footer-inner,
.footer-note{
  position:relative;
  z-index:1;
}

/* Small screen: keep ornamentation lighter */
@media (max-width:760px){
  .hero::before,
  .home-hero::before,
  .guitar-hero::before{
    inset:10px;
    opacity:.22;
  }
  .about-card::before,
  .construction-card::before,
  .contact-card::before,
  .music-card::before,
  .video-card::before,
  .social-card::before,
  .tool-card::before{
    opacity:.22;
  }
}

/* =========================================================
   Ornamental update v2 — more visible, still low-CPU.
   Fixes previous background texture being hidden behind body background.
   ========================================================= */

body{
  position:relative;
  background:
    radial-gradient(1100px 760px at 8% 8%, rgba(0,229,255,.13), transparent 60%),
    radial-gradient(900px 700px at 94% 22%, rgba(255,145,77,.12), transparent 62%),
    radial-gradient(850px 700px at 50% 110%, rgba(155,116,255,.09), transparent 65%),
    linear-gradient(135deg,var(--bg1) 0%,#121225 40%,#0f1826 100%);
}

/* visible static texture layer */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.48;
  background:
    radial-gradient(circle at 12% 18%, rgba(0,229,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 28%, rgba(255,145,77,.14) 0 1px, transparent 2px),
    linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px),
    linear-gradient(25deg, rgba(0,229,255,.035) 0 1px, transparent 1px 46px);
  background-size: 220px 220px, 280px 280px, 36px 36px, 48px 48px;
}

/* page content above texture */
.site-header,
main,
.site-footer{
  position:relative;
  z-index:1;
}

/* subtle side rails */
main::before,
main::after{
  content:"";
  position:fixed;
  top:110px;
  bottom:22px;
  width:1px;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(0,229,255,.34), rgba(255,145,77,.30), transparent);
  opacity:.7;
}
main::before{left:18px}
main::after{right:18px}

/* hero ornamentation: intentionally more visible */
.hero::before,
.home-hero::before,
.guitar-hero::before{
  content:"";
  position:absolute;
  inset:22px;
  z-index:1;
  pointer-events:none;
  border-radius:32px;
  opacity:.75;
  background:
    linear-gradient(90deg, rgba(0,229,255,.92), transparent 20%, transparent 80%, rgba(255,145,77,.92)) top left / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,145,77,.80), transparent 20%, transparent 80%, rgba(0,229,255,.80)) bottom left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,.92), transparent 25%, transparent 75%, rgba(255,145,77,.92)) top left / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255,145,77,.92), transparent 25%, transparent 75%, rgba(0,229,255,.92)) top right / 1px 100% no-repeat;
}

.hero::after,
.home-hero::after,
.guitar-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 38%, rgba(0,229,255,.13), transparent 25%),
    radial-gradient(circle at 82% 64%, rgba(255,145,77,.14), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 24%, transparent 76%, rgba(0,0,0,.18));
}

/* decorative title underline, obvious but elegant */
.title,
.home-title{
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}

.title::after,
.home-title::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:0;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
  opacity:.82;
}

/* stronger card/panel corner ornaments */
.about-card::before,
.construction-card::before,
.contact-card::before,
.music-card::before,
.video-card::before,
.social-card::before,
.tool-card::before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:0;
  pointer-events:none;
  border-radius:14px;
  opacity:.72;
  background:
    linear-gradient(90deg, rgba(0,229,255,.95), transparent 54px) top left / 122px 1px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,.95), transparent 54px) top left / 1px 122px no-repeat,
    linear-gradient(270deg, rgba(255,145,77,.95), transparent 54px) bottom right / 122px 1px no-repeat,
    linear-gradient(0deg, rgba(255,145,77,.95), transparent 54px) bottom right / 1px 122px no-repeat;
}

.about-card,
.construction-card,
.contact-card,
.music-card,
.video-card,
.social-card,
.tool-card{
  box-shadow:
    0 22px 58px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 32px rgba(0,229,255,.035);
}

/* add a small ornamental dot to each content card */
.music-card::marker,
.video-card::marker{
  display:none;
}

.card-head::before,
.social-card::before,
.tool-content::before{
  filter:none;
}

.platform{
  box-shadow:0 0 18px rgba(0,229,255,.12);
}

/* media frames get a more visible jewel-glass edge */
.media-wrap,
.video-wrap,
.link-panel{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 35px rgba(0,229,255,.035),
    0 14px 32px rgba(0,0,0,.28);
}

/* footer top trim more visible */
.site-footer{
  box-shadow:0 -24px 60px rgba(0,0,0,.24);
}

.site-footer::after{
  content:"";
  position:absolute;
  left:4%;
  right:4%;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.65), rgba(255,145,77,.65), transparent);
  opacity:.9;
}

/* stronger home overlays without changing files */
.overlay{
  opacity:.9;
  filter:drop-shadow(0 0 26px rgba(0,229,255,.18)) drop-shadow(0 0 18px rgba(255,145,77,.16));
}

/* hover-only interaction, no constant animation */
.music-card:hover,
.video-card:hover,
.social-card:hover,
.tool-card:hover,
.about-card:hover,
.construction-card:hover,
.contact-card:hover{
  border-color:rgba(255,255,255,.22);
}

/* mobile: reduce rails, keep cards elegant */
@media (max-width:760px){
  main::before,
  main::after{display:none}
  .hero::before,
  .home-hero::before,
  .guitar-hero::before{inset:12px; opacity:.48}
  .about-card::before,
  .construction-card::before,
  .contact-card::before,
  .music-card::before,
  .video-card::before,
  .social-card::before,
  .tool-card::before{opacity:.48}
}

/* =========================================================
   Ornamental update v3 — header/footer filigree + more detail.
   Low-CPU: static CSS, no continuous JS animation.
   ========================================================= */

/* Header gains a layered ceremonial band */
.site-header{
  box-shadow:
    0 12px 34px rgba(0,0,0,.32),
    inset 0 -1px 0 rgba(255,255,255,.04);
}

.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 7% 50%, rgba(0,229,255,.13), transparent 24%),
    radial-gradient(circle at 93% 50%, rgba(255,145,77,.13), transparent 24%),
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 18%, transparent 82%, rgba(255,255,255,.035));
  opacity:.9;
}

.nav{
  position:relative;
}

.nav::before,
.nav::after{
  content:"";
  position:absolute;
  top:50%;
  width:clamp(54px,9vw,150px);
  height:22px;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.72;
}

.nav::before{
  left:120px;
  background:
    linear-gradient(90deg, rgba(0,229,255,.65), transparent) center / 100% 1px no-repeat,
    radial-gradient(circle at left center, rgba(0,229,255,.72) 0 2px, transparent 3px),
    radial-gradient(circle at 34px center, rgba(255,145,77,.45) 0 1.5px, transparent 3px);
}

.nav::after{
  right:18px;
  background:
    linear-gradient(270deg, rgba(255,145,77,.65), transparent) center / 100% 1px no-repeat,
    radial-gradient(circle at right center, rgba(255,145,77,.72) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 34px) center, rgba(0,229,255,.45) 0 1.5px, transparent 3px);
}

.brand{
  position:relative;
  padding:4px 8px 4px 0;
}

.brand::after{
  content:"";
  position:absolute;
  left:0;
  right:-12px;
  bottom:-4px;
  height:1px;
  background:linear-gradient(90deg, rgba(0,229,255,.72), rgba(255,145,77,.42), transparent);
  opacity:.55;
}

.logo{
  border-radius:14px;
}

/* Navigation links get a more jewel-like hover state */
.site-nav a{
  text-shadow:0 0 12px rgba(0,229,255,.08);
}

.site-nav a:hover{
  background:linear-gradient(135deg, rgba(0,229,255,.08), rgba(255,145,77,.07));
}

/* A small corner medallion inside the hero frames */
.hero .title::before,
.home-title::before,
.guitar-hero .title::before{
  content:"✦";
  position:absolute;
  left:50%;
  top:-34px;
  transform:translateX(-50%);
  font-family:serif;
  font-size:18px;
  line-height:1;
  -webkit-text-fill-color:initial;
  color:rgba(0,229,255,.82);
  text-shadow:0 0 14px rgba(0,229,255,.28), 0 0 22px rgba(255,145,77,.16);
}

.hero .title::before,
.guitar-hero .title::before{
  display:block;
}

/* Better title rail */
.title::after,
.home-title::after{
  box-shadow:
    0 0 14px rgba(0,229,255,.28),
    0 0 18px rgba(255,145,77,.16);
}

/* Add ornamental hairlines around main content areas */
.about-section,
.construction-wrap,
.contact-wrap,
.tools,
.music-grid,
.video-grid,
.social-grid{
  position:relative;
}

.about-section::before,
.construction-wrap::before,
.contact-wrap::before,
.tools::after,
.music-grid::after,
.video-grid::after,
.social-grid::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  height:1px;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(0,229,255,.18), rgba(255,145,77,.18), transparent);
  opacity:.9;
}

.about-section::before,
.construction-wrap::before,
.contact-wrap::before{
  top:-16px;
}

.tools::after,
.music-grid::after,
.video-grid::after,
.social-grid::after{
  bottom:-24px;
}

/* Cards get a slightly more handcrafted ornamental top glint */
.music-card,
.video-card,
.social-card,
.tool-card,
.about-card,
.construction-card,
.contact-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 22%),
    radial-gradient(circle at 12% 0%, rgba(0,229,255,.07), transparent 28%),
    radial-gradient(circle at 88% 100%, rgba(255,145,77,.07), transparent 32%),
    var(--panel);
}

.music-card::before,
.video-card::before,
.social-card::before,
.tool-card::before,
.about-card::before,
.construction-card::before,
.contact-card::before{
  background:
    linear-gradient(90deg, rgba(0,229,255,1), transparent 58px) top left / 132px 1px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,1), transparent 58px) top left / 1px 132px no-repeat,
    radial-gradient(circle at top left, rgba(0,229,255,.8) 0 2px, transparent 3px),
    linear-gradient(270deg, rgba(255,145,77,1), transparent 58px) bottom right / 132px 1px no-repeat,
    linear-gradient(0deg, rgba(255,145,77,1), transparent 58px) bottom right / 1px 132px no-repeat,
    radial-gradient(circle at bottom right, rgba(255,145,77,.8) 0 2px, transparent 3px);
}

/* Footer: make it feel like an ornamental base plate */
.site-footer{
  background:
    radial-gradient(circle at 10% 12%, rgba(0,229,255,.13), transparent 32%),
    radial-gradient(circle at 90% 88%, rgba(255,145,77,.13), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(143,112,255,.08), transparent 38%),
    linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.72));
}

.site-footer::before{
  opacity:1;
  background:
    linear-gradient(90deg, transparent, rgba(0,229,255,.12), transparent 22%, transparent 78%, rgba(255,145,77,.12), transparent),
    linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 42px),
    radial-gradient(circle at 18% 22%, rgba(0,229,255,.10), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(255,145,77,.10), transparent 38%);
  background-size:auto, 42px 42px, auto, auto;
}

.footer-inner{
  position:relative;
}

.footer-inner::before,
.footer-inner::after{
  content:"";
  position:absolute;
  top:26px;
  bottom:24px;
  width:1px;
  pointer-events:none;
  opacity:.55;
  background:linear-gradient(180deg, transparent, rgba(0,229,255,.5), rgba(255,145,77,.4), transparent);
}

.footer-inner::before{
  left:6px;
}

.footer-inner::after{
  right:6px;
}

.footer-brand h2{
  position:relative;
  display:inline-block;
  padding-bottom:8px;
}

.footer-brand h2::after{
  content:"";
  position:absolute;
  left:0;
  right:-34px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, var(--accent), var(--accent2), transparent);
  opacity:.85;
}

.footer-col{
  position:relative;
  padding-left:14px;
}

.footer-col::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  bottom:3px;
  width:1px;
  background:linear-gradient(180deg, rgba(0,229,255,.55), transparent 45%, rgba(255,145,77,.55));
  opacity:.65;
}

.footer-links li{
  position:relative;
}

.footer-links li::before{
  content:"";
  position:absolute;
  left:-11px;
  top:.72em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:linear-gradient(45deg,var(--accent),var(--accent2));
  opacity:.7;
}

.footer-note{
  background:linear-gradient(90deg, rgba(0,229,255,.04), transparent 36%, transparent 64%, rgba(255,145,77,.04));
}

/* Add elegant ornamental caps to the footer note line */
.footer-note::before,
.footer-note::after{
  content:"✧";
  color:rgba(0,229,255,.75);
  text-shadow:0 0 12px rgba(0,229,255,.25);
}

.footer-note::after{
  color:rgba(255,145,77,.75);
  text-shadow:0 0 12px rgba(255,145,77,.25);
}

/* Social/tool icons become more jewel-like */
.social-icon,
.tool-emoji,
.link-icon{
  filter:drop-shadow(0 0 10px rgba(0,229,255,.12));
}

.social-icon{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 10px 20px rgba(0,0,0,.20);
}

/* Responsive: tone down filigree crowding */
@media (max-width:940px){
  .nav::before,
  .nav::after{
    display:none;
  }
}

@media (max-width:760px){
  .footer-inner::before,
  .footer-inner::after,
  .footer-col::before,
  .footer-links li::before{
    display:none;
  }
  .footer-col{
    padding-left:0;
  }
  .hero .title::before,
  .home-title::before,
  .guitar-hero .title::before{
    top:-26px;
    font-size:15px;
  }
}

/* =========================================================
   Ornamental update v4 — maximal elegance, still low-CPU.
   Static CSS only: layered frames, filigree, medallions, trims.
   ========================================================= */

/* Richer page atmosphere: visible but calm */
body{
  background:
    radial-gradient(1200px 820px at 3% 4%, rgba(0,229,255,.16), transparent 58%),
    radial-gradient(980px 760px at 99% 18%, rgba(255,145,77,.15), transparent 60%),
    radial-gradient(820px 720px at 50% 112%, rgba(155,116,255,.11), transparent 64%),
    linear-gradient(135deg,var(--bg1) 0%,#121225 40%,#0f1826 100%);
}

/* Large, static ornamental mandala glows in the background */
body::before{
  opacity:.62;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(0,229,255,.055) 35px 36px, transparent 37px 72px, rgba(255,145,77,.045) 73px 74px, transparent 75px),
    radial-gradient(circle at 14% 20%, rgba(0,229,255,.20) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 28%, rgba(255,145,77,.16) 0 1px, transparent 2px),
    linear-gradient(115deg, rgba(255,255,255,.04) 0 1px, transparent 1px 34px),
    linear-gradient(25deg, rgba(0,229,255,.04) 0 1px, transparent 1px 46px);
  background-size: 520px 520px, 220px 220px, 280px 280px, 36px 36px, 48px 48px;
  background-position:center 120px, 0 0, 0 0, 0 0, 0 0;
}

/* Add faint ornamental top/bottom washes without animation */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,229,255,.06), transparent 16%, transparent 84%, rgba(255,145,77,.055)),
    radial-gradient(52vw 14vh at 50% 0%, rgba(255,255,255,.035), transparent 72%),
    radial-gradient(52vw 14vh at 50% 100%, rgba(255,255,255,.028), transparent 72%);
}

/* Header becomes a proper ornamental crown */
.site-header{
  background:
    radial-gradient(circle at 9% 50%, rgba(0,229,255,.16), transparent 28%),
    radial-gradient(circle at 91% 50%, rgba(255,145,77,.16), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.58));
}

.site-header::before{
  background:
    linear-gradient(90deg, transparent, rgba(0,229,255,.15), transparent 22%, transparent 78%, rgba(255,145,77,.15), transparent),
    repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.035) 25px 26px, transparent 26px 52px),
    radial-gradient(circle at 7% 50%, rgba(0,229,255,.15), transparent 24%),
    radial-gradient(circle at 93% 50%, rgba(255,145,77,.15), transparent 24%);
  opacity:1;
}

.site-header::after{
  height:2px;
  background:
    linear-gradient(90deg, transparent, rgba(0,229,255,.95), rgba(255,145,77,.95), transparent),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0 1px, transparent 2px);
  box-shadow:
    0 0 12px rgba(0,229,255,.28),
    0 0 12px rgba(255,145,77,.20);
}

/* Extra header ornaments */
.nav{
  min-height:74px;
}

.nav::before,
.nav::after{
  height:30px;
  opacity:.95;
}

.nav::before{
  left:116px;
  background:
    linear-gradient(90deg, rgba(0,229,255,.9), transparent) center / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,145,77,.38), transparent) 50% 8px / 70% 1px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.20), transparent) 50% 22px / 50% 1px no-repeat,
    radial-gradient(circle at left center, rgba(0,229,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 34px center, rgba(255,145,77,.65) 0 1.5px, transparent 3px),
    radial-gradient(circle at 68px center, rgba(255,255,255,.38) 0 1px, transparent 2px);
}

.nav::after{
  background:
    linear-gradient(270deg, rgba(255,145,77,.9), transparent) center / 100% 1px no-repeat,
    linear-gradient(270deg, rgba(0,229,255,.38), transparent) 50% 8px / 70% 1px no-repeat,
    linear-gradient(270deg, rgba(255,255,255,.20), transparent) 50% 22px / 50% 1px no-repeat,
    radial-gradient(circle at right center, rgba(255,145,77,.95) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 34px) center, rgba(0,229,255,.65) 0 1.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 68px) center, rgba(255,255,255,.38) 0 1px, transparent 2px);
}

.brand::before{
  content:"";
  position:absolute;
  inset:-4px -10px -4px -8px;
  border-radius:18px;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(0,229,255,.10), transparent 42%, rgba(255,145,77,.09));
  border:1px solid rgba(255,255,255,.055);
  opacity:.9;
}

.logo{
  position:relative;
  z-index:1;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 0 24px rgba(0,229,255,.14),
    0 0 28px rgba(255,145,77,.08);
}

/* Navigation gets small separators */
.site-nav li{
  position:relative;
}

.site-nav li + li::before{
  content:"";
  position:absolute;
  left:-10px;
  top:50%;
  width:3px;
  height:3px;
  border-radius:50%;
  background:linear-gradient(45deg,var(--accent),var(--accent2));
  opacity:.54;
  transform:translateY(-50%);
}

/* Hero: add inner medallion and stronger ceremonial corners */
.hero::before,
.home-hero::before,
.guitar-hero::before{
  inset:20px;
  opacity:.92;
  background:
    linear-gradient(90deg, rgba(0,229,255,1), transparent 20%, transparent 80%, rgba(255,145,77,1)) top left / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,145,77,.9), transparent 20%, transparent 80%, rgba(0,229,255,.9)) bottom left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,1), transparent 25%, transparent 75%, rgba(255,145,77,1)) top left / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255,145,77,1), transparent 25%, transparent 75%, rgba(0,229,255,1)) top right / 1px 100% no-repeat,
    radial-gradient(circle at top left, rgba(0,229,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at top right, rgba(255,145,77,.95) 0 2px, transparent 3px),
    radial-gradient(circle at bottom left, rgba(255,145,77,.75) 0 2px, transparent 3px),
    radial-gradient(circle at bottom right, rgba(0,229,255,.75) 0 2px, transparent 3px);
}

.hero::after,
.home-hero::after,
.guitar-hero::after{
  background:
    radial-gradient(circle at 50% 50%, transparent 0 92px, rgba(255,255,255,.03) 93px 94px, transparent 95px 150px, rgba(0,229,255,.035) 151px 152px, transparent 153px),
    radial-gradient(circle at 18% 38%, rgba(0,229,255,.145), transparent 25%),
    radial-gradient(circle at 82% 64%, rgba(255,145,77,.15), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 24%, transparent 76%, rgba(0,0,0,.18));
}

/* More elaborate title ornaments */
.title,
.home-title{
  padding-left:.18em;
  padding-right:.18em;
}

.title::before,
.home-title::before,
.guitar-hero .title::before{
  content:"✧";
  top:-40px;
  font-size:22px;
}

.title::after,
.home-title::after{
  left:6%;
  right:6%;
  height:2px;
  background:
    linear-gradient(90deg, transparent, var(--accent), rgba(255,255,255,.72), var(--accent2), transparent);
}

.subtitle{
  text-shadow:0 0 18px rgba(0,0,0,.22);
}

/* All major panels/cards get a second inner “etched” border */
.about-card,
.construction-card,
.contact-card,
.music-card,
.video-card,
.social-card,
.tool-card{
  border-color:rgba(255,255,255,.16);
}

.about-card::after,
.construction-card::after,
.contact-card::after,
.music-card::after,
.video-card::after,
.social-card::after,
.tool-card::after{
  opacity:.32;
}

/* Add internal diagonal faint engraving */
.about-card,
.construction-card,
.contact-card,
.music-card,
.video-card,
.social-card,
.tool-card{
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 18%, transparent 82%, rgba(255,255,255,.025)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 12% 0%, rgba(0,229,255,.075), transparent 28%),
    radial-gradient(circle at 88% 100%, rgba(255,145,77,.075), transparent 32%),
    var(--panel);
}

/* Jewel-like section separators */
.music-grid::before,
.video-grid::before,
.social-grid::before,
.tools::before{
  height:2px;
  margin:0 12% 4px;
  background:
    linear-gradient(90deg, transparent, rgba(0,229,255,.6), rgba(255,255,255,.25), rgba(255,145,77,.6), transparent);
  box-shadow:0 0 18px rgba(0,229,255,.12);
}

/* Footer: more architecture */
.site-footer{
  border-top:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 10% 12%, rgba(0,229,255,.16), transparent 32%),
    radial-gradient(circle at 90% 88%, rgba(255,145,77,.16), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(143,112,255,.10), transparent 38%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.76));
}

.site-footer::after{
  height:2px;
  left:2%;
  right:2%;
  background:
    linear-gradient(90deg, transparent, rgba(0,229,255,.85), rgba(255,255,255,.35), rgba(255,145,77,.85), transparent);
  box-shadow:
    0 0 16px rgba(0,229,255,.18),
    0 0 18px rgba(255,145,77,.14);
}

.footer-inner::before,
.footer-inner::after{
  opacity:.82;
  width:2px;
}

.footer-brand{
  position:relative;
}

.footer-brand::before{
  content:"✦";
  position:absolute;
  left:-2px;
  top:-20px;
  color:rgba(0,229,255,.78);
  text-shadow:0 0 14px rgba(0,229,255,.26);
}

.footer-brand::after{
  content:"";
  position:absolute;
  left:0;
  right:12%;
  bottom:-14px;
  height:1px;
  background:linear-gradient(90deg, rgba(0,229,255,.42), transparent);
  opacity:.8;
}

.footer-col h3{
  position:relative;
  display:inline-block;
}

.footer-col h3::after{
  content:"";
  position:absolute;
  left:0;
  right:-18px;
  bottom:-4px;
  height:1px;
  background:linear-gradient(90deg, rgba(255,145,77,.65), transparent);
}

.footer-pill{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 16px rgba(0,229,255,.08);
}

/* Home About block gets a subtle highlighted left edge */
.about-card{
  position:relative;
}

.about-card::marker{
  display:none;
}

.about-card{
  border-left:1px solid rgba(0,229,255,.32);
  border-right:1px solid rgba(255,145,77,.24);
}

/* Landing overlays become more intentional */
.overlay.texture1{
  transform:rotate(-2deg);
}

.overlay.texture2{
  transform:rotate(1.5deg);
}

/* More elegant hover on cards only; no constant animation */
.music-card:hover,
.video-card:hover,
.social-card:hover,
.tool-card:hover{
  transform:translateY(-1px);
}

.music-card,
.video-card,
.social-card,
.tool-card{
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

@media (max-width:760px){
  .site-nav li + li::before{display:none}
  .title::before,
  .home-title::before,
  .guitar-hero .title::before{
    top:-28px;
    font-size:16px;
  }
  .footer-brand::before,
  .footer-brand::after{
    display:none;
  }
}

/* =========================================================
   Ornamental update v5 — luminous inlay layer.
   Static CSS only: more detail, no continuous animation.
   ========================================================= */

/* Add a central "instrument rosette" atmosphere that remains subtle behind content */
body{
  background:
    radial-gradient(1300px 900px at 4% 4%, rgba(0,229,255,.18), transparent 58%),
    radial-gradient(1040px 800px at 98% 16%, rgba(255,145,77,.18), transparent 60%),
    radial-gradient(900px 760px at 50% 112%, rgba(155,116,255,.12), transparent 64%),
    radial-gradient(circle at 50% 18%, transparent 0 150px, rgba(255,255,255,.018) 151px 152px, transparent 153px 270px, rgba(0,229,255,.026) 271px 272px, transparent 273px),
    linear-gradient(135deg,var(--bg1) 0%,#121225 40%,#0f1826 100%);
}

/* Fine dotted star/rivet pattern, now more intentional */
body::before{
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(0,229,255,.07) 35px 36px, transparent 37px 72px, rgba(255,145,77,.055) 73px 74px, transparent 75px),
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.13) 0 1px, transparent 1.7px),
    radial-gradient(circle at 75% 75%, rgba(0,229,255,.13) 0 1px, transparent 1.8px),
    linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px),
    linear-gradient(25deg, rgba(255,145,77,.035) 0 1px, transparent 1px 46px);
  background-size: 520px 520px, 168px 168px, 210px 210px, 36px 36px, 48px 48px;
  opacity:.64;
}

/* Header: add top hairline and inner lower shelf */
.site-header{
  border-bottom-color:rgba(255,255,255,.12);
}

.site-header .nav::selection{
  background:rgba(0,229,255,.2);
}

.site-header::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,229,255,.06);
}

.site-header::after{
  bottom:0;
}

/* Make the logo sit in a subtle medallion */
.brand::before{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 22px rgba(0,229,255,.06);
}

.brand::after{
  right:-22px;
  background:
    linear-gradient(90deg, rgba(0,229,255,.85), rgba(255,145,77,.48), transparent),
    radial-gradient(circle at 72% 50%, rgba(255,255,255,.5) 0 1px, transparent 2px);
}

/* Nav links get static micro ornamentation even before hover */
.site-nav a{
  overflow:hidden;
}

.site-nav a::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:6px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.28), rgba(255,145,77,.24), transparent);
  opacity:.55;
  z-index:-1;
}

/* Main side rails gain tiny ornaments */
main::before,
main::after{
  width:2px;
  background:
    linear-gradient(180deg, transparent, rgba(0,229,255,.42), rgba(255,255,255,.18), rgba(255,145,77,.42), transparent);
  box-shadow:0 0 16px rgba(0,229,255,.08);
}

main::before{
  border-radius:999px;
}

main::after{
  border-radius:999px;
}

/* Hero gets inner corner ticks */
.hero,
.home-hero,
.guitar-hero{
  box-shadow:inset 0 0 120px rgba(0,0,0,.18);
}

.hero > div,
.home-hero > div,
.guitar-hero > div{
  max-width:1180px;
}

/* Add ornamental side ticks near titles */
.title,
.home-title{
  filter:drop-shadow(0 0 18px rgba(0,229,255,.10)) drop-shadow(0 0 16px rgba(255,145,77,.08));
}

.title::before,
.home-title::before,
.guitar-hero .title::before{
  text-shadow:
    0 0 14px rgba(0,229,255,.36),
    0 0 24px rgba(255,145,77,.18);
}

/* Give subtitles a subtle framed feel without boxing them */
.subtitle,
.home-subtitle{
  position:relative;
  display:inline-block;
}

.subtitle::before,
.subtitle::after,
.home-subtitle::before,
.home-subtitle::after{
  content:"";
  position:absolute;
  top:50%;
  width:42px;
  height:1px;
  pointer-events:none;
  opacity:.55;
}

.subtitle::before,
.home-subtitle::before{
  right:calc(100% + 16px);
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.65));
}

.subtitle::after,
.home-subtitle::after{
  left:calc(100% + 16px);
  background:linear-gradient(90deg, rgba(255,145,77,.65), transparent);
}

/* Cards: more detailed but still calm */
.music-card,
.video-card,
.social-card,
.tool-card,
.about-card,
.construction-card,
.contact-card{
  border-top-color:rgba(255,255,255,.22);
  box-shadow:
    0 24px 64px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 0 38px rgba(0,229,255,.04);
}

.music-card::before,
.video-card::before,
.social-card::before,
.tool-card::before,
.about-card::before,
.construction-card::before,
.contact-card::before{
  inset:9px;
  opacity:.88;
}

/* Add a little decorative top center dot in panels */
.card-head::after,
.construction-card h2::before,
.contact-card h2::before,
.about-card h2::before{
  content:"";
  display:block;
  width:44px;
  height:1px;
  margin:0 auto 10px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.70), rgba(255,145,77,.70), transparent);
  opacity:.72;
}

/* The card platform pills become small enamel plaques */
.platform,
.badge,
.footer-pill{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 22px rgba(0,229,255,.10),
    0 8px 16px rgba(0,0,0,.18);
}

/* Media players receive tiny screen bevels */
.media-wrap,
.video-wrap{
  position:relative;
}

.media-wrap::after,
.video-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 22px rgba(0,0,0,.22);
  z-index:3;
}

/* Footer v5: add middle seal line and richer columns */
.footer-inner{
  border-left:1px solid rgba(0,229,255,.12);
  border-right:1px solid rgba(255,145,77,.12);
}

.footer-brand p{
  border-left:1px solid rgba(0,229,255,.22);
  padding-left:14px;
}

.footer-links a{
  position:relative;
}

.footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-2px;
  height:1px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  transition:right .18s ease;
  opacity:.7;
}

.footer-links a:hover::after{
  right:0;
}

/* =========================================================
   Ornamental update v6 — final luxe pass.
   Adds layered frames, page-specific jewels, and a stronger footer.
   Still static/low-CPU.
   ========================================================= */

/* Page top and bottom ornamental aura */
.site-header + main{
  position:relative;
}

.site-header + main::before{
  content:"";
  position:absolute;
  left:50%;
  top:104px;
  width:min(680px,70vw);
  height:1px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(90deg, transparent, rgba(0,229,255,.52), rgba(255,255,255,.35), rgba(255,145,77,.52), transparent);
  box-shadow:0 0 24px rgba(0,229,255,.12);
}

/* More distinctive hero inner filigree */
.hero::before,
.home-hero::before,
.guitar-hero::before{
  background:
    linear-gradient(90deg, rgba(0,229,255,1), transparent 18%, transparent 82%, rgba(255,145,77,1)) top left / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,145,77,.95), transparent 18%, transparent 82%, rgba(0,229,255,.95)) bottom left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,1), transparent 23%, transparent 77%, rgba(255,145,77,1)) top left / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255,145,77,1), transparent 23%, transparent 77%, rgba(0,229,255,1)) top right / 1px 100% no-repeat,
    linear-gradient(135deg, rgba(0,229,255,.70), transparent 42px) top left / 140px 140px no-repeat,
    linear-gradient(225deg, rgba(255,145,77,.70), transparent 42px) top right / 140px 140px no-repeat,
    linear-gradient(45deg, rgba(255,145,77,.48), transparent 42px) bottom left / 140px 140px no-repeat,
    linear-gradient(315deg, rgba(0,229,255,.48), transparent 42px) bottom right / 140px 140px no-repeat,
    radial-gradient(circle at top left, rgba(0,229,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at top right, rgba(255,145,77,.95) 0 2px, transparent 3px),
    radial-gradient(circle at bottom left, rgba(255,145,77,.75) 0 2px, transparent 3px),
    radial-gradient(circle at bottom right, rgba(0,229,255,.75) 0 2px, transparent 3px);
}

/* Titles get side diamonds */
.title,
.home-title{
  --jewel-left: rgba(0,229,255,.86);
  --jewel-right: rgba(255,145,77,.86);
}

.title span,
.home-title span{
  display:inline;
}

/* Card grid becomes more ornate without adding elements */
.music-grid,
.video-grid,
.social-grid,
.tools{
  padding-top:12px;
}

.music-grid::before,
.video-grid::before,
.social-grid::before,
.tools::before{
  height:3px;
  border-radius:999px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.65) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent, rgba(0,229,255,.72), rgba(255,255,255,.28), rgba(255,145,77,.72), transparent);
}

/* Cards get inset ornamental corner dots */
.music-card,
.video-card,
.social-card,
.tool-card{
  background:
    radial-gradient(circle at 18px 18px, rgba(0,229,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), rgba(255,145,77,.18) 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 18%, transparent 82%, rgba(255,255,255,.025)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 12% 0%, rgba(0,229,255,.085), transparent 28%),
    radial-gradient(circle at 88% 100%, rgba(255,145,77,.085), transparent 32%),
    var(--panel);
}

/* Footer becomes a jeweled base */
.site-footer{
  margin-top:86px;
  border-top-color:rgba(255,255,255,.18);
  box-shadow:
    0 -30px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.site-footer::before{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 18%),
    radial-gradient(circle at 10% 12%, rgba(0,229,255,.18), transparent 32%),
    radial-gradient(circle at 90% 88%, rgba(255,145,77,.18), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(143,112,255,.12), transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.028) 34px 35px, transparent 35px 70px),
    linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, transparent 1px 42px);
}

.footer-inner{
  border-radius:22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 20%, transparent 80%, rgba(255,255,255,.018));
}

.footer-note{
  position:relative;
}

.footer-note span:first-child::before,
.footer-note span:last-child::after{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:42px;
  height:1px;
  margin:0 10px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.55), rgba(255,145,77,.55), transparent);
}

/* Contact/about/art panels feel like featured plaques */
.about-card,
.construction-card,
.contact-card{
  border-radius:28px;
  padding:32px;
}

/* Landing page: stronger composition around overlays */
.home-hero .overlay.texture1{
  top:14%;
  left:3%;
}

.home-hero .overlay.texture2{
  bottom:4%;
  right:4%;
}

/* Softer hover glow for links/buttons */
.btn:hover,
.contact-button:hover,
.source-link:hover,
.open-link:hover{
  filter:brightness(1.08);
}

/* Keep complexity reasonable on small screens */
@media (max-width:760px){
  .subtitle::before,
  .subtitle::after,
  .home-subtitle::before,
  .home-subtitle::after,
  .site-header + main::before,
  .footer-note span:first-child::before,
  .footer-note span:last-child::after{
    display:none;
  }
  body::before{
    opacity:.36;
  }
}

/* =========================================================
   Ornamental update v7 — contact page visibility + more finish.
   Static CSS only. Cache-busted as ornament7.
   ========================================================= */

/* Stronger global finishing details */
.site-header + main::after{
  content:"";
  position:absolute;
  left:50%;
  top:128px;
  width:min(420px,54vw);
  height:42px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:1;
  opacity:.42;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent, rgba(0,229,255,.20), transparent 48%, transparent 52%, rgba(255,145,77,.20), transparent);
  background-size:42px 42px, 100% 100%;
}

/* Header: stronger upper/lower filigree shelf */
.site-header{
  border-top:1px solid rgba(255,255,255,.06);
}

.site-header .nav{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.045), transparent 44%),
    linear-gradient(90deg, rgba(0,229,255,.035), transparent 24%, transparent 76%, rgba(255,145,77,.035));
  border-radius:0 0 18px 18px;
}

/* More visible nav separators on desktop */
@media (min-width:941px){
  .site-nav ul{
    align-items:center;
  }
  .site-nav li{
    padding-inline:1px;
  }
}

/* Footer: extra lower glow and central jewel */
.site-footer .footer-note{
  border-radius:18px 18px 0 0;
}

.site-footer .footer-note::before{
  margin-right:8px;
}

.site-footer .footer-note::after{
  margin-left:8px;
}

.site-footer::selection{
  background:rgba(0,229,255,.25);
}

/* =========================================================
   Contact page: make this very obviously updated.
   ========================================================= */

.contact-wrap{
  max-width:1120px;
  margin:34px auto 0;
  padding:0 18px;
}

.contact-card{
  text-align:left;
  display:grid;
  gap:24px;
  grid-template-columns:1.05fr .95fr;
  align-items:stretch;
  position:relative;
  overflow:hidden;
}

.contact-card::before{
  opacity:.95;
}

.contact-card::after{
  opacity:.42;
}

.contact-main{
  position:relative;
  z-index:1;
}

.contact-main h2{
  text-align:left;
}

.contact-main p{
  margin-left:0;
  margin-right:0;
}

.contact-button{
  margin-top:6px;
  position:relative;
  overflow:hidden;
}

.contact-button::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(110deg, transparent, rgba(255,255,255,.24), transparent);
  transform:translateX(-120%);
  transition:transform .28s ease;
}

.contact-button:hover::before{
  transform:translateX(120%);
}

.contact-details{
  position:relative;
  z-index:1;
  display:grid;
  gap:14px;
  align-content:start;
}

.contact-detail-card{
  border-radius:18px;
  padding:16px;
  background:
    linear-gradient(135deg, rgba(0,229,255,.075), transparent 48%, rgba(255,145,77,.075)),
    rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.105);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 26px rgba(0,0,0,.18);
}

.contact-detail-card h3{
  margin:0 0 7px;
  font-family:'Gruppo',sans-serif;
  font-size:1.65rem;
  line-height:1;
  color:#f5f5f5;
}

.contact-detail-card p{
  margin:0;
  color:#c2c6d6;
  line-height:1.5;
  font-size:1rem;
}

.contact-sparkline{
  height:1px;
  margin:16px 0;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.72), rgba(255,145,77,.72), transparent);
  box-shadow:0 0 14px rgba(0,229,255,.16);
}

.contact-tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.contact-tags span{
  padding:8px 11px;
  border-radius:999px;
  background:linear-gradient(45deg,rgba(0,229,255,.14),rgba(255,145,77,.14));
  border:1px solid rgba(255,255,255,.095);
  color:#e7ebfb;
  font-family:'Gruppo',sans-serif;
  font-size:1.22rem;
}

.contact-secondary-link{
  color:#00e5ff;
  font-weight:800;
}

.contact-secondary-link:hover{
  color:#fff;
}

/* Contact page gets a distinct hero jewel */
.contact-page .hero::before{
  inset:18px;
  opacity:1;
}

.contact-page .hero .title::before{
  content:"✉";
  font-family:Inter,system-ui,sans-serif;
  font-size:18px;
}

/* More jewel-like content panels across site */
.preview-item,
.about-tags span,
.contact-tags span{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 8px 18px rgba(0,0,0,.16);
}

/* Add small top glyphs to content pages */
.music-grid::after,
.video-grid::after,
.social-grid::after,
.tools::after{
  box-shadow:0 0 14px rgba(255,145,77,.10);
}

/* Elegant print-like side marks beside panels */
.about-card,
.construction-card,
.contact-card{
  outline:1px solid rgba(255,255,255,.035);
  outline-offset:5px;
}

/* More visible active hover on social and tool cards */
.social-card:hover .social-icon,
.tool-card:hover .tool-emoji{
  filter:
    drop-shadow(0 0 16px rgba(0,229,255,.26))
    drop-shadow(0 0 14px rgba(255,145,77,.18));
}

@media (max-width:820px){
  .contact-card{
    grid-template-columns:1fr;
    text-align:center;
  }
  .contact-main h2{
    text-align:center;
  }
  .contact-main p{
    margin-left:auto;
    margin-right:auto;
  }
  .contact-tags{
    justify-content:center;
  }
}

@media (max-width:760px){
  .site-header + main::after{
    display:none;
  }
}

/* =========================================================
   Ornamental update v8
   - Fixes index overlay orientation/layout
   - Adds more site-wide ornamentation without extra CPU load
   - Static CSS only
   ========================================================= */

/* INDEX ORIENTATION FIX */
.home-hero{
  min-height:100vh !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  padding:126px 18px 56px !important;
  position:relative !important;
  overflow:hidden !important;
}

.home-hero > div{
  position:relative !important;
  z-index:4 !important;
  max-width:1320px !important;
  transform:none !important;
}

.home-title{
  font-size:clamp(36px,6.5vw,72px) !important;
  margin:0 !important;
  line-height:1.06 !important;
}

.home-subtitle{
  max-width:820px !important;
  margin:16px auto 26px !important;
}

.home-hero .overlay{
  position:absolute !important;
  pointer-events:none !important;
  z-index:1 !important;
  opacity:.86 !important;
}

.home-hero .overlay.texture1{
  top:16% !important;
  left:5% !important;
  right:auto !important;
  bottom:auto !important;
  width:clamp(250px,26vw,430px) !important;
  transform:none !important;
}

.home-hero .overlay.texture2{
  right:5% !important;
  bottom:6% !important;
  left:auto !important;
  top:auto !important;
  width:clamp(340px,32vw,540px) !important;
  transform:none !important;
}

@media (max-width:900px){
  .home-hero .overlay.texture1{
    top:13% !important;
    left:-2% !important;
    width:clamp(190px,34vw,330px) !important;
    opacity:.48 !important;
  }
  .home-hero .overlay.texture2{
    right:-4% !important;
    bottom:2% !important;
    width:clamp(240px,44vw,420px) !important;
    opacity:.42 !important;
  }
}

/* Extra site ornamentation: outer page frame */
body{
  background:
    radial-gradient(1300px 900px at 4% 4%, rgba(0,229,255,.18), transparent 58%),
    radial-gradient(1040px 800px at 98% 16%, rgba(255,145,77,.18), transparent 60%),
    radial-gradient(900px 760px at 50% 112%, rgba(155,116,255,.12), transparent 64%),
    linear-gradient(135deg,var(--bg1) 0%,#121225 40%,#0f1826 100%);
}

body::selection{
  background:rgba(0,229,255,.22);
  color:#fff;
}

/* Fixed ornamental page corners */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,229,255,.55), transparent 70px) top 14px left 14px / 180px 1px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,.55), transparent 70px) top 14px left 14px / 1px 180px no-repeat,
    linear-gradient(270deg, rgba(255,145,77,.55), transparent 70px) top 14px right 14px / 180px 1px no-repeat,
    linear-gradient(180deg, rgba(255,145,77,.55), transparent 70px) top 14px right 14px / 1px 180px no-repeat,
    linear-gradient(90deg, rgba(255,145,77,.45), transparent 70px) bottom 14px left 14px / 180px 1px no-repeat,
    linear-gradient(0deg, rgba(255,145,77,.45), transparent 70px) bottom 14px left 14px / 1px 180px no-repeat,
    linear-gradient(270deg, rgba(0,229,255,.45), transparent 70px) bottom 14px right 14px / 180px 1px no-repeat,
    linear-gradient(0deg, rgba(0,229,255,.45), transparent 70px) bottom 14px right 14px / 1px 180px no-repeat,
    radial-gradient(70vw 42vh at 8% 12%, rgba(255,145,77,.08), transparent 62%),
    radial-gradient(58vw 50vh at 92% 22%, rgba(0,229,255,.08), transparent 62%);
}

/* Header: crown details, controlled */
.site-header{
  box-shadow:
    0 14px 36px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 -1px 0 rgba(0,229,255,.09);
}

.site-header .nav::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:min(520px,46vw);
  height:1px;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.42), rgba(255,255,255,.22), rgba(255,145,77,.42), transparent);
  opacity:.85;
}

/* More graceful nav link plates */
.site-nav a{
  border:1px solid transparent;
}

.site-nav a:hover{
  border-color:rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 18px rgba(0,229,255,.055);
}

/* Hero frames: stronger but not rearranging layout */
.hero,
.guitar-hero{
  position:relative;
  overflow:hidden;
}

.hero::before,
.guitar-hero::before,
.home-hero::before{
  opacity:.92 !important;
}

.hero .title,
.guitar-hero .title,
.home-title{
  z-index:4;
}

/* Add ornamental subtitle brackets */
.subtitle,
.home-subtitle{
  padding-inline:10px;
}

.subtitle::before,
.subtitle::after,
.home-subtitle::before,
.home-subtitle::after{
  opacity:.7;
}

/* Card and panel detail: small top-center jewel line */
.about-card,
.construction-card,
.contact-card,
.music-card,
.video-card,
.social-card,
.tool-card{
  position:relative;
}

.about-card > :first-child::before,
.construction-card > :first-child::before,
.contact-card > :first-child::before,
.music-card > :first-child::before,
.video-card > :first-child::before,
.social-card > :first-child::before,
.tool-card > :first-child::before{
  content:"";
  display:block;
  width:62px;
  height:1px;
  margin:0 auto 12px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.78), rgba(255,145,77,.78), transparent);
  opacity:.82;
}

/* More ornate footer, but controlled */
.site-footer{
  margin-top:88px;
  border-top-color:rgba(255,255,255,.2);
}

.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.09), transparent 18%),
    radial-gradient(circle at 10% 12%, rgba(0,229,255,.18), transparent 32%),
    radial-gradient(circle at 90% 88%, rgba(255,145,77,.18), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.026) 34px 35px, transparent 35px 70px);
}

.footer-inner{
  border-radius:22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 20%, transparent 80%, rgba(255,255,255,.02));
}

.footer-note{
  border-radius:18px 18px 0 0;
}

/* Add more polish to content cards */
.music-card,
.video-card,
.social-card,
.tool-card{
  border-top-color:rgba(255,255,255,.22);
}

.music-card:hover,
.video-card:hover,
.social-card:hover,
.tool-card:hover{
  box-shadow:
    0 28px 70px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.085),
    0 0 36px rgba(0,229,255,.06);
}

/* Contact cards still clearly updated */
.contact-card{
  outline:1px solid rgba(255,255,255,.05);
  outline-offset:6px;
}

/* Small screen: remove fixed corners so it doesn't get crowded */
@media (max-width:760px){
  body::after{
    background:
      radial-gradient(70vw 42vh at 8% 12%, rgba(255,145,77,.06), transparent 62%),
      radial-gradient(58vw 50vh at 92% 22%, rgba(0,229,255,.06), transparent 62%);
  }
  .site-header .nav::after{
    display:none;
  }
  .about-card > :first-child::before,
  .construction-card > :first-child::before,
  .contact-card > :first-child::before,
  .music-card > :first-child::before,
  .video-card > :first-child::before,
  .social-card > :first-child::before,
  .tool-card > :first-child::before{
    width:44px;
  }
}

/* =========================================================
   Ornamental restore + expansion v10
   Restores any softened/overridden ornamental layers and adds
   additional static filigree across the whole site.
   ========================================================= */

/* Make sure all pages sit above the decorative background layers */
.site-header,
main,
.site-footer{
  position:relative;
  z-index:2;
}

/* Restore the richer global atmosphere */
body{
  background:
    radial-gradient(1300px 900px at 4% 4%, rgba(0,229,255,.19), transparent 58%),
    radial-gradient(1040px 800px at 98% 16%, rgba(255,145,77,.19), transparent 60%),
    radial-gradient(900px 760px at 50% 112%, rgba(155,116,255,.13), transparent 64%),
    radial-gradient(circle at 50% 18%, transparent 0 150px, rgba(255,255,255,.022) 151px 152px, transparent 153px 270px, rgba(0,229,255,.032) 271px 272px, transparent 273px),
    linear-gradient(135deg,var(--bg1) 0%,#121225 40%,#0f1826 100%) !important;
}

/* Restore static rosette/star texture */
body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:.68 !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(0,229,255,.075) 35px 36px, transparent 37px 72px, rgba(255,145,77,.060) 73px 74px, transparent 75px),
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.14) 0 1px, transparent 1.7px),
    radial-gradient(circle at 75% 75%, rgba(0,229,255,.14) 0 1px, transparent 1.8px),
    radial-gradient(circle at 15% 80%, rgba(255,145,77,.10) 0 1px, transparent 2px),
    linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px),
    linear-gradient(25deg, rgba(255,145,77,.038) 0 1px, transparent 1px 46px);
  background-size: 520px 520px, 168px 168px, 210px 210px, 260px 260px, 36px 36px, 48px 48px;
  background-position:center 120px, 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* Restore and strengthen page-corner frame */
body::after{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  opacity:1 !important;
  background:
    linear-gradient(90deg, rgba(0,229,255,.72), transparent 78px) top 14px left 14px / 210px 1px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,.72), transparent 78px) top 14px left 14px / 1px 210px no-repeat,
    radial-gradient(circle at 14px 14px, rgba(0,229,255,.78) 0 2px, transparent 3px),

    linear-gradient(270deg, rgba(255,145,77,.72), transparent 78px) top 14px right 14px / 210px 1px no-repeat,
    linear-gradient(180deg, rgba(255,145,77,.72), transparent 78px) top 14px right 14px / 1px 210px no-repeat,
    radial-gradient(circle at calc(100% - 14px) 14px, rgba(255,145,77,.78) 0 2px, transparent 3px),

    linear-gradient(90deg, rgba(255,145,77,.55), transparent 78px) bottom 14px left 14px / 210px 1px no-repeat,
    linear-gradient(0deg, rgba(255,145,77,.55), transparent 78px) bottom 14px left 14px / 1px 210px no-repeat,
    radial-gradient(circle at 14px calc(100% - 14px), rgba(255,145,77,.62) 0 2px, transparent 3px),

    linear-gradient(270deg, rgba(0,229,255,.55), transparent 78px) bottom 14px right 14px / 210px 1px no-repeat,
    linear-gradient(0deg, rgba(0,229,255,.55), transparent 78px) bottom 14px right 14px / 1px 210px no-repeat,
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), rgba(0,229,255,.62) 0 2px, transparent 3px),

    radial-gradient(70vw 42vh at 8% 12%, rgba(255,145,77,.09), transparent 62%),
    radial-gradient(58vw 50vh at 92% 22%, rgba(0,229,255,.09), transparent 62%);
}

/* Header: restore crown/band ornamentation */
.site-header{
  background:
    radial-gradient(circle at 9% 50%, rgba(0,229,255,.18), transparent 28%),
    radial-gradient(circle at 91% 50%, rgba(255,145,77,.18), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.60)) !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,229,255,.10) !important;
}

.site-header::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:1 !important;
  background:
    linear-gradient(90deg, transparent, rgba(0,229,255,.16), transparent 22%, transparent 78%, rgba(255,145,77,.16), transparent),
    repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.036) 25px 26px, transparent 26px 52px),
    radial-gradient(circle at 7% 50%, rgba(0,229,255,.17), transparent 24%),
    radial-gradient(circle at 93% 50%, rgba(255,145,77,.17), transparent 24%) !important;
}

.site-header::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:2px !important;
  background:
    linear-gradient(90deg, transparent, rgba(0,229,255,.95), rgba(255,255,255,.38), rgba(255,145,77,.95), transparent),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0 1px, transparent 2px) !important;
  box-shadow:
    0 0 14px rgba(0,229,255,.28),
    0 0 14px rgba(255,145,77,.20) !important;
  opacity:1 !important;
}

.nav{
  min-height:74px;
  position:relative;
}

.nav::before,
.nav::after{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  width:clamp(54px,9vw,150px) !important;
  height:30px !important;
  transform:translateY(-50%) !important;
  pointer-events:none !important;
  opacity:.92 !important;
}

.nav::before{
  left:116px !important;
  background:
    linear-gradient(90deg, rgba(0,229,255,.9), transparent) center / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,145,77,.38), transparent) 50% 8px / 70% 1px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.20), transparent) 50% 22px / 50% 1px no-repeat,
    radial-gradient(circle at left center, rgba(0,229,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 34px center, rgba(255,145,77,.65) 0 1.5px, transparent 3px),
    radial-gradient(circle at 68px center, rgba(255,255,255,.38) 0 1px, transparent 2px) !important;
}

.nav::after{
  right:18px !important;
  left:auto !important;
  bottom:auto !important;
  width:clamp(54px,9vw,150px) !important;
  background:
    linear-gradient(270deg, rgba(255,145,77,.9), transparent) center / 100% 1px no-repeat,
    linear-gradient(270deg, rgba(0,229,255,.38), transparent) 50% 8px / 70% 1px no-repeat,
    linear-gradient(270deg, rgba(255,255,255,.20), transparent) 50% 22px / 50% 1px no-repeat,
    radial-gradient(circle at right center, rgba(255,145,77,.95) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 34px) center, rgba(0,229,255,.65) 0 1.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 68px) center, rgba(255,255,255,.38) 0 1px, transparent 2px) !important;
}

/* Add a centered header inlay without clobbering side ornaments */
.site-nav::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:7px;
  width:min(480px,42vw);
  height:1px;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.42), rgba(255,255,255,.22), rgba(255,145,77,.42), transparent);
  opacity:.85;
}

.brand::before{
  content:"" !important;
  position:absolute !important;
  inset:-4px -10px -4px -8px !important;
  border-radius:18px !important;
  pointer-events:none !important;
  background:
    linear-gradient(135deg, rgba(0,229,255,.11), transparent 42%, rgba(255,145,77,.10)) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 0 22px rgba(0,229,255,.07) !important;
  opacity:.95 !important;
}

/* Hero frames and title medallions */
.hero::before,
.home-hero::before,
.guitar-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:20px !important;
  z-index:1 !important;
  pointer-events:none !important;
  border-radius:32px !important;
  opacity:.94 !important;
  background:
    linear-gradient(90deg, rgba(0,229,255,1), transparent 18%, transparent 82%, rgba(255,145,77,1)) top left / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,145,77,.95), transparent 18%, transparent 82%, rgba(0,229,255,.95)) bottom left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,1), transparent 23%, transparent 77%, rgba(255,145,77,1)) top left / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255,145,77,1), transparent 23%, transparent 77%, rgba(0,229,255,1)) top right / 1px 100% no-repeat,
    linear-gradient(135deg, rgba(0,229,255,.70), transparent 42px) top left / 140px 140px no-repeat,
    linear-gradient(225deg, rgba(255,145,77,.70), transparent 42px) top right / 140px 140px no-repeat,
    linear-gradient(45deg, rgba(255,145,77,.48), transparent 42px) bottom left / 140px 140px no-repeat,
    linear-gradient(315deg, rgba(0,229,255,.48), transparent 42px) bottom right / 140px 140px no-repeat,
    radial-gradient(circle at top left, rgba(0,229,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at top right, rgba(255,145,77,.95) 0 2px, transparent 3px),
    radial-gradient(circle at bottom left, rgba(255,145,77,.75) 0 2px, transparent 3px),
    radial-gradient(circle at bottom right, rgba(0,229,255,.75) 0 2px, transparent 3px) !important;
}

.hero::after,
.home-hero::after,
.guitar-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 92px, rgba(255,255,255,.035) 93px 94px, transparent 95px 150px, rgba(0,229,255,.04) 151px 152px, transparent 153px),
    radial-gradient(circle at 18% 38%, rgba(0,229,255,.15), transparent 25%),
    radial-gradient(circle at 82% 64%, rgba(255,145,77,.155), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 24%, transparent 76%, rgba(0,0,0,.18)) !important;
}

/* Keep index fixed and composed */
.home-hero{
  min-height:100vh !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  padding:126px 18px 56px !important;
  position:relative !important;
  overflow:hidden !important;
}

.home-hero > div{
  position:relative !important;
  z-index:4 !important;
  max-width:1320px !important;
  transform:none !important;
}

.home-title{
  font-size:clamp(36px,6.5vw,72px) !important;
  margin:0 !important;
  line-height:1.06 !important;
}

.home-subtitle{
  max-width:820px !important;
  margin:16px auto 26px !important;
}

.home-hero .overlay{
  position:absolute !important;
  pointer-events:none !important;
  z-index:1 !important;
  opacity:.86 !important;
}

.home-hero .overlay.texture1{
  top:16% !important;
  left:5% !important;
  right:auto !important;
  bottom:auto !important;
  width:clamp(250px,26vw,430px) !important;
  transform:none !important;
}

.home-hero .overlay.texture2{
  right:5% !important;
  bottom:6% !important;
  left:auto !important;
  top:auto !important;
  width:clamp(340px,32vw,540px) !important;
  transform:none !important;
}

/* Title ornaments */
.title,
.home-title{
  position:relative !important;
  display:inline-block !important;
  padding-left:.18em !important;
  padding-right:.18em !important;
  padding-bottom:10px !important;
  filter:
    drop-shadow(0 0 18px rgba(0,229,255,.10))
    drop-shadow(0 0 16px rgba(255,145,77,.08)) !important;
}

.title::before,
.home-title::before,
.guitar-hero .title::before{
  content:"✧" !important;
  position:absolute !important;
  left:50% !important;
  top:-40px !important;
  transform:translateX(-50%) !important;
  font-family:serif !important;
  font-size:22px !important;
  line-height:1 !important;
  -webkit-text-fill-color:initial !important;
  color:rgba(0,229,255,.86) !important;
  text-shadow:
    0 0 14px rgba(0,229,255,.36),
    0 0 24px rgba(255,145,77,.18) !important;
}

.title::after,
.home-title::after{
  content:"" !important;
  position:absolute !important;
  left:6% !important;
  right:6% !important;
  bottom:0 !important;
  height:2px !important;
  border-radius:99px !important;
  background:
    linear-gradient(90deg, transparent, var(--accent), rgba(255,255,255,.72), var(--accent2), transparent) !important;
  box-shadow:
    0 0 14px rgba(0,229,255,.28),
    0 0 18px rgba(255,145,77,.16) !important;
}

/* Subtitle side rails */
.subtitle,
.home-subtitle{
  position:relative !important;
  display:inline-block !important;
  padding-inline:10px !important;
}

.subtitle::before,
.subtitle::after,
.home-subtitle::before,
.home-subtitle::after{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  width:42px !important;
  height:1px !important;
  pointer-events:none !important;
  opacity:.70 !important;
}

.subtitle::before,
.home-subtitle::before{
  right:calc(100% + 16px) !important;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.65)) !important;
}

.subtitle::after,
.home-subtitle::after{
  left:calc(100% + 16px) !important;
  background:linear-gradient(90deg, rgba(255,145,77,.65), transparent) !important;
}

/* Restore/expand card inlays */
.about-card,
.construction-card,
.contact-card,
.music-card,
.video-card,
.social-card,
.tool-card{
  border-top-color:rgba(255,255,255,.24) !important;
  border-color:rgba(255,255,255,.16) !important;
  background:
    radial-gradient(circle at 18px 18px, rgba(0,229,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), rgba(255,145,77,.18) 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 18%, transparent 82%, rgba(255,255,255,.028)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 12% 0%, rgba(0,229,255,.085), transparent 28%),
    radial-gradient(circle at 88% 100%, rgba(255,145,77,.085), transparent 32%),
    var(--panel) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 0 38px rgba(0,229,255,.04) !important;
}

/* Restore corner ornaments on cards */
.music-card::before,
.video-card::before,
.social-card::before,
.tool-card::before,
.about-card::before,
.construction-card::before,
.contact-card::before{
  content:"" !important;
  position:absolute !important;
  inset:9px !important;
  z-index:0 !important;
  pointer-events:none !important;
  border-radius:14px !important;
  opacity:.88 !important;
  background:
    linear-gradient(90deg, rgba(0,229,255,1), transparent 58px) top left / 132px 1px no-repeat,
    linear-gradient(180deg, rgba(0,229,255,1), transparent 58px) top left / 1px 132px no-repeat,
    radial-gradient(circle at top left, rgba(0,229,255,.8) 0 2px, transparent 3px),
    linear-gradient(270deg, rgba(255,145,77,1), transparent 58px) bottom right / 132px 1px no-repeat,
    linear-gradient(0deg, rgba(255,145,77,1), transparent 58px) bottom right / 1px 132px no-repeat,
    radial-gradient(circle at bottom right, rgba(255,145,77,.8) 0 2px, transparent 3px) !important;
}

.about-card > *,
.construction-card > *,
.contact-card > *,
.music-card > *,
.video-card > *,
.social-card > *,
.tool-card > *{
  position:relative !important;
  z-index:1 !important;
}

/* Top jewel line on panels */
.about-card > :first-child::before,
.construction-card > :first-child::before,
.contact-card > :first-child::before,
.music-card > :first-child::before,
.video-card > :first-child::before,
.social-card > :first-child::before,
.tool-card > :first-child::before{
  content:"" !important;
  display:block !important;
  width:62px !important;
  height:1px !important;
  margin:0 auto 12px !important;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.78), rgba(255,145,77,.78), transparent) !important;
  opacity:.82 !important;
}

/* Grid separators */
.music-grid::before,
.video-grid::before,
.social-grid::before,
.tools::before{
  content:"" !important;
  grid-column:1/-1 !important;
  height:3px !important;
  margin:0 12% 4px !important;
  border-radius:999px !important;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.65) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent, rgba(0,229,255,.72), rgba(255,255,255,.28), rgba(255,145,77,.72), transparent) !important;
  box-shadow:0 0 18px rgba(0,229,255,.12) !important;
  opacity:1 !important;
}

.music-grid::after,
.video-grid::after,
.social-grid::after,
.tools::after{
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  bottom:-24px !important;
  height:1px !important;
  pointer-events:none !important;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.18), rgba(255,145,77,.18), transparent) !important;
  opacity:.9 !important;
  box-shadow:0 0 14px rgba(255,145,77,.10) !important;
}

/* Footer architecture restored and expanded */
.site-footer{
  margin-top:88px !important;
  position:relative !important;
  overflow:hidden !important;
  border-top:1px solid rgba(255,255,255,.20) !important;
  background:
    radial-gradient(circle at 10% 12%, rgba(0,229,255,.18), transparent 32%),
    radial-gradient(circle at 90% 88%, rgba(255,145,77,.18), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(143,112,255,.12), transparent 38%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.76)) !important;
  box-shadow:
    0 -30px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.site-footer::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:1 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.09), transparent 18%),
    radial-gradient(circle at 10% 12%, rgba(0,229,255,.18), transparent 32%),
    radial-gradient(circle at 90% 88%, rgba(255,145,77,.18), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.026) 34px 35px, transparent 35px 70px) !important;
}

.site-footer::after{
  content:"" !important;
  position:absolute !important;
  left:2% !important;
  right:2% !important;
  top:0 !important;
  height:2px !important;
  background:
    linear-gradient(90deg, transparent, rgba(0,229,255,.85), rgba(255,255,255,.35), rgba(255,145,77,.85), transparent) !important;
  box-shadow:
    0 0 16px rgba(0,229,255,.18),
    0 0 18px rgba(255,145,77,.14) !important;
}

.footer-inner{
  position:relative !important;
  z-index:1 !important;
  border-radius:22px !important;
  border-left:1px solid rgba(0,229,255,.12) !important;
  border-right:1px solid rgba(255,145,77,.12) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 20%, transparent 80%, rgba(255,255,255,.02)) !important;
}

.footer-inner::before,
.footer-inner::after{
  content:"" !important;
  position:absolute !important;
  top:26px !important;
  bottom:24px !important;
  width:2px !important;
  pointer-events:none !important;
  opacity:.82 !important;
  background:linear-gradient(180deg, transparent, rgba(0,229,255,.5), rgba(255,145,77,.4), transparent) !important;
}

.footer-inner::before{left:6px !important}
.footer-inner::after{right:6px !important}

.footer-note{
  position:relative !important;
  z-index:1 !important;
  border-radius:18px 18px 0 0 !important;
  background:linear-gradient(90deg, rgba(0,229,255,.04), transparent 36%, transparent 64%, rgba(255,145,77,.04)) !important;
}

/* Extra footer flourish */
.footer-brand h2::after,
.footer-col h3::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:-34px !important;
  bottom:-4px !important;
  height:1px !important;
  background:linear-gradient(90deg, var(--accent), var(--accent2), transparent) !important;
  opacity:.85 !important;
}

/* Contact page still uses obvious updated styling */
.contact-card{
  outline:1px solid rgba(255,255,255,.05) !important;
  outline-offset:6px !important;
}

/* Mobile control */
@media (max-width:940px){
  .nav::before,
  .nav::after,
  .site-nav::before{
    display:none !important;
  }
}

@media (max-width:760px){
  body::after{
    background:
      radial-gradient(70vw 42vh at 8% 12%, rgba(255,145,77,.06), transparent 62%),
      radial-gradient(58vw 50vh at 92% 22%, rgba(0,229,255,.06), transparent 62%) !important;
  }
  .subtitle::before,
  .subtitle::after,
  .home-subtitle::before,
  .home-subtitle::after{
    display:none !important;
  }
  .title::before,
  .home-title::before,
  .guitar-hero .title::before{
    top:-28px !important;
    font-size:16px !important;
  }
  .footer-inner::before,
  .footer-inner::after{
    display:none !important;
  }
  .home-hero .overlay.texture1{
    top:13% !important;
    left:-2% !important;
    width:clamp(190px,34vw,330px) !important;
    opacity:.48 !important;
  }
  .home-hero .overlay.texture2{
    right:-4% !important;
    bottom:2% !important;
    width:clamp(240px,44vw,420px) !important;
    opacity:.42 !important;
  }
}