/* Base Variables & Reset */
:root {
    --bg-color: #157979; /* Teal */
    --bg-darker: #0f5c5c;
    --text-color: #ffffff; /* White */
}

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

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Animations --- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

@keyframes pulseGlow {
    0% { opacity: 0.3; transform: scale(0.95); }
    100% { opacity: 0.7; transform: scale(1.05); }
}

/* Layout Wrapper */
.layout-wrapper {
    width: 100%;
    position: relative;
    padding-bottom: 6vw; 
}

/* --- Header --- */
header {
    display: flex;
    align-items: center;
    padding: 15px 40px;
    position: relative;
    z-index: 20;
    background-color: var(--bg-color);
}

.logo {
    display: flex;
    align-items: center;
    margin-right: 8px; 
}

.logo svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
}

h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* --- Loading Spinner CSS --- */
.loader {
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top: 4px solid var(--text-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1; 
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- STACKED GEOMETRY & SPACING --- */

.hero {
    position: relative;
    z-index: 30; 
    text-align: center;
    padding: 0 40px 0; 
    background-color: transparent;
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-curve-wrapper {
    width: 100%;
    max-width: 950px; 
    margin: -98px auto 0; 
    position: relative;
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.1));
}

.hero-curve-wrapper svg { overflow: visible; }

.hero p {
    font-size: 1.15rem;
    max-width: 800px;
    margin: -10px auto 30px; 
    opacity: 0.95;
    position: relative;
}

.hero-img-wrapper {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    margin-bottom: -10vw; 
    z-index: 10;
    opacity: 0;
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
}

.hero-img-wrapper::before {
    content: '';
    position: absolute;
    top: 5%; left: 5%; right: 5%; bottom: 15%;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
    filter: blur(40px);
    z-index: 1;
    animation: pulseGlow 4s ease-in-out infinite alternate;
}

.hero-img {
    width: 100%;
    height: auto; 
    display: block;
    border-radius: 12px;
    position: relative;
    z-index: 2; 
    animation: float 6s ease-in-out infinite 1s; 
}

/* --- SECTIONS --- */
.section-win, .section-lin {
    position: relative;
    color: var(--bg-color);
}

.section-win {
    z-index: 9;
    padding-top: 13vw; 
    padding-bottom: 6vw; 
}

.section-mac {
    position: relative;
    z-index: 8;
    padding: 2vw 0;
    color: var(--text-color);
}

.section-lin {
    z-index: 7;
    padding-top: 6vw; 
    padding-bottom: 10vw;
}

/* --- CSS DIAGONALS & HIGH-PERFORMANCE TEARS --- */

.bg-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.3));
}

.bg-shape-top, .bg-shape-bottom, .bg-shape-fill {
    position: absolute;
    background-color: var(--text-color);
    left: -10vw; width: 120vw;
}

.bg-shape-top {
    top: -20px; height: 50%;
    transform: rotate(3.43deg); 
    transform-origin: top left;
}
.bg-shape-bottom {
    bottom: -20px; height: 50%;
    transform: rotate(-3.43deg); 
    transform-origin: bottom left;
}
.bg-shape-fill {
    top: 10vw; bottom: 10vw; height: auto;
}


/* --- CHUNKY, TILTED-BLOCK PAPER TEAR SVG (WIDER SCALING) --- */

