/* 
 * F DESIGN WORKS - Corporate Site Styles
 * Theme: Cool, Sophisticated, Minimal, Tech-savvy
 */

:root {
    /* Colors */
    --color-bg: #0a0a0a;
    --color-surface: #141414;
    --color-text-primary: #ffffff;
    --color-text-secondary: #888888;
    --color-accent: #007bff;
    /* Tech Blue */
    --color-accent-hover: #0056b3;
    --color-border: #333333;

    /* Typography */
    --font-main: 'Noto Sans JP', sans-serif;
    --font-en: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-jp: 'Noto Sans JP', sans-serif;
    --font-en: 'Inter', sans-serif;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    /* Layout */
    --container-width: 1200px;
    --header-height: 80px;

    --transition-base: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

body {
    font-family: var(--font-jp);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    /* Hide overflow for parallax elements */
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

ul {
    list-style: none;
}

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

/* Utilities */
.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
}

.section {
    padding: var(--spacing-xl) 0;
}

/* Typography Helpers */
/* Section Header (World Class Update) */
.section__header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
    position: relative;
    padding: var(--spacing-md) 0;
    z-index: 1;
}

/* Gradient Title */
.section__title {
    font-family: var(--font-en);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, #fff 0%, #b0c4de 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 2;
    display: inline-block;
}

.section__subtitle {
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    display: flex;
    align-items: center;
}

.header__container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__logo {
    font-family: var(--font-en);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.header__nav-list {
    display: flex;
    gap: var(--spacing-md);
}

.header__nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    position: relative;
}

.header__nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-accent);
    transition: var(--transition-base);
}

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

.header__nav-link--contact {
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--color-text-primary);
    border-radius: 9999px;
}

.header__nav-link--contact:hover {
    background-color: var(--color-text-primary);
    color: var(--color-bg);
}

.header__nav-link--contact::after {
    display: none;
}

/* High-End Neon Button */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 3rem;
    background: transparent;
    color: var(--color-accent);
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    /* Tech sharp corners or slight round */
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.1), inset 0 0 10px rgba(0, 242, 255, 0.05);
    text-shadow: 0 0 5px rgba(0, 242, 255, 0.5);
    letter-spacing: 0.1em;
}

.c-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.4), transparent);
    transition: left 0.5s ease;
    z-index: 0;
}

.c-btn:hover {
    background: rgba(0, 242, 255, 0.1);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.4), inset 0 0 20px rgba(0, 242, 255, 0.2);
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 242, 255, 1);
    transform: translateY(-2px);
}

.c-btn:hover::before {
    left: 100%;
}

.c-btn__icon {
    margin-left: 10px;
    z-index: 1;
    /* Keep above background */
    transition: transform 0.3s ease;
}

.c-btn:hover .c-btn__icon {
    transform: translateX(5px);
}

/* Mobile check for buttons */
@media (max-width: 480px) {
    .c-btn {
        padding: 0 1.5rem;
        font-size: 0.9rem;
        width: 100%;
    }
}

/* Hero Section - Award Winning Design with Image */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-top: var(--header-height);

    /* Background Image Settings - Corrected Path for WP */
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    perspective: 1000px;
    /* For 3D effects on content */
}

/* Dark Overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Dark overlay to ensure text readability */
    background-color: rgba(0, 0, 0, 0.6);

    /* Optional: Subtle gradient mix for depth */
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);

    z-index: 1;
    pointer-events: none;
}

/* Grid Pattern Overlay - Kept subtle */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 2;
    /* High enough to be over bg, low enough to be under content */
    opacity: 0.3;
    pointer-events: none;
}

.hero__content {
    text-align: center;
    z-index: 10;
    position: relative;
    /* transition: transform 0.1s ease-out; In handled by JS now for parallax */
}

.hero__title {
    font-family: var(--font-en);
    font-size: clamp(3rem, 12vw, 9rem);
    font-weight: 800;
    line-height: 1.0;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.04em;
    position: relative;
}

.hero__title-line {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    position: relative;
    transition: all 0.3s ease;
}

/*
 * The "Spotlight" Text Effect
 * Uses background-clip and dynamic gradients based on mouse position
 */
