/* =============================================
   ETAN GERARDOT — PORTFOLIO 2026
   Aesthetic: Bold maximalist · Vibrant · Digital
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700;800;900&family=Noto+Serif+JP:wght@300;400;700&display=swap');

:root {
  /* Background */
  --bg:       #07070e;
  --bg2:      #0d0d1a;
  --bg3:      #13131f;
  --surface:  #141421;
  --surface2: #1c1c2e;

  /* Text */
  --text:       #f0f0ff;
  --text-muted: #7878a0;
  --text-dim:   #4a4a6a;

  /* Accent colors — VIVID */
  --cyan:   #00e5ff;
  --pink:   #ff2d78;
  --gold:   #ffd60a;
  --green:  #00ff88;
  --purple: #bf5fff;
  --orange: #ff7b00;

  /* Gradients */
  --grad-main:  linear-gradient(135deg, var(--cyan), var(--purple));
  --grad-warm:  linear-gradient(135deg, var(--gold), var(--orange));
  --grad-cool:  linear-gradient(135deg, var(--cyan), var(--green));

  /* Fonts */
  --f-display: 'Bebas Neue', cursive;
  --f-body:    'Outfit', sans-serif;
  --f-jp:      'Noto Serif JP', serif;

  --radius: 16px;
  --radius-sm: 8px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ── CURSOR ── */
.cursor, .cursor-follower {
  position: fixed; pointer-events: none; z-index: 9999; border-radius: 50%;
}
.cursor {
  width: 10px; height: 10px;
  background: var(--cyan);
  transform: translate(-50%,-50%);
  transition: transform 0.1s;
}
.cursor-follower {
  width: 30px; height: 30px;
  border: 1px solid rgba(0,229,255,0.4);
  transform: translate(-50%,-50%);
  transition: transform 0.15s ease, width 0.2s, height 0.2s;
}
@media (hover:none) { .cursor,.cursor-follower { display:none; } }

/* ── NAVBAR ── */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px;
  background: rgba(7,7,14,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: padding var(--transition);
}
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.05em;
}
.logo-eg { color: var(--cyan); }
.logo-jp { font-family: var(--f-jp); font-size: 0.85rem; color: var(--text-muted); }

.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  font-family: var(--f-body); font-weight: 600; font-size: 0.875rem;
  letter-spacing: 0.05em; color: var(--text-muted);
  transition: color var(--transition); position: relative; padding-bottom: 4px;
}
.nav-links a::after {
  content:''; position: absolute; bottom:0; left:0; width:0; height:2px;
  background: var(--grad-main); transition: width var(--transition); border-radius: 2px;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

.nav-cta {
  padding: 10px 22px;
  background: var(--grad-main);
  border-radius: 100px;
  font-weight: 700; font-size: 0.85rem;
  color: var(--bg); transition: var(--transition);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,229,255,0.3); }

.nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-burger span { display:block; width:24px; height:2px; background:var(--text); transition:var(--transition); border-radius:2px; }

/* ── HERO ── */
.hero {
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding: 120px 48px 80px;
}
.hero-bg { position:absolute; inset:0; pointer-events:none; }
.bg-blob {
  position:absolute; border-radius:50%; filter: blur(80px); opacity: 0.25;
}
.bg-blob--1 { width:600px; height:600px; background:var(--cyan); top:-150px; left:-100px; animation: blobMove1 12s ease-in-out infinite alternate; }
.bg-blob--2 { width:500px; height:500px; background:var(--pink); bottom:-100px; right:-100px; animation: blobMove2 15s ease-in-out infinite alternate; }
.bg-blob--3 { width:400px; height:400px; background:var(--purple); top:30%; right:20%; animation: blobMove1 10s ease-in-out infinite alternate-reverse; }
.bg-blob--purple1 { width:600px; height:600px; background:var(--purple); top:-100px; left:-100px; animation:blobMove1 12s ease-in-out infinite alternate; }
.bg-blob--purple2 { width:400px; height:400px; background:var(--pink); bottom:0; right:0; animation:blobMove2 14s ease-in-out infinite alternate; }

@keyframes blobMove1 { to { transform: translate(60px, 80px) scale(1.1); } }
@keyframes blobMove2 { to { transform: translate(-80px, -40px) scale(0.9); } }

