/*
Theme Name: App EX
Author: APEX Llc
Version: 0.1.0
*/

/* =========================================
   1. Variables & Base Settings
   ========================================= */
:root {
    /* Colors */
    --bg-body           : #FFFFFF;
    --bg-sub            : #F8F9FA;
    --bg-dark           : #111111;

    --text-main         : #111111;
    --text-sub          : #666666;
    --text-white        : #FFFFFF;

    --primary           : #E6007E; /* Magenta */
    --primary-light     : rgba(230, 0, 126, 0.1);
    --primary-glow      : rgba(230, 0, 126, 0.6);
    --gradient-primary  : linear-gradient(135deg, #E6007E 0%, #FF5000 100%);

    --border-color      : #EEEEEE;
    --border-dark       : #333333;

    /* Typography */
    --font-ja           : "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-en           : "Montserrat", sans-serif;

    /* Dimensions */
    --container-width   : 1200px;
    --header-height     : 100px;

    /* Effects */
    --shadow-sm         : 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-md         : 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-primary    : 0 10px 30px rgba(230, 0, 126, 0.3);
    --transition        : all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --transition-smooth : all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset */
*, *::before, *::after {
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

html {
    scroll-behavior : smooth;
}

body {
    font-family            : var(--font-ja);
    color                  : var(--text-main);
    background-color       : var(--bg-body);
    line-height            : 1.8;
    -webkit-font-smoothing : antialiased;
    overflow-x             : hidden;
    /* Header is fixed/floating, add padding to body */
    padding-top            : 0;
}

/* Prevent scroll when modal is open */
body.modal-open {
    overflow : hidden;
}

a {
    text-decoration : none;
    color           : inherit;
    transition      : var(--transition);
}

ul {
    list-style : none;
}

img {
    max-width      : 100%;
    height         : auto;
    vertical-align : bottom;
    display        : block;
}

/* Utility */
.container {
    width     : 100%;
    max-width : var(--container-width);
    margin    : 0 auto;
    padding   : 0 24px;
    position  : relative; /* For footer absolute positioning */
}

.en-font {
    font-family    : var(--font-en);
    letter-spacing : 0.05em;
}

.text-primary {
    color : var(--primary);
}

.text-center {
    text-align : center;
}

/* Fade In Animation Classes */
.fade-in-up {
    opacity    : 0;
    transform  : translateY(30px);
    transition : opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
    opacity   : 1;
    transform : translateY(0);
}

/* =========================================
   2. Components
   ========================================= */

/* Buttons */
.btn {
    display         : inline-flex;
    justify-content : center;
    align-items     : center;
    padding         : 16px 48px;
    font-size       : 1rem;
    font-weight     : 700;
    border-radius   : 50px;
    background      : var(--gradient-primary); /* Use Gradient by default */
    color           : var(--text-white);
    border          : none; /* Removed border for gradient background */
    cursor          : pointer;
    transition      : var(--transition);
    letter-spacing  : 0.05em;
    position        : relative;
    overflow        : hidden;
    z-index         : 1;
    white-space     : nowrap;
    box-shadow      : 0 4px 15px rgba(230, 0, 126, 0.3);
}

/* Shine effect on hover */
.btn::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : -100%;
    width      : 100%;
    height     : 100%;
    background : linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition : none;
    z-index    : -1;
}

.btn:hover {
    color      : var(--text-white);
    transform  : translateY(-2px);
    box-shadow : 0 6px 20px rgba(230, 0, 126, 0.5);
}

.btn:hover::before {
    left       : 100%;
    transition : 0.5s;
}

.btn--sm {
    padding   : 10px 24px;
    font-size : 0.9rem;
}

.btn--outline {
    background : transparent;
    color      : var(--text-main);
    border     : 2px solid var(--text-main);
    box-shadow : none;
}

/* Reset hover effect for outline button */
.btn--outline:hover {
    background : var(--text-main);
    color      : var(--text-white);
    box-shadow : none;
    transform  : translateY(0);
}

.btn--outline::before {
    display : none;
}

.btn--glow {
    box-shadow : 0 0 20px rgba(230, 0, 126, 0.5);
    animation  : pulse-btn 2s infinite;
}

/* Theme Select Button specific style */
.btn--theme-select {
    /* Inherits gradient from .btn */
    font-size : 0.9rem;
    padding   : 12px 32px;
    gap       : 12px; /* Increased gap for icon */
    overflow  : visible; /* Allow cursor to pop out if needed */
}

.btn--theme-select:hover {
    transform : translateY(-2px);
}

/* Cursor Icon Style */
.btn--theme-select svg {
    width            : 24px; /* Larger size */
    height           : 24px;
    fill             : #FFFFFF;
    filter           : drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3)); /* 3D Shadow */
    transition       : transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin : top left;
}

/* Click Action Animation */
.btn--theme-select:hover svg {
    animation : cursor-click 0.6s ease forwards;
}

@keyframes cursor-click {
    0% {
        transform : scale(1) rotate(0deg);
    }
    30% {
        transform : scale(0.8) rotate(-10deg) translate(-2px, 2px);
    }
    /* Press down */
    50% {
        transform : scale(0.8) rotate(-10deg) translate(-2px, 2px);
    }
    /* Hold */
    100% {
        transform : scale(1) rotate(0deg) translate(0, 0);
    }
    /* Release */
}

@keyframes pulse-btn {
    0% {
        box-shadow : 0 0 0 0 rgba(230, 0, 126, 0.7);
    }
    70% {
        box-shadow : 0 0 0 15px rgba(230, 0, 126, 0);
    }
    100% {
        box-shadow : 0 0 0 0 rgba(230, 0, 126, 0);
    }
}

/* Section Styles */
.section {
    padding  : 120px 0;
    position : relative;
}

.section-bg-sub {
    background-color : var(--bg-sub);
}

.section-header {
    text-align    : center;
    margin-bottom : 80px;
    position      : relative;
}

.section-header__subtitle {
    display        : block;
    font-family    : var(--font-en);
    color          : var(--primary);
    font-size      : 0.9rem;
    font-weight    : 700;
    letter-spacing : 0.2em;
    margin-bottom  : 16px;
    text-transform : uppercase;
}

.section-header__title {
    font-size   : clamp(2rem, 5vw, 3rem);
    font-weight : 700;
    line-height : 1.2;
}

/* =========================================
   3. Layout & Sections
   ========================================= */

/* Header (Floating & Animated) */
.header {
    position   : fixed;
    top        : 20px;
    left       : 50%;
    transform  : translateX(-50%);
    width      : 95%;
    max-width  : 1280px;
    z-index    : 1100;
    transition : var(--transition-smooth);
}

/* Initial Floating State */
.header__inner {
    background              : rgba(255, 255, 255, 0.85);
    backdrop-filter         : blur(16px);
    -webkit-backdrop-filter : blur(16px);
    border                  : 1px solid rgba(255, 255, 255, 0.6);
    border-radius           : 100px; /* Pill shape */
    padding                 : 10px 32px;
    box-shadow              : 0 8px 32px rgba(0, 0, 0, 0.05);
    display                 : flex;
    justify-content         : space-between;
    align-items             : center;
    transition              : var(--transition-smooth);
}

/* Scrolled State (Full Width & Rectangular) */
.header.is-scrolled {
    top       : 0;
    width     : 100%;
    max-width : 100%;
}

.header.is-scrolled .header__inner {
    border-radius : 0;
    background    : rgba(255, 255, 255, 0.95);
    border        : none;
    border-bottom : 1px solid rgba(0, 0, 0, 0.05);
    padding       : 16px 40px; /* Slightly taller */
}

.header__logo {
    font-family    : var(--font-en);
    font-size      : 1.5rem;
    font-weight    : 900;
    letter-spacing : -0.02em;
    color          : var(--text-main);
    line-height    : 1;
    margin-right   : 40px;
}

/* Desktop Nav */
.header__nav {
    display   : none;
    flex-grow : 1;
}

.header__nav-list {
    display     : flex;
    gap         : 32px;
    align-items : center;
}

/* Nav Item Styles */
.nav-item {
    position : relative;
    padding  : 10px 0;
}

.header__nav-link {
    font-size   : 0.9rem;
    font-weight : 600;
    color       : var(--text-main);
    position    : relative;
    padding     : 8px 0;
    transition  : color 0.3s;
    display     : inline-flex;
    align-items : center;
    gap         : 4px;
}

.header__nav-link::after {
    content          : '';
    position         : absolute;
    bottom           : 0;
    left             : 50%;
    transform        : translateX(-50%);
    width            : 0;
    height           : 2px;
    background-color : var(--primary);
    transition       : width 0.3s ease;
}

.header__nav-link:hover {
    color : var(--primary);
}

.header__nav-link:hover::after {
    width : 100%;
}

/* Unique Dropdown Menu (Staggered Animation) */
.dropdown-menu {
    position         : absolute;
    top              : 100%;
    left             : 50%;
    transform        : translateX(-50%);
    background       : rgba(255, 255, 255, 0.95);
    backdrop-filter  : blur(10px);
    min-width        : 220px;
    border-radius    : 12px;
    box-shadow       : 0 10px 40px rgba(0, 0, 0, 0.1);
    padding          : 16px 0;
    opacity          : 0;
    visibility       : hidden;
    border           : 1px solid rgba(255, 255, 255, 0.8);
    transition       : all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    transform-origin : top center;
    clip-path        : inset(0 0 100% 0); /* Reveal effect */
}

.dropdown-menu li {
    display    : block;
    width      : 100%;
    opacity    : 0;
    transform  : translateY(10px);
    transition : all 0.3s ease;
}

.dropdown-menu a {
    display     : block;
    padding     : 10px 24px;
    font-size   : 0.85rem;
    font-weight : 500;
    color       : var(--text-main);
    transition  : background 0.3s, color 0.3s;
}

.dropdown-menu a:hover {
    background-color : var(--bg-sub);
    color            : var(--primary);
}

/* Hover behavior for dropdown */
.nav-item:hover .dropdown-menu {
    opacity    : 1;
    visibility : visible;
    clip-path  : inset(0 0 0 0); /* Fully reveal */
}

/* Staggered Delay for list items */
.nav-item:hover .dropdown-menu li {
    opacity   : 1;
    transform : translateY(0);
}

.nav-item:hover .dropdown-menu li:nth-child(1) {
    transition-delay : 0.1s;
}

.nav-item:hover .dropdown-menu li:nth-child(2) {
    transition-delay : 0.15s;
}

.nav-item:hover .dropdown-menu li:nth-child(3) {
    transition-delay : 0.2s;
}

.nav-item:hover .dropdown-menu li:nth-child(4) {
    transition-delay : 0.25s;
}

/* Dropdown Arrow Indicator */
.dropdown-arrow {
    width      : 10px;
    height     : 10px;
    transition : transform 0.3s;
    fill       : currentColor;
}

.nav-item:hover .dropdown-arrow {
    transform : rotate(180deg);
}

.header__actions {
    display     : none;
    margin-left : auto;
}

@media (min-width : 992px) {
    .header__nav {
        display : block;
    }

    .header__actions {
        display : block;
    }
}

/* Hamburger */
.header__hamburger {
    display         : block;
    width           : 44px;
    height          : 44px;
    background      : rgba(0, 0, 0, 0.05);
    border-radius   : 50%;
    border          : none;
    cursor          : pointer;
    position        : relative;
    z-index         : 1100;
    display         : flex;
    justify-content : center;
    align-items     : center;
    transition      : var(--transition);
}

.header__hamburger:hover {
    background : rgba(0, 0, 0, 0.1);
}

.header__hamburger-inner {
    width    : 20px;
    height   : 14px;
    position : relative;
}

.header__hamburger span {
    display          : block;
    width            : 100%;
    height           : 2px;
    background-color : var(--text-main);
    position         : absolute;
    transition       : var(--transition);
    border-radius    : 2px;
}

.header__hamburger span:nth-child(1) {
    top : 0;
}

.header__hamburger span:nth-child(2) {
    top : 6px;
}

.header__hamburger span:nth-child(3) {
    bottom : 0;
}

.header__hamburger.active span:nth-child(1) {
    transform : rotate(45deg);
    top       : 6px;
}

.header__hamburger.active span:nth-child(2) {
    opacity : 0;
}

.header__hamburger.active span:nth-child(3) {
    transform : rotate(-45deg);
    bottom    : 6px;
}

@media (min-width : 992px) {
    .header__hamburger {
        display : none;
    }
}

/* Mobile Menu */
.mobile-menu {
    position         : fixed;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100vh;
    background-color : var(--bg-body);
    z-index          : 1050;
    display          : flex;
    flex-direction   : column;
    justify-content  : center;
    align-items      : center;
    opacity          : 0;
    pointer-events   : none;
    transition       : opacity 0.3s ease;
}

.mobile-menu .js-open-modal {
    width : auto;
}

.mobile-menu.active {
    opacity        : 1;
    pointer-events : auto;
}

