@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg-a:#e7fbff;
  --bg-b:#d7e7ff;
  --ink:#0b1432;
  --ink-soft:#394773;
  --panel:#f4f9ffcc;
  --panel-strong:#ffffffee;
  --accent:#0df2c9;
  --accent-2:#1f6bff;
  --accent-3:#ff5ad8;
  --line:#9db5ff;
  --shadow:0 14px 34px rgba(17,33,87,0.2);
  --radius:14px;
  --max-width:1160px;
}

*{box-sizing:border-box}

.skip-link{
  position:absolute;
  left:1rem;
  top:-48px;
  z-index:10000;
  padding:.45rem .7rem;
  border:1px solid #18c7a8;
  border-radius:8px;
  background:#e7fff8;
  color:#053129;
  text-decoration:none;
  font-size:.86rem;
  transition:top .15s ease;
}

.skip-link:focus{top:.7rem}

body{
  margin:0;
  color:var(--ink);
  font-family:'Space Mono','Trebuchet MS',sans-serif;
  line-height:1.5;
  background:
    radial-gradient(circle at 8% 12%, rgba(13,242,201,0.26) 0 14%, transparent 42%),
    radial-gradient(circle at 92% 8%, rgba(255,90,216,0.22) 0 12%, transparent 40%),
    linear-gradient(145deg, var(--bg-a) 0%, var(--bg-b) 100%);
  min-height:100vh;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size:32px 32px;
  opacity:.24;
}

.personal-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  padding:1rem;
  overflow:hidden;
  opacity:.13;
}

.personal-bg-column{
  display:flex;
  flex-direction:column;
  gap:1rem;
  width:min(19vw, 250px);
  min-width:150px;
  animation:personalBgScroll 75s linear infinite;
}

.personal-bg-column img{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(157,181,255,0.45);
  box-shadow:0 12px 22px rgba(17,33,87,0.18);
  object-fit:cover;
}

.personal-bg-column-a{animation-duration:82s}
.personal-bg-column-b{animation-duration:92s}

.site-header,
main,
.back-to-top-wrap,
.site-footer{
  position:relative;
  z-index:1;
}

@keyframes personalBgScroll{
  from{transform:translateY(0)}
  to{transform:translateY(-50%)}
}

.container{max-width:var(--max-width);margin:0 auto;padding:1rem}

.site-header{
  margin:1rem auto;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(120deg, #f7f9ff 0%, #e6f5ff 60%, #f3e9ff 100%);
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
}

.brand{
  margin:0;
  padding:1rem 0;
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-family:'Audiowide','Trebuchet MS',sans-serif;
  letter-spacing:.05em;
}

.brand-link{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  color:inherit;
  text-decoration:none;
}

.brand-link:hover{color:inherit}

.brand-logo{width:38px;height:38px;object-fit:contain;display:inline-block}

.nav{list-style:none;margin:0;padding:0;display:flex;gap:.8rem;flex-wrap:wrap}
.nav a{
  color:var(--ink);
  text-decoration:none;
  padding:.35rem .7rem;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  transition:all .2s ease;
}
.nav a:hover{
  border-color:var(--accent-2);
  background:#edf3ff;
  box-shadow:0 0 0 2px rgba(31,107,255,0.1) inset;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:2px;
}

.nav a[aria-current="page"]{
  border-color:#18c7a8;
  background:linear-gradient(120deg, var(--accent) 0%, #79ffd7 45%, #e6fff8 100%);
  color:#053129;
  box-shadow:0 0 0 2px rgba(24,199,168,0.12) inset;
}

.intro{
  position:relative;
  overflow:hidden;
  display:flex;
  gap:1rem;
  align-items:center;
  margin:1rem auto;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 18% 18%, rgba(13,242,201,0.24) 0, transparent 32%),
    radial-gradient(circle at 88% 30%, rgba(255,90,216,0.16) 0, transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(233,243,255,0.88) 50%, rgba(245,237,255,0.86) 100%);
  box-shadow:var(--shadow);
}

.intro::before,
.intro::after{
  content:'';
  position:absolute;
  pointer-events:none;
}

.intro::before{
  inset:auto -60px -70px auto;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(31,107,255,0.22) 0%, rgba(31,107,255,0) 68%);
}

.intro::after{
  inset:14px 16px auto auto;
  width:124px;
  height:124px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,0.26), rgba(13,242,201,0.12));
  border:1px solid rgba(157,181,255,0.4);
  transform:rotate(14deg);
}