.bg-grid {
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Floating badges */
.hero-badge {
  position:absolute; padding:8px 18px; border-radius:100px;
  font-weight:700; font-size:0.8rem; pointer-events:none; z-index:3;
  backdrop-filter: blur(10px);
}
.badge--tiktok  { background: rgba(255,45,120,0.15); border:1px solid rgba(255,45,120,0.4); color:#ff2d78; top:20%; left:5%; }
.badge--youtube { background: rgba(255,0,0,0.12); border:1px solid rgba(255,0,0,0.3); color:#ff4444; top:25%; right:5%; }
.badge--asso    { background: rgba(0,229,255,0.1); border:1px solid rgba(0,229,255,0.3); color:var(--cyan); bottom:30%; left:6%; }
.badge--japon   { background: rgba(255,214,10,0.1); border:1px solid rgba(255,214,10,0.3); color:var(--gold); bottom:30%; right:6%; }

.float-1 { animation: float 6s ease-in-out infinite; }
.float-2 { animation: float 7s 1s ease-in-out infinite; }
.float-3 { animation: float 8s 2s ease-in-out infinite; }
.float-4 { animation: float 5s 0.5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }

.hero-content { text-align:center; position:relative; z-index:2; animation: heroIn 1s ease both; }
@keyframes heroIn { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 20px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:100px; font-size:0.8rem; font-weight:600; color:var(--text-muted);
  letter-spacing:0.08em; margin-bottom:28px; animation: heroIn 1s 0.1s ease both;
}
.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); display:inline-block; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

.hero-title { margin-bottom:16px; }
.ht-line { display:block; font-family:var(--f-display); line-height:0.9; }
.ht-1 { font-size: clamp(5rem, 15vw, 12rem); color:var(--text); animation: heroIn 1s 0.15s ease both; }
.ht-2 { font-size: clamp(4rem, 12vw, 9.5rem); animation: heroIn 1s 0.2s ease both; }
.ht-outline { -webkit-text-stroke: 2px var(--cyan); color:transparent; }
.ht-fill { color:var(--cyan); }

.hero-jp-text {
  font-family:var(--f-jp); font-size:1.1rem; color:var(--text-muted);
  letter-spacing:0.25em; margin-bottom:20px; animation: heroIn 1s 0.3s ease both;
}
.hero-desc {
  font-size:1.05rem; color:var(--text-muted); max-width:560px; margin:0 auto 36px;
  line-height:1.8; animation: heroIn 1s 0.4s ease both;
}
.hero-desc strong { color:var(--text); }
.hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; animation: heroIn 1s 0.5s ease both; }

.hero-stats { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; animation: heroIn 1s 0.6s ease both; }
.hstat { text-align:center; }
.hstat-num { display:block; font-family:var(--f-display); font-size:2rem; line-height:1; background:var(--grad-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hstat-label { display:block; font-size:0.75rem; color:var(--text-muted); font-weight:600; letter-spacing:0.05em; }
.hstat-sep { color:var(--text-dim); font-size:1.5rem; }

.hero-scroll-hint {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:0.7rem; letter-spacing:0.2em; color:var(--text-muted); font-weight:600;
}
.scroll-line { width:1px; height:40px; background:linear-gradient(var(--cyan), transparent); animation:scrollPulse 2s infinite; }
@keyframes scrollPulse { 0%,100%{opacity:0.3;} 50%{opacity:1;} }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items:center; gap:8px;
  padding: 14px 28px; border-radius:100px;
  font-family:var(--f-body); font-weight:700; font-size:0.9rem; letter-spacing:0.03em;
  transition: var(--transition); cursor:pointer; border:none;
}
.btn--primary {
  background: var(--grad-main); color:var(--bg);
  box-shadow: 0 4px 20px rgba(0,229,255,0.2);
}
.btn--primary:hover { transform:translateY(-3px); box-shadow: 0 10px 35px rgba(0,229,255,0.4); }
.btn--outline {
  background:transparent; border:2px solid rgba(255,255,255,0.15); color:var(--text);
}
.btn--outline:hover { border-color:var(--cyan); color:var(--cyan); }
.btn--xl { padding:18px 40px; font-size:1rem; }

/* ── MARQUEE ── */
.marquee-bar {
  background: var(--bg2); border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06);
  padding:14px 0; overflow:hidden;
}
.marquee-track {
  display:flex; gap:0; white-space:nowrap;
  animation: marquee 30s linear infinite;
}
.marquee-track span {
  padding:0 28px; font-weight:700; font-size:0.85rem; letter-spacing:0.05em;
  color:var(--text-muted);
}
.marquee-track span:nth-child(odd) { color:var(--cyan); }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ── SECTION TAGS / TITLES ── */
.section-tag {
  display:inline-block; font-weight:800; font-size:0.7rem; letter-spacing:0.2em;
  color:var(--cyan); text-transform:uppercase;
  border-left:3px solid var(--cyan); padding-left:12px; margin-bottom:12px;
}
.section-big-title {
  font-family:var(--f-display); font-size:clamp(2.2rem,5vw,3.8rem); line-height:1;
  color:var(--text); margin-bottom:48px;
}
.gradient-text {
  background: var(--grad-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.highlight-cyan { color:var(--cyan); }
.highlight-pink { color:var(--pink); }
.link-arrow { font-weight:700; color:var(--cyan); font-size:0.95rem; transition:var(--transition); }
.link-arrow:hover { gap:8px; letter-spacing:0.02em; }

/* ── ABOUT TEASER ── */
.about-teaser {
  padding:100px 48px; max-width:1200px; margin:0 auto;
}
.at-grid { display:grid; grid-template-columns:300px 1fr; gap:64px; align-items:center; margin-top:32px; }
.at-left { display:flex; justify-content:center; }
.at-avatar { position:relative; width:180px; height:180px; }
.av-ring {
  position:absolute; border-radius:50%; border:2px solid;
  animation:ringPulse 3s ease-in-out infinite;
}
.av-ring--1 { inset:-15px; border-color:rgba(0,229,255,0.3); animation-delay:0s; }
.av-ring--2 { inset:-30px; border-color:rgba(0,229,255,0.1); animation-delay:1s; }
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:0.5;} 50%{transform:scale(1.05);opacity:1;} }
.av-core {
  position:absolute; inset:0; background:var(--grad-main); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:2.8rem; color:var(--bg); letter-spacing:0.05em;
}
.av-kanji {
  position:absolute; bottom:-10px; right:-10px;
  background:var(--bg3); border:2px solid var(--cyan); border-radius:50%;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-jp); font-size:1.2rem; color:var(--cyan);
}
.at-title { font-family:var(--f-display); font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin-bottom:20px; }
.at-text { color:var(--text-muted); line-height:1.9; margin-bottom:14px; font-size:0.98rem; }
.at-text strong { color:var(--text); }
.at-tags { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.atag {
  padding:6px 14px; border-radius:100px; font-size:0.8rem; font-weight:600;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--text-muted);
  transition:var(--transition);
}
.atag:hover { border-color:var(--cyan); color:var(--cyan); }