.mobile-menu__link {
    font-size   : 1.5rem;
    font-weight : 700;
    margin      : 20px 0;
    color       : var(--text-main);
    display     : block;
}

/* Hero */
.hero {
    padding-top    : 180px;
    padding-bottom : 120px;
    min-height     : 100vh;
    display        : flex;
    align-items    : center;
    position       : relative;
    overflow       : hidden;
}

.hero::before {
    content    : '';
    position   : absolute;
    top        : -20%;
    right      : -10%;
    width      : 60%;
    height     : 80%;
    background : radial-gradient(circle, rgba(230, 0, 126, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    z-index    : -1;
}

.hero__grid {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 40px;
    align-items           : center;
}

@media (min-width : 992px) {
    .hero__grid {
        grid-template-columns : 1fr 1fr;
        gap                   : 80px;
    }
}

.hero__content {
    position : relative;
    z-index  : 10;
}

.hero__content-title {
    font-family    : var(--font-en);
    font-size      : clamp(2.5rem, 6vw, 4.5rem);
    line-height    : 1.1;
    font-weight    : 900;
    letter-spacing : -0.03em;
    margin-bottom  : 30px;
}

.hero__content-title .highlight {
    color   : var(--primary);
    display : block;
}

.hero__content-title .jp-sub {
    display        : block;
    font-family    : var(--font-ja);
    font-size      : 1.25rem;
    font-weight    : 700;
    letter-spacing : 0.05em;
    margin-top     : 15px;
    color          : var(--text-main);
}

.hero__price-tag {
    display       : inline-block;
    background    : var(--bg-dark);
    color         : var(--text-white);
    padding       : 8px 16px;
    border-radius : 4px;
    font-weight   : 700;
    font-size     : 1.2rem;
    margin-bottom : 20px;
    border-left   : 5px solid var(--primary);
    box-shadow    : 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero__price-tag strong {
    font-family : var(--font-en);
    font-size   : 2rem;
    color       : var(--primary);
    margin      : 0 4px;
}

.hero__content-desc {
    font-size     : 1.1rem;
    color         : var(--text-sub);
    margin-bottom : 40px;
    max-width     : 540px;
}

/* Hero Fan Animation */
.hero__images-container {
    position        : relative;
    width           : 100%;
    height          : 400px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    perspective     : 1000px;
    z-index         : 1;
}

@media (min-width : 768px) {
    .hero__images-container {
        height : 500px;
    }
}

.hero__img-card {
    position         : absolute;
    width            : 70%;
    max-width        : 400px;
    aspect-ratio     : 4/3;
    object-fit       : cover;
    border-radius    : 12px;
    box-shadow       : 0 20px 40px rgba(0, 0, 0, 0.15);
    border           : 4px solid #fff;
    transform-origin : bottom center;
    transition       : transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
    opacity          : 0;
}

.hero__img-card.init {
    opacity   : 1;
    transform : rotate(0deg) translateY(0);
}

.hero__img-card.open.left {
    transform : rotate(-25deg) translateX(-40px);
    z-index   : 1;
}

.hero__img-card.open.center {
    transform  : rotate(0deg) translateY(-20px);
    z-index    : 3;
    box-shadow : 0 25px 50px rgba(0, 0, 0, 0.2);
}

.hero__img-card.open.right {
    transform : rotate(25deg) translateX(40px);
    z-index   : 2;
}

/* Problems */
.problems {
    background-color : var(--bg-dark);
    color            : var(--text-white);
    padding-bottom   : 60px;
}

.problems .section-header__title {
    color : var(--text-white);
}

.problems__grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(300px, 1fr));
    gap                   : 40px;
    margin-top            : 60px;
}

.problem-card {
    background    : linear-gradient(145deg, #1a1a1a, #111);
    border        : 1px solid #333;
    padding       : 40px 30px;
    border-radius : 12px;
    transition    : all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position      : relative;
    overflow      : hidden;
    box-shadow    : 0 10px 20px rgba(0, 0, 0, 0.2);
}

.problem-card::before {
    content          : '';
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 4px;
    height           : 100%;
    background       : var(--primary);
    transform        : scaleY(0);
    transform-origin : bottom;
    transition       : transform 0.4s ease;
}

.problem-card:hover {
    transform    : translateY(-10px);
    box-shadow   : 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color : #444;
}

.problem-card:hover::before {
    transform : scaleY(1);
}

.problem-card__icon {
    font-size     : 2.5rem;
    color         : var(--primary);
    margin-bottom : 20px;
    display       : block;
    opacity       : 0.8;
    transition    : opacity 0.3s;
}

.problem-card:hover .problem-card__icon {
    opacity     : 1;
    text-shadow : 0 0 10px rgba(230, 0, 126, 0.5);
}

.problem-card__title {
    font-size     : 1.25rem;
    font-weight   : 700;
    margin-bottom : 16px;
}

.problem-card__text {
    color       : #AAAAAA;
    font-size   : 0.95rem;
    line-height : 1.7;
}

/* Transition Area */
.transition-area {
    background-color : var(--bg-dark);
    padding          : 40px 0 100px;
    text-align       : center;
    position         : relative;
    z-index          : 2;
}

.transition-arrow-container {
    display        : inline-flex;
    flex-direction : column;
    align-items    : center;
    color          : var(--primary);
}

.transition-text {
    font-family    : var(--font-en);
    font-size      : 1.2rem;
    font-weight    : 700;
    letter-spacing : 0.2em;
    margin-bottom  : 20px;
    opacity        : 0.8;
    color          : var(--text-white);
}

.transition-arrow {
    width     : 60px;
    height    : 60px;
    animation : bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform : translateY(0);
    }
    40% {
        transform : translateY(10px);
    }
    60% {
        transform : translateY(5px);
    }
}

/* Solution Enhanced - Explosion Effect - UPDATED */
.solution {
    position         : relative;
    overflow         : hidden;
    background-color : var(--bg-body);
    padding          : 160px 0;
    opacity          : 0; /* Hidden initially */
    transform        : scale(0.9);
    transition       : opacity 0.1s ease;
}

.solution.explode-active {
    opacity   : 1;
    /* Added shake and strong scale */
    animation : explode-shockwave 0.6s cubic-bezier(0.1, 0.9, 0.2, 1.0) forwards;
}

@keyframes explode-shockwave {
    0% {
        transform : scale(0.2) rotate(-5deg);
        opacity   : 0;
        filter    : brightness(5) contrast(2) blur(20px);
    }
    40% {
        transform : scale(1.1) rotate(2deg);
        opacity   : 1;
        filter    : brightness(2) contrast(1.5) blur(0);
    }
    60% {
        transform : scale(0.95) rotate(-1deg);
        filter    : brightness(1.2);
    }
    80% {
        transform : scale(1.02);
    }
    100% {
        transform : scale(1) rotate(0);
        opacity   : 1;
        filter    : brightness(1) contrast(1);
    }
}

/* Stronger Flash overlay */
.solution::after {
    content        : '';
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    background     : #fff; /* Base white flash */
    opacity        : 0;
    pointer-events : none;
    z-index        : 10;
    mix-blend-mode : overlay;
}

.solution.explode-active::after {
    animation : intense-flash 0.8s ease-out;
}

@keyframes intense-flash {
    0% {
        background : #fff;
        opacity    : 1;
    }
    20% {
        background : var(--primary);
        opacity    : 0.8;
    }
    /* Flash Magenta */
    40% {
        background : #FF5000;
        opacity    : 0.6;
    }
    /* Flash Orange */
    100% {
        opacity : 0;
    }
}

/* Explosion Particles */
.explosion-container {
    position       : absolute;
    top            : 50%;
    left           : 50%;
    width          : 0;
    height         : 0;
    pointer-events : none;
    z-index        : 5;
}

.exp-particle {
    position      : absolute;
    top           : 0;
    left          : 0;
    border-radius : 50%;
    opacity       : 0;
}

/* Color Burst Background Animation on Explosion */
.solution.explode-active .solution__bg-burst {
    animation : bg-burst 0.5s ease-out;
}

.solution__bg-burst {
    position       : absolute;
    top            : 50%;
    left           : 50%;
    transform      : translate(-50%, -50%);
    width          : 100%;
    height         : 100%;
    background     : radial-gradient(circle, var(--primary) 0%, transparent 70%);
    opacity        : 0;
    z-index        : 0;
    pointer-events : none;
}

@keyframes bg-burst {
    0% {
        transform : translate(-50%, -50%) scale(0);
        opacity   : 0.8;
    }
    100% {
        transform : translate(-50%, -50%) scale(2);
        opacity   : 0;
    }
}

.solution__box {
    position        : relative;
    z-index         : 1;
    background      : rgba(255, 255, 255, 0.8);
    backdrop-filter : blur(10px);
    padding         : 60px;
    border-radius   : 20px;
    box-shadow      : 0 20px 60px rgba(0, 0, 0, 0.05);
    border          : 1px solid rgba(255, 255, 255, 0.5);
    text-align      : center;
    max-width       : 900px;
    margin          : 0 auto;
}

.solution__title-large {
    font-family    : var(--font-en);
    font-size      : clamp(3rem, 6vw, 5rem);
    font-weight    : 900;
    line-height    : 1;
    color          : var(--primary);
    margin         : 20px 0 40px;
    letter-spacing : -0.02em;
    text-transform : uppercase;
}

.solution__lead {
    font-size   : 1.5rem;
    font-weight : 700;
    line-height : 1.6;
}

.solution__lead em {
    font-style : normal;
    background : linear-gradient(transparent 60%, rgba(230, 0, 126, 0.3) 60%);
    padding    : 0 4px;
}

/* Benefits */
.benefits__grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(320px, 1fr));
    gap                   : 30px;
}

.benefit-card {
    background    : var(--bg-body);
    padding       : 50px 40px;
    border-radius : 12px;
    box-shadow    : var(--shadow-sm);
    transition    : var(--transition);
    position      : relative;
    overflow      : hidden;
    border        : 1px solid transparent;
}

.benefit-card:hover {
    box-shadow   : var(--shadow-md);
    transform    : translateY(-10px);
    border-color : var(--primary-light);
}

.benefit-card__num {
    font-family : var(--font-en);
    font-size   : 4rem;
    font-weight : 900;
    color       : #F0F0F0;
    line-height : 1;
    position    : absolute;
    top         : 20px;
    right       : 20px;
    z-index     : 0;
    transition  : var(--transition);
}

.benefit-card:hover .benefit-card__num {
    color     : var(--primary-light);
    transform : scale(1.1);
}

.benefit-card__content {
    position : relative;
    z-index  : 1;
}

.benefit-card__title {
    font-size     : 1.4rem;
    font-weight   : 700;
    margin-bottom : 20px;
    margin-top    : 20px;
}

.benefit-card__text {
    color : var(--text-sub);
}

/* Quality CTA Section */
.quality-cta {
    background-color : var(--bg-dark);
    color            : var(--text-white);
    position         : relative;
    padding          : 100px 0;
    overflow         : hidden;
}

.quality-cta::before {
    content        : '';
    position       : absolute;
    top            : -50%;
    left           : -50%;
    width          : 200%;
    height         : 200%;
    background     : repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.03) 10px,
            transparent 10px,
            transparent 20px
    );
    z-index        : 0;
    pointer-events : none;
}

.quality-cta__inner {
    position        : relative;
    z-index         : 1;
    border          : 4px solid var(--primary);
    padding         : 60px 40px;
    text-align      : center;
    background      : rgba(0, 0, 0, 0.6);
    backdrop-filter : blur(5px);
    box-shadow      : 0 0 50px rgba(230, 0, 126, 0.2);
}

.quality-cta__label {
    display        : inline-block;
    background     : var(--text-white);
    color          : #000;
    font-weight    : 900;
    font-family    : var(--font-en);
    padding        : 4px 12px;
    font-size      : 0.9rem;
    letter-spacing : 0.1em;
    margin-bottom  : 24px;
    transform      : skewX(-10deg);
}

.quality-cta__title {
    font-size     : clamp(2rem, 5vw, 3.5rem);
    font-weight   : 900;
    line-height   : 1.2;
    margin-bottom : 30px;
}

.quality-cta__title .d-block {
    display : block;
}

.quality-cta__title .text-gradient {
    background              : var(--gradient-primary);
    -webkit-background-clip : text;
    -webkit-text-fill-color : transparent;
}

.quality-cta__text {
    font-size     : 1.1rem;
    line-height   : 1.8;
    margin-bottom : 40px;
    opacity       : 0.9;
}

.quality-cta__badges {
    display         : flex;
    justify-content : center;
    gap             : 20px;
    flex-wrap       : wrap;
    margin-bottom   : 40px;
}

.quality-badge {
    display     : flex;
    align-items : center;
    gap         : 8px;
    font-weight : 700;
    font-size   : 1.1rem;
    color       : var(--text-white);
    border      : 1px solid rgba(255, 255, 255, 0.3);
    padding     : 10px 20px;
    background  : rgba(255, 255, 255, 0.05);
}

