.elementor-15 .elementor-element.elementor-element-f6749ea{--display:flex;}.elementor-15 .elementor-element.elementor-element-f6749ea.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-15 .elementor-element.elementor-element-030ce28{width:var( --container-widget-width, 107.333% );max-width:107.333%;--container-widget-width:107.333%;--container-widget-flex-grow:0;}.elementor-15 .elementor-element.elementor-element-030ce28.elementor-element{--flex-grow:0;--flex-shrink:0;}@media(min-width:768px){.elementor-15 .elementor-element.elementor-element-f6749ea{--width:93.646%;}}/* Start custom CSS for html, class: .elementor-element-030ce28 */<style>
/* Basic Resets - Keep These */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    /* Use Primary Global Color for the background gradient */
    background: linear-gradient(135deg, var(--e-global-color-primary) 0%, #2d2d44 100%); 
    overflow-x: hidden;
}

/* Navigation - Using Global Colors */
nav {
    /* Use a semi-transparent version of Primary for the background */
    background: rgba(30, 30, 46, 0.95);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2); /* Use a low-opacity Accent */
}

.logo {
    /* Use Accent Global Color for the logo gradient */
    background: linear-gradient(135deg, var(--e-global-color-accent), var(--e-global-color-secondary)); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mobile-menu-toggle span {
    background: var(--e-global-color-accent); /* Accent for menu toggle */
}

.nav-links a {
    color: var(--e-global-color-secondary); /* Secondary Global for link color */
}

.nav-links a:after {
    /* Use Accent Global Color for the hover underline */
    background: linear-gradient(90deg, var(--e-global-color-accent), var(--e-global-color-secondary)); 
}

.nav-links a:hover {
    color: var(--e-global-color-accent); /* Accent Global Color on hover */
}

/* Hero Section - Using Global Colors */
.hero {
    /* Use Primary Global Color for the main background */
    background: linear-gradient(135deg, var(--e-global-color-primary) 0%, #2d2d44 100%);
}

.japanese-text {
    color: var(--e-global-color-accent); /* Accent for the highlight text */
}

.hero .tagline {
    color: var(--e-global-color-accent); /* Accent for the tagline */
}

.hero-image-bg {
    /* Use Accent Global Color for the glowing background */
    background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent 70%);
}

.hero-image {
    /* Use Accent Global Color for the border and shadow */
    border: 5px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 80px rgba(212, 175, 55, 0.2), inset 0 0 40px rgba(212, 175, 55, 0.1);
}

.mandala-overlay {
    /* Use Accent Global Color for the mandala SVG stroke */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="80" fill="none" stroke="%23D4AF37" stroke-width="0.5" opacity="0.3"/><circle cx="100" cy="100" r="60" fill="none" stroke="%23D4AF37" stroke-width="0.5" opacity="0.3"/><circle cx="100" cy="100" r="40" fill="none" stroke="%23D4AF37" stroke-width="0.5" opacity="0.3"/></svg>') center/contain no-repeat;
}

/* CTA Buttons - Using Global Colors */
.cta-button {
    /* Primary CTA background uses Accent Global Color */
    background: linear-gradient(135deg, var(--e-global-color-accent), var(--e-global-color-secondary));
    color: var(--e-global-color-primary); /* Ensures dark text on light button */
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.cta-button:hover {
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5);
}

.cta-secondary {
    color: var(--e-global-color-secondary); /* Secondary CTA text */
    border: 2px solid var(--e-global-color-accent); /* Secondary CTA border */
}

/* Light Section Headings */
.light-section .section-header h2 {
    /* Changed gradient colors for light sections */
    background: linear-gradient(135deg, #6B4C9A, #8B6FB0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Service Cards */
.service-card:before {
    /* Use Accent Global Color for the hover line */
    background: linear-gradient(90deg, var(--e-global-color-accent), var(--e-global-color-secondary)); 
}

.service-card:hover {
    box-shadow: 0 20px 60px rgba(212, 175, 55, 0.2);
}

.service-card ul li:before {
    color: var(--e-global-color-accent); /* Accent for bullet points */
}

/* Pricing Cards - Using Global Colors */
.pricing-card {
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.pricing-card:hover {
    border-color: var(--e-global-color-accent);
    box-shadow: 0 20px 60px rgba(212, 175, 55, 0.3);
}

.pricing-card.featured {
    border: 2px solid var(--e-global-color-accent);
    box-shadow: 0 20px 60px rgba(212, 175, 55, 0.4);
}

.pricing-category {
    color: rgba(212, 175, 55, 0.8);
}

.price {
    /* Use Accent Global Color for price */
    background: linear-gradient(135deg, var(--e-global-color-accent), var(--e-global-color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.quiz-option:hover {
    border-color: var(--e-global-color-accent);
}

.quiz-result h3 {
    color: var(--e-global-color-accent);
}

/* Testimonials */
.testimonial-card {
    border-left: 4px solid var(--e-global-color-accent);
}

.testimonial-card:before {
    color: rgba(212, 175, 55, 0.1);
}

/* Footer */
footer {
    /* Use Primary Global Color for footer gradient */
    background: linear-gradient(135deg, var(--e-global-color-primary) 0%, #0f0f1a 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.footer-tagline {
    color: var(--e-global-color-accent);
}

/* All other existing media queries and untouched styles are omitted for brevity, but should remain */
</style>/* End custom CSS */