/* ── SERVICES GRID ── */
.services-section { padding:100px 48px; }
.services-header { max-width:1200px; margin:0 auto; }
.services-grid {
  max-width:1200px; margin:0 auto; display:grid;
  grid-template-columns:repeat(2,1fr); gap:24px; margin-top:0;
}
.srv-card {
  position:relative; overflow:hidden; border-radius:var(--radius);
  padding:48px 40px; min-height:320px;
  border:1px solid rgba(255,255,255,0.07); transition:var(--transition);
  display:block;
}
.srv-card:hover { transform:translateY(-6px); }
.srv--video { background:linear-gradient(135deg, rgba(255,45,120,0.12), rgba(255,123,0,0.08)); }
.srv--video:hover { border-color:var(--pink); }
.srv--web   { background:linear-gradient(135deg, rgba(0,229,255,0.12), rgba(0,255,136,0.08)); }
.srv--web:hover { border-color:var(--cyan); }
.srv--asso  { background:linear-gradient(135deg, rgba(191,95,255,0.12), rgba(0,229,255,0.08)); }
.srv--asso:hover { border-color:var(--purple); }
.srv--japan { background:linear-gradient(135deg, rgba(255,214,10,0.1), rgba(255,123,0,0.08)); }
.srv--japan:hover { border-color:var(--gold); }

.srv-bg-text {
  position:absolute; top:-20px; right:-20px;
  font-family:var(--f-display); font-size:8rem; line-height:1;
  color:rgba(255,255,255,0.03); pointer-events:none; letter-spacing:-0.02em;
}
.srv-num { font-family:var(--f-display); font-size:0.9rem; color:var(--text-muted); margin-bottom:16px; }
.srv-icon-big { font-size:2.5rem; margin-bottom:14px; display:block; }
.srv-card h3 { font-family:var(--f-display); font-size:2rem; color:var(--text); margin-bottom:14px; letter-spacing:0.02em; }
.srv-card p { font-size:0.92rem; color:var(--text-muted); line-height:1.8; margin-bottom:18px; }
.srv-card strong { color:var(--text); }