.quality-badge__icon {
    color       : #FF5000; /* Orange for check */
    font-weight : 900;
}

/* Themes (Redesigned) */
.themes__grid {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 60px; /* Space increased */
    margin-bottom         : 60px;
}

@media (min-width : 768px) {
    .themes__grid {
        grid-template-columns : repeat(2, 1fr);
    }
}

.theme-item {
    background     : var(--bg-body);
    border-radius  : 16px;
    overflow       : hidden;
    box-shadow     : var(--shadow-sm);
    transition     : var(--transition);
    border         : 1px solid var(--border-color);
    position       : relative;
    display        : flex;
    flex-direction : column;
}

.theme-item:hover {
    box-shadow   : 0 20px 50px rgba(0, 0, 0, 0.1);
    transform    : translateY(-8px);
    border-color : var(--primary-light);
}

/* Image Area */
.theme-item__thumb-wrapper {
    position     : relative;
    overflow     : hidden;
    aspect-ratio : 16/10;
}

.theme-item__img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.theme-item:hover .theme-item__img {
    transform : scale(1.08);
}

/* Floating Price Tag on Image */
.theme-item__price-badge {
    position        : absolute;
    top             : 20px;
    right           : 20px;
    background      : rgba(255, 255, 255, 0.95);
    padding         : 8px 16px;
    border-radius   : 30px;
    font-weight     : 700;
    font-size       : 0.9rem;
    color           : var(--text-main);
    box-shadow      : 0 4px 15px rgba(0, 0, 0, 0.1);
    backdrop-filter : blur(5px);
    z-index         : 2;
}

.theme-item__price-badge span {
    color        : var(--primary);
    font-family  : var(--font-en);
    font-size    : 1.1rem;
    font-weight  : 900;
    margin-right : 2px;
}

/* Content Area */
.theme-item__body {
    padding        : 30px;
    flex-grow      : 1;
    display        : flex;
    flex-direction : column;
}

.theme-item__header {
    margin-bottom  : 16px;
    border-bottom  : 1px solid var(--border-color);
    padding-bottom : 16px;
}

.theme-item__title {
    font-family   : var(--font-en);
    font-size     : 1.5rem;
    font-weight   : 800;
    margin-bottom : 8px;
    color         : var(--text-main);
}

.theme-item__catch {
    font-size     : 0.95rem;
    color         : var(--primary);
    font-weight   : 700;
    margin-bottom : 8px;
}

.theme-item__desc {
    font-size     : 0.95rem;
    color         : var(--text-sub);
    line-height   : 1.7;
    margin-bottom : 24px;
    flex-grow     : 1;
}

/* Specs List */
.theme-item__specs {
    display       : flex;
    gap           : 12px;
    margin-bottom : 24px;
    flex-wrap     : wrap;
}

.theme-spec {
    font-size        : 0.8rem;
    background-color : var(--bg-sub);
    padding          : 6px 12px;
    border-radius    : 6px;
    color            : var(--text-main);
    font-weight      : 500;
    display          : flex;
    align-items      : center;
    gap              : 6px;
}

.theme-spec svg {
    width  : 14px;
    height : 14px;
    stroke : var(--primary);
}

.theme-item__actions {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 12px;
    margin-top            : auto;
}

.theme-item__actions .btn {
    width : 100%;
}

/* Theme Info Box */
.theme-info-box {
    margin-bottom : 16px;
    font-size     : 0.85rem;
    color         : var(--text-sub);
    border        : 1px dashed var(--border-color);
    padding       : 12px;
    border-radius : 8px;
    background    : #fafafa;
}

.theme-info-row {
    display       : flex;
    margin-bottom : 6px;
}

.theme-info-row:last-child {
    margin-bottom : 0;
}

.theme-info-label {
    font-weight  : 700;
    margin-right : 8px;
    min-width    : 80px;
    color        : var(--text-main);
}

/* Pricing Box */
.pricing-box {
    background    : var(--bg-body);
    border        : 2px solid var(--primary);
    border-radius : 16px;
    padding       : 60px 40px;
    text-align    : center;
    max-width     : 800px;
    margin        : 0 auto 60px;
    box-shadow    : var(--shadow-primary);
    position      : relative;
}

.pricing-box::before {
    content        : 'RECOMMENDED';
    position       : absolute;
    top            : -15px;
    left           : 50%;
    transform      : translateX(-50%);
    background     : var(--primary);
    color          : white;
    padding        : 6px 20px;
    border-radius  : 20px;
    font-size      : 0.85rem;
    font-weight    : 700;
    letter-spacing : 0.1em;
}

.pricing-box__title {
    font-size     : 1.4rem;
    color         : var(--text-sub);
    margin-bottom : 10px;
}

.pricing-box__price {
    font-family   : var(--font-en);
    font-size     : 4rem;
    font-weight   : 900;
    color         : var(--primary);
    line-height   : 1;
    margin-bottom : 10px;
}

.pricing-box__price small {
    font-size   : 1rem;
    color       : var(--text-main);
    font-weight : 500;
    margin-left : 4px;
}

.pricing-box__sub {
    font-size     : 0.9rem;
    color         : var(--text-sub);
    margin-bottom : 30px;
}

.pricing-box__features {
    display         : flex;
    justify-content : center;
    gap             : 20px;
    margin-bottom   : 30px;
    flex-wrap       : wrap;
}

.pricing-box__feature-item {
    background    : var(--bg-sub);
    padding       : 10px 20px;
    border-radius : 50px;
    font-size     : 0.9rem;
    font-weight   : 700;
}

/* Pricing Campaign */
.pricing-campaign {
    margin-top    : 30px;
    padding       : 20px;
    background    : linear-gradient(135deg, rgba(230, 0, 126, 0.05) 0%, rgba(255, 80, 0, 0.05) 100%);
    border-radius : 12px;
    border        : 1px solid rgba(230, 0, 126, 0.3);
    position      : relative;
    overflow      : hidden;
}

.pricing-campaign::before {
    content                   : 'CAMPAIGN';
    position                  : absolute;
    top                       : 0;
    right                     : 0;
    background                : var(--primary);
    color                     : #fff;
    font-size                 : 0.7rem;
    padding                   : 2px 10px;
    border-bottom-left-radius : 8px;
    font-weight               : 700;
}

.pricing-campaign__item {
    font-size       : 1.1rem;
    font-weight     : 700;
    margin-bottom   : 12px;
    color           : var(--text-main);
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 10px;
    flex-wrap       : wrap;
}

.pricing-campaign__item:last-child {
    margin-bottom : 0;
    color         : var(--primary);
    font-size     : 1.3rem;
    animation     : pulse-text 2s infinite;
}

/* SVG Icons for Campaign */
.pricing-campaign__icon-svg {
    width           : 24px;
    height          : 24px;
    fill            : none;
    stroke          : var(--primary);
    stroke-width    : 2;
    stroke-linecap  : round;
    stroke-linejoin : round;
}

.pricing-campaign__highlight {
    background              : var(--gradient-primary);
    -webkit-background-clip : text;
    -webkit-text-fill-color : transparent;
    font-weight             : 900;
    font-size               : 1.4em;
}

@keyframes pulse-text {
    0% {
        transform : scale(1);
    }
    50% {
        transform : scale(1.05);
    }
    100% {
        transform : scale(1);
    }
}

/* Comparison Table */
.comparison-table-wrapper {
    max-width  : 900px;
    margin     : 0 auto;
    overflow-x : auto;
}

.comparison-table {
    width           : 100%;
    border-collapse : collapse;
    min-width       : 700px;
}

.comparison-table th, .comparison-table td {
    padding       : 20px;
    border-bottom : 1px solid var(--border-color);
    text-align    : center;
}

.comparison-table th {
    background-color : var(--bg-sub);
    font-weight      : 700;
    width            : 25%;
    text-align       : left;
    padding-left     : 30px;
}

.comparison-table td.highlight {
    color            : var(--primary);
    font-weight      : 700;
    font-size        : 1.1rem;
    background-color : rgba(230, 0, 126, 0.03);
}

.comparison-table td:nth-child(2) {
    color            : var(--text-sub);
    background-color : #fcfcfc;
}

/* Customize Section */
.customize-box {
    text-align       : center;
    max-width        : 800px;
    margin           : 0 auto;
    padding          : 40px;
    border           : 1px dashed var(--text-sub);
    border-radius    : 12px;
    background-color : #fff;
}

.customize-box__icon-svg {
    width         : 48px;
    height        : 48px;
    stroke        : var(--primary);
    stroke-width  : 1.5;
    fill          : none;
    margin-bottom : 16px;
}

.customize-box__text {
    color         : var(--text-sub);
    line-height   : 1.8;
    margin-bottom : 24px;
}

/* Testimonials (New Section) */
.testimonials-wrapper {
    width    : 100%;
    overflow : hidden;
    padding  : 40px 0;
    position : relative;
}

/* Fade gradients on sides */
.testimonials-wrapper::before,
.testimonials-wrapper::after {
    content        : '';
    position       : absolute;
    top            : 0;
    width          : 150px;
    height         : 100%;
    z-index        : 2;
    pointer-events : none;
}