.hero__title-line {
    background-image: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            #ffffff 0%,
            #007bff 25%,
            transparent 50%);
    background-size: 200% 200%;
    /* Ensure gradient covers enough area */
    background-position: calc(var(--mouse-x-pct, 50%) - 50%) calc(var(--mouse-y-pct, 50%) - 50%);
    /* Counter-move background to lock it to viewport/mouse */
    /* Note: simplified background-attachment: fixed approach is often better but let's try direct var mapping first */

    /* Better approach for local coordinates */
    background: radial-gradient(600px circle at var(--mouse-x-pct, 50%) var(--mouse-y-pct, 50%),
            #ffffff 0%,
            #88aadd 30%,
            rgba(255, 255, 255, 0.1) 60%);

    -webkit-background-clip: text;
    background-clip: text;

    /* Text Shadow Glow */
    text-shadow: 0 0 20px rgba(0, 123, 255, 0);
    transition: text-shadow 0.3s ease;
}

/* Hover state enhancement (though it's always active with mouse) */
.hero:hover .hero__title-line {
    text-shadow: 0 0 30px rgba(0, 123, 255, 0.3);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
}

.hero__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.3em;
    margin-top: var(--spacing-md);
    opacity: 0.8;
    animation: fadeIn 1s ease-out 0.5s backwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 0.8;
        transform: translateY(0);
    }
}

/* Dynamic Background Layer removed in favor of pseudo-elements on .hero */
.hero__bg {
    display: none;
}

/* News Section */
.news__list {
    border-top: 1px solid var(--color-border);
}

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

.news__link {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) 0;
    transition: var(--transition-base);
}

.news__link:hover {
    padding-left: 10px;
    background-color: rgba(255, 255, 255, 0.02);
}

.news__date {
    font-family: var(--font-en);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    width: 120px;
    flex-shrink: 0;
}

.news__category {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    margin-right: var(--spacing-md);
    width: 100px;
    /* Fixed width for alignment */
    text-align: center;
    flex-shrink: 0;
}

.news__title {
    font-weight: 500;
}

@media (max-width: 768px) {
    .news__link {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .news__date,
    .news__category {
        width: auto;
        margin: 0;
    }

    .header__nav {
        display: none;
        /* Mobile menu implementation needed later */
    }

    .hero__title {
        font-size: 3.5rem;
    }
}

/* =========================================
   Mobile Navigation & Hamburger Menu
   ========================================= */

/* Hamburger Button - Initially hidden */
.header__hamburger {
    display: none;
    width: 30px;
    height: 30px;
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1010;
    /* Above nav */
}

.header__hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    left: 0;
    transition: var(--transition-base);
}

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

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

.header__hamburger span:nth-child(3) {
    top: 22px;
}

/* Hamburger Active State (X shape) */
.header__hamburger.is-active span:nth-child(1) {
    top: 14px;
    transform: rotate(45deg);
}

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

.header__hamburger.is-active span:nth-child(3) {
    top: 14px;
    transform: rotate(-45deg);
}

/* Mobile Navigation Media Query */
@media (max-width: 768px) {
    .header__hamburger {
        display: block;
    }

    .header__nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--color-bg);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;

        /* Animation states */
        opacity: 0;
        pointer-events: none;
        transform: translateY(-20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .header__nav.is-active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .header__nav-list {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-lg);
    }

    .header__nav-link {
        font-size: 1.5rem;
    }
}

/* =========================================
   Sub-Page Header (For about.html etc)
   ========================================= */
.page-header {
    height: 400px;
    /* Reduced from fullscreen hero */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: var(--header-height);
    background-color: var(--color-bg);
    overflow: hidden;
}

.page-header__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/hero-bg.jpg');
    /* Reuse hero image */
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.page-header__bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.page-header__title {
    font-family: var(--font-en);
    font-size: 3.5rem;
    font-weight: 700;
    z-index: 10;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-xs);
}

.page-header__subtitle {
    font-size: 1rem;
    color: var(--color-text-secondary);
    z-index: 10;
    letter-spacing: 0.2em;
}

/* =========================================
   About Page Components
   ========================================= */

/* Greeting Section */
.greeting__content {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.greeting__image {
    flex: 1;
    min-width: 300px;
}

.img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-weight: 700;
    border: 1px solid var(--color-border);
}

