/* ===================================================
   テーマスイッチャー UI
   =================================================== */

.theme-switcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(10, 10, 20, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  min-width: 168px;
}

.ts-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
  margin-bottom: 4px;
  font-family: inherit;
}

.ts-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ts-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  text-align: left;
}

.ts-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.1);
}

.ts-btn.active {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

.ts-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ts-btn[data-theme="default"] .ts-dot { background: #6366f1; }
.ts-btn[data-theme="minimal"] .ts-dot { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.3); }
.ts-btn[data-theme="neumorphism"] .ts-dot { background: linear-gradient(135deg, #6c63ff, #9f7aea); }
.ts-btn[data-theme="bento"] .ts-dot { background: conic-gradient(#a78bfa 0%, #60a5fa 50%, #34d399 100%); }

/* ===================================================
   テーマ 1: ミニマル
   =================================================== */

body.theme-minimal {
  background: #f8f8f6;
  color: #1a1a1a;
}

body.theme-minimal .header.scrolled {
  background: rgba(248, 248, 246, 0.95);
  border-bottom: 1px solid #e8e8e4;
  backdrop-filter: blur(20px);
}

body.theme-minimal .nav-link { color: rgba(26, 26, 26, 0.68); }
body.theme-minimal .nav-link:hover { color: #1a1a1a; background: rgba(0,0,0,0.05); }
body.theme-minimal .logo-text { color: #1a1a1a; }

body.theme-minimal .logo-icon {
  background: #1a1a1a;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.theme-minimal .nav-cta { background: #1a1a1a; color: #ffffff !important; }
body.theme-minimal .nav-cta:hover { background: #333; opacity: 1; }
body.theme-minimal .hamburger span { background: #1a1a1a; }

@media (max-width: 768px) {
  body.theme-minimal .nav-menu { background: rgba(248, 248, 246, 0.98); }
  body.theme-minimal .nav-link { color: rgba(26, 26, 26, 0.75); }
}

body.theme-minimal .hero { background: #f8f8f6; }
body.theme-minimal .hero-bg { background: none; }
body.theme-minimal .hero-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}

body.theme-minimal .hero-badge {
  background: transparent;
  border: 1.5px solid rgba(0,0,0,0.15);
  color: #666;
}

body.theme-minimal .hero-title { color: #1a1a1a; }

body.theme-minimal .gradient-text,
body.theme-minimal .stat-num,
body.theme-minimal .service-price {
  background: #1a1a1a;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.theme-minimal .hero-desc { color: rgba(26,26,26,0.58); }

body.theme-minimal .btn-primary {
  background: #1a1a1a; color: #fff; box-shadow: none;
}
body.theme-minimal .btn-primary:hover { background: #333; box-shadow: none; }

body.theme-minimal .btn-secondary {
  background: transparent; color: #1a1a1a;
  border: 2px solid rgba(26,26,26,0.22); backdrop-filter: none;
}
body.theme-minimal .btn-secondary:hover { border-color: #1a1a1a; background: transparent; }

body.theme-minimal .stat > span:nth-child(2) { color: rgba(26,26,26,0.48); }
body.theme-minimal .stat-label { color: rgba(26,26,26,0.42); }
body.theme-minimal .stat-divider { background: rgba(0,0,0,0.1); }
body.theme-minimal .hero-scroll { color: rgba(0,0,0,0.32); }
body.theme-minimal .scroll-line { background: linear-gradient(to bottom, rgba(0,0,0,0.25), transparent); }

body.theme-minimal .section-tag { color: #999; }
body.theme-minimal .section-title { color: #1a1a1a; }
body.theme-minimal .section-desc { color: rgba(26,26,26,0.55); }

/* Services */
body.theme-minimal .services {
  background: #ffffff;
  border-top: 1px solid #ebebE7;
  border-bottom: 1px solid #ebebE7;
}

body.theme-minimal .service-card {
  background: #f8f8f6; border: 1.5px solid #e4e4e0; box-shadow: none;
}
body.theme-minimal .service-card:hover {
  border-color: #c0c0bc; box-shadow: 0 8px 32px rgba(0,0,0,0.07); transform: translateY(-4px);
}

body.theme-minimal .service-card.featured {
  background: #1a1a1a; border-color: #1a1a1a;
}
body.theme-minimal .service-card.featured h3 { color: #fff; }
body.theme-minimal .service-card.featured p { color: rgba(255,255,255,0.68); }
body.theme-minimal .service-card.featured .service-price {
  background: #fff;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.theme-minimal .service-card.featured .service-features { border-top-color: rgba(255,255,255,0.1); }
body.theme-minimal .service-card.featured .service-features li { color: rgba(255,255,255,0.72); }
body.theme-minimal .service-card.featured .service-features li::before { color: #fff; }
body.theme-minimal .service-badge { background: #fff; color: #1a1a1a; }

body.theme-minimal .service-card:not(.featured) h3 { color: #1a1a1a; }
body.theme-minimal .service-card:not(.featured) p { color: rgba(26,26,26,0.58); }
body.theme-minimal .service-features { border-top-color: #e4e4e0; }
body.theme-minimal .service-features li { color: rgba(26,26,26,0.62); }
body.theme-minimal .service-features li::before { color: #1a1a1a; }

/* Works */
body.theme-minimal .works { background: #f8f8f6; }
body.theme-minimal .filter-btn { border-color: #dededA; color: rgba(26,26,26,0.52); background: transparent; }
body.theme-minimal .filter-btn:hover,
body.theme-minimal .filter-btn.active { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
body.theme-minimal .work-card { background: #fff; border-color: #e8e8e4; }
body.theme-minimal .work-info h4 { color: #1a1a1a; }
body.theme-minimal .work-info p { color: rgba(26,26,26,0.48); }

/* About */
body.theme-minimal .about {
  background: #fff; border-top: 1px solid #ebebE7; border-bottom: 1px solid #ebebE7;
}
body.theme-minimal .about-point h4 { color: #1a1a1a; }
body.theme-minimal .about-point p { color: rgba(26,26,26,0.58); }
body.theme-minimal .point-icon { background: #f0f0ee; border-color: #dededA; }
body.theme-minimal .visual-card { background: #f8f8f6; border-color: #dededA; backdrop-filter: none; }
body.theme-minimal .main-card { background: #1a1a1a; border-color: #1a1a1a; }
body.theme-minimal .main-card h4 { color: #fff; }
body.theme-minimal .main-card p { color: rgba(255,255,255,0.62); }
body.theme-minimal .sub-card-1,
body.theme-minimal .sub-card-2,
body.theme-minimal .sub-card-3 { background: #f8f8f6; color: #1a1a1a; }

/* Contact */
body.theme-minimal .contact { background: #f8f8f6; }
body.theme-minimal .contact-form { background: #fff; border-color: #e8e8e4; }
body.theme-minimal .form-group label { color: rgba(26,26,26,0.72); }
body.theme-minimal .form-group input,
body.theme-minimal .form-group select,
body.theme-minimal .form-group textarea {
  background: #f8f8f6; border-color: #dededA; color: #1a1a1a;
}
body.theme-minimal .form-group input::placeholder,
body.theme-minimal .form-group textarea::placeholder { color: rgba(0,0,0,0.25); }
body.theme-minimal .form-group input:focus,
body.theme-minimal .form-group select:focus,
body.theme-minimal .form-group textarea:focus {
  border-color: #1a1a1a; box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
body.theme-minimal .form-group select option { background: #fff; color: #1a1a1a; }
body.theme-minimal .contact-info { background: #f0f0ee; border-color: #dededA; }
body.theme-minimal .contact-info h3 { color: #1a1a1a; }
body.theme-minimal .contact-info > p { color: rgba(26,26,26,0.58); }
body.theme-minimal .info-item { color: rgba(26,26,26,0.68); }
body.theme-minimal .response-badge {
  background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: rgba(26,26,26,0.65);
}

/* Footer */
body.theme-minimal .footer { background: #1a1a1a; border-top-color: transparent; }

/* Theme switcher for minimal */
body.theme-minimal .theme-switcher {
  background: rgba(248,248,246,0.95);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
body.theme-minimal .ts-label { color: rgba(0,0,0,0.35); }
body.theme-minimal .ts-btn { color: rgba(26,26,26,0.52); }
body.theme-minimal .ts-btn:hover { background: rgba(0,0,0,0.05); color: #1a1a1a; border-color: rgba(0,0,0,0.08); }
body.theme-minimal .ts-btn.active { background: rgba(0,0,0,0.08); color: #1a1a1a; border-color: rgba(0,0,0,0.15); }
body.theme-minimal .ts-btn[data-theme="minimal"] .ts-dot { border-color: rgba(0,0,0,0.35); }

/* ===================================================
   テーマ 2: ニューモーフィズム
   =================================================== */

body.theme-neumorphism {
  background: #ecf0f3;
  color: #4a5568;
}

body.theme-neumorphism .header { background: #ecf0f3; }
body.theme-neumorphism .header.scrolled {
  background: rgba(236,240,243,0.97);
  border-bottom: none;
  box-shadow: 0 4px 20px rgba(163,177,198,0.45);
}

body.theme-neumorphism .logo-text { color: #2d3748; }
body.theme-neumorphism .logo-icon {
  background: linear-gradient(135deg, #6c63ff, #9f7aea);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.theme-neumorphism .nav-link { color: #4a5568; }
body.theme-neumorphism .nav-link:hover { color: #2d3748; background: rgba(255,255,255,0.5); }
body.theme-neumorphism .nav-cta {
  background: linear-gradient(135deg, #6c63ff, #9f7aea);
  box-shadow: 4px 4px 8px #c5cdd8, -2px -2px 6px #ffffff;
  color: #ffffff !important;
}
body.theme-neumorphism .nav-cta:hover { box-shadow: 6px 6px 12px #c5cdd8, -2px -2px 8px #fff; opacity: 1; }
body.theme-neumorphism .hamburger span { background: #4a5568; }

@media (max-width: 768px) {
  body.theme-neumorphism .nav-menu { background: rgba(236,240,243,0.98); }
  body.theme-neumorphism .nav-link { color: #4a5568; }
}

body.theme-neumorphism .hero { background: #ecf0f3; }
body.theme-neumorphism .hero-bg { background: none; }
body.theme-neumorphism .hero-grid { display: none; }
body.theme-neumorphism .hero-badge {
  background: #ecf0f3; border: none;
  box-shadow: 4px 4px 10px #c5cdd8, -4px -4px 10px #ffffff; color: #6c63ff;
}
body.theme-neumorphism .hero-title { color: #2d3748; }

body.theme-neumorphism .gradient-text,
body.theme-neumorphism .stat-num,
body.theme-neumorphism .service-price {
  background: linear-gradient(135deg, #6c63ff, #9f7aea);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

body.theme-neumorphism .hero-desc { color: #718096; }

body.theme-neumorphism .btn-primary {
  background: #ecf0f3; color: #6c63ff;
  box-shadow: 6px 6px 12px #c5cdd8, -6px -6px 12px #ffffff; border: none;
}
body.theme-neumorphism .btn-primary:hover {
  box-shadow: 8px 8px 16px #c5cdd8, -8px -8px 16px #fff; transform: translateY(-2px);
}
body.theme-neumorphism .btn-secondary {
  background: #ecf0f3; color: #4a5568; border: none;
  box-shadow: 4px 4px 8px #c5cdd8, -4px -4px 8px #ffffff; backdrop-filter: none;
}
body.theme-neumorphism .btn-secondary:hover {
  box-shadow: 6px 6px 12px #c5cdd8, -6px -6px 12px #fff; background: #ecf0f3;
}

body.theme-neumorphism .stat > span:nth-child(2) { color: #718096; }
body.theme-neumorphism .stat-label { color: #a0aec0; }
body.theme-neumorphism .stat-divider { background: rgba(163,177,198,0.55); }
body.theme-neumorphism .hero-scroll { color: #a0aec0; }
body.theme-neumorphism .scroll-line { background: linear-gradient(to bottom, rgba(163,177,198,0.65), transparent); }

body.theme-neumorphism .section-tag { color: #6c63ff; }
body.theme-neumorphism .section-title { color: #2d3748; }
body.theme-neumorphism .section-desc { color: #718096; }

/* Services */
body.theme-neumorphism .services { background: #ecf0f3; }
body.theme-neumorphism .service-card {
  background: #ecf0f3; border: none;
  box-shadow: 8px 8px 16px #c5cdd8, -8px -8px 16px #ffffff;
}
body.theme-neumorphism .service-card:hover {
  box-shadow: 12px 12px 24px #c5cdd8, -12px -12px 24px #fff;
  transform: translateY(-4px); border-color: transparent;
}
body.theme-neumorphism .service-card.featured {
  background: #ecf0f3; border: none;
  box-shadow: 10px 10px 20px #c5cdd8, -10px -10px 20px #ffffff;
}
body.theme-neumorphism .service-badge {
  background: linear-gradient(135deg, #6c63ff, #9f7aea);
  box-shadow: 3px 3px 8px rgba(108,99,255,0.3);
}
body.theme-neumorphism .service-card h3 { color: #2d3748; }
body.theme-neumorphism .service-card p { color: #718096; }
body.theme-neumorphism .service-features { border-top-color: rgba(163,177,198,0.32); }
body.theme-neumorphism .service-features li { color: #4a5568; }
body.theme-neumorphism .service-features li::before { color: #6c63ff; }

/* Works */
body.theme-neumorphism .works { background: #ecf0f3; }
body.theme-neumorphism .filter-btn {
  background: #ecf0f3; border: none; color: #718096;
  box-shadow: 4px 4px 8px #c5cdd8, -4px -4px 8px #ffffff;
}
body.theme-neumorphism .filter-btn:hover {
  background: #ecf0f3; color: #2d3748; border-color: transparent;
  box-shadow: 5px 5px 10px #c5cdd8, -5px -5px 10px #fff;
}
body.theme-neumorphism .filter-btn.active {
  background: #ecf0f3; color: #6c63ff; border-color: transparent;
  box-shadow: inset 4px 4px 8px #c5cdd8, inset -4px -4px 8px #ffffff;
}
body.theme-neumorphism .work-card {
  background: #ecf0f3; border: none;
  box-shadow: 8px 8px 16px #c5cdd8, -8px -8px 16px #ffffff;
}
body.theme-neumorphism .work-card:hover {
  box-shadow: 12px 12px 24px #c5cdd8, -12px -12px 24px #fff; transform: translateY(-4px);
}
body.theme-neumorphism .work-info h4 { color: #2d3748; }
body.theme-neumorphism .work-info p { color: #a0aec0; }

/* About */
body.theme-neumorphism .about { background: #ecf0f3; }
body.theme-neumorphism .about-point h4 { color: #2d3748; }
body.theme-neumorphism .about-point p { color: #718096; }
body.theme-neumorphism .point-icon {
  background: #ecf0f3; border: none;
  box-shadow: 4px 4px 8px #c5cdd8, -4px -4px 8px #ffffff;
}
body.theme-neumorphism .visual-card {
  background: #ecf0f3; border: none;
  box-shadow: 8px 8px 16px #c5cdd8, -8px -8px 16px #ffffff; backdrop-filter: none;
}
body.theme-neumorphism .main-card { box-shadow: 10px 10px 20px #c5cdd8, -10px -10px 20px #ffffff; }
body.theme-neumorphism .main-card h4 { color: #2d3748; }
body.theme-neumorphism .main-card p { color: #718096; }
body.theme-neumorphism .sub-card-1,
body.theme-neumorphism .sub-card-2,
body.theme-neumorphism .sub-card-3 {
  background: #ecf0f3; color: #4a5568;
  box-shadow: 6px 6px 12px #c5cdd8, -6px -6px 12px #ffffff;
}

/* Contact */
body.theme-neumorphism .contact { background: #ecf0f3; }
body.theme-neumorphism .contact-form {
  background: #ecf0f3; border: none;
  box-shadow: 8px 8px 16px #c5cdd8, -8px -8px 16px #ffffff;
}
body.theme-neumorphism .form-group label { color: #4a5568; }
body.theme-neumorphism .form-group input,
body.theme-neumorphism .form-group select,
body.theme-neumorphism .form-group textarea {
  background: #ecf0f3; border: none; color: #2d3748;
  box-shadow: inset 4px 4px 8px #c5cdd8, inset -4px -4px 8px #ffffff;
}
body.theme-neumorphism .form-group input::placeholder,
body.theme-neumorphism .form-group textarea::placeholder { color: rgba(74,85,104,0.38); }
body.theme-neumorphism .form-group input:focus,
body.theme-neumorphism .form-group select:focus,
body.theme-neumorphism .form-group textarea:focus {
  outline: none; border: none;
  box-shadow: inset 4px 4px 8px #c5cdd8, inset -4px -4px 8px #fff, 0 0 0 2px rgba(108,99,255,0.32);
}
body.theme-neumorphism .form-group select option { background: #ecf0f3; color: #2d3748; }
body.theme-neumorphism .contact-info {
  background: #ecf0f3; border: none;
  box-shadow: 8px 8px 16px #c5cdd8, -8px -8px 16px #ffffff;
}
body.theme-neumorphism .contact-info h3 { color: #2d3748; }
body.theme-neumorphism .contact-info > p { color: #718096; }
body.theme-neumorphism .info-item { color: #4a5568; }
body.theme-neumorphism .response-badge {
  background: #ecf0f3; border: none; color: #6c63ff;
  box-shadow: 4px 4px 8px #c5cdd8, -4px -4px 8px #ffffff;
}

/* Footer */
body.theme-neumorphism .footer { background: #dde4ea; border-top: none; }
body.theme-neumorphism .footer .logo-text,
body.theme-neumorphism .footer-col h4 { color: #2d3748; }
body.theme-neumorphism .footer-brand p,
body.theme-neumorphism .footer-col a { color: #718096; }
body.theme-neumorphism .footer-col a:hover { color: #2d3748; }
body.theme-neumorphism .footer-bottom { border-top-color: rgba(163,177,198,0.28); color: #a0aec0; }

/* Theme switcher for neumorphism */
body.theme-neumorphism .theme-switcher {
  background: #ecf0f3; border: none;
  box-shadow: 6px 6px 14px #c5cdd8, -6px -6px 14px #ffffff;
}
body.theme-neumorphism .ts-label { color: #a0aec0; }
body.theme-neumorphism .ts-btn { color: #718096; }
body.theme-neumorphism .ts-btn:hover { background: rgba(255,255,255,0.45); color: #2d3748; border-color: transparent; }
body.theme-neumorphism .ts-btn.active {
  background: #ecf0f3; color: #2d3748; border-color: transparent;
  box-shadow: inset 3px 3px 6px #c5cdd8, inset -3px -3px 6px #ffffff;
}

/* ===================================================
   テーマ 3: ベントグリッド
   =================================================== */

body.theme-bento {
  background: #0c0c0e;
  color: #ffffff;
}

body.theme-bento .header.scrolled {
  background: rgba(12,12,14,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

body.theme-bento .hero { background: #0c0c0e; }
body.theme-bento .hero-bg {
  background:
    radial-gradient(ellipse at 25% 50%, rgba(139,92,246,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(59,130,246,0.12) 0%, transparent 50%);
}
body.theme-bento .hero-badge {
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.35); color: #a78bfa;
}
body.theme-bento .gradient-text {
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.theme-bento .stat-num {
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.theme-bento .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #3b82f6);
  box-shadow: 0 4px 20px rgba(124,58,237,0.4);
}
body.theme-bento .btn-primary:hover { box-shadow: 0 8px 30px rgba(124,58,237,0.55); }

/* Services — Bento Grid レイアウト */
body.theme-bento .services { background: #0c0c0e; }

body.theme-bento .services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

body.theme-bento .service-card {
  border-radius: 24px;
  border: none;
  opacity: 1;
  transform: none;
}

body.theme-bento .service-card.animated {
  opacity: 1;
  transform: none;
}

body.theme-bento .service-card:hover {
  transform: scale(1.02);
  border-color: transparent;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}

/* LP カード: 左上 */
body.theme-bento .service-card:nth-child(1) {
  background: #131320;
  border: 1px solid rgba(167,139,250,0.2);
  grid-column: 1;
  grid-row: 1;
}

/* Corporate カード: 右、2行スパン */
body.theme-bento .service-card:nth-child(2) {
  background: linear-gradient(145deg, #4c1d95, #6d28d9 55%, #5b21b6);
  grid-column: 2;
  grid-row: 1 / 3;
  border: none;
}

/* EC カード: 左下 */
body.theme-bento .service-card:nth-child(3) {
  background: #0a1f14;
  border: 1px solid rgba(52,211,153,0.22);
  grid-column: 1;
  grid-row: 2;
}

body.theme-bento .service-card:nth-child(1) h3 { color: #ddd6fe; }
body.theme-bento .service-card:nth-child(1) p { color: rgba(221,214,254,0.62); }
body.theme-bento .service-card:nth-child(1) .service-price {
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.theme-bento .service-card:nth-child(1) .service-features { border-top-color: rgba(167,139,250,0.18); }
body.theme-bento .service-card:nth-child(1) .service-features li { color: rgba(221,214,254,0.68); }
body.theme-bento .service-card:nth-child(1) .service-features li::before { color: #a78bfa; }

body.theme-bento .service-card:nth-child(2) h3 { color: #fff; }
body.theme-bento .service-card:nth-child(2) p { color: rgba(255,255,255,0.7); }
body.theme-bento .service-card:nth-child(2) .service-price {
  background: #fff;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.theme-bento .service-card:nth-child(2) .service-features { border-top-color: rgba(255,255,255,0.14); }
body.theme-bento .service-card:nth-child(2) .service-features li { color: rgba(255,255,255,0.72); }
body.theme-bento .service-card:nth-child(2) .service-features li::before { color: #fff; }
body.theme-bento .service-badge {
  background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); color: #fff;
}

body.theme-bento .service-card:nth-child(3) h3 { color: #d1fae5; }
body.theme-bento .service-card:nth-child(3) p { color: rgba(209,250,229,0.62); }
body.theme-bento .service-card:nth-child(3) .service-price {
  background: linear-gradient(135deg, #34d399, #059669);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.theme-bento .service-card:nth-child(3) .service-features { border-top-color: rgba(52,211,153,0.18); }
body.theme-bento .service-card:nth-child(3) .service-features li { color: rgba(209,250,229,0.68); }
body.theme-bento .service-card:nth-child(3) .service-features li::before { color: #34d399; }

/* Works */
body.theme-bento .works { background: #0c0c0e; }
body.theme-bento .works-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
body.theme-bento .work-card {
  background: #141418; border-color: rgba(255,255,255,0.06); border-radius: 20px;
}
body.theme-bento .work-card:hover { transform: scale(1.02); box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
body.theme-bento .filter-btn.active {
  background: linear-gradient(135deg, #a78bfa, #60a5fa); border-color: transparent;
}

/* About */
body.theme-bento .about { background: #0c0c0e; }
body.theme-bento .about-point p { color: rgba(255,255,255,0.58); }
body.theme-bento .point-icon {
  background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.22);
}
body.theme-bento .visual-card {
  background: rgba(20,20,24,0.92); border-color: rgba(255,255,255,0.07);
}
body.theme-bento .main-card {
  background: linear-gradient(135deg, rgba(109,40,217,0.28), rgba(59,130,246,0.18));
  border-color: rgba(167,139,250,0.28);
}
body.theme-bento .sub-card-1,
body.theme-bento .sub-card-2,
body.theme-bento .sub-card-3 { background: rgba(20,20,24,0.92); }

/* Contact */
body.theme-bento .contact { background: #0c0c0e; }
body.theme-bento .contact-form { background: #141418; border-color: rgba(255,255,255,0.06); }
body.theme-bento .form-group input,
body.theme-bento .form-group select,
body.theme-bento .form-group textarea {
  background: #0c0c0e; border-color: rgba(255,255,255,0.08);
}
body.theme-bento .contact-info {
  background: linear-gradient(135deg, rgba(109,40,217,0.22), rgba(59,130,246,0.14));
  border-color: rgba(167,139,250,0.25);
}
body.theme-bento .response-badge {
  background: rgba(167,139,250,0.14); border-color: rgba(167,139,250,0.28); color: #a78bfa;
}

/* Footer */
body.theme-bento .footer { background: #0c0c0e; border-top-color: rgba(255,255,255,0.05); }

/* Bento responsive */
@media (max-width: 768px) {
  body.theme-bento .services-grid { grid-template-columns: 1fr; }
  body.theme-bento .service-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  body.theme-bento .service-card:nth-child(2) { grid-column: 1; grid-row: 2; }
  body.theme-bento .service-card:nth-child(3) { grid-column: 1; grid-row: 3; }
  body.theme-bento .works-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  body.theme-bento .works-grid { grid-template-columns: repeat(2, 1fr); }
}