.testimonials-wrapper::before {
    left       : 0;
    background : linear-gradient(to right, #FFFFFF, transparent);
}

.testimonials-wrapper::after {
    right      : 0;
    background : linear-gradient(to left, #FFFFFF, transparent);
}

.testimonials-track {
    display   : flex;
    gap       : 30px;
    width     : max-content;
    animation : scroll-left 50s linear infinite;
}

.testimonials-track:hover {
    animation-play-state : paused;
}

@keyframes scroll-left {
    to {
        transform : translateX(-50%);
    }
}

.testimonial-card {
    background    : #FFFFFF;
    border-radius : 12px;
    padding       : 30px;
    box-shadow    : 0 4px 20px rgba(0, 0, 0, 0.05);
    width         : 320px;
    flex-shrink   : 0;
    border        : 1px solid var(--border-color);
    transition    : transform 0.3s;
}

.testimonial-card:hover {
    transform  : translateY(-5px);
    box-shadow : 0 10px 30px rgba(0, 0, 0, 0.1);
}

.testimonial-card__header {
    display       : flex;
    align-items   : center;
    margin-bottom : 16px;
}

.testimonial-card__img {
    width         : 60px;
    height        : 60px;
    border-radius : 50%;
    object-fit    : cover;
    margin-right  : 16px;
    border        : 2px solid var(--bg-sub);
}

.testimonial-card__info {
    display        : flex;
    flex-direction : column;
}

.testimonial-card__industry {
    font-size     : 0.75rem;
    color         : var(--text-sub);
    background    : var(--bg-sub);
    padding       : 2px 8px;
    border-radius : 4px;
    display       : inline-block;
    margin-bottom : 4px;
    width         : fit-content;
}

.testimonial-card__name {
    font-size   : 1rem;
    font-weight : 700;
}

.testimonial-card__catch {
    color         : var(--primary);
    font-weight   : 700;
    font-size     : 1rem;
    margin-bottom : 12px;
    line-height   : 1.4;
}

.testimonial-card__text {
    font-size   : 0.9rem;
    color       : var(--text-sub);
    line-height : 1.7;
}

/* FAQ */
.faq__container {
    max-width : 800px;
    margin    : 0 auto;
}

.faq-item {
    border-bottom : 1px solid var(--border-color);
}

.faq-item__question {
    width           : 100%;
    text-align      : left;
    padding         : 30px 0;
    background      : none;
    border          : none;
    font-size       : 1.1rem;
    font-weight     : 700;
    color           : var(--text-main);
    cursor          : pointer;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    transition      : color 0.3s;
}

.faq-item__question:hover {
    color : var(--primary);
}

.faq-item__icon {
    font-size   : 1.5rem;
    font-weight : 300;
    transition  : transform 0.3s ease;
}

.faq-item__question.is-open .faq-item__icon {
    transform : rotate(45deg);
}

.faq-item__answer {
    height     : 0;
    overflow   : hidden;
    transition : height 0.3s ease-out;
}

.faq-item__answer-inner {
    padding-bottom : 30px;
    color          : var(--text-sub);
    line-height    : 1.8;
    padding-right  : 40px;
}

/* CTA Enhanced with Fire Effect */
.cta {
    background-color : #050000;
    color            : var(--text-white);
    text-align       : center;
    overflow         : hidden;
    position         : relative;
    padding          : 160px 0;
    /* Fire Gradient Background */
    background-image : radial-gradient(circle at 50% 120%, rgba(255, 80, 0, 0.8) 0%, rgba(230, 0, 126, 0.4) 40%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(to top, rgba(50, 0, 0, 1) 0%, #000 100%);
    animation        : fire-pulse 4s infinite alternate;
}

.cta .form-label {
    color : var(--text-main);
}

@keyframes fire-pulse {
    0% {
        background-size : 100% 100%;
    }
    100% {
        background-size : 110% 105%;
    }
}

.cta::before {
    /* Heat Haze Texture */
    content        : '';
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    background     : url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity        : 0.3;
    z-index        : 0;
    pointer-events : none;
}

/* Fire Particles container */
.cta__particles {
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    pointer-events : none;
    z-index        : 1;
    overflow       : hidden;
}

.fire-particle {
    position       : absolute;
    bottom         : -20px;
    background     : radial-gradient(circle, #fff 0%, #ffeb3b 30%, #ff5722 100%);
    border-radius  : 50%;
    opacity        : 0;
    pointer-events : none;
    mix-blend-mode : screen;
    animation      : rise linear forwards;
    box-shadow     : 0 0 10px 2px rgba(255, 87, 34, 0.6);
}

@keyframes rise {
    0% {
        opacity   : 0;
        transform : translateY(0) scale(1);
    }
    10% {
        opacity : 1;
    }
    100% {
        opacity   : 0;
        transform : translateY(-80vh) scale(0);
    }
}

.cta__content {
    position  : relative;
    z-index   : 2;
    max-width : 800px;
    margin    : 0 auto;
}

.cta__label {
    display        : inline-block;
    background     : var(--primary);
    color          : white;
    padding        : 6px 16px;
    border-radius  : 50px;
    font-size      : 0.9rem;
    font-weight    : 700;
    margin-bottom  : 24px;
    letter-spacing : 0.1em;
    box-shadow     : 0 0 20px rgba(230, 0, 126, 0.6);
}

.cta__title {
    font-size     : clamp(2.5rem, 6vw, 4rem);
    font-weight   : 900;
    margin-bottom : 30px;
    line-height   : 1.2;
    text-shadow   : 0 4px 30px rgba(0, 0, 0, 0.8);
}

.cta__text {
    font-size     : 1.2rem;
    margin-bottom : 50px;
    opacity       : 0.95;
    line-height   : 1.8;
    text-shadow   : 0 2px 10px rgba(0, 0, 0, 0.8);
}

.cta__actions {
    display         : flex;
    justify-content : center;
    align-items     : center;
    gap             : 20px;
    flex-wrap       : wrap;
}

.cta__note {
    margin-top : 24px;
    font-size  : 0.85rem;
    opacity    : 0.7;
}

/* Footer */
.footer {
    background-color : #000;
    color            : #888;
    padding          : 80px 0 30px;
    font-size        : 0.9rem;
    position         : relative; /* For absolute scroll button */
}

/* Scroll Top Button - UPDATED POSITION */
.footer__scroll-top {
    position         : fixed; /* Fixed to stay visible if desired, but user asked for inside footer container */
    /* Actually user asked for "bottom right of container" previously. Let's make it absolute to footer container or fixed.
       Given "container right end", absolute inside footer is safer layout-wise. */
    position         : absolute;
    bottom           : 40px;
    right            : 40px;
    width            : 60px;
    height           : 60px;
    background-color : #FFFFFF;
    border-radius    : 50%;
    display          : flex;
    justify-content  : center;
    align-items      : center;
    cursor           : pointer;
    box-shadow       : 0 4px 20px rgba(255, 255, 255, 0.2);
    z-index          : 10;
    transition       : transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    opacity          : 0; /* Hidden initially */
    pointer-events   : none;
}

.footer__scroll-top.is-visible {
    opacity        : 1;
    pointer-events : auto;
}

.footer__scroll-top:hover {
    transform : scale(1.1);
}

/* Bounce Animation Class */
.footer__scroll-top.is-animating {
    animation : bounce-scale 0.5s ease-out forwards;
}

@keyframes bounce-scale {
    0% {
        transform : scale(1);
    }
    40% {
        transform : scale(1.4);
    }
    100% {
        transform : scale(0);
        opacity   : 0;
    }
}

.footer__scroll-top svg {
    width        : 24px;
    height       : 24px;
    stroke       : var(--text-main);
    stroke-width : 2;
    transition   : transform 0.3s;
}

.footer__scroll-top:hover svg {
    transform : translateY(-4px);
    stroke    : var(--primary);
}

.footer__grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(200px, 1fr));
    gap                   : 60px;
    margin-bottom         : 80px;
}

.footer__logo {
    font-family   : var(--font-en);
    font-size     : 1.5rem;
    font-weight   : 900;
    color         : var(--text-white);
    margin-bottom : 20px;
    display       : block;
}

.footer__desc {
    line-height : 1.6;
}

.footer__heading {
    color         : var(--text-white);
    font-weight   : 700;
    margin-bottom : 24px;
    font-size     : 1rem;
}

.footer__list li {
    margin-bottom : 12px;
}

.footer__list a {
    transition : color 0.3s;
}

.footer__list a:hover {
    color : var(--primary);
}

.footer__copy {
    text-align  : center;
    padding-top : 30px;
    border-top  : 1px solid #222;
    font-size   : 0.8rem;
}

/* Quality CTA Section */
.quality-cta {
    background-color : var(--bg-dark);
    color            : var(--text-white);
    position         : relative;
    padding          : 100px 0;
    overflow         : hidden;
}

.quality-cta::before {
    content        : '';
    position       : absolute;
    top            : -50%;
    left           : -50%;
    width          : 200%;
    height         : 200%;
    background     : repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.03) 10px,
            transparent 10px,
            transparent 20px
    );
    z-index        : 0;
    pointer-events : none; /* Add this */
}

.quality-cta__inner {
    position        : relative;
    z-index         : 1;
    border          : 4px solid var(--primary);
    padding         : 60px 40px;
    text-align      : center;
    background      : rgba(0, 0, 0, 0.6);
    backdrop-filter : blur(5px);
    box-shadow      : 0 0 50px rgba(230, 0, 126, 0.2);
}

.quality-cta__label {
    display        : inline-block;
    background     : var(--text-white);
    color          : #000;
    font-weight    : 900;
    font-family    : var(--font-en);
    padding        : 4px 12px;
    font-size      : 0.9rem;
    letter-spacing : 0.1em;
    margin-bottom  : 24px;
    transform      : skewX(-10deg);
}

.quality-cta__title {
    font-size     : clamp(2rem, 5vw, 3.5rem);
    font-weight   : 900;
    line-height   : 1.2;
    margin-bottom : 30px;
}

.quality-cta__title .d-block {
    display : block;
}

.quality-cta__title .text-gradient {
    background              : var(--gradient-primary);
    -webkit-background-clip : text;
    -webkit-text-fill-color : transparent;
}

.quality-cta__text {
    font-size     : 1.1rem;
    line-height   : 1.8;
    margin-bottom : 40px;
    opacity       : 0.9;
}

.quality-cta__badges {
    display         : flex;
    justify-content : center;
    gap             : 20px;
    flex-wrap       : wrap;
    margin-bottom   : 40px;
}

.quality-badge {
    display     : flex;
    align-items : center;
    gap         : 8px;
    font-weight : 700;
    font-size   : 1.1rem;
    color       : var(--text-white);
    border      : 1px solid rgba(255, 255, 255, 0.3);
    padding     : 10px 20px;
    background  : rgba(255, 255, 255, 0.05);
}

.quality-badge__icon {
    color       : #FF5000; /* Orange for check */
    font-weight : 900;
}

.form-group {
    margin-bottom : 20px;
}

.form-label {
    display       : block;
    font-weight   : 700;
    margin-bottom : 8px;
    font-size     : 0.9rem;
}

.form-label span {
    background     : var(--primary);
    color          : #fff;
    font-size      : 0.7rem;
    padding        : 2px 6px;
    border-radius  : 4px;
    margin-left    : 6px;
    vertical-align : middle;
}

.form-input, .form-textarea, .form-select {
    width         : 100%;
    padding       : 12px 16px;
    border        : 2px solid var(--border-color);
    border-radius : 8px;
    font-size     : 1rem;
    transition    : border-color 0.3s;
    font-family   : inherit;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline      : none;
    border-color : var(--primary);
    box-shadow   : 0 0 0 3px var(--primary-light);
}

.form-textarea {
    height : 120px;
    resize : vertical;
}

.form-submit {
    text-align : center;
    margin-top : 30px;
}

/* Mobile Adjustments */
@media (max-width : 768px) {
    .btn {
        padding : 14px 32px;
        width   : 100%;
    }

    .btn--large {
        width : auto;
    }

    .section {
        padding : 80px 0;
    }

    .pricing-box {
        padding : 40px 20px;
    }

    .pricing-box__price {
        font-size : 3rem;
    }

    .theme-item {
        display : block;
    }

    /* Reset flex for mobile if needed */
    /* Disable floating header on very small screens if needed,
       but kept for design consistency */
    .header {
        width : 95%;
        top   : 10px;
    }

    /* Footer scroll button on mobile */
    .footer__scroll-top {
        bottom : 20px;
        right  : 20px;
        width  : 50px;
        height : 50px;
    }
}

/* =========================================
   4. About Page Specific Styles
   ========================================= */

/* About Hero */
.about-hero {
    padding          : 220px 0 160px; /* Padding Increased */
    background-color : var(--bg-dark);
    color            : var(--text-white);
    position         : relative;
    overflow         : hidden;
    min-height       : 80vh;
    display          : flex;
    align-items      : center;
}

.about-hero__container {
    position   : relative;
    z-index    : 1;
    text-align : center;
    max-width  : 900px;
    margin     : 0 auto;
}

.about-hero__subtitle {
    font-family    : var(--font-en);
    font-weight    : 700;
    color          : var(--primary);
    letter-spacing : 0.3em;
    display        : block;
    margin-bottom  : 24px;
    font-size      : 1.1rem;
}

.about-hero__title {
    font-size      : clamp(3rem, 6vw, 5rem);
    font-weight    : 900;
    line-height    : 1.1;
    margin-bottom  : 40px;
    letter-spacing : -0.02em;
}

.about-hero__desc {
    font-size   : 1.2rem;
    color       : #CCCCCC;
    line-height : 2;
    max-width   : 800px;
    margin      : 0 auto;
}

/* Stats Section - Overlapping Hero */
.stats-section {
    margin-top     : -100px;
    position       : relative;
    z-index        : 10;
    padding-top    : 0;
    padding-bottom : 0;
}

.stats-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(200px, 1fr));
    gap                   : 30px;
    margin-bottom         : 80px;
}

.stat-item {
    text-align          : center;
    padding             : 40px 20px;
    background          : rgba(255, 255, 255, 0.95);
    backdrop-filter     : blur(10px);
    border-radius       : 12px;
    border              : 1px solid var(--border-color);
    box-shadow          : 0 20px 50px rgba(0, 0, 0, 0.15);

    /* Initial state for animation */
    opacity             : 0;
    transform           : translateY(60px) rotateX(20deg) scale(0.9);
    transition          : all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    backface-visibility : hidden;
}

.stat-item.visible {
    opacity   : 1;
    transform : translateY(0) rotateX(0) scale(1);
}

/* Stagger Delays */
.stat-item:nth-child(1) {
    transition-delay : 0.1s;
}

.stat-item:nth-child(2) {
    transition-delay : 0.3s;
}

.stat-item:nth-child(3) {
    transition-delay : 0.5s;
}

.stat-number {
    font-family   : var(--font-en);
    font-size     : 3.5rem;
    font-weight   : 900;
    color         : var(--primary);
    line-height   : 1;
    margin-bottom : 10px;
}

.stat-label {
    font-weight : 700;
    color       : var(--text-main);
    font-size   : 1rem;
}

/* Philosophy / Fusion Animation - Advanced */
.concept-section {
    background-color : var(--bg-body);
    position         : relative;
    overflow         : hidden;
    padding          : 140px 0;
}

.fusion-wrapper {
    display         : flex;
    justify-content : center;
    align-items     : center;
    height          : 400px;
    position        : relative;
    margin-bottom   : 80px;
}

/* Orbit Path for items */
.fusion-orbit {
    position      : absolute;
    width         : 300px;
    height        : 100px;
    border        : 1px dashed rgba(0, 0, 0, 0.1);
    border-radius : 50%;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%, -50%);
    opacity       : 0.5;
}

/* Fusion Items (Card Style) */
.fusion-item {
    position        : absolute;
    width           : 220px;
    height          : 220px;
    border-radius   : 50%;
    background      : rgba(255, 255, 255, 0.2);
    backdrop-filter : blur(10px);
    border          : 1px solid rgba(255, 255, 255, 0.5);
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-direction  : column;
    box-shadow      : 0 10px 40px rgba(0, 0, 0, 0.1);
    z-index         : 2;
    transition      : all 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    top             : 50%;
    left            : 50%;
}

.fusion-item.left {
    transform    : translate(-140%, -50%); /* Initial Left Position */
    background   : linear-gradient(135deg, rgba(0, 174, 239, 0.1), rgba(255, 255, 255, 0.8));
    border-color : #00AEEF;
}

.fusion-item.right {
    transform    : translate(40%, -50%); /* Initial Right Position */
    background   : linear-gradient(135deg, rgba(255, 184, 0, 0.1), rgba(255, 255, 255, 0.8));
    border-color : #FFB800;
}

.fusion-item svg {
    width         : 48px;
    height        : 48px;
    stroke-width  : 1.5;
    margin-bottom : 12px;
    stroke        : #333;
}