.srv-platforms { display:flex; gap:8px; margin-bottom:14px; }
.sp { padding:4px 12px; border-radius:100px; font-size:0.75rem; font-weight:700; }
.sp--tt { background:rgba(255,45,120,0.15); color:#ff2d78; }
.sp--yt { background:rgba(255,68,68,0.15); color:#ff4444; }
.sp--sn { background:rgba(255,214,10,0.15); color:var(--gold); }

.srv-price-badge, .srv-date-badge { display:inline-block; padding:6px 16px; border-radius:100px; font-size:0.8rem; font-weight:700; margin-bottom:14px; }
.srv-price-badge { background:rgba(0,255,136,0.1); color:var(--green); border:1px solid rgba(0,255,136,0.2); }
.srv-date-badge { background:rgba(191,95,255,0.1); color:var(--purple); border:1px solid rgba(191,95,255,0.2); }
.srv-kanji-big { font-family:var(--f-jp); font-size:2rem; color:var(--gold); opacity:0.7; margin-bottom:14px; }
.srv-cta-line { font-weight:700; color:var(--cyan); font-size:0.9rem; }
.srv--video .srv-cta-line { color:var(--pink); }
.srv--asso  .srv-cta-line { color:var(--purple); }
.srv--japan .srv-cta-line { color:var(--gold); }

/* ── SKILLS TEASER ── */
.skills-teaser { padding:100px 48px; max-width:900px; margin:0 auto; }
.st-grid { display:flex; flex-direction:column; gap:20px; }
.st-item { display:flex; flex-direction:column; gap:8px; }
.st-info { display:flex; justify-content:space-between; align-items:center; }
.st-name { font-weight:600; font-size:0.95rem; }
.st-pct { font-family:var(--f-display); font-size:1.2rem; color:var(--cyan); }
.st-bar-wrap { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; }
.st-bar-fill {
  height:100%; width:0; background:var(--grad-main); border-radius:3px;
  transition: width 1.5s cubic-bezier(0.4,0,0.2,1);
}
.st-bar-fill.animated { width: var(--pct); }
.st-bar-fill.st-pink { background:linear-gradient(90deg, var(--pink), var(--purple)); }

/* ── ASSO TEASER ── */
.asso-teaser {
  background: linear-gradient(135deg, rgba(191,95,255,0.08), rgba(0,229,255,0.05));
  border:1px solid rgba(191,95,255,0.15); border-radius:24px;
  margin:0 48px; padding:80px; position:relative; overflow:hidden;
}
.at-glow { position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:400px; height:400px; background:radial-gradient(circle, rgba(191,95,255,0.2), transparent 70%); pointer-events:none; }
.asstease-inner { position:relative; z-index:2; text-align:center; }
.asstease-badge { display:inline-block; padding:8px 20px; background:rgba(191,95,255,0.15); border:1px solid rgba(191,95,255,0.3); border-radius:100px; font-size:0.8rem; font-weight:700; color:var(--purple); margin-bottom:24px; }
.asstease-title { font-family:var(--f-display); font-size:clamp(2.5rem,6vw,4.5rem); margin-bottom:20px; }
.asstease-desc { color:var(--text-muted); max-width:680px; margin:0 auto 40px; font-size:1rem; line-height:1.9; }
.asstease-desc strong { color:var(--text); }
.asstease-stats { display:flex; justify-content:center; gap:48px; margin-bottom:40px; flex-wrap:wrap; }
.ast-stat { text-align:center; }
.ast-num { display:block; font-family:var(--f-display); font-size:2.2rem; background:var(--grad-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ast-lab { display:block; font-size:0.78rem; color:var(--text-muted); font-weight:600; letter-spacing:0.05em; }

/* ── CTA SECTION ── */
.cta-section { padding:100px 48px; }
.cta-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; background:var(--surface2); border:1px solid rgba(255,255,255,0.07); border-radius:24px; padding:64px; }
.cta-left h2 { font-family:var(--f-display); font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin-bottom:14px; }
.cta-left p { color:var(--text-muted); font-size:0.95rem; line-height:1.8; }
.cta-right { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.cta-contact-info { display:flex; flex-direction:column; gap:8px; }
.cta-contact-info a { font-size:0.9rem; color:var(--text-muted); transition:color var(--transition); }
.cta-contact-info a:hover { color:var(--cyan); }

/* ── FOOTER ── */
.footer { background:var(--bg2); border-top:1px solid rgba(255,255,255,0.06); padding:64px 48px 32px; }
.footer-top { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-bottom:48px; }
.footer-logo { font-family:var(--f-display); font-size:2rem; color:var(--cyan); margin-bottom:12px; }
.jp-small { font-family:var(--f-jp); font-size:1rem; color:var(--text-muted); margin-left:8px; }
.footer-brand p { color:var(--text-muted); font-size:0.9rem; line-height:1.7; max-width:320px; margin-bottom:20px; }
.footer-socials { display:flex; gap:10px; }
.fsoc { padding:6px 14px; border-radius:100px; font-size:0.78rem; font-weight:700; border:1px solid; cursor:default; }
.fsoc--tt { color:#ff2d78; border-color:rgba(255,45,120,0.3); }
.fsoc--yt { color:#ff4444; border-color:rgba(255,68,68,0.3); }
.fsoc--sn { color:var(--gold); border-color:rgba(255,214,10,0.3); }

.footer-nav { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.fn-col h4 { font-family:var(--f-display); font-size:1.1rem; color:var(--text); margin-bottom:16px; letter-spacing:0.05em; }
.fn-col a { display:block; font-size:0.9rem; color:var(--text-muted); margin-bottom:10px; transition:color var(--transition); }
.fn-col a:hover { color:var(--cyan); }
.footer-asso-badge { display:inline-block; margin-top:12px; padding:10px 16px; background:rgba(191,95,255,0.1); border:1px solid rgba(191,95,255,0.2); border-radius:var(--radius-sm); font-size:0.82rem; color:var(--purple); line-height:1.5; }
.footer-asso-badge small { color:var(--text-muted); }
.footer-bottom { max-width:1200px; margin:0 auto; padding-top:24px; border-top:1px solid rgba(255,255,255,0.05); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-bottom span { font-size:0.8rem; color:var(--text-dim); }
.footer-jp-motto { font-family:var(--f-jp); }

/* ── PAGE HERO ── */
.page-hero {
  min-height:50vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:140px 48px 80px; text-align:center;
}
.page-hero-content { position:relative; z-index:2; }
.page-hero-title { font-family:var(--f-display); font-size:clamp(3.5rem,10vw,8rem); line-height:1; margin-bottom:16px; animation: heroIn 0.8s ease both; }
.page-hero-jp { font-family:var(--f-jp); font-size:1.1rem; color:var(--text-muted); letter-spacing:0.25em; margin-top:8px; animation: heroIn 0.8s 0.1s ease both; }

/* ── ABOUT PAGE ── */
.about-main { padding:80px 48px; max-width:1200px; margin:0 auto; }
.aboutm-grid { display:grid; grid-template-columns:360px 1fr; gap:56px; align-items:start; }
.aboutm-card {
  background:var(--surface); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius);
  padding:36px; position:sticky; top:100px;
}
.id-avatar-big {
  width:80px; height:80px; background:var(--grad-main); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:1.8rem; color:var(--bg); margin-bottom:16px;
}
.id-name-block h2 { font-family:var(--f-display); font-size:1.6rem; color:var(--text); }
.id-sub { font-size:0.9rem; color:var(--text-muted); margin-top:2px; }
.id-sub .gradient-text { -webkit-text-fill-color: transparent; }
.id-info-list { margin:24px 0; border-top:1px solid rgba(255,255,255,0.06); padding-top:20px; display:flex; flex-direction:column; gap:12px; }
.id-info-item { display:flex; justify-content:space-between; gap:12px; }
.id-info-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); flex-shrink:0; }
.id-info-val { font-size:0.88rem; color:var(--text); text-align:right; }
.id-info-val a { transition:color var(--transition); }
.id-info-val a:hover { color:var(--cyan); }
.id-tags-wrap { display:flex; flex-wrap:wrap; gap:6px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.06); }
.idtag { padding:4px 10px; border-radius:100px; font-size:0.75rem; font-weight:700; }
.idtag--c { background:rgba(255,45,120,0.1); color:var(--pink); }
.idtag--y { background:rgba(0,229,255,0.1); color:var(--cyan); }
.idtag--p { background:rgba(255,214,10,0.1); color:var(--gold); }
.idtag--g { background:rgba(191,95,255,0.1); color:var(--purple); }
.idtag--r { background:rgba(0,255,136,0.1); color:var(--green); }

.aboutm-texts { display:flex; flex-direction:column; gap:40px; }
.abt-block h3 { font-family:var(--f-display); font-size:1.8rem; color:var(--text); margin-bottom:14px; }
.abt-block p { color:var(--text-muted); line-height:1.9; margin-bottom:12px; }
.abt-block strong { color:var(--text); }

/* Japan section */
.japan-section {
  position:relative; background:var(--bg2); border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06);
  padding:100px 48px; overflow:hidden;
}
.japan-bg-kanji {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--f-jp); font-size:20rem; color:rgba(255,214,10,0.03);
  pointer-events:none; line-height:1; letter-spacing:-0.05em; white-space:nowrap;
}
.japan-content { position:relative; z-index:2; max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 260px; gap:64px; align-items:center; }
.japan-title { font-family:var(--f-display); font-size:clamp(2.5rem,5vw,4rem); color:var(--text); margin-bottom:24px; }
.jp-accent { font-family:var(--f-jp); color:var(--gold); font-size:0.7em; margin-left:10px; }
.japan-text-side p { color:var(--text-muted); line-height:1.9; margin-bottom:14px; }
.japan-text-side strong { color:var(--text); }
.japan-goals { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.jgoal { display:flex; align-items:center; gap:14px; padding:14px 18px; background:rgba(255,214,10,0.05); border:1px solid rgba(255,214,10,0.15); border-radius:var(--radius-sm); }
.jgoal-icon { font-size:1.5rem; }
.jgoal strong { display:block; color:var(--text); font-size:0.9rem; }
.jgoal small { color:var(--text-muted); font-size:0.8rem; }
.kanji-stack { display:flex; flex-direction:column; align-items:center; gap:4px; }
.k-big { font-family:var(--f-jp); font-size:7rem; line-height:1; color:var(--gold); opacity:0.8; }
.k-label { font-size:0.7rem; letter-spacing:0.2em; color:var(--gold); text-transform:uppercase; margin-bottom:16px; }
.k-mid { font-family:var(--f-jp); font-size:4rem; line-height:1; color:var(--cyan); opacity:0.5; }
.k-label2 { font-size:0.65rem; letter-spacing:0.15em; color:var(--cyan); text-transform:uppercase; margin-bottom:12px; }
.k-small { font-family:var(--f-jp); font-size:2.5rem; line-height:1; color:var(--purple); opacity:0.4; }
.k-label3 { font-size:0.6rem; letter-spacing:0.1em; color:var(--purple); text-transform:uppercase; }

/* Timeline */
.timeline-section { padding:100px 48px; max-width:900px; margin:0 auto; }
.timeline { position:relative; padding-left:40px; margin-top:0; }
.timeline::before { content:''; position:absolute; left:14px; top:0; bottom:0; width:2px; background:linear-gradient(var(--bg3),rgba(255,255,255,0.08),var(--bg3)); }
.tl-item { position:relative; padding-bottom:48px; display:grid; grid-template-columns:80px 1fr; gap:24px; align-items:start; }
.tl-dot { position:absolute; left:-32px; top:8px; width:14px; height:14px; border-radius:50%; border:3px solid var(--bg); z-index:1; }
.tl-dot--gold   { background:var(--gold);   box-shadow:0 0 12px rgba(255,214,10,0.5); }
.tl-dot--cyan   { background:var(--cyan);   box-shadow:0 0 12px rgba(0,229,255,0.5); }
.tl-dot--pink   { background:var(--pink);   box-shadow:0 0 12px rgba(255,45,120,0.5); }
.tl-dot--green  { background:var(--green);  box-shadow:0 0 12px rgba(0,255,136,0.5); }
.tl-dot--future { background:var(--purple); box-shadow:0 0 12px rgba(191,95,255,0.5); }
.tl-year { font-family:var(--f-display); font-size:1rem; color:var(--text-muted); padding-top:6px; }
.tl-card { background:var(--surface); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-sm); padding:20px 24px; }
.tl-card h4 { font-family:var(--f-display); font-size:1.2rem; color:var(--text); margin-bottom:6px; }
.tl-card p { font-size:0.88rem; color:var(--text-muted); line-height:1.7; }
.tl-card--highlight { border-color:rgba(0,255,136,0.3); background:rgba(0,255,136,0.04); }
.tl-card--future { border-color:rgba(191,95,255,0.3); background:rgba(191,95,255,0.04); }

/* ── PROJECTS PAGE ── */
.proj-video-section { padding:80px 48px; max-width:1200px; margin:0 auto; }
.section-intro { color:var(--text-muted); max-width:700px; font-size:1rem; line-height:1.9; margin-bottom:48px; }
.platforms-big-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.plat-card { background:var(--surface); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius); padding:36px; transition:var(--transition); }
.plat-card:hover { transform:translateY(-4px); }
.plat--tiktok:hover { border-color:var(--pink); }
.plat--youtube:hover { border-color:#ff4444; }
.plat--snap:hover { border-color:var(--gold); }
.plat-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.plat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.plat-icon--tt { background:rgba(255,45,120,0.15); color:var(--pink); }
.plat-icon--yt { background:rgba(255,68,68,0.15); color:#ff4444; }
.plat-icon--sn { background:rgba(255,214,10,0.15); color:var(--gold); }
.plat-card h3 { font-family:var(--f-display); font-size:1.5rem; color:var(--text); flex:1; }
.plat-status { font-size:0.75rem; font-weight:700; color:var(--green); }
.plat-card p { color:var(--text-muted); line-height:1.8; font-size:0.92rem; margin-bottom:20px; }
.plat-features { display:flex; flex-wrap:wrap; gap:8px; }
.plat-features span { padding:4px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:100px; font-size:0.75rem; color:var(--text-muted); }

.proj-web-section { background:var(--bg2); border-top:1px solid rgba(255,255,255,0.06); padding:80px 48px; }
.pweb-inner { max-width:1200px; margin:0 auto; }
.web-hero-block { display:grid; grid-template-columns:1fr 380px; gap:64px; align-items:center; }
.price-hero-badge { display:inline-block; padding:10px 24px; background:var(--grad-cool); border-radius:100px; font-size:0.9rem; font-weight:700; color:var(--bg); margin-bottom:20px; }
.web-hero-text h3 { font-family:var(--f-display); font-size:2.5rem; color:var(--text); margin-bottom:16px; }
.web-hero-text p { color:var(--text-muted); line-height:1.9; margin-bottom:16px; }
.web-hero-text strong { color:var(--text); }
.web-types-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px; }
.web-type { background:var(--surface); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-sm); padding:14px; text-align:center; transition:var(--transition); }
.web-type:hover { border-color:var(--cyan); }
.wt-icon { display:block; font-size:1.5rem; margin-bottom:6px; }
.wt-name { display:block; font-size:0.8rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.wt-price { display:block; font-size:0.75rem; color:var(--cyan); font-weight:600; }

/* Browser mock */
.browser-showcase { display:flex; justify-content:center; }
.browser-mock { background:var(--surface); border:1px solid rgba(255,255,255,0.1); border-radius:12px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.5), 0 0 40px rgba(0,229,255,0.05); width:100%; max-width:380px; }
.browser-bar { display:flex; align-items:center; gap:6px; padding:12px 14px; background:var(--bg3); border-bottom:1px solid rgba(255,255,255,0.06); }
.dot { width:10px; height:10px; border-radius:50%; }
.dot--r { background:#ff5f56; } .dot--y { background:#ffbd2e; } .dot--g { background:#27c93f; }
.browser-url { flex:1; margin-left:8px; background:rgba(255,255,255,0.05); border-radius:4px; padding:4px 12px; font-family:var(--f-body); font-size:0.7rem; color:var(--text-muted); }
.browser-body { padding:14px; }
.bm-nav { height:10px; background:rgba(255,255,255,0.04); border-radius:3px; margin-bottom:10px; }
.bm-hero { height:90px; background:linear-gradient(135deg, rgba(0,229,255,0.1), rgba(191,95,255,0.1)); border-radius:8px; margin-bottom:10px; display:flex; flex-direction:column; justify-content:center; padding:12px; gap:6px; }
.bm-h-title { height:10px; width:60%; background:rgba(255,255,255,0.15); border-radius:3px; }
.bm-h-sub { height:7px; width:40%; background:rgba(255,255,255,0.08); border-radius:3px; }
.bm-h-btn { height:22px; width:100px; background:var(--grad-main); border-radius:100px; margin-top:4px; }
.bm-cards { display:flex; gap:8px; margin-bottom:8px; }
.bm-card { flex:1; height:50px; border-radius:6px; }
.bm-card--c { background:rgba(0,229,255,0.12); }
.bm-card--y { background:rgba(255,214,10,0.12); }
.bm-card--p { background:rgba(191,95,255,0.12); }
.bm-footer { height:16px; background:rgba(255,255,255,0.03); border-radius:3px; }

/* Skills full */
.skills-full-section { padding:80px 48px; max-width:1100px; margin:0 auto; }
.skills-full-grid { display:flex; flex-direction:column; gap:28px; }
.skf-item { background:var(--surface); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius); padding:28px 32px; transition:var(--transition); }
.skf-item:hover { border-color:rgba(0,229,255,0.2); }
.skf-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.skf-icon { font-size:1.3rem; }
.skf-name { flex:1; font-weight:700; font-size:1rem; }
.skf-pct { font-family:var(--f-display); font-size:1.5rem; background:var(--grad-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.skf-bar { height:6px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; margin-bottom:12px; }
.skf-fill { height:100%; width:0; background:var(--grad-main); border-radius:3px; transition:width 1.5s cubic-bezier(0.4,0,0.2,1); }
.skf-fill.animated { width:var(--p); }
.skf-fill--cyan   { background:linear-gradient(90deg, var(--cyan), var(--green)); }
.skf-fill--pink   { background:linear-gradient(90deg, var(--pink), var(--orange)); }
.skf-fill--gold   { background:linear-gradient(90deg, var(--gold), var(--orange)); }
.skf-fill--green  { background:linear-gradient(90deg, var(--green), var(--cyan)); }
.skf-fill--purple { background:linear-gradient(90deg, var(--purple), var(--pink)); }
.skf-desc { font-size:0.88rem; color:var(--text-muted); line-height:1.7; }

/* ── ASSOCIATION PAGE ── */
.page-hero--asso-big { min-height:60vh; }
.asso-founding-badge { display:inline-block; padding:10px 24px; background:rgba(0,229,255,0.1); border:1px solid rgba(0,229,255,0.3); border-radius:100px; font-size:0.8rem; font-weight:700; color:var(--cyan); letter-spacing:0.1em; margin-bottom:24px; }
.asso-hero-title { font-family:var(--f-display); font-size:clamp(3rem,9vw,7rem); line-height:1; margin-bottom:16px; }
.asso-hero-tagline { font-size:1.1rem; color:var(--text); font-weight:600; margin-bottom:10px; }
.asso-hero-sub { color:var(--text-muted); max-width:580px; margin:0 auto 40px; font-size:0.95rem; }
.asso-hero-stats { display:flex; justify-content:center; gap:48px; flex-wrap:wrap; }
.ahs { text-align:center; }
.ahs-n { display:block; font-family:var(--f-display); font-size:1.8rem; background:var(--grad-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ahs-l { display:block; font-size:0.75rem; color:var(--text-muted); font-weight:600; }

.asso-mission-section { padding:80px 48px; max-width:1200px; margin:0 auto; }
.mission-big-grid { display:grid; grid-template-columns:1fr 300px; gap:64px; align-items:center; }
.mbg-text h2 { margin-bottom:24px; }
.mbg-text p { color:var(--text-muted); line-height:1.9; margin-bottom:16px; }
.mbg-text strong { color:var(--text); }
.mission-quote { margin-top:28px; padding:24px 28px; background:rgba(0,229,255,0.04); border-left:3px solid var(--cyan); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.mq-mark { display:block; font-family:var(--f-display); font-size:4rem; line-height:1; color:var(--cyan); opacity:0.3; }
.mission-quote p { color:var(--text); font-size:1rem; font-style:italic; margin-bottom:8px; }
.mq-author { font-size:0.8rem; color:var(--cyan); font-weight:600; }
.shield-big { position:relative; display:flex; align-items:center; justify-content:center; width:220px; height:220px; }
.sb-outer { width:160px; height:160px; background:linear-gradient(135deg, rgba(0,229,255,0.15), rgba(191,95,255,0.15)); border:2px solid rgba(0,229,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.sb-inner { text-align:center; }
.sb-icon { display:block; font-size:2.5rem; }
.sb-text { display:block; font-family:var(--f-display); font-size:1.5rem; color:var(--cyan); }
.sb-sub { display:block; font-size:0.75rem; color:var(--text-muted); }
.sb-ring { position:absolute; border-radius:50%; border:1px solid; }
.sb-ring--1 { inset:-20px; border-color:rgba(0,229,255,0.15); animation:ringPulse 3s ease-in-out infinite; }
.sb-ring--2 { inset:-45px; border-color:rgba(0,229,255,0.06); animation:ringPulse 3s 1s ease-in-out infinite; }

.pillars-big-section { background:var(--bg2); border-top:1px solid rgba(255,255,255,0.06); padding:80px 48px; }
.pillars-big-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.pb-card { background:var(--surface); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius); padding:40px; transition:var(--transition); }
.pb-card:hover { transform:translateY(-4px); }
.pb--cyan:hover  { border-color:var(--cyan); }
.pb--pink:hover  { border-color:var(--pink); }
.pb--gold:hover  { border-color:var(--gold); }
.pb--green:hover { border-color:var(--green); }
.pb-num { font-family:var(--f-display); font-size:3rem; line-height:1; margin-bottom:8px; }
.pb--cyan  .pb-num { color:var(--cyan); }
.pb--pink  .pb-num { color:var(--pink); }
.pb--gold  .pb-num { color:var(--gold); }
.pb--green .pb-num { color:var(--green); }
.pb-icon { font-size:2rem; margin-bottom:12px; display:block; }
.pb-card h3 { font-family:var(--f-display); font-size:1.8rem; color:var(--text); margin-bottom:12px; }
.pb-card p { color:var(--text-muted); line-height:1.8; font-size:0.92rem; margin-bottom:12px; }
.pb-tags { display:flex; gap:8px; flex-wrap:wrap; }
.pb-tags span { padding:4px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:100px; font-size:0.75rem; color:var(--text-muted); }

.risks-big-section { padding:80px 48px; max-width:1200px; margin:0 auto; }
.risks-big-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rb-card { background:var(--surface); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius); padding:28px; transition:var(--transition); }
.rb-card:hover { border-color:var(--pink); transform:translateY(-3px); }
.rb-icon { font-size:2rem; margin-bottom:12px; display:block; }
.rb-card h3 { font-family:var(--f-display); font-size:1.3rem; color:var(--text); margin-bottom:10px; }
.rb-card p { font-size:0.87rem; color:var(--text-muted); line-height:1.75; margin-bottom:14px; }
.rb-stat { font-size:0.78rem; font-weight:700; color:var(--pink); padding:6px 12px; background:rgba(255,45,120,0.07); border-radius:100px; display:inline-block; }

.join-section { padding:80px 48px; }
.join-inner { max-width:900px; margin:0 auto; text-align:center; background:linear-gradient(135deg, rgba(191,95,255,0.08), rgba(0,229,255,0.05)); border:1px solid rgba(191,95,255,0.15); border-radius:24px; padding:64px; }
.join-badge { display:inline-block; padding:8px 20px; background:rgba(191,95,255,0.15); border:1px solid rgba(191,95,255,0.3); border-radius:100px; font-size:0.75rem; font-weight:700; color:var(--purple); margin-bottom:20px; }
.join-inner h2 { font-family:var(--f-display); font-size:3rem; margin-bottom:16px; }
.join-inner p { color:var(--text-muted); max-width:600px; margin:0 auto 40px; }
.join-ways { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px; }
.jw-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-sm); padding:24px; text-align:center; transition:var(--transition); }
.jw-card:hover { border-color:var(--purple); }
.jw-icon { font-size:2rem; display:block; margin-bottom:10px; }
.jw-card h4 { font-family:var(--f-display); font-size:1.2rem; color:var(--text); margin-bottom:8px; }
.jw-card p { font-size:0.85rem; color:var(--text-muted); line-height:1.7; }

/* ── CONTACT PAGE ── */
.contact-big-section { padding:80px 48px; max-width:1300px; margin:0 auto; }
.contact-big-grid { display:grid; grid-template-columns:400px 1fr; gap:64px; align-items:start; }
.contact-info-panel h2 { font-family:var(--f-display); font-size:2.5rem; line-height:1.1; margin-bottom:16px; }
.ci-intro { color:var(--text-muted); line-height:1.9; margin-bottom:32px; }
.ci-cards { display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.ci-card { display:flex; align-items:center; gap:16px; padding:18px 20px; background:var(--surface); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius); transition:var(--transition); }
.ci-card--phone:hover { border-color:var(--green); }
.ci-card--email:hover { border-color:var(--cyan); }
.ci-card-icon { font-size:1.5rem; }
.ci-card-content { flex:1; }
.ci-card-label { display:block; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin-bottom:2px; }
.ci-card-val { display:block; font-weight:700; font-size:0.9rem; color:var(--text); margin-bottom:2px; word-break:break-all; }
.ci-card-note { display:block; font-size:0.75rem; color:var(--text-muted); }
.ci-card-arrow { color:var(--text-muted); font-size:1.1rem; transition:var(--transition); }
.ci-card:hover .ci-card-arrow { color:var(--cyan); transform:translateX(3px); }

.ci-platforms h4, .ci-offers h4 { font-family:var(--f-display); font-size:1rem; color:var(--text); margin-bottom:12px; letter-spacing:0.05em; }
.cip-list { display:flex; gap:10px; margin-bottom:28px; }
.cip-item { display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:100px; font-size:0.82rem; font-weight:700; border:1px solid; }
.cip--tt { background:rgba(255,45,120,0.1); color:var(--pink); border-color:rgba(255,45,120,0.3); }
.cip--yt { background:rgba(255,68,68,0.1); color:#ff4444; border-color:rgba(255,68,68,0.3); }
.cip--sn { background:rgba(255,214,10,0.1); color:var(--gold); border-color:rgba(255,214,10,0.3); }
.cip-icon { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.65rem; background:currentColor; color:var(--bg); }

.cio-list { display:flex; flex-direction:column; gap:14px; }
.cio-item { display:flex; gap:14px; padding:14px; background:var(--surface); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-sm); }
.cio-icon { font-size:1.3rem; flex-shrink:0; }
.cio-item strong { display:block; color:var(--text); font-size:0.9rem; margin-bottom:3px; }
.cio-item p { font-size:0.82rem; color:var(--text-muted); line-height:1.5; }

.contact-form-panel { background:var(--surface); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius); overflow:hidden; }
.cfp-header { padding:32px 36px 0; }
.cfp-header h3 { font-family:var(--f-display); font-size:1.8rem; color:var(--text); margin-bottom:6px; }
.cfp-header p { color:var(--text-muted); font-size:0.9rem; }
.contact-form { padding:28px 36px 36px; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cf-group { margin-bottom:20px; }
.cf-group label { display:block; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:8px; }
.cf-group input, .cf-group textarea {
  width:100%; padding:14px 18px; background:var(--bg); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--f-body); font-size:0.95rem; outline:none; transition:border-color var(--transition);
}
.cf-group input:focus, .cf-group textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,0.08); }
.cf-group textarea { resize:vertical; min-height:130px; }
.cf-radio-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cf-radio { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--bg); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); font-size:0.88rem; }
.cf-radio:hover { border-color:var(--cyan); }
.cf-radio input { accent-color:var(--cyan); }
.cf-radio input:checked + span { color:var(--cyan); }
.cf-budget-btns { display:flex; gap:8px; flex-wrap:wrap; }
.budget-btn { padding:10px 20px; background:var(--bg); border:1px solid rgba(255,255,255,0.08); border-radius:100px; color:var(--text-muted); font-size:0.85rem; font-weight:600; cursor:pointer; transition:var(--transition); }
.budget-btn:hover, .budget-btn.selected { border-color:var(--cyan); color:var(--cyan); background:rgba(0,229,255,0.06); }
.btn--submit { width:100%; justify-content:center; border-radius:var(--radius-sm); }
.btn-arrow { transition:transform var(--transition); }
.btn--submit:hover .btn-arrow { transform:translateX(4px); }
.cf-note { text-align:center; font-size:0.8rem; color:var(--text-muted); margin-top:12px; }
.form-success-panel { padding:64px 40px; text-align:center; }
.fsp-icon { width:72px; height:72px; background:rgba(0,255,136,0.1); border:2px solid var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--green); margin:0 auto 20px; }
.form-success-panel h3 { font-family:var(--f-display); font-size:2rem; color:var(--text); margin-bottom:10px; }
.form-success-panel p { color:var(--text-muted); margin-bottom:8px; }
.fsp-sub { font-size:0.88rem; margin-bottom:24px; }
.fsp-links { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .about-teaser, .services-section, .skills-teaser, .cta-section { padding:60px 32px; }
  .asso-teaser { margin:0 32px; padding:56px 40px; }
  .services-grid { grid-template-columns:1fr; }
  .platforms-big-grid { grid-template-columns:1fr; }
  .contact-big-grid, .aboutm-grid { grid-template-columns:1fr; }
  .aboutm-card { position:static; }
  .japan-content { grid-template-columns:1fr; }
  .kanji-stack { display:none; }
  .mission-big-grid, .web-hero-block { grid-template-columns:1fr; }
  .mbg-visual { display:none; }
  .cta-inner { grid-template-columns:1fr; gap:32px; padding:40px; }
}