.intro-banner-art{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.banner-card{
  position:absolute;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(169,191,255,0.45);
  border-radius:14px;
  background:rgba(255,255,255,0.36);
  box-shadow:0 18px 34px rgba(17,33,87,0.14);
  opacity:.42;
}

.banner-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.95) contrast(1.02);
}

.banner-card-a{
  right:2rem;
  top:1.1rem;
  width:170px;
  height:96px;
  transform:rotate(7deg);
}

.banner-card-b{
  right:9.8rem;
  bottom:1rem;
  width:124px;
  height:124px;
  border-radius:20px;
  transform:rotate(-8deg);
}

.banner-card-c{
  right:12.8rem;
  top:1.2rem;
  width:144px;
  height:84px;
  transform:rotate(-5deg);
}

.intro-image-frame{
  position:relative;
  z-index:1;
  min-width:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(13,242,201,0.18), rgba(31,107,255,0.12));
  border:1px solid rgba(13,242,201,0.5);
}

.intro-image{width:150px;height:150px;object-fit:cover;border:2px solid #d9f4ff;border-radius:10px}
.intro-text{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;gap:.55rem}
.intro-text p{margin:0;text-wrap:pretty}
.intro-kicker{
  color:var(--accent-2);
  font-size:.83rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.intro-lead{
  font-size:1.06rem;
  color:var(--ink);
}
.intro-copy{
  color:var(--ink-soft);
  font-size:.95rem;
  max-width:62ch;
}

.intro-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:.2rem;
}

.intro-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:152px;
  padding:.6rem 1rem;
  border:1px solid #9bb7ff;
  border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#e3ecff);
  color:#12224a;
  text-decoration:none;
  transition:all .2s ease;
}

.intro-action:hover{
  border-color:var(--accent-2);
  box-shadow:0 0 0 2px rgba(31,107,255,0.12) inset;
  transform:translateY(-2px);
}