.greeting__text {
    flex: 1.5;
}

.greeting__lead {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
    background: linear-gradient(90deg, #fff, #999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.greeting__sign {
    margin-top: var(--spacing-lg);
    text-align: right;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.greeting__name {
    font-size: 1.25rem;
    color: var(--color-text-primary);
    display: block;
    margin-top: 0.5rem;
}

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

    .greeting__sign {
        text-align: left;
    }
}

/* Company Table */
.company-table-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.company-table {
    width: 100%;
    border-collapse: collapse;
}

.company-table th,
.company-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.company-table th {
    width: 30%;
    color: var(--color-text-secondary);
    font-weight: 500;
}

@media (max-width: 768px) {

    .company-table th,
    .company-table td {
        display: block;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .company-table th {
        border-bottom: none;
        padding-bottom: 0;
        font-size: 0.85rem;
        color: var(--color-accent);
    }
}

/* Access / Map */
.map-container {
    height: 400px;
    width: 100%;
    background-color: #222;
    position: relative;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    border: 1px solid var(--color-border);
}

/* =========================================
   Scroll Animations (Fade In)
   ========================================= */


.js-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.js-fade.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* Services Section */
.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-md);
    /* Grid items stretch by default */
}

/* Services Section - World Class Update */
.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

a.service-card {
    display: block;
    position: relative;
    min-height: 450px;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    /* Glassmorphism Base */
    background: #000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Image Layer */
a.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: inherit;
    /* Inherit from inline style */
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 0;
    filter: grayscale(80%) brightness(0.6);
    /* Cinematic muted look initially */
}

/* Overlay Layer */
.service-card__overlay {
    background: linear-gradient(to bottom,
            rgba(5, 10, 16, 0.6) 0%,
            rgba(5, 10, 16, 0.9) 80%,
            rgba(5, 10, 16, 1) 100%);
    z-index: 1;
    opacity: 0.9;
    transition: opacity 0.5s ease;
}

/* Content Layout */
.service-card__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.5rem;
    color: #fff;
    transform: translateZ(20px);
    /* 3D pop */
}

.service-card__number {
    font-family: var(--font-en);
    font-size: 4rem;
    font-weight: 800;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    color: transparent;
    line-height: 1;
    margin-bottom: auto;
    opacity: 0.5;
    transition: all 0.5s ease;
}

.service-card__title {
    font-family: var(--font-en);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    color: #fff;
    background: linear-gradient(90deg, #fff, #b0c4de);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-card__text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
    opacity: 0.8;
    transform: translateY(10px);
    transition: all 0.5s ease;
}

/* --- Hover Effects --- */
a.service-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 242, 255, 0.15);
    /* Neon Glow */
    border-color: rgba(0, 242, 255, 0.5);
}

a.service-card:hover::before {
    transform: scale(1.15);
    filter: grayscale(0%) brightness(1);
    /* Full color reveal */
}

a.service-card:hover .service-card__overlay {
    opacity: 0.4;
    /* Fade out overlay to show image */
    background: linear-gradient(to bottom,
            rgba(0, 242, 255, 0.1) 0%,
            rgba(5, 10, 16, 0.8) 100%);
}

a.service-card:hover .service-card__number {
    color: var(--color-accent);
    -webkit-text-stroke: 0;
    opacity: 1;
    transform: translate(-5px, -5px) scale(1.1);
    text-shadow: 0 0 20px var(--color-accent);
}

a.service-card:hover .service-card__text {
    color: #fff;
    opacity: 1;
    transform: translateY(0);
}

/* Footer */
.footer {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-lg) 0 var(--spacing-md);
}

.footer__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
}