.fusion-label {
    font-family    : var(--font-en);
    font-weight    : 700;
    font-size      : 1rem;
    letter-spacing : 0.1em;
    color          : var(--text-main);
}

/* Active State Animation: Swirl & Merge */
.fusion-wrapper.active .fusion-item.left {
    transform : translate(-60%, -50%) scale(1.1); /* Overlap but keep text visible */
    z-index   : 1;
    opacity   : 0.9;
}

.fusion-wrapper.active .fusion-item.right {
    transform : translate(-40%, -50%) scale(1.1); /* Overlap but keep text visible */
    z-index   : 2;
    opacity   : 0.9;
}

/* Glow effect in background representing fusion */
.fusion-glow {
    position      : absolute;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%, -50%) scale(0);
    width         : 400px;
    height        : 400px;
    background    : radial-gradient(circle, rgba(230, 0, 126, 0.4) 0%, transparent 70%);
    border-radius : 50%;
    transition    : transform 1.5s ease 0.5s;
    z-index       : 0;
    filter        : blur(40px);
}

.fusion-wrapper.active .fusion-glow {
    transform : translate(-50%, -50%) scale(1);
}

.fusion-text-area {
    text-align : center;
    max-width  : 800px;
    margin     : 0 auto;
}

.fusion-text-area h3 {
    font-size     : 2.5rem;
    font-weight   : 700;
    margin-bottom : 30px;
}

.fusion-text-area p {
    font-size     : 1.1rem;
    line-height   : 1.9;
    color         : var(--text-sub);
    margin-bottom : 20px;
}

/* Service Features - Dark Theme */
.service-section {
    background-color : #111111;
    color            : #FFFFFF;
    padding          : 100px 0;
}

.service-section .section-header__subtitle {
    color : var(--primary);
}

.service-section .section-header__title {
    color : #FFFFFF;
}

.service-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(300px, 1fr));
    gap                   : 30px;
}

.service-card {
    background     : #1a1a1a;
    border         : 1px solid #333;
    border-radius  : 16px;
    padding        : 40px;
    transition     : all 0.3s ease;
    display        : flex;
    flex-direction : column;
    height         : 100%;
}

.service-card:hover {
    transform    : translateY(-8px);
    border-color : var(--primary);
    box-shadow   : 0 10px 30px rgba(230, 0, 126, 0.2);
}

.service-card__num {
    font-family   : var(--font-en);
    font-size     : 3rem;
    font-weight   : 900;
    color         : #333;
    line-height   : 1;
    margin-bottom : 20px;
    transition    : color 0.3s;
}

.service-card:hover .service-card__num {
    color : var(--primary);
}

.service-card__title {
    font-size     : 1.4rem;
    font-weight   : 700;
    margin-bottom : 16px;
    color         : #FFF;
}

.service-card__desc {
    font-size   : 1rem;
    color       : #AAA;
    line-height : 1.7;
}

/* Customization Section */
.custom-section {
    background    : linear-gradient(135deg, #111111 0%, #222222 100%);
    color         : var(--text-white);
    padding       : 100px 0;
    text-align    : center;
    border-radius : 20px;
    margin        : 60px 0;
    position      : relative;
    overflow      : hidden;
}

.custom-section::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23333333' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.custom-content {
    position  : relative;
    z-index   : 1;
    max-width : 800px;
    margin    : 0 auto;
    padding   : 0 20px;
}

.custom-badge {
    background     : var(--primary);
    color          : #fff;
    padding        : 4px 16px;
    border-radius  : 50px;
    font-size      : 0.9rem;
    font-weight    : 700;
    margin-bottom  : 24px;
    display        : inline-block;
    letter-spacing : 0.1em;
}

/* Mobile Adjustments */
@media (max-width : 768px) {
    .about-hero {
        padding    : 150px 0 160px;
        min-height : auto;
    }

    /* Ensure padding for overlay stats */
    .stats-section {
        margin-top : -80px;
    }

    .stat-item {
        padding : 20px;
    }

    .stat-number {
        font-size : 2.5rem;
    }

    .fusion-wrapper {
        transform : scale(0.8);
        height    : 300px;
    }

    .fusion-item {
        width  : 160px;
        height : 160px;
    }

    .fusion-item.left {
        transform : translate(-120%, -50%);
    }

    .fusion-item.right {
        transform : translate(20%, -50%);
    }

    .fusion-wrapper.active .fusion-item.left {
        transform : translate(-60%, -50%);
    }

    .fusion-wrapper.active .fusion-item.right {
        transform : translate(-40%, -50%);
    }

    .custom-section {
        padding       : 60px 0;
        border-radius : 0;
        width         : 100vw;
        margin-left   : calc(50% - 50vw);
    }
}

/* FAQ Page Hero */
.faq-hero {
    padding-top      : 200px;
    padding-bottom   : 100px;
    background-color : var(--bg-dark);
    color            : var(--text-white);
    position         : relative;
    text-align       : center;
    overflow         : hidden;
}

.faq-hero::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(230, 0, 126, 0.1) 0%, transparent 50%);
    z-index    : 0;
}

.faq-hero__content {
    position : relative;
    z-index  : 1;
}

.faq-hero__subtitle {
    font-family    : var(--font-en);
    color          : var(--primary);
    font-weight    : 700;
    letter-spacing : 0.2em;
    display        : block;
    margin-bottom  : 16px;
}

.faq-hero__title {
    font-family   : var(--font-en);
    font-size     : clamp(2.5rem, 5vw, 4rem);
    font-weight   : 900;
    line-height   : 1.1;
    margin-bottom : 24px;
}

.faq-hero__desc {
    font-size : 1.1rem;
    color     : #ccc;
    max-width : 600px;
    margin    : 0 auto;
}

/* FAQ Content */
.faq-section {
    padding : 80px 0;
}

.faq-category {
    margin-bottom : 80px;
}

.faq-category:last-child {
    margin-bottom : 0;
}

.faq-category__header {
    display        : flex;
    align-items    : center;
    margin-bottom  : 30px;
    padding-bottom : 15px;
    border-bottom  : 2px solid var(--border-color);
    /* Ensure header matches container width */
    max-width      : 900px;
    margin-left    : auto;
    margin-right   : auto;
}

/* Icon Removed */

.faq-category__title {
    font-size   : 1.5rem;
    font-weight : 700;
}

.faq__container {
    max-width : 900px;
    margin    : 0 auto;
}

.faq-item {
    border-bottom : 1px solid var(--border-color);
}

.faq-item__question {
    width           : 100%;
    text-align      : left;
    padding         : 24px 0;
    background      : none;
    border          : none;
    font-size       : 1.05rem;
    font-weight     : 700;
    color           : var(--text-main);
    cursor          : pointer;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    transition      : color 0.3s;
}

.faq-item__question:hover {
    color : var(--primary);
}

.faq-item__icon {
    font-size   : 1.5rem;
    font-weight : 300;
    transition  : transform 0.3s ease;
    flex-shrink : 0;
    margin-left : 20px;
}

.faq-item__question.is-open .faq-item__icon {
    transform : rotate(45deg);
}

.faq-item__answer {
    height     : 0;
    overflow   : hidden;
    transition : height 0.3s ease-out;
    opacity    : 0;
}

.faq-item__answer-inner {
    padding-bottom : 24px;
    color          : var(--text-sub);
    line-height    : 1.8;
    padding-right  : 40px;
    font-size      : 0.95rem;
}

.form-container-dark {
    background-color : rgba(255, 255, 255, 0.95);
    backdrop-filter  : blur(10px);
    max-width        : 540px;
    margin           : 0 auto;
    padding          : 40px 48px;
    border-radius    : 24px;
    box-shadow       : 0 20px 60px rgba(0, 0, 0, 0.5);
    border           : 1px solid rgba(255, 255, 255, 0.2);
    position         : relative;
    z-index          : 2;
    text-align       : left;
}

@media (max-width : 768px) {
    .form-container-dark {
        width   : 100%;
        padding : 32px 24px;
    }

    .faq-item__question {
        font-size : 1rem;
    }

    .faq-item__answer-inner {
        padding-right : 0;
    }
}

/* Flow Timeline Section */
.flow-section {
    background-color : var(--bg-body);
    position         : relative;
    padding          : 100px 0;
    overflow         : hidden;
}

.timeline-container {
    position  : relative;
    max-width : 1000px;
    margin    : 0 auto;
    padding   : 40px 0;
}

/* Center Line */
.timeline-line {
    position   : absolute;
    top        : 0;
    left       : 50%;
    transform  : translateX(-50%);
    width      : 4px;
    height     : 0; /* Animated */
    background : linear-gradient(to bottom, var(--primary), #FF5000);
    z-index    : 0;
    transition : height 1s ease-out;
}

/* Flow Item Flex Layout */
.flow-item {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    margin-bottom   : 100px;
    position        : relative;
    opacity         : 0;
    transform       : translateY(30px);
    transition      : all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    width           : 100%;
}

.flow-item.visible {
    opacity   : 1;
    transform : translateY(0);
}

.flow-item:last-child {
    margin-bottom : 0;
}

/* Content Box */
.flow-content {
    width         : 45%;
    background    : #fff;
    padding       : 40px;
    border-radius : 16px;
    box-shadow    : 0 10px 40px rgba(0, 0, 0, 0.05);
    border        : 1px solid var(--border-color);
    position      : relative;
    z-index       : 1;
}

/* Arrow */
.flow-content::before {
    content    : '';
    position   : absolute;
    top        : 50%;
    width      : 20px;
    height     : 20px;
    background : #fff;
    transform  : translateY(-50%) rotate(45deg);
    border     : 1px solid var(--border-color);
    z-index    : -1;
}

/* Marker (Circle) */
.flow-marker {
    width           : 60px;
    height          : 60px;
    background      : var(--gradient-primary);
    border-radius   : 50%;
    display         : flex;
    justify-content : center;
    align-items     : center;
    color           : white;
    font-family     : var(--font-en);
    font-weight     : 700;
    font-size       : 1.2rem;
    z-index         : 2;
    position        : absolute;
    left            : 50%;
    transform       : translateX(-50%);
    box-shadow      : 0 0 0 8px rgba(255, 255, 255, 1);
}

/* Odd Item: Content Left */
.flow-item:nth-child(odd) {
    flex-direction : row;
}

.flow-item:nth-child(odd) .flow-content {
    margin-right : auto;
}

.flow-item:nth-child(odd) .flow-content::before {
    right         : -10px;
    border-left   : none;
    border-bottom : none;
}

/* Even Item: Content Right */
.flow-item:nth-child(even) {
    flex-direction : row-reverse;
}

.flow-item:nth-child(even) .flow-content {
    margin-left : auto;
}

.flow-item:nth-child(even) .flow-content::before {
    left         : -10px;
    border-right : none;
    border-top   : none;
}

.flow-step-label {
    display        : block;
    font-family    : var(--font-en);
    color          : var(--primary);
    font-weight    : 700;
    font-size      : 0.9rem;
    margin-bottom  : 8px;
    letter-spacing : 0.1em;
}

.flow-title {
    font-size     : 1.5rem;
    font-weight   : 700;
    margin-bottom : 16px;
    display       : flex;
    align-items   : center;
    gap           : 10px;
}

.flow-title svg {
    width        : 24px;
    height       : 24px;
    stroke       : var(--text-main);
    stroke-width : 2;
}

.flow-desc {
    font-size   : 0.95rem;
    color       : var(--text-sub);
    line-height : 1.7;
}

/* Mobile Adjustments */
@media (max-width : 768px) {
    /* Flow Mobile Style - Stacked Right */
    .timeline-line {
        left      : 20px;
        transform : none;
    }

    .flow-item {
        flex-direction : column !important; /* Force column */
        align-items    : flex-start;
        margin-left    : 50px;
        margin-bottom  : 60px;
    }

    .flow-item:nth-child(even) {
        flex-direction : column !important;
    }

    .flow-item:nth-child(odd) .flow-content {
        margin-right : 0;
    }

    .flow-item:nth-child(even) .flow-content {
        margin-left : 0;
    }

    .flow-marker {
        left      : 20px;
        transform : translateX(-50%);
        width     : 40px;
        height    : 40px;
        font-size : 0.9rem;
    }

    .flow-content {
        width      : 100%;
        margin-top : 10px;
    }

    .flow-content::before {
        display : none; /* Hide arrow on mobile */
    }
}

/* Customization Page Hero */
.custom-hero {
    padding-top      : 200px;
    padding-bottom   : 100px;
    background-color : var(--bg-dark);
    color            : var(--text-white);
    position         : relative;
    text-align       : center;
    overflow         : hidden;
}

.custom-hero::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : linear-gradient(45deg, rgba(230, 0, 126, 0.05) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
    z-index    : 0;
}

.custom-hero__content {
    position : relative;
    z-index  : 1;
}

.custom-hero__subtitle {
    font-family    : var(--font-en);
    color          : var(--primary);
    font-weight    : 700;
    letter-spacing : 0.2em;
    display        : block;
    margin-bottom  : 16px;
}

.custom-hero__title {
    font-family   : var(--font-en);
    font-size     : clamp(2.5rem, 5vw, 4rem);
    font-weight   : 900;
    line-height   : 1.1;
    margin-bottom : 24px;
}

.custom-hero__desc {
    font-size : 1.1rem;
    color     : #ccc;
    max-width : 600px;
    margin    : 0 auto;
}

/* Service Description Enhanced */
.service-desc {
    max-width : 1000px;
    margin    : 0 auto;
    position  : relative;
    padding   : 40px 20px;
}

.service-desc::before {
    content        : 'CONCEPT';
    position       : absolute;
    top            : -60px;
    left           : 50%;
    transform      : translateX(-50%);
    font-size      : 10rem;
    font-weight    : 900;
    color          : rgba(0, 0, 0, 0.03);
    font-family    : var(--font-en);
    z-index        : -1;
    pointer-events : none;
    white-space    : nowrap;
}

.service-desc__lead {
    font-size               : clamp(1.8rem, 4vw, 2.5rem);
    font-weight             : 900;
    margin-bottom           : 40px;
    line-height             : 1.5;
    text-align              : center;
    background              : linear-gradient(45deg, #111 0%, #555 100%);
    -webkit-background-clip : text;
    -webkit-text-fill-color : transparent;
}

.service-desc__lead em {
    font-style : normal;
    position   : relative;
    display    : inline-block;
}

.service-desc__lead em::after {
    content    : '';
    position   : absolute;
    bottom     : 5px;
    left       : 0;
    width      : 100%;
    height     : 8px;
    background : rgba(230, 0, 126, 0.3);
    z-index    : -1;
}

.service-desc__text {
    color         : var(--text-main);
    line-height   : 2;
    margin-bottom : 60px;
    text-align    : center;
    font-size     : 1.05rem;
    max-width     : 800px;
    margin-left   : auto;
    margin-right  : auto;
}

/* Price Formula Enhanced */
.price-formula-wrapper {
    background    : #fff;
    padding       : 40px;
    border-radius : 20px;
    box-shadow    : 0 20px 50px rgba(0, 0, 0, 0.08);
    border        : 1px solid rgba(0, 0, 0, 0.05);
    position      : relative;
    overflow      : hidden;
}

.price-formula-wrapper::after {
    content                 : '';
    position                : absolute;
    top                     : 0;
    right                   : 0;
    width                   : 100px;
    height                  : 100px;
    background              : linear-gradient(135deg, transparent 50%, rgba(230, 0, 126, 0.1) 50%);
    border-top-right-radius : 20px;
}

.price-formula {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 30px;
    flex-wrap       : wrap;
}

.price-card {
    background    : var(--bg-sub);
    padding       : 20px 30px;
    border-radius : 12px;
    text-align    : center;
    min-width     : 180px;
    border        : 1px solid var(--border-color);
    transition    : var(--transition);
}

.price-card:hover {
    transform  : translateY(-5px);
    box-shadow : var(--shadow-sm);
}

.price-card.highlight {
    background   : var(--bg-dark);
    color        : #fff;
    border-color : var(--bg-dark);
}

.price-card__label {
    display       : block;
    font-size     : 0.85rem;
    margin-bottom : 8px;
    opacity       : 0.8;
    font-weight   : 700;
}

.price-card__value {
    display     : block;
    font-size   : 1.4rem;
    font-weight : 700;
    font-family : var(--font-en);
}

.price-card.highlight .price-card__value {
    color : var(--primary);
}

.formula-operator {
    font-size   : 2rem;
    color       : var(--text-sub);
    font-weight : 300;
}

/* Customize Examples Grid */
.example-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(300px, 1fr));
    gap                   : 40px;
}