/* Top Tear */
.bg-shape-top::before {
    content: "";
    position: absolute;
    bottom: calc(100% - 2px); 
    left: 0; width: 100%; height: 45px;
    background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'><path d='M0,40 L0,20 L18,14 L25,36 L45,22 L58,8 L65,28 L90,16 L100,5 L125,18 L132,35 L155,24 L170,10 L178,28 L205,18 L212,4 L240,15 L248,34 L275,22 L290,12 L298,30 L320,16 L328,6 L355,20 L362,38 L385,25 L400,12 L408,28 L435,18 L442,5 L465,16 L475,34 L500,22 L515,10 L522,28 L545,15 L552,5 L580,20 L588,36 L615,25 L630,12 L638,30 L665,18 L672,5 L695,16 L705,35 L730,22 L745,10 L752,28 L780,15 L788,4 L810,20 L818,36 L845,24 L860,12 L868,30 L895,18 L902,5 L925,15 L935,35 L960,22 L975,10 L982,28 L1000,15 L1000,40 Z' fill='%23ffffff'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'><path d='M0,40 L0,15 L15,5 L22,28 L48,16 L55,8 L85,22 L92,38 L115,25 L135,12 L142,30 L168,18 L175,5 L195,16 L205,35 L235,22 L248,10 L255,28 L280,15 L288,5 L315,20 L322,38 L345,24 L360,12 L368,30 L395,18 L402,4 L428,15 L435,35 L460,22 L475,10 L482,28 L510,16 L518,5 L540,20 L548,38 L575,25 L590,12 L598,30 L625,18 L632,5 L655,16 L665,35 L690,22 L705,10 L712,28 L740,15 L748,4 L770,20 L778,38 L805,24 L820,12 L828,30 L855,18 L862,5 L888,15 L895,35 L920,22 L935,10 L942,28 L970,16 L978,5 L1000,20 L1000,40 Z' fill='%23ffffff'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'><path d='M0,40 L0,28 L20,16 L28,5 L58,15 L65,35 L95,22 L112,10 L120,28 L145,15 L152,4 L180,20 L188,38 L215,24 L230,12 L238,30 L265,18 L272,5 L295,16 L305,35 L330,22 L345,10 L352,28 L380,15 L388,5 L415,20 L422,38 L448,25 L460,12 L468,30 L495,18 L502,4 L528,15 L535,35 L560,22 L575,10 L582,28 L610,16 L618,5 L640,20 L648,38 L675,24 L690,12 L698,30 L725,18 L732,5 L755,16 L765,35 L790,22 L805,10 L812,28 L840,15 L848,4 L870,20 L878,38 L905,25 L920,12 L928,30 L955,18 L962,5 L990,15 L1000,28 L1000,40 Z' fill='%23ffffff'/></svg>");
    background-position: 0 100%, 137px 100%, 311px 100%;
    background-repeat: repeat-x, repeat-x, repeat-x;
    background-size: 1277px 45px, 853px 35px, 593px 25px; 
}

/* Bottom Tear */
.bg-shape-bottom::after {
    content: "";
    position: absolute;
    top: calc(100% - 2px);
    left: 0; width: 100%; height: 45px;
    transform: rotate(180deg);
    background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'><path d='M0,40 L0,20 L18,14 L25,36 L45,22 L58,8 L65,28 L90,16 L100,5 L125,18 L132,35 L155,24 L170,10 L178,28 L205,18 L212,4 L240,15 L248,34 L275,22 L290,12 L298,30 L320,16 L328,6 L355,20 L362,38 L385,25 L400,12 L408,28 L435,18 L442,5 L465,16 L475,34 L500,22 L515,10 L522,28 L545,15 L552,5 L580,20 L588,36 L615,25 L630,12 L638,30 L665,18 L672,5 L695,16 L705,35 L730,22 L745,10 L752,28 L780,15 L788,4 L810,20 L818,36 L845,24 L860,12 L868,30 L895,18 L902,5 L925,15 L935,35 L960,22 L975,10 L982,28 L1000,15 L1000,40 Z' fill='%23ffffff'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'><path d='M0,40 L0,15 L15,5 L22,28 L48,16 L55,8 L85,22 L92,38 L115,25 L135,12 L142,30 L168,18 L175,5 L195,16 L205,35 L235,22 L248,10 L255,28 L280,15 L288,5 L315,20 L322,38 L345,24 L360,12 L368,30 L395,18 L402,4 L428,15 L435,35 L460,22 L475,10 L482,28 L510,16 L518,5 L540,20 L548,38 L575,25 L590,12 L598,30 L625,18 L632,5 L655,16 L665,35 L690,22 L705,10 L712,28 L740,15 L748,4 L770,20 L778,38 L805,24 L820,12 L828,30 L855,18 L862,5 L888,15 L895,35 L920,22 L935,10 L942,28 L970,16 L978,5 L1000,20 L1000,40 Z' fill='%23ffffff'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'><path d='M0,40 L0,28 L20,16 L28,5 L58,15 L65,35 L95,22 L112,10 L120,28 L145,15 L152,4 L180,20 L188,38 L215,24 L230,12 L238,30 L265,18 L272,5 L295,16 L305,35 L330,22 L345,10 L352,28 L380,15 L388,5 L415,20 L422,38 L448,25 L460,12 L468,30 L495,18 L502,4 L528,15 L535,35 L560,22 L575,10 L582,28 L610,16 L618,5 L640,20 L648,38 L675,24 L690,12 L698,30 L725,18 L732,5 L755,16 L765,35 L790,22 L805,10 L812,28 L840,15 L848,4 L870,20 L878,38 L905,25 L920,12 L928,30 L955,18 L962,5 L990,15 L1000,28 L1000,40 Z' fill='%23ffffff'/></svg>");
    background-position: 0 100%, 137px 100%, 311px 100%;
    background-repeat: repeat-x, repeat-x, repeat-x;
    background-size: 1277px 45px, 853px 35px, 593px 25px; 
}