.intro-action-primary{
  background:linear-gradient(120deg,var(--accent) 0%,#79ffd7 100%);
  border-color:#18c7a8;
  color:#053129;
}

@keyframes fadeRise{
  from{
    opacity:0;
    transform:translateY(16px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.intro-image-frame,
.intro-kicker,
.intro-lead,
.intro-copy,
.intro-actions{
  opacity:0;
  animation:fadeRise .65s ease forwards;
}

.intro-image-frame{animation-delay:.05s}
.intro-kicker{animation-delay:.12s}
.intro-lead{animation-delay:.2s}
.intro-copy{animation-delay:.28s}
.intro-actions{animation-delay:.36s}

.page-home .tabs-nav,
.page-home .tab-content,
.page-home .back-to-top-wrap,
.page-home .site-footer{
  opacity:0;
  animation:fadeRise .65s ease forwards;
}

.page-home .tabs-nav{animation-delay:.44s}
.page-home .tab-content{animation-delay:.54s}
.page-home .back-to-top-wrap{animation-delay:.64s}
.page-home .site-footer{animation-delay:.72s}

.page-about .about-hero,
.page-about .about-card,
.page-about .back-to-top-wrap,
.page-about .site-footer,
.page-contact .contact-section,
.page-contact .back-to-top-wrap,
.page-contact .site-footer,
.page-store .store-heading,
.page-store .store-subheading,
.page-store .back-to-top-wrap,
.page-store .site-footer{
  opacity:0;
  animation:fadeRise .65s ease forwards;
}

.page-about .about-hero{animation-delay:.08s}
.page-about .about-card:nth-of-type(1){animation-delay:.18s}
.page-about .about-card:nth-of-type(2){animation-delay:.26s}
.page-about .about-card:nth-of-type(3){animation-delay:.34s}
.page-about .about-card:nth-of-type(4){animation-delay:.42s}
.page-about .about-card:nth-of-type(5){animation-delay:.5s}
.page-about .about-card:nth-of-type(6){animation-delay:.58s}
.page-about .back-to-top-wrap{animation-delay:.52s}
.page-about .site-footer{animation-delay:.6s}

.page-contact .contact-section{animation-delay:.08s}
.page-contact .back-to-top-wrap{animation-delay:.18s}
.page-contact .site-footer{animation-delay:.28s}

.page-store .store-heading{animation-delay:.08s}
.page-store .store-subheading{animation-delay:.16s}
.page-store .back-to-top-wrap{animation-delay:.5s}
.page-store .site-footer{animation-delay:.58s}

@media (prefers-reduced-motion:reduce){
  .intro-image-frame,
  .intro-kicker,
  .intro-lead,
  .intro-copy,
  .intro-actions,
  .page-home .tabs-nav,
  .page-home .tab-content,
  .page-home .back-to-top-wrap,
  .page-home .site-footer,
  .page-about .about-hero,
  .page-about .about-card,
  .page-about .back-to-top-wrap,
  .page-about .site-footer,
  .page-contact .contact-section,
  .page-contact .back-to-top-wrap,
  .page-contact .site-footer,
  .page-store .store-heading,
  .page-store .store-subheading,
  .page-store .back-to-top-wrap,
  .page-store .site-footer,
  .page-store .product-card{
    opacity:1;
    animation:none;
  }

  .personal-bg-column{
    animation:none;
  }
}

.tabs-nav{
  margin:1rem auto;
  padding:.4rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel-strong);
  box-shadow:var(--shadow);
}

.tabs{list-style:none;margin:0;padding:0;display:flex;gap:0.5rem;flex-wrap:wrap}
.tab-btn{
  background:linear-gradient(180deg, #ffffff, #e9f0ff);
  border:1px solid #b2c5ff;
  color:var(--ink);
  padding:.48rem 1rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  cursor:pointer;
  font-family:'Space Mono','Trebuchet MS',sans-serif;
  font-size:.95rem;
  transition:box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.tab-btn::before{
  font-size:.78rem;
  line-height:1;
}

.tab-btn[data-tab="cp"]::before{
  content:"\25C6";
  color:#1f63d1;
}

.tab-btn[data-tab="main"]::before{
  content:"\25CF";
  color:#0a8759;
}

.tab-btn[data-tab="school"]::before{
  content:"\25A0";
  color:#d2ab00;
}

.tab-btn[data-tab="personal"]::before{
  content:"\2605";
  color:#b01822;
}

.tab-btn:hover{background:linear-gradient(180deg, #ffffff, #dbe7ff)}

.tab-btn[data-tab="personal"]{
  font-size:1rem;
  font-weight:700;
  box-shadow:0 0 0 1px rgba(176,24,34,0.14), 0 4px 10px rgba(176,24,34,0.12);
}

.tab-btn[data-tab="cp"],
.tab-btn[data-tab="main"],
.tab-btn[data-tab="school"]{
  font-size:1rem;
  font-weight:700;
}

.tab-btn[data-tab="cp"]{
  box-shadow:0 0 0 1px rgba(31,99,209,0.14), 0 4px 10px rgba(31,99,209,0.12);
}

.tab-btn[data-tab="main"]{
  box-shadow:0 0 0 1px rgba(10,135,89,0.14), 0 4px 10px rgba(10,135,89,0.12);
}

.tab-btn[data-tab="school"]{
  box-shadow:0 0 0 1px rgba(210,171,0,0.14), 0 4px 10px rgba(210,171,0,0.12);
}

.tab-btn[data-tab="cp"]:hover{
  background:linear-gradient(180deg, #f7fbff, #e4efff);
  transform:translateY(-1px);
}

.tab-btn[data-tab="main"]:hover{
  background:linear-gradient(180deg, #f6fff9, #def5ea);
  transform:translateY(-1px);
}

.tab-btn[data-tab="school"]:hover{
  background:linear-gradient(180deg, #fffef6, #fff4cc);
  transform:translateY(-1px);
}

.tab-btn[data-tab="personal"]:hover{
  background:linear-gradient(180deg, #fff7f7, #ffe6e8);
  transform:translateY(-1px);
}

.tab-btn.active{
  background:linear-gradient(120deg, var(--accent) 0%, #79ffd7 45%, #e6fff8 100%);
  border:1px solid #18c7a8;
  color:#053129;
}

.tab-btn[data-tab="cp"].active{
  background:linear-gradient(120deg, #2f7dff 0%, #6ca8ff 48%, #eaf3ff 100%);
  border-color:#1f63d1;
  color:#06244d;
  box-shadow:0 0 0 2px rgba(31,99,209,0.2), 0 10px 22px rgba(31,99,209,0.22);
}

.tab-btn[data-tab="main"].active{
  background:linear-gradient(120deg, #00a86b 0%, #38c98a 50%, #eafff5 100%);
  border-color:#0a8759;
  color:#053826;
  box-shadow:0 0 0 2px rgba(10,135,89,0.2), 0 10px 22px rgba(10,135,89,0.22);
}

.tab-btn[data-tab="school"].active{
  background:linear-gradient(120deg, #ffd60a 0%, #ffe45e 52%, #fffbe5 100%);
  border-color:#d2ab00;
  color:#4a3a00;
  box-shadow:0 0 0 2px rgba(210,171,0,0.22), 0 10px 22px rgba(210,171,0,0.24);
}

.tab-btn[data-tab="personal"].active{
  background:linear-gradient(120deg, #d9242f 0%, #f25c5c 52%, #fff0f0 100%);
  border-color:#b01822;
  color:#4b0b0f;
  box-shadow:0 0 0 2px rgba(176,24,34,0.2), 0 10px 22px rgba(176,24,34,0.22);
}

.tab-content{margin:1rem auto}
.tab-pane{display:none}
.tab-pane.active{display:block}

.gallery-heading{
  font-family:'Audiowide','Trebuchet MS',sans-serif;
  letter-spacing:.03em;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}

.gallery-heading::before{
  font-size:.82em;
  line-height:1;
}

.cp-heading{
  color:#06244d;
}

.cp-heading::before{
  content:"\25C6";
  color:#1f63d1;
}

.cc-heading{
  color:#053826;
}

.cc-heading::before{
  content:"\25CF";
  color:#0a8759;
}

.sf-heading{
  color:#4a3a00;
}

.sf-heading::before{
  content:"\25A0";
  color:#d2ab00;
}

.pa-heading{
  color:#4b0b0f;
}

.pa-heading::before{
  content:"\2605";
  color:#b01822;
}

.gallery-description{
  margin:.6rem 0 1rem;
  padding:.72rem .92rem;
  background:linear-gradient(120deg, #f0f9ff, #e4f6ff 55%, #f8eeff);
  border:1px solid #a9c8ff;
  border-radius:12px;
  font-size:.92rem;
  color:var(--ink-soft);
}

.cp-description{
  background:linear-gradient(120deg, #e8f1ff, #dce9ff 55%, #f3f8ff);
  border-color:#8fb4ff;
  color:#06244d;
}

.cc-description{
  background:linear-gradient(120deg, #eafff5, #dcf9ea 55%, #f5fff9);
  border-color:#74d6ad;
  color:#053826;
}

.sf-description{
  background:linear-gradient(120deg, #fffbe0, #fff4bf 55%, #fffdf0);
  border-color:#e2bf39;
  color:#4a3a00;
}

.pa-description{
  background:linear-gradient(120deg, #ffe9ea, #ffd8da 55%, #fff4f4);
  border-color:#f1a0a6;
  color:#4b0b0f;
}

.cp-carousel,.cc-carousel,.sf-carousel,.pa-carousel{display:flex;align-items:center;gap:.75rem;margin-top:1rem}
.cp-viewport,.cc-viewport,.sf-viewport,.pa-viewport{overflow:hidden;width:100%;max-width:1920px;margin:0 auto}
.cp-track,.cc-track,.sf-track,.pa-track{display:flex;transition:transform .35s ease}
.cp-slide,.cc-slide,.sf-slide,.pa-slide{min-width:100%;margin:0}
.cp-slide img,.cc-slide img,.sf-slide img,.pa-slide img{width:100%;height:auto;aspect-ratio:16/9;max-height:none;object-fit:contain;object-position:center}

.cp-arrow,.cc-arrow,.sf-arrow,.pa-arrow{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border:1px solid #9fbcff;
  border-radius:50%;
  cursor:pointer;
  font-size:1.2rem;
  line-height:1;
  color:#0d2f66;
  background:linear-gradient(180deg, #ffffff, #dfeaff);
}
.cp-arrow:hover,.cc-arrow:hover,.sf-arrow:hover,.pa-arrow:hover{filter:brightness(.98);box-shadow:0 0 0 2px rgba(31,107,255,0.14) inset}

.cc-arrow{
  border-color:#0a8759;
  color:#053826;
  background:linear-gradient(180deg, #f7fff9, #d8f6e8);
}

.sf-arrow{
  border-color:#d2ab00;
  color:#4a3a00;
  background:linear-gradient(180deg, #fffef2, #fff0b8);
}

.pa-arrow{
  border-color:#b01822;
  color:#4b0b0f;
  background:linear-gradient(180deg, #fff8f8, #ffd4d7);
}

.cc-arrow:hover{box-shadow:0 0 0 2px rgba(10,135,89,0.18) inset}
.sf-arrow:hover{box-shadow:0 0 0 2px rgba(210,171,0,0.2) inset}
.pa-arrow:hover{box-shadow:0 0 0 2px rgba(176,24,34,0.2) inset}

.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}
.thumb{
  background:var(--panel-strong);
  border:1px solid #a9bfff;
  border-radius:12px;
  overflow:hidden;
  min-height:220px;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow);
}
.thumb img{width:auto;max-width:100%;max-height:220px;object-fit:contain;object-position:center;display:block;background:#010612;margin:auto}
.cp-slide.thumb img,.cc-slide.thumb img,.sf-slide.thumb img,.pa-slide.thumb img{width:100%;height:auto;aspect-ratio:16/9;max-width:none;max-height:none;margin:0}
.thumb figcaption{
  margin-top:auto;
  padding:.55rem .72rem;
  font-size:.9rem;
  text-align:center;
  color:#162852;
  background:linear-gradient(180deg, #f2f7ff, #deebff);
  border-top:1px solid #c6d6ff;
}

.lightbox{position:fixed;inset:0;background:rgba(5,11,27,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;visibility:hidden;opacity:0;transition:opacity .2s;z-index:9999}
.lightbox[aria-hidden="false"]{visibility:visible;opacity:1}
.lightbox img{max-width:90%;max-height:80vh;border-radius:10px;border:1px solid #84a7ff;box-shadow:0 16px 40px rgba(0,0,0,.45)}
.lb-close{position:absolute;right:1rem;top:1rem;background:linear-gradient(180deg,#fff,#dce7ff);border:1px solid #9fb8ff;color:#10214a;font-size:1.5rem;border-radius:10px;padding:.2rem .5rem}

form{display:grid;gap:.5rem;max-width:600px}
input,textarea{padding:.5rem;border:1px solid #b9cdff;border-radius:8px;background:#f9fcff}
button{background:linear-gradient(180deg,#ffffff,#e3ecff);color:#12224a;padding:.6rem 1rem;border:1px solid #9bb7ff;border-radius:10px}

@media (max-width:760px){
  .intro{flex-direction:column;align-items:flex-start}
  .intro-image-frame{min-width:0}

  .personal-bg{
    opacity:.1;
    gap:.75rem;
    padding:.75rem;
  }

  .personal-bg-column{
    width:min(26vw, 180px);
    min-width:110px;
    gap:.75rem;
  }
}

@media (max-width:600px){
  .gallery{grid-template-columns:1fr}
  .thumb img{height:180px}
  .cp-slide img,.cc-slide img,.sf-slide img,.pa-slide img{height:100%}
  .cp-arrow,.cc-arrow,.sf-arrow,.pa-arrow{width:38px;height:38px;flex-basis:38px}
  .tabs-nav{border-radius:16px}
}

/* -- Store Page ------------------------------------------- */
.store-feature{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1rem;
  align-items:center;
  margin:0 0 1rem;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(145deg, #f7fdff, #e9f6ff 55%, #f2ecff);
  box-shadow:var(--shadow);
}

.store-feature-kicker{
  margin:0 0 .35rem;
  color:#1f63d1;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.store-feature-title{
  margin:.1rem 0 .45rem;
  font-family:'Audiowide','Trebuchet MS',sans-serif;
  letter-spacing:.03em;
}

.store-feature-text{
  margin:0;
  color:var(--ink-soft);
}

.store-feature-actions{
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  margin-top:.75rem;
}

.store-feature-image-wrap{
  display:flex;
  justify-content:center;
  padding:.7rem;
  border:1px solid #a9bfff;
  border-radius:14px;
  background:linear-gradient(180deg,#11182e,#0a0f21);
}

.store-feature-image-wrap img{
  width:min(100%, 280px);
  height:auto;
  object-fit:contain;
}

.store-heading{
  font-family:'Audiowide','Trebuchet MS',sans-serif;
  letter-spacing:.03em;
  margin-bottom:.25rem;
}
.store-subheading{
  margin:0 0 1.5rem;
  color:var(--ink-soft);
  font-size:.95rem;
}

.store-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
}

.product-card{
  background:var(--panel-strong);
  border:1px solid #a9bfff;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 44px rgba(17,33,87,0.25);
}

.page-store .product-card{
  opacity:0;
  animation:fadeRise .65s ease forwards;
}

.page-store .product-card:nth-child(1){animation-delay:.08s}
.page-store .product-card:nth-child(2){animation-delay:.16s}
.page-store .product-card:nth-child(3){animation-delay:.24s}
.page-store .product-card:nth-child(4){animation-delay:.32s}
.page-store .product-card:nth-child(5){animation-delay:.4s}

.product-img-wrap{
  position:relative;
  background:#010612;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  min-height:220px;
}

.product-badge{
  position:absolute;
  left:.7rem;
  top:.7rem;
  padding:.22rem .55rem;
  border:1px solid #9debd7;
  border-radius:999px;
  background:linear-gradient(120deg,var(--accent) 0%,#79ffd7 100%);
  color:#053129;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.product-badge-accent{
  border-color:#ffc67a;
  background:linear-gradient(120deg,#ffd66b 0%,#ffb55f 100%);
  color:#5d2f00;
}

.product-img-wrap img{
  max-width:100%;
  max-height:220px;
  object-fit:contain;
  display:block;
}

.product-info{
  padding:.85rem 1rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  background:linear-gradient(180deg,#f2f7ff,#deebff);
}
.product-name{
  margin:0;
  font-family:'Audiowide','Trebuchet MS',sans-serif;
  font-size:1rem;
  color:var(--ink);
}
.product-price{
  margin:0;
  font-size:.95rem;
  color:var(--accent-2);
  font-weight:700;
}

.product-btn{
  display:inline-block;
  align-self:flex-start;
  padding:.4rem .95rem;
  background:linear-gradient(120deg,var(--accent) 0%,#79ffd7 100%);
  border:1px solid #18c7a8;
  border-radius:999px;
  color:#053129;
  font-family:'Space Mono','Trebuchet MS',sans-serif;
  font-size:.88rem;
  text-decoration:none;
  transition:filter .2s ease;
}
.product-btn:hover{filter:brightness(.93)}

@media (max-width:980px){
  .store-feature{grid-template-columns:1fr}
  .store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:680px){
  .store-grid{grid-template-columns:1fr}
}

/* About page */
.about-main{margin-top:1rem}

.about-hero{
  display:flex;
  gap:1rem;
  align-items:center;
  margin:0 0 1rem;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow);
}

.about-avatar-wrap{
  min-width:180px;
  display:flex;
  justify-content:center;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(13,242,201,0.5);
  background:linear-gradient(135deg, rgba(13,242,201,0.18), rgba(31,107,255,0.12));
}

.about-avatar{
  width:160px;
  height:160px;
  object-fit:cover;
  border-radius:12px;
  border:2px solid #d9f4ff;
}

.about-hero-copy h2{
  margin:.1rem 0 .45rem;
  font-family:'Audiowide','Trebuchet MS',sans-serif;
  letter-spacing:.03em;
}

.about-hero-copy p{margin:0;color:var(--ink-soft)}

.about-kicker{
  margin:0 0 .35rem;
  color:#1f63d1;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.about-actions{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top:.75rem;
}

.about-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:152px;
  padding:.52rem 1rem;
  border:1px solid #9bb7ff;
  border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#e3ecff);
  color:#12224a;
  font-family:'Space Mono','Trebuchet MS',sans-serif;
  font-size:.9rem;
  text-decoration:none;
  transition:all .2s ease;
}

.about-action:hover{
  border-color:var(--accent-2);
  box-shadow:0 0 0 2px rgba(31,107,255,0.12) inset;
  transform:translateY(-1px);
}

.about-action-primary{
  background:linear-gradient(120deg,var(--accent) 0%,#79ffd7 100%);
  border-color:#18c7a8;
  color:#053129;
}

.about-availability{
  margin:0 0 1rem;
  padding:.8rem .9rem;
  border:1px solid #9debd7;
  border-radius:12px;
  background:linear-gradient(145deg, #f4fffb, #e8fff6);
  box-shadow:var(--shadow);
}

.about-availability-title{
  margin:0 0 .5rem;
  font-family:'Audiowide','Trebuchet MS',sans-serif;
  font-size:.95rem;
  letter-spacing:.03em;
  color:#0f5e4a;
}

.about-availability-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.about-availability-list li{
  padding:.34rem .58rem;
  border:1px solid #7edcc2;
  border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#e9fff6);
  color:#0f5e4a;
  font-size:.83rem;
}

.about-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.about-card{
  padding:1rem;
  border:1px solid #a9bfff;
  border-radius:12px;
  background:var(--panel-strong);
  box-shadow:var(--shadow);
}

.about-card h3{
  margin:.1rem 0 .45rem;
  font-family:'Audiowide','Trebuchet MS',sans-serif;
  font-size:1rem;
}

.about-card p{margin:0;color:var(--ink-soft)}

.about-card-subtitle{
  margin:0 0 .5rem;
  color:#5670a8;
  font-size:.85rem;
}

.about-list{
  margin:0;
  padding-left:1.15rem;
  color:var(--ink-soft);
}

.about-pill-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.about-pill-list li{
  padding:.32rem .58rem;
  border:1px solid #b7c9ff;
  border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#eaf0ff);
  color:#1d3368;
  font-size:.82rem;
}

.about-collab-card{
  grid-column:1 / -1;
  width:100%;
  max-width:760px;
  justify-self:center;
  border-color:#9debd7;
  background:linear-gradient(150deg,#f5fffc,#e9fff7);
}

.about-collab-action{
  margin-top:.75rem;
  background:linear-gradient(120deg,var(--accent) 0%,#79ffd7 100%);
  border-color:#18c7a8;
  color:#053129;
}

@media (max-width:800px){
  .about-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .about-availability-list{flex-direction:column;align-items:flex-start}
  .about-grid{grid-template-columns:1fr}
}

/* -- Contact Page --------------------------------------------- */
.contact-main{display:flex;flex-direction:column;gap:2rem;margin-top:1rem}

.contact-layout{
  display:grid;
  grid-template-columns:1.35fr .85fr;
  gap:1rem;
  align-items:start;
}

.contact-section{
  padding:1.25rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow);
}

.contact-section h2{
  margin:.1rem 0 .45rem;
  font-family:'Audiowide','Trebuchet MS',sans-serif;
  letter-spacing:.03em;
}

.contact-intro{margin:.5rem 0 1.25rem;color:var(--ink-soft)}

.contact-form{display:flex;flex-direction:column;gap:1rem}

.form-group{display:flex;flex-direction:column;gap:.35rem}
.form-group label{
  font-size:.9rem;
  font-weight:600;
  color:var(--ink);
}
.form-group input,
.form-group textarea,
.form-group select{
  padding:.55rem .75rem;
  border:1px solid #9fbcff;
  border-radius:8px;
  background:#ffffff;
  color:var(--ink);
  font-family:inherit;
  font-size:.95rem;
  transition:border-color .2s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  outline:none;
  border-color:var(--accent-2);
  box-shadow:0 0 0 3px rgba(31,107,255,0.12);
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  align-self:flex-start;
  padding:.55rem 1.25rem;
  background:linear-gradient(120deg,var(--accent) 0%,#79ffd7 100%);
  border:1px solid #18c7a8;
  border-radius:999px;
  color:#053129;
  font-family:'Space Mono','Trebuchet MS',sans-serif;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  transition:filter .2s ease;
}
.contact-btn:hover{filter:brightness(.93)}

.contact-btn:disabled{
  opacity:.72;
  cursor:progress;
}

.contact-btn-spinner{
  width:.95rem;
  height:.95rem;
  border:2px solid rgba(5,49,41,0.2);
  border-top-color:#053129;
  border-radius:50%;
  display:none;
  animation:spin .8s linear infinite;
}

.contact-btn.is-loading .contact-btn-spinner{
  display:inline-block;
}

.contact-btn.is-loading .contact-btn-label{
  opacity:.9;
}

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

.form-status{
  min-height:1.4rem;
  margin:.8rem 0 0;
  font-size:.92rem;
  color:var(--ink-soft);
}

.form-status.is-success{color:#0c6b4f}
.form-status.is-error{color:#a1274f}

.contact-aside{
  padding:1.15rem;
  border:1px solid #a9bfff;
  border-radius:var(--radius);
  background:var(--panel-strong);
  box-shadow:var(--shadow);
}

.contact-aside h3{
  margin:.1rem 0 .7rem;
  font-family:'Audiowide','Trebuchet MS',sans-serif;
  font-size:1.02rem;
}

.contact-include-list{
  margin:0;
  padding-left:1.15rem;
  color:var(--ink-soft);
  display:grid;
  gap:.45rem;
}

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

.social-section{
  padding:1.25rem;
  border:1px solid #a9bfff;
  border-radius:var(--radius);
  background:var(--panel-strong);
  box-shadow:var(--shadow);
}

.social-section h3{
  margin:.1rem 0 .75rem;
  font-family:'Audiowide','Trebuchet MS',sans-serif;
  font-size:1.05rem;
}

.social-links{display:flex;gap:1rem;flex-wrap:wrap}

.social-link{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem 1rem;
  border:1px solid #9fbcff;
  border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#dfeaff);
  color:var(--ink);
  text-decoration:none;
  font-size:.9rem;
  transition:all .2s ease;
}
.social-link:hover{
  border-color:var(--accent-2);
  background:linear-gradient(180deg,#ffffff,#dbe7ff);
  box-shadow:0 0 0 2px rgba(31,107,255,0.14) inset;
  transform:translateY(-2px);
}

.social-icon{
  width:1.05rem;
  height:1.05rem;
  fill:currentColor;
  flex:0 0 auto;
}

.social-label{line-height:1}

@media (max-width:800px){
  .contact-main{gap:1.5rem}
}

.site-footer{
  max-width:none;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border:1px solid var(--line);
  border-left:0;
  border-right:0;
  border-radius:0;
  background:linear-gradient(120deg, #f7f9ff 0%, #e6f5ff 60%, #f3e9ff 100%);
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
  margin-top:1.5rem;
  margin-bottom:0;
  padding:1rem clamp(1rem, 3vw, 2rem);
}

.site-footer .social-section{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.site-footer .social-section h3{
  margin:.15rem 0 .55rem;
}

.site-footer .social-links{
  justify-content:center;
}

.footer-signoff{
  margin:.7rem 0 0;
  text-align:center;
  font-size:.84rem;
  color:var(--ink-soft);
}

.back-to-top-wrap{
  display:none;
}

.back-to-top{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 1rem;
  border:1px solid #9bb7ff;
  border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#e3ecff);
  color:#12224a;
  font-family:'Space Mono','Trebuchet MS',sans-serif;
  font-size:.88rem;
  cursor:pointer;
  transition:all .2s ease;
}

.back-to-top:hover{
  border-color:var(--accent-2);
  box-shadow:0 0 0 2px rgba(31,107,255,0.12) inset;
  transform:translateY(-2px);
}

@media (max-width:760px){
  .site-header .container{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }

  .brand{padding:.6rem 0 .25rem}

  .nav{
    width:100%;
    gap:.55rem;
  }

  .nav li{
    flex:1 1 calc(50% - .55rem);
  }

  .nav a{
    display:block;
    text-align:center;
  }

  .intro{
    gap:.85rem;
    padding:.9rem;
  }

  .intro::before{
    width:180px;
    height:180px;
    right:-30px;
    bottom:-40px;
  }

  .intro::after{
    width:92px;
    height:92px;
    right:12px;
    top:12px;
  }

  .banner-card-a{
    right:.9rem;
    top:1rem;
    width:120px;
    height:74px;
  }

  .banner-card-b{
    right:5.8rem;
    bottom:.7rem;
    width:88px;
    height:88px;
  }

  .banner-card-c{
    right:9rem;
    top:1.45rem;
    width:98px;
    height:62px;
  }

  .intro-text{
    width:100%;
  }
}

@media (max-width:640px){
  .container{padding:.85rem}

  .tabs{
    display:grid;
    grid-template-columns:1fr;
  }

  .tab-btn{
    width:100%;
  }

  .cp-carousel,.cc-carousel,.sf-carousel{
    gap:.5rem;
  }

  .store-grid,
  .about-grid{
    grid-template-columns:1fr;
  }

  .product-img-wrap{
    min-height:180px;
  }

  .intro-actions{
    width:100%;
  }

  .intro-action{
    width:100%;
  }

  .product-info{
    padding:.8rem .9rem .95rem;
  }

  .site-footer{
    padding:.9rem 1rem;
  }

  .site-footer .social-section h3{
    text-align:center;
    font-size:.96rem;
  }

  .back-to-top-wrap{
    display:flex;
    justify-content:center;
    margin:1rem auto 0;
  }

  .social-links{
    gap:.65rem;
    justify-content:center;
  }

  .social-link{
    min-width:140px;
    justify-content:center;
  }
}

@media (max-width:420px){
  .nav li{
    flex-basis:100%;
  }

  .brand-link{
    gap:.5rem;
    font-size:1.15rem;
  }

  .intro-image{
    width:132px;
    height:132px;
  }

  .intro::after{display:none}
  .intro-banner-art{display:none}

  .cp-arrow,.cc-arrow,.sf-arrow{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  .social-link{
    width:46px;
    min-width:46px;
    height:46px;
    padding:0;
    border-radius:50%;
    justify-content:center;
  }

  .social-label{display:none}
}