.example-card {
    background     : #fff;
    border         : 1px solid var(--border-color);
    border-radius  : 16px;
    padding        : 0; /* Reset padding for internal layout */
    box-shadow     : 0 10px 30px rgba(0, 0, 0, 0.05);
    transition     : var(--transition);
    display        : flex;
    flex-direction : column;
    overflow       : hidden;
}

.example-card:hover {
    transform    : translateY(-5px);
    box-shadow   : 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color : var(--primary-light);
}

/* Voice Box (User's need) - Positioned at top */
.voice-box {
    background-color : var(--bg-sub);
    padding          : 30px;
    position         : relative;
    border-bottom    : 1px solid var(--border-color);
}

.voice-box::after {
    content          : '';
    position         : absolute;
    bottom           : -10px;
    left             : 40px;
    width            : 20px;
    height           : 20px;
    background-color : var(--bg-sub);
    transform        : rotate(45deg);
    border-right     : 1px solid var(--border-color);
    border-bottom    : 1px solid var(--border-color);
    z-index          : 1;
}

.voice-box__icon {
    display       : flex;
    align-items   : center;
    gap           : 8px;
    font-size     : 0.9rem;
    font-weight   : 700;
    color         : var(--text-sub);
    margin-bottom : 12px;
}

.voice-box__icon svg {
    width  : 20px;
    height : 20px;
    stroke : var(--primary);
}

.voice-box__text {
    font-size   : 1rem;
    font-weight : 700;
    color       : var(--text-main);
    line-height : 1.6;
}

.voice-box__text::before {
    content      : '「';
    margin-right : 4px;
}

.voice-box__text::after {
    content     : '」';
    margin-left : 4px;
}

/* Card Content */
.example-card__body {
    padding        : 40px 30px;
    flex-grow      : 1;
    display        : flex;
    flex-direction : column;
}

.example-card__header {
    margin-bottom  : 24px;
    padding-bottom : 24px;
    border-bottom  : 1px solid var(--border-color);
}

.example-card__label {
    display       : inline-block;
    background    : var(--bg-dark);
    color         : #fff;
    padding       : 4px 12px;
    border-radius : 4px;
    font-size     : 0.8rem;
    font-weight   : 700;
    margin-bottom : 12px;
    font-family   : var(--font-en);
}

.example-card__label.light {
    background : #888;
}

.example-card__label.standard {
    background : var(--primary);
}

.example-card__label.full {
    background : var(--bg-dark);
}

.example-card__title {
    font-size     : 1.4rem;
    font-weight   : 700;
    margin-bottom : 10px;
}

.example-card__price {
    font-size   : 1.8rem;
    font-weight : 900;
    font-family : var(--font-en);
    color       : var(--text-main);
}

.example-card__price small {
    font-size   : 0.9rem;
    color       : var(--text-sub);
    font-weight : normal;
    margin-left : 4px;
}

.example-card__list {
    padding-left  : 20px;
    margin-bottom : 0;
}

.example-card__list li {
    list-style-type : disc;
    color           : var(--text-sub);
    margin-bottom   : 10px;
    font-size       : 0.95rem;
}

@media (max-width : 768px) {
    .price-formula {
        flex-direction : column;
        gap            : 20px;
    }

    .price-formula__plus {
        transform : rotate(90deg);
        font-size : 1.5rem;
    }

    .service-desc__lead {
        font-size : 1.6rem;
    }

    .service-desc::before {
        font-size : 5rem;
        top       : -30px;
    }
}

/* Price Page Hero */
.price-hero {
    padding-top      : 200px;
    padding-bottom   : 100px;
    background-color : var(--bg-dark);
    color            : var(--text-white);
    position         : relative;
    text-align       : center;
    overflow         : hidden;
}

.price-hero::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : linear-gradient(45deg, rgba(230, 0, 126, 0.1) 0%, transparent 70%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    z-index    : 0;
}

.price-hero__content {
    position : relative;
    z-index  : 1;
}

.price-hero__subtitle {
    font-family    : var(--font-en);
    color          : var(--primary);
    font-weight    : 700;
    letter-spacing : 0.2em;
    display        : block;
    margin-bottom  : 16px;
}

.price-hero__title {
    font-family   : var(--font-en);
    font-size     : clamp(2.5rem, 5vw, 4rem);
    font-weight   : 900;
    line-height   : 1.1;
    margin-bottom : 24px;
}

.price-hero__desc {
    font-size : 1.1rem;
    color     : #ccc;
    max-width : 600px;
    margin    : 0 auto;
}

/* Main Plan Section */
.main-plan {
    margin-top    : -60px; /* Overlap Hero */
    position      : relative;
    z-index       : 10;
    margin-bottom : 80px;
}

.plan-card {
    background     : #fff;
    border-radius  : 20px;
    box-shadow     : 0 20px 60px rgba(0, 0, 0, 0.1);
    overflow       : hidden;
    display        : flex;
    flex-direction : column;
    border         : 1px solid var(--border-color);
}

@media (min-width : 992px) {
    .plan-card {
        flex-direction : row;
        align-items    : stretch;
    }
}

.plan-card__highlight {
    background      : var(--bg-dark);
    color           : #fff;
    padding         : 40px;
    flex            : 1;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    text-align      : center;
    position        : relative;
    overflow        : hidden;
}

.plan-card__highlight::before {
    content        : '';
    position       : absolute;
    top            : -50%;
    left           : -50%;
    width          : 200%;
    height         : 200%;
    background     : repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 10px, transparent 10px, transparent 20px);
    pointer-events : none;
}

.plan-card__tag {
    background    : var(--primary);
    color         : #fff;
    font-size     : 0.9rem;
    font-weight   : 700;
    padding       : 4px 16px;
    border-radius : 30px;
    display       : inline-block;
    margin        : 0 auto 20px;
}

.plan-card__title {
    font-size     : 1.8rem;
    font-weight   : 700;
    margin-bottom : 10px;
}

.plan-card__price {
    font-family    : var(--font-en);
    font-weight    : 900;
    font-size      : 4.5rem;
    line-height    : 1;
    color          : var(--primary);
    margin-bottom  : 10px;
    letter-spacing : -0.05em;
}

.plan-card__price small {
    font-size   : 1.2rem;
    font-weight : 700;
    color       : #fff;
    margin-left : 8px;
}

.plan-card__sub-price {
    font-size     : 1.1rem;
    color         : #ccc;
    margin-bottom : 30px;
}

.plan-card__details {
    padding    : 40px;
    flex       : 1.5;
    background : #fff;
}

.plan-list {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(240px, 1fr));
    gap                   : 20px 40px;
    margin-bottom         : 40px;
}

.plan-list__item {
    position     : relative;
    padding-left : 30px;
    font-weight  : 700;
    color        : var(--text-main);
    font-size    : 1.05rem;
}

.plan-list__item::before {
    content     : '✓';
    position    : absolute;
    left        : 0;
    top         : 2px;
    color       : var(--primary);
    font-weight : 900;
    font-size   : 1.2em;
}

.plan-list__desc {
    display     : block;
    font-size   : 0.85rem;
    color       : var(--text-sub);
    font-weight : normal;
    margin-top  : 4px;
}

.plan-card__cta {
    text-align : center;
    margin-top : 20px;
}

/* Option Section */
.option-section {
    padding-bottom : 100px;
}

.option-tabs {
    display         : flex;
    justify-content : center;
    gap             : 10px;
    margin-bottom   : 40px;
    flex-wrap       : wrap;
}

.option-tab {
    background    : transparent;
    border        : 1px solid var(--border-color);
    padding       : 12px 32px;
    border-radius : 50px;
    font-weight   : 700;
    color         : var(--text-sub);
    cursor        : pointer;
    transition    : all 0.3s;
    font-size     : 1rem;
}

.option-tab.active, .option-tab:hover {
    background   : var(--primary);
    color        : #fff;
    border-color : var(--primary);
    box-shadow   : 0 4px 12px rgba(230, 0, 126, 0.3);
}

.option-content {
    display   : none;
    animation : fadeIn 0.5s ease;
}

.option-content.active {
    display : block;
}

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

.option-table {
    width           : 100%;
    border-collapse : collapse;
    background      : #fff;
    box-shadow      : 0 4px 20px rgba(0, 0, 0, 0.03);
    border-radius   : 12px;
    overflow        : hidden;
}

.option-table th, .option-table td {
    padding       : 20px 30px;
    border-bottom : 1px solid var(--border-color);
    text-align    : left;
}

.option-table th {
    background  : var(--bg-sub);
    width       : 30%;
    font-weight : 700;
    color       : var(--text-main);
}

.option-table td {
    color : var(--text-sub);
}

.option-price {
    font-weight : 700;
    color       : var(--text-main);
    font-family : var(--font-en);
    white-space : nowrap;
}

/* Running Cost */
.running-cost {
    background    : var(--bg-sub);
    border-radius : 16px;
    padding       : 40px;
    text-align    : center;
    margin-bottom : 80px;
    border        : 1px solid var(--border-color);
}

.running-cost__title {
    font-size     : 1.5rem;
    font-weight   : 700;
    margin-bottom : 10px;
}

.running-cost__price {
    font-size     : 2.5rem;
    font-weight   : 900;
    color         : var(--text-main);
    font-family   : var(--font-en);
    margin-bottom : 20px;
}