@media (max-width:768px) {
  .navbar { padding:14px 24px; }
  .nav-links {
    display:none; flex-direction:column; position:fixed; top:0; right:0; bottom:0; width:280px;
    background:var(--bg2); padding:80px 32px; gap:20px; border-left:1px solid rgba(255,255,255,0.06);
    transform:translateX(100%); transition:transform var(--transition); z-index:99;
  }
  .nav-links.open { display:flex; transform:translateX(0); }
  .nav-cta { display:none; }
  .nav-burger { display:flex; z-index:100; }
  .hero { padding:100px 24px 60px; }
  .hero-badge { display:none; }
  .about-teaser, .proj-video-section, .skills-full-section, .asso-mission-section, .risks-big-section, .join-section, .contact-big-section, .timeline-section, .about-main, .japan-section, .proj-web-section { padding:60px 24px; }
  .asso-teaser { margin:0 16px; padding:40px 24px; }
  .at-grid { grid-template-columns:1fr; }
  .at-left { display:none; }
  .pillars-big-grid, .risks-big-grid, .join-ways { grid-template-columns:1fr; }
  .web-types-grid { grid-template-columns:repeat(2,1fr); }
  .cf-row, .cf-radio-grid { grid-template-columns:1fr; }
  .footer-top, .footer-nav { grid-template-columns:1fr; gap:32px; }
  .footer-bottom { flex-direction:column; align-items:center; }
  .page-hero { padding:100px 24px 60px; }
  .cta-section { padding:60px 24px; }
  .cta-inner { padding:32px 24px; }
  .pillars-big-section { padding:60px 24px; }
  .asstease-stats { gap:24px; }
}