/* --- Content Formatting --- */
.content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    gap: 40px; 
    padding: 0 40px;
    position: relative;
    z-index: 2; 
    opacity: 0; 
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.section-win .content { animation-delay: 0.1s; }
.section-mac .content { animation-delay: 0.2s; }
.section-lin .content { animation-delay: 0.3s; }

.text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text-content h2 {
    font-size: 2.6rem;
    font-weight: 800; 
    letter-spacing: -1px;
    margin-bottom: 12px;
}

.text-content p {
    font-size: 1.05rem;
    opacity: 0.9;
    line-height: 1.6;
}

.feature-list {
    list-style: none;
    margin: 15px 0;
    padding: 0;
}

.feature-list li {
    margin-bottom: 12px;
    font-size: 1.02rem;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.4;
    transition: transform 0.2s ease;
}

.feature-list li:hover { transform: translateX(5px); }

.section-win .feature-list strong, .section-lin .feature-list strong { color: #0b4f4f; }
.section-mac .feature-list strong { color: #a0e8e8; }

code {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}
.section-win code, .section-lin code { background-color: rgba(21, 121, 121, 0.1); }

/* Image Boxes */
.box {
    border-radius: 12px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    background-color: rgba(0, 0, 0, 0.08); 
    width: 100%;
    max-width: 450px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.box:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

.mac-box { max-width: 550px; }

.box img {
    width: 100%;
    height: auto; 
    display: block;
    border-radius: 12px;
    position: relative;
    z-index: 2; 
    border: 1px solid rgba(0,0,0,0.05);
}

.section-win .loader, .section-lin .loader {
    border-color: rgba(21, 121, 121, 0.15);
    border-top-color: var(--bg-color);
}

/* --- Button Templates --- */
.btn-group {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
    padding-bottom: 10px; 
    justify-content: center; 
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1rem;
    border: none;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, background-color 0.2s;
    cursor: pointer;
}

.btn img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin-right: 12px;
    display: block;
}

.btn-teal {
    background-color: #1a9696; 
    color: var(--text-color);
    box-shadow: 0 6px 0 #0f5c5c, 0 15px 20px rgba(0,0,0,0.2);
}

.btn-teal:hover {
    background-color: #1c9e9e;
    transform: translateY(2px);
    box-shadow: 0 4px 0 #0f5c5c, 0 10px 15px rgba(0,0,0,0.2);
}

.btn-teal:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #0f5c5c, 0 5px 10px rgba(0,0,0,0.2);
}

.btn-teal img {
    filter: drop-shadow(0.5px 0.5px 0 rgba(255, 255, 255, 0.4)) 
            drop-shadow(-0.5px -0.5px 0 rgba(255, 255, 255, 0.4)) 
            drop-shadow(0.5px -0.5px 0 rgba(255, 255, 255, 0.4)) 
            drop-shadow(-0.5px 0.5px 0 rgba(255, 255, 255, 0.4));
}

.btn-white {
    background-color: var(--text-color);
    color: #0f5c5c; 
    box-shadow: 0 6px 0 #d1d1d1, 0 15px 20px rgba(0,0,0,0.15);
}

.btn-white:hover {
    background-color: #f8f8f8;
    transform: translateY(2px);
    box-shadow: 0 4px 0 #d1d1d1, 0 10px 15px rgba(0,0,0,0.15);
}

.btn-white:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #d1d1d1, 0 5px 10px rgba(0,0,0,0.15);
}

