/* ── Tokens ── */
:root {
    --bg:           #d8d8d8;
    --panel:        rgba(255,255,255,0.88);
    --panel-hover:  rgba(255,255,255,0.97);
    --text:         #111111;
    --muted:        #575757;
    --accent:       #111111;
    --border:       rgba(17,17,17,0.08);
    --corner:       rgba(17,17,17,0.3);
    --shine:        rgba(255,255,255,0.45);
    --glow:         rgba(17,17,17,0.06);
    --shadow:       rgba(17,17,17,0.08);
}

html[data-theme="dark"] {
    --bg:           #141414;
    --panel:        rgba(255,255,255,0.07);
    --panel-hover:  rgba(255,255,255,0.12);
    --text:         #e8e8e8;
    --muted:        #888888;
    --accent:       #e8e8e8;
    --border:       rgba(255,255,255,0.10);
    --corner:       rgba(255,255,255,0.25);
    --shine:        rgba(255,255,255,0.06);
    --glow:         rgba(255,255,255,0.04);
    --shadow:       rgba(0,0,0,0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0; min-height: 100vh;
    background-color: var(--bg); color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    display: flex; justify-content: center; align-items: center; overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* ── Corner brackets ── */
body::before, body::after {
    content: ""; position: fixed; width: 120px; height: 120px;
    border: 2px solid var(--corner); pointer-events: none; z-index: 0;
    transition: border-color 0.4s ease; animation: cornerPulse 4s ease-in-out infinite;
}
body::before { top: 20px; left: 20px; border-right: none; border-bottom: none; }
body::after  { bottom: 20px; right: 20px; border-left: none; border-top: none; animation-delay: 2s; }
@keyframes cornerPulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ── Blobs ── */
.bg-blob { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(60px); opacity: 0.15; }
.bg-blob-1 { width:400px;height:400px;background:radial-gradient(circle,var(--text),transparent 70%);top:-100px;right:-100px;animation:blobDrift 12s ease-in-out infinite; }
.bg-blob-2 { width:300px;height:300px;background:radial-gradient(circle,var(--text),transparent 70%);bottom:-80px;left:-80px;animation:blobDrift 16s ease-in-out infinite reverse; }
@keyframes blobDrift { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(20px,-30px) scale(1.05)} 66%{transform:translate(-15px,20px) scale(0.97)} }

/* ── Page wrapper ── */
.page-wrapper {
    width: min(1180px, calc(100% - 40px)); padding: 32px 24px;
    position: relative; z-index: 1;
    animation: pageEnter 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes pageEnter { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ── Header ── */
header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 24px 0;
    animation: fadeDown 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
@keyframes fadeDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }

.company-name {
    font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--accent); transition: opacity 0.2s, color 0.4s ease;
}
.home .company-name { visibility: hidden; }

nav { display: flex; justify-content: center; }
nav ul { display:flex; gap:28px; list-style:none; margin:0; padding:0; }
nav a {
    color: var(--text); text-decoration: none;
    font-size: 0.95rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    opacity: 0.7; position: relative;
    transition: opacity 0.2s, color 0.4s ease, letter-spacing 0.3s ease;
}
nav a::after {
    content: ""; position: absolute; bottom: -3px; left: 0;
    width: 0; height: 2px; background: var(--accent); border-radius: 999px;
    transition: width 0.3s cubic-bezier(0.22,1,0.36,1), background-color 0.4s ease;
}
nav a:hover, nav a.active { color: var(--accent); opacity: 1; letter-spacing: 0.14em; }
nav a:hover::after, nav a.active::after { width: 100%; }

.header-controls {
    display: flex; align-items: center; gap: 8px; justify-content: flex-end;
}

/* ── Theme toggle ── */
.theme-toggle {
    background: none; border: 1px solid var(--border); border-radius: 999px;
    padding: 6px 12px; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    font-family: inherit; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
    transition: color 0.2s, border-color 0.4s ease, transform 0.2s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle .toggle-icon { width:14px;height:14px;display:flex;align-items:center;justify-content:center;transition:transform 0.4s ease; }
.theme-toggle:hover .toggle-icon { transform: rotate(20deg); }

/* ── Lang switcher ── */
.lang-switcher { display:flex; gap:2px; }
.lang-btn {
    background: none; border: 1px solid transparent; border-radius: 7px;
    padding: 5px 8px; cursor: pointer;
    font-family: inherit; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.06em; color: var(--muted);
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.lang-btn:hover { color: var(--text); border-color: var(--border); transform: translateY(-1px); }
.lang-btn.active { color: var(--accent); border-color: var(--accent); background: var(--panel); }

/* ── Hero ── */
main.hero { padding: 90px 0 56px; text-align: center; }
.hero-content { max-width: 760px; margin: 0 auto; }

.hero h1 {
    margin: 0; font-size: clamp(4rem, 8vw, 6rem); line-height: 0.95;
    letter-spacing: -0.05em; color: var(--text); transition: color 0.4s ease;
    animation: heroTitle 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}
@keyframes heroTitle { from{opacity:0;transform:translateY(24px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }

.hero-subtitle {
    margin: 22px auto 0; max-width: 520px; font-size: 1.04rem; color: var(--muted);
    transition: color 0.4s ease; animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.35s both;
}

/* ── Single hero line — no ::after ── */
.hero-line {
    width: 14rem; height: 3px; background: var(--accent); border-radius: 999px;
    margin: 34px auto; position: relative;
    transition: background-color 0.4s ease;
    animation: lineExpand 0.8s cubic-bezier(0.22,1,0.36,1) 0.5s both;
    transform-origin: center;
}
.hero-line::after { display: none; }
@keyframes lineExpand { from{transform:scaleX(0);opacity:0} to{transform:scaleX(1);opacity:1} }

.hero-copy {
    margin: 0 auto; max-width: 680px; color: var(--muted); font-size: 1rem;
    line-height: 1.9; transition: color 0.4s ease;
    animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.55s both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* ── Sections ── */
.section { margin-top: 72px; }
.section h2 {
    margin: 0 auto 24px; max-width: 760px; text-align: center;
    font-size: 1.3rem; color: var(--accent); letter-spacing: 0.02em; transition: color 0.4s ease;
}

/* ── Reveal ── */
.reveal { opacity:0; transform:translateY(28px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── Home service list ── */
.service-list {
    list-style: none; padding: 0; margin: 0 auto;
    display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.service-list li {
    background: var(--panel); border: 1px solid var(--border); border-radius: 24px;
    padding: 28px; box-shadow: 0 24px 50px var(--shadow); position: relative; overflow: hidden;
    color: var(--accent); font-weight: 700; font-size: 0.98rem;
    display: flex; align-items: center; gap: 10px;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.service-list li .dot {
    width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.35;flex-shrink:0;
    transition: opacity 0.3s, transform 0.3s, background-color 0.4s ease;
}
.service-list li:hover { transform:translateY(-4px) scale(1.01); box-shadow:0 32px 60px var(--shadow); background:var(--panel-hover); }
.service-list li:hover .dot { opacity:1; transform:scale(1.5); }

/* Shine on all cards */
.service-list li::after, .service-card::after, .contact-card::after {
    content:""; position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(105deg, transparent 40%, var(--shine) 50%, transparent 60%);
    transition:left 0.55s ease; pointer-events:none;
}
.service-list li:hover::after, .service-card:hover::after, .contact-card:hover::after { left:140%; }

/* ── Detailed service cards ── */
.service-cards {
    list-style: none; padding: 0; margin: 0 auto;
    display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.service-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: 24px;
    padding: 32px; box-shadow: 0 24px 50px var(--shadow); position: relative; overflow: hidden;
    text-align: left; cursor: default;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, background 0.4s ease, border-color 0.4s ease;
}
.service-card:hover { transform:translateY(-4px) scale(1.01); box-shadow:0 32px 60px var(--shadow); background:var(--panel-hover); }
.service-card-icon { font-size:1.8rem; margin-bottom:18px; display:block; transition:transform 0.3s ease; }
.service-card:hover .service-card-icon { transform:scale(1.15); }
.service-card-title { font-size:1.05rem; font-weight:700; color:var(--accent); margin:0 0 10px; transition:color 0.4s ease; }
.service-card-desc { font-size:0.9rem; color:var(--muted); line-height:1.8; margin:0; transition:color 0.4s ease; }

/* ── Contact grid ── */
.contact-grid {
    list-style: none; padding: 0; margin: 0 auto;
    display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-width: 480px;
}
.contact-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: 24px;
    padding: 28px; box-shadow: 0 24px 50px var(--shadow); position: relative; overflow: hidden;
    text-align: left;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, background 0.4s ease, border-color 0.4s ease;
}
.contact-card:hover { transform:translateY(-4px); box-shadow:0 32px 60px var(--shadow); background:var(--panel-hover); }
.contact-card strong { display:block; margin-bottom:12px; color:var(--accent); font-size:1rem; transition:color 0.4s ease; }
.contact-card a, .contact-card p { margin:0; color:var(--muted); text-decoration:none; line-height:1.8; transition:color 0.2s; }
.contact-card a:hover { color:var(--accent); }

/* ── Footer ── */
footer {
    padding: 24px 0 12px; text-align: center; color: var(--muted); font-size: 0.95rem;
    transition: color 0.4s ease; opacity: 0; animation: fadeUp 0.6s ease 0.9s forwards;
}
footer a { color:inherit; text-decoration:none; border-bottom:1px dotted var(--border); transition:color 0.2s,border-color 0.2s; }
footer a:hover { color:var(--text); border-color:var(--accent); }

/* ── Scroll progress ── */
#scroll-progress { position:fixed;top:0;left:0;height:2px;width:0%;background:var(--accent);z-index:9999;transition:width 0.1s linear,background-color 0.4s ease;opacity:.6; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important; } }

/* ── Mobile ── */
@media (max-width: 760px) {
    .page-wrapper { padding: 24px 18px; }
    header { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 12px; }
    nav { grid-column: 1 / -1; justify-content: center; }
    nav ul { justify-content: center; flex-wrap: wrap; gap: 18px; }
    .hero h1 { font-size: clamp(3.5rem, 14vw, 4.8rem); }
    .hero-line { width: 11rem; }
}