@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=Shippori+Mincho:wght@400&display=swap');

/* ==========================================================================
   RESET & BASIC STYLES
   ========================================================================== */
:root {
--bg-dark: #070a12;
--bg-card: rgba(15, 23, 42, 0.75);
--bg-card-hover: rgba(26, 38, 66, 0.85);
--primary-blue: #00a8ff;
--primary-blue-glow: rgba(0, 168, 255, 0.35);
--accent-gold: #d4af37;
--accent-gold-light: #f3e5ab;
--text-main: #f1f5f9;
--text-sub: #94a3b8;
--border-color: rgba(255, 255, 255, 0.1);
--font-title: 'Cinzel', serif;
--font-serif: 'Shippori Mincho', 'Yu Mincho', serif;
--font-sans: 'Plus Jakarta Sans', sans-serif;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
font-size: 16px;
}

body {
background-color: var(--bg-dark);
color: var(--text-main);
font-family: var(--font-sans);
line-height: 1.6;
overflow-x: hidden;
background-image: 
    radial-gradient(circle at 15% 20%, rgba(0, 168, 255, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(212, 175, 55, 0.05) 0%, transparent 40%);
background-attachment: fixed;
font-feature-settings: "palt";
}

a {
color: inherit;
text-decoration: none;
transition: all 0.3s ease;
}

ul {
list-style: none;
}

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

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}

.section-padding {
padding: 50px 0;
}

.section-header {
text-align: center;
margin-bottom: 60px;
}

.section-subtitle {
font-family: var(--font-title);
color: var(--primary-blue);
font-size: 0.7rem;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 8px;
display: block;
}

.section-title {
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 400;
color: var(--text-main);
position: relative;
display: inline-block;
}

.section-title::after {
content: '';
display: block;
width: 40px;
height: 2px;
background: linear-gradient(90deg, var(--primary-blue), var(--accent-gold));
margin: 16px auto 0;
}

.btn-gold {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, #c5a028 0%, #e6ca65 50%, #9a7b13 100%);
color: #000;
font-weight: 600;
padding: 14px 20px;
border-radius: 4px;
letter-spacing: 1px;
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.25);
transition: all 0.3s ease;
font-size: 0.95rem;
border: none;
cursor: pointer;
}

.btn-gold:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(212, 175, 55, 0.4);
filter: brightness(1.1);
}

.btn-line {
background: #06c755;
color: #fff;
box-shadow: 0 4px 20px rgba(6, 199, 85, .25);
}

.btn-line:hover {
background: #05b84f;
color: #fff;
box-shadow: 0 8px 26px rgba(6, 199, 85, .4);
filter: none;
}

.line-button-logo {
width: 24px;
height: 24px;
object-fit: contain;
}

.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid var(--primary-blue);
color: var(--primary-blue);
padding: 12px 32px;
border-radius: 4px;
letter-spacing: 1px;
transition: all 0.3s ease;
font-size: 0.9rem;
background: rgba(0, 168, 255, 0.05);
}

.btn-outline:hover {
background: var(--primary-blue);
color: #000;
box-shadow: 0 0 20px var(--primary-blue-glow);
}