/* --- USER GUIDE SECTION --- */
.guide-section {
    max-width: 1200px;
    margin: 60px auto 0;
    padding: 0 40px;
    position: relative;
    z-index: 5;
}

.guide-header {
    text-align: center;
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;
}

.guide-header h2 {
    font-size: 2.5rem;
    font-weight: 800; 
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.guide-card {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    height: 480px; 
    overflow-y: auto; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    border: 1px solid rgba(255,255,255,0.05); 
    
    scrollbar-width: thin;
    scrollbar-color: var(--bg-color) rgba(0, 0, 0, 0.1);
}

.guide-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.guide-card:nth-child(1) { animation-delay: 0.3s; }
.guide-card:nth-child(2) { animation-delay: 0.4s; }
.guide-card:nth-child(3) { animation-delay: 0.5s; }
.guide-card:nth-child(4) { animation-delay: 0.6s; }
.guide-card:nth-child(5) { animation-delay: 0.7s; }
.guide-card:nth-child(6) { animation-delay: 0.8s; }
.guide-card:nth-child(7) { animation-delay: 0.9s; }
.guide-card:nth-child(8) { animation-delay: 1.0s; }

.guide-card::-webkit-scrollbar { width: 8px; }
.guide-card::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}
.guide-card::-webkit-scrollbar-thumb {
    background: var(--bg-color);
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.15);
}
.guide-card::-webkit-scrollbar-thumb:hover { background: #116262; }

.guide-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
}

.guide-card img {
    width: 100%;
    max-height: 150px; 
    object-fit: cover; 
    object-position: top; 
    border-radius: 6px;
    margin-bottom: 15px;
    background: rgba(255,255,255,0.9); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.05); 
}

.guide-card p {
    font-size: 0.95rem;
    margin-bottom: 12px;
    line-height: 1.5;
}

.guide-card ul {
    margin-left: 20px;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.guide-card li { margin-bottom: 6px; }

.guide-card blockquote {
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 15px;
    border-left: 4px solid var(--text-color);
    border-radius: 0 4px 4px 0;
    font-style: italic;
    font-size: 0.9rem;
}

.ribbon-ref h4 {
    color: #88dada;
    margin: 15px 0 5px;
    font-size: 1.05rem;
}

.shortcut-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 10px;
}
.shortcut-table th, .shortcut-table td {
    padding: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-align: left;
}
.shortcut-table th { font-weight: 600; color: #88dada; }
.shortcut-table kbd {
    background: rgba(255,255,255,0.2);
    padding: 3px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: bold;
}

/* --- Responsive Design --- */
@media (max-width: 900px) {
    .content {
        flex-direction: column;
        gap: 30px;
    }
    .section-mac .content {
        flex-direction: column-reverse; 
    }
    .text-content, .section-win .text-content, .section-mac .text-content, .section-lin .text-content {
        text-align: center !important;
    }
    .btn-group {
        justify-content: center;
    }
    .box, .mac-box {
        max-width: 100%;
    }
    .guide-section { padding: 0 20px; }
}