:root {
  --bg: #f7f7fb;
  --surface: #ffffff;
  --text: #111218;
  --muted: #5f6572;
  --line: #e7e7ef;
  --orange: #f97316;
  --orange-deep: #ea580c;
  --purple: #7c3aed;
  --purple-soft: #ede9fe;
  --dark: #0f1118;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Sora", "Segoe UI", sans-serif; color: var(--text); background: linear-gradient(160deg, #fafafe, #f4f5fb); }
a { color: inherit; text-decoration: none; }
.container { width: min(1140px, 92vw); margin: 0 auto; }
.topbar { position: sticky; top: 0; z-index: 50; background: var(--dark); color: #fff; font-size: .82rem; padding: 9px 0; }
.topbar .ticker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header { position: sticky; top: 34px; z-index: 40; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { font-weight: 900; letter-spacing: .08em; }
.logo span { color: var(--orange); }
.nav-links { display: flex; gap: 20px; font-size: .92rem; font-weight: 600; }
.nav-right { display: flex; gap: 10px; align-items: center; }
.lang-switch { border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px; font-weight: 700; }
.btn { border: 0; border-radius: 999px; padding: 11px 16px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary { color: #fff; background: linear-gradient(90deg, var(--orange), var(--orange-deep)); box-shadow: 0 10px 24px rgba(249,115,22,.32); }
.btn-ghost { border: 1px solid var(--line); background: #fff; }
.menu-btn,.icon-btn { display:none; border:1px solid var(--line); width:40px; height:40px; border-radius:10px; background:#fff; }
main { padding: 0 0 64px; }
.hero { padding: 64px 0 50px; }
.hero-wrap { display: grid; grid-template-columns: 1.06fr .94fr; gap: 32px; align-items: center; }
.eyebrow { display:inline-flex; padding:7px 12px; border-radius:999px; font-size:.73rem; letter-spacing:.06em; text-transform:uppercase; background:var(--purple-soft); color:#5b21b6; border:1px solid #ddd6fe; }
.hero-ticker { display:inline-flex; margin-top:12px; background:#111827; color:#fff; border:1px solid #2c3142; border-radius:999px; padding:8px 11px; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
h1 { margin: 14px 0 12px; font-size: clamp(2rem, 3.7vw, 3.2rem); line-height: 1.1; }
.subtitle { color: var(--muted); line-height: 1.7; max-width: 60ch; margin: 0; }
.hero-cta { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-image { border-radius: 22px; min-height: 360px; background: linear-gradient(145deg, rgba(15,17,24,.9), rgba(28,32,46,.72)), radial-gradient(circle at 80% 22%, rgba(124,58,237,.55), transparent 43%), linear-gradient(165deg, transparent 0 44%, rgba(255,255,255,.08) 44% 46%, transparent 46% 100%); border:1px solid #dde1ef; position:relative; overflow:hidden; }
.hero-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; opacity:.55; }
.hero-image span { position:absolute; bottom:15px; left:15px; color:#fff; font-size:.82rem; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:6px 10px; }
.section { margin-top: 36px; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:12px; margin-bottom:16px; }
h2 { margin:0; font-size: clamp(1.3rem, 2.2vw, 2rem); }
.section-note { color:#6b7280; margin:0; }
.grid { display:grid; gap:16px; }
.services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; transition:.22s ease; }
.card:hover { transform:translateY(-4px); border-color:#c4b5fd; box-shadow:0 14px 28px rgba(15,17,24,.1); }
.card-label { display:inline-flex; margin-bottom:9px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:#7c2d12; background:#ffedd5; border:1px solid #fdba74; border-radius:999px; padding:5px 9px; }
.card h3 { margin:0 0 8px; }
.card p { margin:0; color:var(--muted); line-height:1.6; }
.card-link { margin-top:10px; display:inline-flex; color:var(--purple); font-weight:700; font-size:.88rem; }
.thumb { display:block; position:relative; border-radius:14px; min-height:220px; overflow:hidden; border:1px solid #d9deed; background:linear-gradient(155deg, rgba(15,17,24,.82), rgba(28,32,46,.62)); transition:.22s ease; }
.thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; }
.thumb:hover { transform:translateY(-4px); box-shadow:0 16px 28px rgba(15,17,24,.18); }
.badge { position:absolute; top:12px; left:12px; color:#fff; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(15,17,24,.6); padding:6px 9px; }
.thumb small { position:absolute; left:12px; bottom:32px; color:#e5e7eb; }
.thumb span { position:absolute; left:12px; bottom:12px; color:#fff; }
.step { background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px; }
.num { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.86rem; font-weight:800; background:var(--purple-soft); color:#5b21b6; }
.cta-band { margin-top:30px; border-radius:22px; padding:24px; color:#f8fafc; background:linear-gradient(120deg, #121627, #1f273a); display:flex; justify-content:space-between; align-items:center; gap:14px; }
.cta-band p { color:#d5d7de; margin:0; }
.panel { position:fixed; left:0; right:0; top:110px; z-index:35; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 14px 30px rgba(15,17,24,.1); padding:12px 0; display:none; }
.panel.open { display:block; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1px solid var(--line); border-radius:999px; background:#fff; padding:8px 12px; font-weight:700; font-size:.82rem; }
.chip.active { border-color:#a78bfa; background:var(--purple-soft); color:#5b21b6; }
.backdrop { position:fixed; inset:0; display:none; z-index:60; background:rgba(9,11,19,.46); }
.backdrop.open { display:block; }
.drawer,.mobile-drawer { position:fixed; top:0; z-index:70; height:100vh; background:#fff; transition:transform .26s ease; }
.drawer { right:0; width:min(420px,94vw); transform:translateX(100%); box-shadow:-20px 0 45px rgba(15,17,24,.18); padding:20px; }
.drawer.open { transform:translateX(0); }
.mobile-drawer { left:0; width:min(340px,88vw); transform:translateX(-100%); padding:20px; }
.mobile-drawer.open { transform:translateX(0); }
.drawer-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.drawer-close { width:34px; height:34px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.contact-list { list-style:none; padding:0; margin:14px 0; }
.contact-list li { padding:10px 0; border-bottom:1px dashed #e5e7eb; color:#374151; }
.mobile-links { display:grid; gap:8px; margin:14px 0; }
.mobile-links a { border:1px solid var(--line); border-radius:10px; padding:12px; font-weight:700; }
footer { margin-top:42px; padding:18px 0 24px; border-top:1px solid var(--line); color:#6b7280; font-size:.9rem; }

@media (max-width: 990px) {
  .hero-wrap,.services,.gallery { grid-template-columns:1fr 1fr; }
  .why,.process { grid-template-columns:1fr 1fr; }
  .nav-links,.lang-switch { display:none; }
  .menu-btn,.icon-btn { display:inline-flex; align-items:center; justify-content:center; }
}
@media (max-width: 680px) {
  header { top:33px; }
  .panel { top:99px; }
  .hero { padding-top:44px; }
  .hero-wrap,.services,.gallery,.why,.process { grid-template-columns:1fr; }
  .cta-band { flex-direction:column; align-items:flex-start; }
  .btn { width:100%; }
  .nav-right .btn,.nav-right .icon-btn { width:auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}