/* Externalized stylesheet for Sachiro Technologies site */
:root {
    --primary-gradient: linear-gradient(135deg, #38bdf8 0%, #06b6d4 50%, #f59e0b 100%);
    --secondary-gradient: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    --card-bg: linear-gradient(145deg, #1a1f3a 0%, #0f172a 100%);
    --glass-bg: rgba(26, 31, 58, 0.6);
    --shadow-primary: 0 25px 50px -12px rgba(56, 189, 248, 0.25);
    --shadow-glow: 0 0 30px rgba(56, 189, 248, 0.4);
}

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

/* TOC Sidebar */
.toc-sidebar { position:fixed; left:-250px; top:0; width:250px; height:100vh; background: rgba(20,25,40,0.98); border-right:1px solid rgba(56,189,248,0.2); overflow-y:auto; z-index:1000; transition:left 0.3s ease; backdrop-filter: blur(10px); }
.toc-sidebar.open { left:0; }
.toc-toggle { position:fixed; left:10px; top:60px; background: #38bdf8; color:#020617; border:none; padding:10px 15px; border-radius:8px; cursor:pointer; z-index:999; font-weight:600; font-size:1.2rem; }
.toc-close { position:absolute; top:10px; right:10px; background:transparent; color:#38bdf8; border:none; font-size:1.5rem; cursor:pointer; }
.toc-title { color:#38bdf8; padding:20px; font-weight:700; font-size:1.1rem; }
.toc-list { list-style:none; }
.toc-list li { border-bottom:1px solid rgba(56,189,248,0.1); }
.toc-list a { display:block; color:rgba(241,245,249,0.8); text-decoration:none; padding:12px 20px; transition:all 0.2s; }
.toc-list a:hover { background: rgba(56,189,248,0.1); color:#38bdf8; padding-left:30px; }

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #020617 0%, #0a0e27 50%, #020617 100%);
    color: #f1f5f9;
    overflow-x: hidden;
    line-height: 1.6;
}

.presentation-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.site-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.site-header .logo {
    width: 140px;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-glow);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    padding: 6px;
    object-fit: contain;
    display: block;
    background-color: rgba(0,0,0,0.25);
}

.site-header .site-title { display:flex; flex-direction:column; justify-content:center; }
.site-header .site-title .brand { font-family: 'Poppins', sans-serif; font-weight:700; font-size:1.25rem; color:#e6f6ff; letter-spacing:-0.01em; }
.site-header .site-title .tagline { font-size:0.9rem; color: rgba(241,245,249,0.7); margin-top:2px; }

.main-nav { margin-left: auto; display:flex; gap:1rem; align-items:center; }
.main-nav a { color: rgba(241,245,249,0.8); text-decoration:none; padding:6px 10px; border-radius:8px; }
.main-nav a:hover { background: rgba(56,189,248,0.07); color:#fff; }

.slide {
    background: var(--card-bg);
    border-radius: 24px;
    padding: 4rem;
    margin-bottom: 3rem;
    box-shadow: var(--shadow-primary);
    border: 1px solid rgba(56, 189, 248, 0.1);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.slide::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--primary-gradient); }
.slide:hover { transform: translateY(-8px); box-shadow: 0 35px 80px -12px rgba(56, 189, 248, 0.35); }

h1, h2, h3, h4 { background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-family: 'Poppins', sans-serif; font-weight:700; letter-spacing:-0.02em; }
h1 { font-size:3.5rem; margin-bottom:1.5rem; }
h2 { font-size:2.5rem; margin-bottom:2rem; }
h3 { font-size:1.75rem; color:#38bdf8; margin-bottom:1.5rem; }

.services-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:2rem; margin-top:2rem; }
.service-card { background: rgba(26,31,58,0.5); padding:2rem; border-radius:16px; border:1px solid rgba(56,189,248,0.2); backdrop-filter:blur(10px); transition:all 0.4s ease; }
.service-card:hover { background: rgba(56,189,248,0.1); border-color:#38bdf8; box-shadow:var(--shadow-glow); }

ul { list-style:none; padding-left:0; }
li { padding:0.75rem 0; font-size:1.1rem; position:relative; padding-left:2rem; }
li::before { content: '▸'; position:absolute; left:0; color:#38bdf8; font-weight:700; font-size:1.2rem; }

.highlight-box { background: rgba(56,189,248,0.15); border-left:4px solid #38bdf8; padding:1.5rem; margin:2rem 0; border-radius:8px; }
.contact-section { text-align:center; background: var(--glass-bg); padding:3rem; border-radius:20px; }

.model-table { width:100%; border-collapse:collapse; margin-top:2rem; background: rgba(26,31,58,0.5); border-radius:12px; overflow:hidden; }
.model-table th, .model-table td { padding:1.25rem; text-align:left; border-bottom:1px solid rgba(56,189,248,0.1); }
.model-table th { background: rgba(56,189,248,0.2); font-weight:600; }

@media (max-width:768px) {
    .slide { padding:2rem 1.5rem; margin-bottom:2rem; }
    h1 { font-size:2.5rem; }
    h2 { font-size:2rem; }
    .site-header { gap:0.75rem; }
    .site-header .logo { width:110px; }
    .main-nav { display:none; }
}

/* Footer */
.site-footer { text-align:center; color: rgba(241,245,249,0.7); padding:2rem 0; margin-top:2rem; border-top:1px solid rgba(56,189,248,0.1); }
.site-footer #pageNumber { color:#38bdf8; font-weight:600; }

/* Small utility */
.container-narrow { max-width:900px; margin:0 auto; }

/* Navigation buttons */
.page-nav { display:flex; justify-content:center; gap:1rem; margin-top:3rem; flex-wrap:wrap; }
.nav-btn { background:#38bdf8; color:#020617; padding:10px 20px; border:none; border-radius:8px; cursor:pointer; font-weight:600; transition:all 0.3s ease; font-family:'Poppins',sans-serif; }
.nav-btn:hover { background:#06b6d4; transform:translateY(-2px); box-shadow: 0 10px 25px rgba(56,189,248,0.3); }
.scroll-top-btn { background: rgba(56,189,248,0.2); color:#38bdf8; padding:10px 20px; border:2px solid #38bdf8; border-radius:8px; cursor:pointer; font-weight:600; transition:all 0.3s ease; font-family:'Poppins',sans-serif; }
.scroll-top-btn:hover { background: rgba(56,189,248,0.3); transform:translateY(-2px); }