.running-cost__price span {
    font-size   : 1rem;
    font-weight : normal;
    color       : var(--text-sub);
}

.running-cost__list {
    display         : flex;
    justify-content : center;
    gap             : 20px;
    flex-wrap       : wrap;
    list-style      : none;
    padding         : 0;
}

.running-cost__item {
    background    : #fff;
    padding       : 8px 20px;
    border-radius : 30px;
    font-size     : 0.9rem;
    font-weight   : 700;
    box-shadow    : 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Payment Flow */
.payment-flow {
    padding : 80px 0;
}

.flow-steps {
    display         : flex;
    justify-content : space-between;
    counter-reset   : flow;
    max-width       : 800px;
    margin          : 40px auto 0;
    position        : relative;
}

.flow-steps::before {
    content    : '';
    position   : absolute;
    top        : 25px;
    left       : 50px;
    right      : 50px;
    height     : 2px;
    background : var(--border-color);
    z-index    : 0;
}

.flow-step {
    position   : relative;
    z-index    : 1;
    text-align : center;
    background : #fff;
    padding    : 0 10px;
    width      : 30%;
}

.flow-step__num {
    width           : 50px;
    height          : 50px;
    background      : var(--bg-dark);
    color           : #fff;
    border-radius   : 50%;
    display         : flex;
    justify-content : center;
    align-items     : center;
    margin          : 0 auto 16px;
    font-weight     : 700;
    font-family     : var(--font-en);
}

.flow-step__title {
    font-weight   : 700;
    margin-bottom : 8px;
    font-size     : 1.1rem;
}

.flow-step__text {
    font-size : 0.9rem;
    color     : var(--text-sub);
}

@media (max-width : 768px) {
    .main-plan {
        margin-top : -40px;
    }

    .plan-card {
        display : block;
    }

    .plan-card__highlight::before {
        display : none;
    }

    /* Reduce rendering load */
    .option-tabs {
        overflow-x      : auto;
        justify-content : flex-start;
        padding-bottom  : 10px;
        padding-left    : 5px;
    }

    .option-tab {
        white-space : nowrap;
    }

    .flow-steps {
        flex-direction : column;
        gap            : 30px;
    }

    .flow-step {
        width : 100%;
    }

    .flow-steps::before {
        left   : 25px;
        top    : 0;
        bottom : 0;
        height : auto;
        width  : 2px;
    }

    .flow-step__num {
        margin : 0 0 10px 0;
    }

    .flow-step {
        text-align   : left;
        padding-left : 70px;
    }

    .flow-step__num {
        position : absolute;
        left     : 0;
        top      : 0;
    }

    /* Option Table Mobile Styling */
    .option-table, .option-table tbody, .option-table tr, .option-table th, .option-table td {
        display : block;
    }

    .option-table tr {
        margin-bottom : 20px;
        border        : 1px solid var(--border-color);
        border-radius : 8px;
        overflow      : hidden;
    }

    .option-table th {
        width            : 100%;
        background-color : var(--bg-sub);
        padding          : 15px;
    }

    .option-table td {
        padding       : 15px;
        border-bottom : none;
    }

    .option-table td:last-child {
        border-top       : 1px solid var(--border-color);
        background-color : #fafafa;
        text-align       : right;
    }
}

/* Thanks Hero */
.thanks-hero {
    padding-top      : 200px;
    padding-bottom   : 100px;
    background-color : var(--bg-dark);
    color            : var(--text-white);
    position         : relative;
    text-align       : center;
    overflow         : hidden;
}

.thanks-hero::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : radial-gradient(circle at 50% 50%, rgba(230, 0, 126, 0.1) 0%, transparent 60%);
    z-index    : 0;
}

.thanks-hero__content {
    position : relative;
    z-index  : 1;
}

.thanks-hero__subtitle {
    font-family    : var(--font-en);
    color          : var(--primary);
    font-weight    : 700;
    letter-spacing : 0.2em;
    display        : block;
    margin-bottom  : 16px;
}

.thanks-hero__title {
    font-family   : var(--font-en);
    font-size     : clamp(2rem, 5vw, 3.5rem);
    font-weight   : 900;
    line-height   : 1.2;
    margin-bottom : 24px;
}

.thanks-hero__desc {
    font-size   : 1.1rem;
    color       : #ccc;
    max-width   : 600px;
    margin      : 0 auto;
    line-height : 1.8;
}

/* ID Input Section */
.id-check-section {
    background    : #fff;
    margin-top    : -60px;
    position      : relative;
    z-index       : 10;
    border-radius : 20px;
    box-shadow    : 0 20px 60px rgba(0, 0, 0, 0.1);
    padding       : 60px 40px;
    max-width     : 800px;
    margin-left   : auto;
    margin-right  : auto;
    text-align    : center;
    border        : 1px solid var(--border-color);
}

.id-check__title {
    font-size       : 1.5rem;
    font-weight     : 700;
    margin-bottom   : 20px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 12px;
}

.id-check__title svg {
    width  : 32px;
    height : 32px;
    stroke : var(--primary);
}

.id-check__text {
    margin-bottom : 30px;
    color         : var(--text-sub);
}

.id-check__form {
    display   : flex;
    gap       : 10px;
    max-width : 500px;
    margin    : 0 auto;
}

.id-check__input {
    flex           : 1;
    padding        : 16px;
    border         : 2px solid var(--border-color);
    border-radius  : 8px;
    font-size      : 1.1rem;
    text-align     : center;
    letter-spacing : 0.1em;
    font-family    : var(--font-en);
    transition     : border-color 0.3s;
}

.id-check__input:focus {
    outline      : none;
    border-color : var(--primary);
}

.id-check__btn {
    padding       : 0 30px;
    border-radius : 8px;
    font-weight   : 700;
}

/* Next Steps Flow */
.next-steps {
    padding : 100px 0;
}

.step-list {
    display        : flex;
    flex-direction : column;
    gap            : 30px;
    max-width      : 800px;
    margin         : 0 auto;
}

.step-item {
    display       : flex;
    align-items   : flex-start;
    background    : var(--bg-sub);
    padding       : 30px;
    border-radius : 12px;
    border        : 1px solid var(--border-color);
}

.step-item__num {
    background      : var(--bg-dark);
    color           : #fff;
    width           : 40px;
    height          : 40px;
    border-radius   : 50%;
    display         : flex;
    justify-content : center;
    align-items     : center;
    font-family     : var(--font-en);
    font-weight     : 700;
    margin-right    : 20px;
    flex-shrink     : 0;
}

.step-item__content h3 {
    font-size     : 1.2rem;
    font-weight   : 700;
    margin-bottom : 10px;
}

.step-item__content p {
    color     : var(--text-sub);
    font-size : 0.95rem;
}

/* Support/Trouble Section */
.support-section {
    background-color : #fff5f8; /* Very light primary tint */
    border-top       : 1px solid rgba(230, 0, 126, 0.1);
}

.trouble-box {
    text-align : center;
    max-width  : 700px;
    margin     : 0 auto;
}

.trouble__title {
    font-size     : 1.3rem;
    font-weight   : 700;
    margin-bottom : 20px;
    color         : var(--text-main);
}

.trouble__list {
    text-align    : left;
    background    : #fff;
    padding       : 30px;
    border-radius : 12px;
    border        : 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom : 30px;
}

.trouble__list li {
    position      : relative;
    padding-left  : 20px;
    margin-bottom : 10px;
    font-size     : 0.95rem;
    color         : var(--text-sub);
}

.trouble__list li::before {
    content  : '•';
    position : absolute;
    left     : 0;
    color    : var(--primary);
}

.trouble__contact {
    margin-top : 30px;
}

.trouble__link {
    text-decoration : underline;
    color           : var(--primary);
    font-weight     : 700;
}

@media (max-width : 768px) {
    .id-check__form {
        flex-direction : column;
    }

    .id-check__btn {
        width   : 100%;
        padding : 14px;
    }
}

/* Filter Section */
.filter-section {
    background-color : var(--bg-sub);
    padding          : 30px 0;
    border-bottom    : 1px solid var(--border-color);
    position         : sticky;
    top              : 80px; /* Adjust based on header height */
    z-index          : 900;
    transition       : all 0.3s;
}

.filter-list {
    display         : flex;
    justify-content : center;
    gap             : 12px;
    flex-wrap       : wrap;
}

/* Updated Filter Button Styles */
.filter-btn {
    background       : transparent;
    border           : 1px solid var(--border-color);
    color            : var(--text-sub);
    padding          : 12px 32px; /* Increased size */
    border-radius    : 50px;
    font-size        : 1rem; /* Slightly larger text */
    font-weight      : 700;
    cursor           : pointer;
    transition       : all 0.3s;
    font-family      : var(--font-en);
    background-color : #fff;
    min-width        : 100px; /* Ensure minimum width */
}

.filter-btn:hover,
.filter-btn.active {
    background-color : var(--primary);
    color            : #fff;
    border-color     : var(--primary);
    box-shadow       : 0 4px 12px rgba(230, 0, 126, 0.3);
}

@media (max-width : 768px) {
    .filter-section {
        top : 64px;
    }

    .filter-list {
        overflow-x      : auto;
        padding-bottom  : 10px;
        justify-content : flex-start;
        padding-left    : 24px;
        padding-right   : 24px;
    }

    .filter-btn {
        white-space : nowrap;
    }
}

/* List Page Hero */
.list-hero {
    padding-top      : 200px;
    padding-bottom   : 100px;
    background-color : var(--bg-dark);
    color            : var(--text-white);
    position         : relative;
    text-align       : center;
    overflow         : hidden;
}

.list-hero::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : radial-gradient(circle at 50% 30%, rgba(230, 0, 126, 0.15) 0%, rgba(0, 0, 0, 0) 60%);
    z-index    : 0;
}

.list-hero__content {
    position : relative;
    z-index  : 1;
}

.list-hero__subtitle {
    font-family    : var(--font-en);
    color          : var(--primary);
    font-weight    : 700;
    letter-spacing : 0.2em;
    display        : block;
    margin-bottom  : 16px;
}

.list-hero__title {
    font-family   : var(--font-en);
    font-size     : clamp(2.5rem, 5vw, 4rem);
    font-weight   : 900;
    line-height   : 1.1;
    margin-bottom : 24px;
}

.list-hero__desc {
    font-size : 1.1rem;
    color     : #ccc;
    max-width : 600px;
    margin    : 0 auto;
}

/* =========================================
    4. Detail Page Specific Styles (Updated)
    ========================================= */

/* Detail Hero - Updated to Dark Theme */
.detail-hero {
    padding-top      : 220px;
    padding-bottom   : 140px;
    background-color : var(--bg-dark); /* Dark Background */
    color            : var(--text-white);
    position         : relative;
    overflow         : hidden;
    min-height       : 80vh;
    display          : flex;
    align-items      : center;
}

/* Grid Background Removed as requested.
   Use display: none to disable it.
*/
.detail-hero::before {
    content         : '';
    display         : none; /* Hide Grid */
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background      : linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size : 40px 40px;
    z-index         : 0;
    pointer-events  : none;
}

/* Glow Effect */
.detail-hero::after {
    content        : '';
    position       : absolute;
    top            : 50%;
    right          : 0;
    width          : 600px;
    height         : 600px;
    background     : radial-gradient(circle, rgba(230, 0, 126, 0.2) 0%, transparent 70%);
    transform      : translate(20%, -50%);
    z-index        : 0;
    pointer-events : none;
}

.detail-hero__grid {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 60px;
    align-items           : center;
    position              : relative;
    z-index               : 1;
}

@media (min-width : 992px) {
    .detail-hero__grid {
        grid-template-columns : 1fr 1.2fr;
        gap                   : 100px;
    }
}

.detail-hero__content {
    z-index : 2;
}

.detail-hero__label {
    display        : inline-block;
    background     : var(--gradient-primary);
    color          : #fff;
    padding        : 6px 16px;
    font-size      : 0.85rem;
    font-weight    : 700;
    border-radius  : 50px;
    margin-bottom  : 24px;
    letter-spacing : 0.1em;
    box-shadow     : 0 4px 15px rgba(230, 0, 126, 0.4);
}

.detail-hero__title {
    font-family    : var(--font-en);
    font-size      : clamp(3rem, 6vw, 4.5rem);
    font-weight    : 900;
    line-height    : 1;
    margin-bottom  : 24px;
    letter-spacing : -0.02em;
}