.footer__logo {
    font-family: var(--font-en);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.footer__address {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.footer__nav-list {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.footer__nav-list a {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.footer__nav-list a:hover {
    color: var(--color-accent);
}

.footer__copyright {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: var(--spacing-md);
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

.footer__nav-list {
    flex-direction: column;
    gap: var(--spacing-xs);
}


/* =========================================
   Contact Form Styles
   ========================================= */

.contact-form-section {
    padding-bottom: var(--spacing-xl);
}

.contact-intro {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    line-height: 2;
    color: var(--color-text-secondary);
}

.u-mobile-br {
    display: none;
}

@media (max-width: 768px) {
    .u-mobile-br {
        display: block;
    }
}

.contact-form {
    max-width: 700px;
    margin: 0 auto;
    background-color: var(--color-surface);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

.form-required {
    font-size: 0.75rem;
    color: var(--color-bg);
    background-color: var(--color-accent);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 1rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-family: var(--font-main);
    font-size: 1rem;
    border-radius: 4px;
    transition: var(--transition-base);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

/* Custom Select styling wrapper if needed, but simple for now */
.select-wrapper {
    position: relative;
}

.form-textarea {
    resize: vertical;
}

.form-submit {
    text-align: center;

    .c-btn .arrow {
        transition: transform 0.3s ease;
    }

    .c-btn:hover {
        background-color: transparent;
        color: var(--color-text-primary);
    }

    .c-btn:hover .arrow {
        transform: translateX(5px);
    }

    .c-btn--large {
        width: 100%;
        max-width: 300px;
    }

    @media (max-width: 768px) {
        .contact-form {
            padding: var(--spacing-md);
            border: none;
            background-color: transparent;
        }

        .contact-intro {
            text-align: left;
        }

        .c-btn--large {
            width: 100%;
            max-width: none;
        }
    }

    /* =========================================
   Privacy Policy Styles
   ========================================= */

    .privacy-section {
        padding-bottom: var(--spacing-xl);
    }

    .privacy-content {
        max-width: 800px;
        margin: 0 auto;
        background-color: var(--color-surface);
        padding: var(--spacing-lg);
        border: 1px solid var(--color-border);
    }

    @media (max-width: 900px) {
        .service-row {
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .service-row--reverse {
            flex-direction: column;
        }

        .service-row__image,
        .service-row__content {
            flex: 0 0 100%;
            width: 100%;
        }
    }

    .privacy-intro {
        margin-bottom: var(--spacing-lg);
        line-height: 1.8;
        color: var(--color-text-secondary);
    }

    .privacy-item {
        margin-bottom: var(--spacing-lg);
    }

    .privacy-item__title {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: var(--spacing-sm);
        color: var(--color-text-primary);
        border-left: 4px solid var(--color-accent);
        padding-left: 0.75rem;
    }

    .privacy-item p {
        margin-bottom: var(--spacing-sm);
        line-height: 1.8;
        color: var(--color-text-secondary);
    }

    .privacy-item ul {
        list-style-type: disc;
        padding-left: 1.5rem;
        margin-bottom: var(--spacing-sm);
        color: var(--color-text-secondary);
    }

    .privacy-item li {
        margin-bottom: 0.5rem;
    }

    .privacy-contact {
        background-color: var(--color-bg);
        padding: var(--spacing-md);
        border: 1px solid var(--color-border);
        margin-top: var(--spacing-sm);
    }

    @media (max-width: 768px) {
        .privacy-content {
            padding: var(--spacing-md);
            background-color: transparent;
            border: none;
        }
    }

    /* =========================================
   Service Page Styles
   ========================================= */

    /* Service Details Section (Zigzag) */
    .service-details {
        padding-bottom: var(--spacing-xl);
    }

    .service-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
        margin-bottom: 120px;
        align-items: center;
    }

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

    .service-row--reverse {
        /* Grid handles ordering differently, we can use order property or named areas if needed, 
           but simpler is just swapping DOM order? 
           Actually, for grid, keeping DOM logical and using CSS is better. 
           Let's use order: 2 for the image in normal, and swap for reverse. */
    }

    /* However, the HTML structure is: Image, Content.
       Normal: Image(Left), Content(Right)
       Reverse: Content(Left), Image(Right)
       
       In Grid:
       Normal: No change needed.
       Reverse: We need image to be in second column.
    */

    .service-row--reverse .service-row__image {
        order: 2;
    }

    .service-row--reverse .service-row__content {
        order: 1;
    }

    .service-row__image {
        /* Grid item properties */
        width: 100%;
        /* Fill the grid cell */
        height: 100%;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .service-row__image img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.6s ease;
    }

    .service-row:hover .service-row__image img {
        transform: scale(1.05);
        /* Zoom on hover */
    }

    .service-row__content {
        /* Grid item properties */
        width: 100%;
    }

    .service-row__number {
        font-family: var(--font-en);
        font-size: 4rem;
        font-weight: 700;
        color: var(--color-accent);
        opacity: 0.3;
        line-height: 1;
        display: block;
        margin-bottom: var(--spacing-sm);
    }

    .service-row__title {
        font-family: var(--font-en);
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: var(--spacing-sm);
        line-height: 1.2;
    }

    .service-row__subtitle {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: var(--spacing-md);
        background: linear-gradient(90deg, #fff, #aaa);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline-block;
    }

    .service-row__text {
        line-height: 1.8;
        color: var(--color-text-secondary);
        margin-bottom: var(--spacing-md);
    }

    /* Specific Feature Blocks in Service Detail */
    .service-feat {
        margin-top: var(--spacing-md);
        border-left: 2px solid var(--color-accent);
        padding-left: var(--spacing-md);
    }

    .service-feat__title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 0.5rem;
    }

    .service-feat__desc {
        font-size: 0.95rem;
        color: var(--color-text-secondary);
        line-height: 1.6;
    }

    /* List Style */
    .service-list ul {
        list-style: none;
        margin-top: var(--spacing-md);
    }

    .service-list li {
        position: relative;
        padding-left: 1.5rem;
        margin-bottom: 0.75rem;
        color: var(--color-text-secondary);
    }

    .service-list li::before {
        content: ";
 position: absolute;
        left: 0;
        top: 0.6em;
        width: 6px;
        height: 6px;
        background-color: var(--color-accent);
        border-radius: 50%;
    }


    /* Image Reveal Animation */
    /* Cyber Wipe Animation */
    .reveal-image {
        position: relative;
        overflow: hidden;
        opacity: 1;
        /* Keep visible but mask it */
        transform: translateY(20px);
        transition: transform 0.8s ease-out;
    }

    .reveal-image img {
        opacity: 0;
        transform: scale(1.1);
        transition: opacity 0.1s delay 0.3s, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* The Wipe Curtain */
    .reveal-image::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background: var(--color-accent);
        z-index: 10;
        /* initial state */
    }

    /* Trigger State */
    .reveal-image.is-active {
        transform: translateY(0);
    }

    .reveal-image.is-active::after {
        animation: cyberWipe 0.8s cubic-bezier(0.7, 0, 0.3, 1) forwards;
    }

    .reveal-image.is-active img {
        opacity: 1;
        transform: scale(1);
        transition-delay: 0.35s;
        /* Wait for wipe to cover */
    }

    @keyframes cyberWipe {
        0% {
            left: 0;
            width: 0%;
        }

        40% {
            left: 0;
            width: 100%;
        }

        /* Fully covers */
        60% {
            left: 0;
            width: 100%;
        }

        /* Slight pause */
        100% {
            left: 100%;
            width: 0%;
        }

        /* Flies away to right */
    }

    /* CTA Section Updates */
    .cta-section {
        padding: 100px 0;
        background-color: #0d141c;
        text-align: center;
    }

    .cta-inner {
        width: 100% !important;
        max-width: 500px !important;
        margin: 0 auto !important;
        padding: 0 var(--spacing-md);
        text-align: center !important;
    }

    .cta-title {
        font-family: var(--font-en);
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: var(--spacing-lg);
        background: linear-gradient(135deg, #fff 0%, #a5a5a5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -0.02em;
    }

    .cta-text {
        font-size: 1.1rem;
        color: var(--color-text-secondary);
        margin-bottom: 3rem;
        line-height: 2;
    }

    /* Ensure button is centered and looks distinct */
    .cta-btn-wrapper {
        display: flex;
        justify-content: center;
    }

    /* Responsive adjust */
    @media (max-width: 900px) {
        .service-row {
            grid-template-columns: 1fr;
            /* Stack vertically */
            gap: var(--spacing-md);
        }

        .service-row__image {
            order: -1;
            /* Always image first on mobile */
        }

        .service-row--reverse .service-row__image {
            order: -1;
        }

        .service-row--reverse .service-row__content {
            order: 0;
        }

        .cta-title {
            font-size: 2.2rem;
        }

        .cta-text {
            font-size: 1rem;
            text-align: center;
        }
    }
}