@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Exo+2:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300&family=Share+Tech+Mono&display=swap');

:root {
  --black: #080b0d;
  --deep: #0d1117;
  --surface: #131920;
  --card: #192028;
  --border: #1e2d38;
  --border-bright: #2a3f50;
  --green: #3ddc84;
  --green-light: #72efa9;
  --green-dim: rgba(61,220,132,0.08);
  --violet: #9b5de5;
  --violet-light: #c084fc;
  --violet-dim: rgba(155,93,229,0.08);
  --white: #eef4f0;
  --muted: #6a8a7a;
  --text: #bdd4c5;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--black);
  color: var(--text);
  font-family: 'Exo 2', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(61,220,132,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,220,132,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(8,11,13,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 clamp(1.5rem,5vw,4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.logo-text span { color: var(--green); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-family: 'Share Tech Mono', monospace;
  color: var(--muted);
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--green); }

.nav-cta {
  background: var(--green) !important;
  color: var(--black) !important;
  padding: .45rem 1.2rem;
  transition: background .2s !important;
}
.nav-cta:hover { background: var(--green-light) !important; }

.menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 5px;
}
.menu-btn span { display:block; width:22px; height:1px; background:var(--white); }

/* ── BANNER ── */
.studio-banner {
  margin-top: 68px;
  background: linear-gradient(135deg,#0d0515,#150d24,#0d0515);
  border-bottom: 1px solid rgba(155,93,229,.4);
  padding: 13px clamp(1.5rem,5vw,4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
.studio-banner p { font-size:.88rem; color:var(--violet-light); letter-spacing:.04em; }
.studio-banner a { color:var(--violet-light); font-weight:500; text-decoration:none; border-bottom:1px solid rgba(192,132,252,.5); }
.studio-banner a:hover { color:#fff; }
.banner-pill { background:rgba(155,93,229,.2); border:1px solid rgba(155,93,229,.4); color:var(--violet-light); font-size:.7rem; font-family:'Share Tech Mono',monospace; letter-spacing:.12em; text-transform:uppercase; padding:.2rem .7rem; flex-shrink:0; }

/* ── TYPOGRAPHY ── */
h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(3rem,5.5vw,5.2rem);
  font-weight: 600;
  line-height: 1.06;
  color: var(--white);
  margin-bottom: 1.5rem;
  letter-spacing: .04em;
}
h1 em { font-style: normal; color: var(--green); font-weight: 300; }
h1 .vio { color: var(--violet-light); font-weight: 300; }

h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(2.2rem,4vw,3.3rem);
  font-weight: 500;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: .05em;
}
h2 em { font-style:normal; color:var(--green); font-weight:300; }
h2 .vio { color:var(--violet-light); font-weight:300; }

h3 { font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.08em; color:var(--white); }
h4 { font-family:'Rajdhani',sans-serif; font-weight:500; letter-spacing:.06em; color:var(--white); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.5rem;
}
.eyebrow::before { content:''; display:block; width:28px; height:1px; background:var(--green); }

.sec-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.sec-label::before { content:''; display:block; width:22px; height:1px; background:var(--green); }
.sec-label.v { color:var(--violet-light); }
.sec-label.v::before { background:var(--violet); }

/* ── LAYOUT ── */
section { padding: clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); position:relative; z-index:1; }

.page-hero {
  padding: 3rem clamp(1.5rem,5vw,4rem) 4rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  margin-top: 68px;
}
.page-hero-nobanner { margin-top: 68px; }
.page-hero-withbanner { margin-top: 0; }

.page-hero .glow-g::after {
  content:''; position:absolute; right:0; top:0; bottom:0; width:50%;
  background: radial-gradient(ellipse at right center,rgba(61,220,132,.05),transparent 70%);
  pointer-events:none;
}
.page-hero .glow-v::after {
  content:''; position:absolute; right:0; top:0; bottom:0; width:50%;
  background: radial-gradient(ellipse at right center,rgba(155,93,229,.07),transparent 70%);
  pointer-events:none;
}

.lead {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 620px;
  margin-top: 1rem;
  line-height: 1.75;
}

.sec-intro {
  font-size: .97rem;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 3.5rem;
  line-height: 1.75;
}

.divider {
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--border),transparent);
  position: relative; z-index:1;
}

/* ── BREADCRUMB ── */
.crumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: 2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.crumb a { color:var(--muted); text-decoration:none; transition:color .2s; }
.crumb a:hover { color:var(--green); }
.crumb .cg { color:var(--green); }
.crumb .cv { color:var(--violet-light); }

/* ── BUTTONS ── */
.btn-g { background:var(--green); color:var(--black); padding:.75rem 2rem; font-size:.83rem; font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border:none; cursor:pointer; transition:background .2s,transform .15s; display:inline-block; }
.btn-g:hover { background:var(--green-light); transform:translateY(-1px); }
.btn-v { background:var(--violet); color:#fff; padding:.75rem 2rem; font-size:.83rem; font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border:none; cursor:pointer; transition:background .2s,transform .15s; display:inline-block; }
.btn-v:hover { background:var(--violet-light); transform:translateY(-1px); }
.btn-o { background:transparent; color:var(--white); padding:.75rem 2rem; font-size:.83rem; font-family:'Rajdhani',sans-serif; font-weight:500; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border:1px solid var(--border-bright); cursor:pointer; transition:border-color .2s,color .2s; display:inline-block; }
.btn-o:hover { border-color:var(--green); color:var(--green); }

/* ── FEATURES LIST ── */
.flist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 5rem;
  max-width: 1000px;
  padding: clamp(3rem,6vw,5rem) clamp(1.5rem,5vw,4rem);
}
.fi .fn { font-family:'Share Tech Mono',monospace; font-size:.8rem; letter-spacing:.2em; margin-bottom:.5rem; }
.fi .fn.g { color:var(--green); }
.fi .fn.v { color:var(--violet-light); }
.fi h4 { font-size:1.2rem; margin-bottom:.4rem; }
.fi p { font-size:.88rem; color:var(--muted); line-height:1.7; }

/* ── CTA BLOCK ── */
.ctablock {
  margin: 0 clamp(1.5rem,5vw,4rem) clamp(3rem,6vw,5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.ctablock h3 { font-size:1.6rem; }
.ctablock p { color:var(--muted); margin-top:.3rem; font-size:.88rem; }

/* ── VTUBER BANNER ── */
.vtbanner {
  background: linear-gradient(135deg,var(--surface),var(--card));
  border: 1px solid var(--border);
  border-left: 3px solid var(--violet);
  padding: 2rem 2.5rem;
  margin: 0 clamp(1.5rem,5vw,4rem) 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.vtavatar { font-size:2.5rem; flex-shrink:0; }
.vtbanner h4 { font-size:1.2rem; margin-bottom:.4rem; }
.vtbanner p { font-size:.88rem; color:var(--muted); line-height:1.7; }

/* ── BADGES ── */
.nbadge { display:inline-flex; align-items:center; gap:.4rem; background:rgba(61,220,132,.1); border:1px solid rgba(61,220,132,.3); color:var(--green); padding:.25rem .75rem; font-family:'Share Tech Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.6rem; }
.vbadge { display:inline-flex; align-items:center; gap:.4rem; background:rgba(155,93,229,.12); border:1px solid rgba(155,93,229,.3); color:var(--violet-light); padding:.2rem .6rem; font-family:'Share Tech Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.6rem; }
.eubadge { display:inline-flex; align-items:center; background:rgba(155,93,229,.1); border:1px solid rgba(155,93,229,.3); color:var(--violet-light); padding:.25rem .75rem; font-family:'Share Tech Mono',monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.6rem; margin-left:.5rem; }

/* ── PAYMENT CHIPS ── */
.payrow { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.paychip { background:var(--surface); border:1px solid var(--border); padding:.35rem .75rem; font-family:'Share Tech Mono',monospace; font-size:.72rem; color:var(--text); display:flex; align-items:center; gap:.4rem; letter-spacing:.05em; }

/* ── SERVICES GRID (index) ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(290px,1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.scard {
  background: var(--deep);
  padding: 2.5rem 2rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background .25s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.scard::before { content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s; }
.scard.g::before { background:var(--green-dim); }
.scard.v::before { background:var(--violet-dim); }
.scard:hover::before { opacity:1; }
.scard:hover .sarrow { transform:translate(3px,-3px); }
.scard.g:hover .sarrow { color:var(--green); }
.scard.v:hover .sarrow { color:var(--violet-light); }
.sicon { width:44px; height:44px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; transition:border-color .3s; position:relative; z-index:1; }
.scard.g:hover .sicon { border-color:var(--green); }
.scard.v:hover .sicon { border-color:var(--violet); }
.scontent { position:relative; z-index:1; flex:1; }
.scard h3 { font-size:1.05rem; text-transform:uppercase; letter-spacing:.1em; color:var(--white); margin-bottom:.5rem; line-height:1.3; }
.scard p { font-size:.87rem; color:var(--muted); line-height:1.65; }
.sfooter { display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; position:relative; z-index:1; }
.stag { font-family:'Share Tech Mono',monospace; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; padding:.2rem .6rem; border:1px solid; }
.stag.g { color:var(--green); border-color:rgba(61,220,132,.3); }
.stag.v { color:var(--violet-light); border-color:rgba(155,93,229,.3); }
.sarrow { color:var(--muted); font-size:1rem; transition:transform .25s,color .25s; }

/* ── PORTFOLIO GRID ── */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.pitem {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background: var(--deep);
  text-decoration: none;
  display: block;
}
.pbg {
  position: absolute; inset:0;
  display: flex; align-items:center; justify-content:center;
  font-size: 2rem;
  transition: transform .4s ease;
}
.pitem:hover .pbg { transform:scale(1.04); }
.pov {
  position: absolute; inset:0;
  background: linear-gradient(to top,rgba(8,11,13,.95) 0%,rgba(8,11,13,.3) 60%,transparent 100%);
  display: flex; flex-direction:column; justify-content:flex-end;
  padding: 1.5rem;
  transition: opacity .3s;
}
.pov-domain {
  font-family: 'Share Tech Mono', monospace;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.pov .tg { color:var(--green); }
.pov .tv { color:var(--violet-light); }
.pov h4 { font-size:1.2rem; color:var(--white); }
.pov p { font-size:.8rem; color:var(--muted); margin-top:.2rem; }
.pov-link {
  margin-top:.6rem;
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'Share Tech Mono',monospace;
  font-size:.68rem; letter-spacing:.1em;
  color:var(--green); opacity:0;
  transition: opacity .3s;
}
.pitem:hover .pov-link { opacity:1; }

/* ── CONTACT FORM ── */
.cgrid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; }
.cinfo p { color:var(--muted); margin-bottom:2rem; font-size:.93rem; line-height:1.75; }
.citem { display:flex; gap:1rem; margin-bottom:1.2rem; align-items:flex-start; }
.citem .ic { font-size:1rem; margin-top:.15rem; flex-shrink:0; }
.citem div { font-size:.87rem; color:var(--muted); }
.citem div strong { color:var(--white); display:block; font-weight:400; margin-bottom:.1rem; font-family:'Share Tech Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.cform { display:flex; flex-direction:column; gap:1rem; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fg { display:flex; flex-direction:column; gap:.4rem; }
label { font-family:'Share Tech Mono',monospace; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }
input,textarea,select { background:var(--surface); border:1px solid var(--border); color:var(--white); padding:.75rem 1rem; font-family:'Exo 2',sans-serif; font-size:.9rem; outline:none; transition:border-color .2s; width:100%; }
input:focus,textarea:focus,select:focus { border-color:var(--green); }
textarea { resize:vertical; min-height:120px; }
select option { background:var(--surface); }

/* ── CHIPS ── */
.hero-chips { display:flex; gap:1rem; margin-top:3rem; flex-wrap:wrap; }
.chip { background:var(--surface); border:1px solid var(--border); padding:.6rem 1rem; font-family:'Share Tech Mono',monospace; font-size:.72rem; display:flex; align-items:center; gap:.5rem; color:var(--muted); letter-spacing:.06em; }
.chip .dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; box-shadow:0 0 6px var(--green); }
.chip .dot.v { background:var(--violet); box-shadow:0 0 6px var(--violet); }

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 1.8rem clamp(1.5rem,5vw,4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative; z-index:1;
  background: var(--black);
}
footer p { font-family:'Share Tech Mono',monospace; font-size:.72rem; color:var(--muted); letter-spacing:.06em; }
footer a { color:var(--muted); text-decoration:none; transition:color .2s; }
footer a:hover { color:var(--green); }
.flinks { display:flex; gap:1.5rem; flex-wrap:wrap; font-family:'Share Tech Mono',monospace; font-size:.72rem; letter-spacing:.06em; }

/* ── IMPRESSUM TEXT ── */
.legal-block { padding:clamp(3rem,6vw,5rem) clamp(1.5rem,5vw,4rem); max-width:800px; }
.legal-block .ln { font-family:'Share Tech Mono',monospace; font-size:.78rem; letter-spacing:.2em; margin-bottom:.8rem; }
.legal-block .ln.g { color:var(--green); }
.legal-block .ln.v { color:var(--violet-light); }
.legal-block h3 { font-size:1.1rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.7rem; }
.legal-block p { font-size:.88rem; color:var(--muted); line-height:1.8; margin-bottom:1.2rem; }
.legal-info-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom:2rem;
}
.legal-info-box .row { display:flex; gap:1rem; font-size:.9rem; flex-wrap:wrap; }
.legal-info-box .row .lbl { font-family:'Share Tech Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); min-width:120px; flex-shrink:0; padding-top:.15rem; }
.legal-info-box .row .val { color:var(--text); }
.legal-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.legal-table .cell { background:var(--deep); padding:1.1rem 1.4rem; }
.legal-table .cell .lbl { font-family:'Share Tech Mono',monospace; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; }
.legal-table .cell .val { color:var(--text); font-size:.88rem; }
.note-box { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--violet); padding:1.2rem 1.8rem; }
.note-box .lbl { font-family:'Share Tech Mono',monospace; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--violet-light); margin-bottom:.4rem; }
.note-box p { font-size:.83rem; color:var(--muted); line-height:1.7; }

/* ── ANIMATIONS ── */
.fade-up { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ── MOBILE ── */
@media(max-width:750px) {
  .menu-btn { display:flex; }
  .nav-links { display:none; position:absolute; top:68px; left:0; right:0; background:rgba(8,11,13,.98); backdrop-filter:blur(20px); flex-direction:column; padding:1.5rem; border-bottom:1px solid var(--border); gap:1.2rem; }
  .nav-links.open { display:flex; }
  .nav-cta { align-self:flex-start; }
  .hero-chips { display:none; }
  .flist { grid-template-columns:1fr; gap:2rem; padding-left:1.5rem; padding-right:1.5rem; }
  .vtbanner { margin-left:1.5rem; margin-right:1.5rem; flex-direction:column; }
  .ctablock { padding:2rem 1.5rem; }
  .cgrid { grid-template-columns:1fr; gap:3rem; }
  .frow { grid-template-columns:1fr; }
  .legal-table { grid-template-columns:1fr; }
}