.detail-hero__catch {
    font-size               : 1.4rem;
    font-weight             : 700;
    margin-bottom           : 40px;
    display                 : block;
    line-height             : 1.5;
    background              : linear-gradient(90deg, #FFFFFF, #AAAAAA);
    -webkit-background-clip : text;
    -webkit-text-fill-color : transparent;
}

.detail-hero__actions {
    display   : flex;
    gap       : 16px;
    flex-wrap : wrap;
}

/* 3D Floating Image Effect */
.detail-hero__img-wrapper {
    position    : relative;
    z-index     : 1;
    perspective : 1000px;
}

.detail-hero__img {
    border-radius : 16px;
    box-shadow    : 0 30px 80px rgba(0, 0, 0, 0.5);
    width         : 100%;
    border        : 1px solid rgba(255, 255, 255, 0.1);
    transform     : rotateY(-10deg) rotateX(5deg);
    transition    : transform 0.5s ease;
    animation     : float-img 6s ease-in-out infinite;
}

@keyframes float-img {
    0%, 100% {
        transform : rotateY(-10deg) rotateX(5deg) translateY(0);
    }
    50% {
        transform : rotateY(-10deg) rotateX(5deg) translateY(-20px);
    }
}

/* Problems Section - Dark & Alert (Updated) */
.section-problems {
    background-color : #1a1a1a;
    color            : #fff;
    padding          : 100px 0;
}

.section-problems .section-header__title {
    color : #fff;
}

.problems__grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(300px, 1fr));
    gap                   : 40px;
    margin-top            : 60px;
}

.problem-card {
    background    : #222;
    border        : 1px solid #444;
    padding       : 40px 30px;
    border-radius : 16px;
    transition    : all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position      : relative;
    overflow      : hidden;
    box-shadow    : 0 10px 30px rgba(0, 0, 0, 0.5);
}

.problem-card::before {
    content          : '';
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 4px;
    height           : 100%;
    background       : var(--primary); /* Changed to Magenta */
    transform        : scaleY(0);
    transform-origin : bottom;
    transition       : transform 0.4s ease;
}

.problem-card:hover {
    transform    : translateY(-10px);
    box-shadow   : 0 20px 40px rgba(230, 0, 126, 0.15); /* Magenta Glow */
    border-color : var(--primary);
}

.problem-card:hover::before {
    transform : scaleY(1);
}

.problem-card__icon {
    font-size     : 3rem;
    color         : var(--primary); /* Changed to Magenta */
    font-family   : var(--font-en);
    font-weight   : 900;
    margin-bottom : 20px;
    display       : block;
    opacity       : 0.8;
    transition    : opacity 0.3s;
}

.problem-card__title {
    font-size     : 1.3rem;
    font-weight   : 700;
    margin-bottom : 16px;
    color         : #fff;
}

.problem-card__text {
    color       : #ccc;
    font-size   : 0.95rem;
    line-height : 1.8;
}

/* Solution Impact Section (New) */
.solution-impact {
    background : #fff;
    padding    : 120px 0;
    text-align : center;
    position   : relative;
    overflow   : hidden;
}

.solution-impact__content {
    position : relative;
    z-index  : 2;
}

.solution-impact__sub {
    display        : block;
    font-family    : var(--font-en);
    font-weight    : 700;
    color          : var(--primary);
    letter-spacing : 0.2em;
    margin-bottom  : 20px;
    font-size      : 1.1rem;
}

.solution-impact__title {
    font-size      : clamp(2.5rem, 6vw, 4.5rem);
    font-weight    : 900;
    line-height    : 1.2;
    margin-bottom  : 30px;
    color          : var(--text-main);
    /* Added fancy styling */
    text-transform : uppercase;
    letter-spacing : -0.02em;
    position       : relative;
    display        : inline-block;
}

.solution-impact__title::after {
    content       : '';
    display       : block;
    width         : 60px;
    height        : 6px;
    background    : var(--gradient-primary);
    margin        : 20px auto 0;
    border-radius : 3px;
}

.solution-impact__desc {
    font-size   : 1.2rem;
    color       : var(--text-sub);
    max-width   : 700px;
    margin      : 0 auto;
    line-height : 1.8;
}

/* Intro Text Section Styles */
.detail-intro {
    max-width  : 800px;
    margin     : 0 auto;
    text-align : center;
}

/* Intro Block Styles (New) */
.intro-block {
    margin-bottom : 80px;
}

.intro-block:last-of-type {
    margin-bottom : 40px;
}

/* Lead Text Style */
.intro-lead {
    font-size     : clamp(1.5rem, 4vw, 2.2rem);
    font-weight   : 700;
    line-height   : 1.4;
    margin-bottom : 24px;
    color         : var(--text-main);
}

/* Intro Image Style */
.intro-image {
    width         : 100%;
    max-width     : 800px;
    height        : auto;
    border-radius : 16px;
    margin        : 0 auto 40px;
    box-shadow    : var(--shadow-md);
    display       : block;
}

.intro-desc {
    font-size     : 1.1rem;
    line-height   : 2;
    color         : var(--text-sub);
    margin-bottom : 20px;
}

/* Package Info Styles */
.package-info {
    background    : var(--bg-sub);
    border        : 1px solid var(--border-color);
    border-radius : 20px;
    padding       : 50px;
    margin-top    : 80px;
    text-align    : left;
    box-shadow    : 0 10px 30px rgba(0, 0, 0, 0.03);
}

.package-price {
    text-align     : center;
    margin-bottom  : 40px;
    padding-bottom : 30px;
    border-bottom  : 1px solid rgba(0, 0, 0, 0.1);
}

.package-price__highlight {
    margin-bottom : 12px;
}

.package-price__highlight .label {
    display       : block;
    font-size     : 1.2rem;
    font-weight   : 700;
    color         : var(--text-main);
    margin-bottom : 8px;
}

/* Updated Price Color & Size */
.package-price__highlight .price {
    font-size      : 3.8rem; /* Increased size */
    font-family    : var(--font-en);
    font-weight    : 900;
    line-height    : 1;
    color          : var(--primary); /* Changed to Magenta */
    letter-spacing : -0.05em;
}

.package-price__highlight .unit {
    font-size      : 1.2rem;
    font-weight    : 700;
    margin-left    : 8px;
    vertical-align : middle;
    color          : var(--text-main);
}

/* Updated Sub Info (Monthly Cost) */
.package-price__sub-info {
    font-size   : 0.95rem; /* Smaller size */
    color       : var(--text-main); /* Changed to Black */
    font-weight : 500;
}

.package-contents__title {
    font-size     : 1.2rem;
    font-weight   : 700;
    margin-bottom : 24px;
    text-align    : center;
    color         : var(--text-main);
}

.package-list {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(280px, 1fr));
    gap                   : 16px 30px;
    list-style            : none;
    padding               : 0;
}

.package-list li {
    position     : relative;
    padding-left : 30px;
    font-weight  : 600;
    color        : var(--text-main);
    font-size    : 1rem;
}

.package-list li::before {
    content     : '✔';
    position    : absolute;
    left        : 0;
    top         : 1px;
    color       : var(--primary);
    font-weight : 900;
    font-size   : 1.1em;
}

/* Comparison Table Styles (Added) */
.comparison-table-wrapper {
    max-width  : 100%;
    margin     : 60px auto 0;
    overflow-x : auto;
}

.comparison-table {
    width           : 100%;
    border-collapse : collapse;
    min-width       : 600px;
    background      : #fff;
    border-radius   : 8px;
    overflow        : hidden;
    box-shadow      : 0 4px 10px rgba(0, 0, 0, 0.03);
}

.comparison-table th, .comparison-table td {
    padding       : 16px 20px;
    border-bottom : 1px solid var(--border-color);
    text-align    : center;
    font-size     : 0.95rem;
}

.comparison-table th {
    background-color : var(--bg-sub);
    font-weight      : 700;
    width            : 25%;
    text-align       : left;
    color            : var(--text-main);
}

.comparison-table td.highlight {
    color            : var(--primary);
    font-weight      : 700;
    font-size        : 1.05rem;
    background-color : rgba(230, 0, 126, 0.03);
}

.comparison-table td:nth-child(2) {
    color : var(--text-sub);
}

/* Feature Grid System (Replaced 3-Column) */
.detail-specs__grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(280px, 1fr));
    gap                   : 24px;
}

.feature-card {
    background     : #fff;
    border         : 1px solid var(--border-color);
    border-radius  : 16px;
    padding        : 32px 24px;
    transition     : var(--transition);
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
    height         : 100%;
}

.feature-card:hover {
    box-shadow   : var(--shadow-md);
    transform    : translateY(-5px);
    border-color : var(--primary-light);
}

.feature-card__icon {
    width           : 50px;
    height          : 50px;
    background      : var(--bg-sub);
    border-radius   : 12px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    margin-bottom   : 20px;
    color           : var(--primary);
    transition      : var(--transition);
}

.feature-card:hover .feature-card__icon {
    background : var(--primary);
    color      : #fff;
}

.feature-card__icon svg {
    width        : 24px;
    height       : 24px;
    stroke-width : 2;
}

.feature-card__title {
    font-size     : 1.1rem;
    font-weight   : 700;
    margin-bottom : 12px;
    color         : var(--text-main);
}

.feature-card__desc {
    font-size   : 0.95rem;
    color       : var(--text-sub);
    line-height : 1.6;
}

/* Mobile Adjustments */
@media (max-width : 768px) {
    .detail-hero {
        padding-top    : 140px;
        padding-bottom : 80px;
        min-height     : auto;
    }

    .detail-hero__grid {
        gap : 40px;
    }

    .detail-hero__img-wrapper {
        order         : -1;
        margin-bottom : 20px;
    }

    .detail-hero__img {
        transform : none;
        animation : none;
    }

    /* Intro Section adjustments */
    .package-info {
        padding : 30px 20px;
    }

    .package-price__highlight .price {
        font-size : 2.8rem;
    }

    /* Added Style for Mobile Only */
    .feature-card {
        align-items : center;
        text-align  : center;
    }
}

/* Pagination */
.pagination .nav-links {
    display         : flex;
    justify-content : center;
    gap             : 8px;
    margin-top      : 40px;
}

.page-numbers {
    width           : 40px;
    height          : 40px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    border          : 1px solid var(--border-color);
    border-radius   : 8px;
    background      : #fff;
    cursor          : pointer;
    transition      : all 0.2s;
    font-weight     : 700;
    font-family     : var(--font-en);
}

.page-numbers:hover, .page-numbers.current {
    background   : var(--bg-dark);
    color        : #fff;
    border-color : var(--bg-dark);
}

.mt-4 {
    margin-top : 30px;
}

/* Modal Styles */
.modal {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    z-index         : 2000;
    display         : flex;
    justify-content : center;
    align-items     : center;
    opacity         : 0;
    visibility      : hidden;
    transition      : all 0.3s ease;
}

.modal.is-open {
    opacity    : 1;
    visibility : visible;
}

.modal__overlay {
    position                : absolute;
    top                     : 0;
    left                    : 0;
    width                   : 100%;
    height                  : 100%;
    background              : rgba(0, 0, 0, 0.7);
    backdrop-filter         : blur(8px);
    -webkit-backdrop-filter : blur(8px);
}

.modal__container {
    background    : #fff;
    width         : 90%;
    max-width     : 600px;
    max-height    : 90vh;
    overflow-y    : auto;
    border-radius : 16px;
    position      : relative;
    z-index       : 1;
    padding       : 40px;
    box-shadow    : 0 25px 50px rgba(0, 0, 0, 0.3);
    transform     : translateY(20px) scale(0.95);
    transition    : all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.modal.is-open .modal__container {
    transform : translateY(0) scale(1);
}

.modal__close {
    position        : absolute;
    top             : 20px;
    right           : 20px;
    background      : none;
    border          : none;
    cursor          : pointer;
    width           : 32px;
    height          : 32px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    border-radius   : 50%;
    transition      : background 0.2s;
}

.modal__close:hover {
    background : #f0f0f0;
}

.modal__close svg {
    width  : 16px;
    height : 16px;
    stroke : #333;
}

.modal__title {
    font-size     : 1.8rem;
    font-weight   : 700;
    text-align    : center;
    margin-bottom : 10px;
    color         : var(--text-main);
}

.modal__desc {
    text-align    : center;
    color         : var(--text-sub);
    margin-bottom : 30px;
    font-size     : 0.95rem;
}

/* Modal Message (Error & Success) */
.modal__message-content {
    text-align : center;
    padding    : 20px 0;
}

.modal__message-icon {
    width      : 64px;
    height     : 64px;
    margin     : 0 auto 20px;
}

.modal__message-icon svg {
    width  : 100%;
    height : 100%;
}

.modal__message-icon--error {
    color : #d9534f;
}

.modal__message-icon--success {
    color : #28a745;
}

.modal__message-text {
    color       : var(--text);
    margin      : 16px 0;
    line-height : 1.6;
}

.modal__message-button {
    margin-top : 20px;
}

/* Mobile Adjustments */
@media (max-width : 768px) {
    .modal__container {
        padding : 24px;
        width   : 95%;
    }

    /* Modal Message Responsive */
    .modal__message-content {
        padding : 15px 0;
    }

    .modal__message-icon {
        width  : 48px;
        height : 48px;
        margin : 0 auto 15px;
    }

    .modal__title {
        font-size : 1.5rem;
    }

    .modal__message-text {
        font-size   : 0.9rem;
        margin      : 12px 0;
        line-height : 1.5;
    }

    .modal__message-button {
        margin-top : 15px;
        width      : 100%;
    }
}