
:root{
  --bg:#f6f8fc;--surface:#ffffff;--surface-2:#eef3fb;--ink:#0f172a;--muted:#64748b;--line:#dbe5f1;
  --brand:#2563eb;--brand-2:#7c3aed;--brand-3:#14b8a6;--soft:#eff6ff;
  --shadow:0 28px 80px rgba(15,23,42,.12);--radius:28px;--radius-lg:36px;
}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}a{text-decoration:none;color:inherit}img,svg{display:block;max-width:100%}ul{list-style:none}
.wrap{width:min(1200px,100%);margin-inline:auto;padding-inline:24px}
.preview-ribbon{background:#020817;color:#dbeafe;padding:10px 14px;text-align:center;font-size:.9rem}.preview-ribbon a{color:#93c5fd;font-weight:800}
.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(219,229,241,.8)}
.nav{height:76px;display:flex;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.04em;font-size:1.06rem}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;color:#fff;box-shadow:0 16px 36px color-mix(in srgb,var(--brand) 30%,transparent)}.navlinks{margin-left:auto;display:flex;gap:20px;color:var(--muted);font-size:.92rem}.navlinks a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:800;letter-spacing:-.02em;border:1px solid transparent;transition:.2s ease}.btn:hover{transform:translateY(-2px)}.btn.brand{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 18px 40px color-mix(in srgb,var(--brand) 28%,transparent)}.btn.dark{background:#0f172a;color:#fff}.btn.soft{background:var(--surface);border-color:var(--line);color:var(--ink)}.btn.ghost{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.4);backdrop-filter:blur(14px)}
.hero-section{padding:84px 0 72px;position:relative;overflow:hidden}.hero-section::before{content:'';position:absolute;inset:auto auto -120px -90px;width:360px;height:360px;border-radius:999px;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 16%,transparent),transparent 68%);pointer-events:none}
.eyebrow{display:inline-flex;gap:9px;align-items:center;background:var(--soft);color:var(--brand);padding:8px 12px;border-radius:999px;font-size:.77rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}.eyebrow .dot{width:7px;height:7px;border-radius:999px;background:var(--brand);box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 15%,transparent)}
h1{font-size:clamp(2.7rem,6vw,5.6rem);line-height:.94;letter-spacing:-.075em;margin-bottom:18px}h2{font-size:clamp(1.9rem,4vw,3.4rem);line-height:1.03;letter-spacing:-.05em;margin-bottom:12px}h3{font-size:1.25rem;letter-spacing:-.03em}.lead{font-size:1.08rem;color:var(--muted);max-width:62ch}.section{padding:78px 0}.section.alt{background:rgba(255,255,255,.62);border-top:1px solid rgba(219,229,241,.7);border-bottom:1px solid rgba(219,229,241,.7)}.section-head{max-width:780px;margin-bottom:34px}.muted{color:var(--muted)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.split{display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 14px 36px rgba(15,23,42,.05)}.card p{color:var(--muted)}.badge{display:inline-flex;padding:7px 12px;border-radius:999px;background:var(--soft);color:var(--brand);font-size:.76rem;font-weight:900;letter-spacing:.06em}.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.kpis .item{background:rgba(255,255,255,.76);border:1px solid var(--line);border-radius:18px;padding:16px 18px}.kpis strong{display:block;font-size:1.4rem;letter-spacing:-.04em}.kpis span{font-size:.88rem;color:var(--muted)}
.mini-list{display:grid;gap:14px;margin-top:16px}.mini-list li{display:flex;gap:10px;color:var(--muted)}.mini-list li::before{content:'✓';font-weight:900;color:var(--brand)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ribbon-note{margin-top:14px;font-size:.92rem;color:var(--muted)}
.footer{padding:34px 0;background:#020817;color:#9db0c8}.footer .wrap{display:flex;justify-content:space-between;gap:24px;align-items:center}.footer strong{color:#fff}

/* Category pages */
.catalog-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}.catalog-panel{min-height:360px;border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:var(--shadow);padding:26px;position:relative;overflow:hidden}.catalog-panel::after{content:'';position:absolute;right:-42px;bottom:-48px;width:220px;height:220px;border-radius:42px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 38%,#fff),color-mix(in srgb,var(--brand-2) 34%,#fff));transform:rotate(24deg);opacity:.95}.catalog-browser{display:flex;gap:8px;margin-bottom:22px}.catalog-browser span{width:10px;height:10px;border-radius:999px;background:#cbd5e1}.catalog-panel h3{font-size:2rem;max-width:12ch;margin-bottom:10px}.catalog-panel p{max-width:32ch;color:var(--muted)}.catalog-shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:absolute;left:26px;right:26px;bottom:22px;z-index:1}.catalog-shot-grid i{height:62px;border-radius:18px;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.8)}
.catalog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.catalog-card{background:var(--surface);border:1px solid var(--line);border-radius:32px;overflow:hidden;box-shadow:var(--shadow)}.catalog-card .shot{min-height:260px;padding:22px;position:relative;overflow:hidden}.catalog-card .body{padding:24px}.catalog-card h3{font-size:1.55rem;margin-bottom:8px}.catalog-card p{color:var(--muted);margin-bottom:18px}.meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.meta span{padding:7px 12px;border-radius:999px;background:var(--soft);color:var(--brand);font-size:.78rem;font-weight:800}.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.shot.creative{background:linear-gradient(135deg,#140a23,#0b1020)}.shot.creative::before{content:'';position:absolute;inset:26px auto auto 26px;width:170px;height:200px;border-radius:34px;background:linear-gradient(135deg,#7c3aed,#ec4899)}.shot.creative::after{content:'';position:absolute;right:24px;bottom:20px;width:220px;height:140px;border-radius:26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 34px rgba(0,0,0,.24)}
.shot.consultant{background:linear-gradient(135deg,#eef2ff,#ecfeff)}.shot.consultant::before{content:'';position:absolute;left:24px;top:28px;width:240px;height:120px;border-radius:24px;background:#fff;border:1px solid #dbe5f1}.shot.consultant::after{content:'';position:absolute;right:26px;bottom:28px;width:130px;height:130px;border-radius:26px;background:linear-gradient(135deg,#4f46e5,#22d3ee)}
.shot.bistro{background:linear-gradient(135deg,#431407,#9a3412)}.shot.bistro::before{content:'';position:absolute;inset:28px 28px auto;height:110px;border-radius:28px;background:rgba(255,255,255,.15)}.shot.bistro::after{content:'';position:absolute;left:28px;right:28px;bottom:28px;height:90px;border-radius:24px;background:#fff1;border:1px solid rgba(255,255,255,.18)}
.shot.menu{background:linear-gradient(135deg,#120901,#362110)}.shot.menu::before{content:'';position:absolute;left:28px;top:26px;width:180px;height:200px;border-radius:24px;background:#fff3;border:1px solid rgba(255,255,255,.18)}.shot.menu::after{content:'';position:absolute;right:28px;top:48px;width:140px;height:140px;border-radius:50%;border:1px dashed rgba(255,255,255,.22)}
.shot.health{background:linear-gradient(135deg,#ecfeff,#dbeafe)}.shot.health::before{content:'';position:absolute;inset:28px auto auto 28px;width:210px;height:120px;border-radius:28px;background:#fff;border:1px solid #dbeafe}.shot.health::after{content:'+';position:absolute;right:28px;bottom:28px;width:92px;height:92px;border-radius:24px;background:#14b8a6;color:#fff;display:grid;place-items:center;font-size:3rem;font-weight:800}
.shot.dental{background:linear-gradient(135deg,#eff6ff,#ecfdf5)}.shot.dental::before{content:'';position:absolute;left:30px;top:28px;width:180px;height:180px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#22c55e)}.shot.dental::after{content:'';position:absolute;right:28px;bottom:30px;width:180px;height:86px;border-radius:24px;background:#fff;border:1px solid #dbe5f1}
.shot.agency{background:linear-gradient(135deg,#0f172a,#1d4ed8)}.shot.agency::before{content:'';position:absolute;left:28px;top:28px;right:28px;height:120px;border-radius:28px;background:rgba(255,255,255,.08)}.shot.agency::after{content:'';position:absolute;left:28px;bottom:28px;width:150px;height:150px;border-radius:30px;background:rgba(255,255,255,.08)}
.shot.industrial{background:linear-gradient(135deg,#111827,#f97316)}.shot.industrial::before{content:'';position:absolute;inset:26px 26px auto;height:96px;border-radius:24px;background:rgba(255,255,255,.12)}.shot.industrial::after{content:'';position:absolute;right:28px;bottom:28px;width:160px;height:160px;border-radius:28px;border:1px solid rgba(255,255,255,.24)}

/* Demo page variants */
.hero-shell{border-radius:40px;border:1px solid var(--line);background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:var(--shadow);padding:38px}
.editorial-grid{display:grid;grid-template-columns:1fr .92fr;gap:32px;align-items:center}.visual{position:relative;min-height:430px;border-radius:36px;overflow:hidden}.visual-card{position:absolute;border-radius:26px;background:rgba(255,255,255,.84);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.65);padding:18px;box-shadow:0 14px 34px rgba(15,23,42,.08)}
.personal-creative{--bg:#09090f;--surface:#11131d;--surface-2:#181b2a;--ink:#f8fafc;--muted:#a1a1aa;--line:rgba(255,255,255,.08);--brand:#a855f7;--brand-2:#ec4899;--soft:rgba(168,85,247,.12)}
.personal-creative .topbar,.personal-creative .section.alt,.cafe-menu .topbar,.cafe-menu .section.alt,.corporate-agency .topbar,.corporate-agency .section.alt,.corporate-industrial .topbar,.corporate-industrial .section.alt{background:rgba(9,11,18,.82);border-color:var(--line)}
.personal-creative .hero-shell,.personal-creative .card,.personal-creative .contact-banner,.cafe-menu .hero-shell,.cafe-menu .card,.cafe-menu .contact-banner,.corporate-agency .hero-shell,.corporate-agency .card,.corporate-agency .contact-banner,.corporate-industrial .hero-shell,.corporate-industrial .card,.corporate-industrial .contact-banner{background:linear-gradient(145deg,var(--surface),var(--surface-2));border-color:var(--line)}
.personal-creative .btn.soft,.cafe-menu .btn.soft,.corporate-agency .btn.soft,.corporate-industrial .btn.soft{background:rgba(255,255,255,.07);border-color:var(--line);color:var(--ink)}
.personal-creative .visual{background:radial-gradient(circle at 35% 25%, rgba(168,85,247,.25), transparent 30%),linear-gradient(145deg,#141626,#09090f)}
.pc-photo{position:absolute;right:30px;top:30px;width:220px;height:290px;border-radius:38px;background:linear-gradient(135deg,#7c3aed,#ec4899);box-shadow:0 22px 60px rgba(168,85,247,.35)}.pc-block{left:30px;bottom:32px;width:min(72%,340px)}.pc-block h3{font-size:1.6rem;margin-bottom:8px}.bars{display:grid;gap:10px;margin-top:14px}.bars span{height:12px;border-radius:999px;background:rgba(255,255,255,.12)}.bars span:nth-child(2){width:74%}.bars span:nth-child(3){width:46%}

.personal-consultant{--brand:#4f46e5;--brand-2:#22d3ee;--soft:#eef2ff}
.center-hero{text-align:center}.center-hero .lead{margin-inline:auto}.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}.trust-strip div{padding:18px;border-radius:18px;border:1px solid var(--line);background:#fff}.trust-strip strong{display:block;font-size:1.2rem}.portrait-card{min-height:380px;border-radius:34px;background:linear-gradient(135deg,#eef2ff,#fff);border:1px solid var(--line);position:relative;overflow:hidden}.portrait-card::before{content:'';position:absolute;left:34px;top:34px;width:220px;height:280px;border-radius:34px;background:linear-gradient(135deg,#4f46e5,#22d3ee)}.portrait-card::after{content:'';position:absolute;right:24px;bottom:26px;width:180px;height:120px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(15,23,42,.08)}

.cafe-bistro{--bg:#fff8f1;--surface:#fffefc;--surface-2:#fffbf6;--ink:#24150a;--muted:#7c5f46;--line:#ead9c5;--brand:#9a3412;--brand-2:#f97316;--soft:#ffedd5}
.full-hero{min-height:520px;border-radius:40px;overflow:hidden;position:relative;background:linear-gradient(135deg,#2b140a,#7c2d12);box-shadow:var(--shadow);padding:42px;color:#fff}.full-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,8,2,.78),rgba(16,8,2,.28))}.full-hero .inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr .95fr;gap:34px;align-items:end;height:100%}.full-hero .lead{color:#f6dac2}.menu-float{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(14px);border-radius:30px;padding:24px}.menu-float .row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.18)}.story-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}.gallery-panel{min-height:320px;border-radius:30px;background:linear-gradient(135deg,#fbd2aa,#fff7ed);border:1px solid var(--line)}

.cafe-menu{--bg:#120901;--surface:#1d1007;--surface-2:#2d180c;--ink:#fff8ef;--muted:#d6b898;--line:rgba(255,255,255,.1);--brand:#f59e0b;--brand-2:#f97316;--soft:rgba(245,158,11,.14)}
.menu-hero{display:grid;grid-template-columns:.92fr 1.08fr;gap:28px;align-items:center}.menu-sheet{background:linear-gradient(145deg,#1d1007,#2d180c);color:#fff;border-radius:38px;border:1px solid rgba(255,255,255,.12);padding:34px;box-shadow:var(--shadow)}.menu-sheet .menu-title{font-size:2.4rem;letter-spacing:-.05em;margin-bottom:18px}.menu-sheet .menu-item{display:grid;grid-template-columns:1fr auto;gap:14px;padding:14px 0;border-bottom:1px dashed rgba(255,255,255,.14)}.chef-badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:26px;padding:18px 20px;margin-top:18px}.chef-badge strong{display:block;font-size:1.2rem}

.health-nova{--brand:#0f766e;--brand-2:#38bdf8;--soft:#ecfeff}
.clean-hero{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}.clinic-window{min-height:390px;border-radius:36px;background:linear-gradient(135deg,#ecfeff,#dbeafe);border:1px solid #dbeafe;position:relative;overflow:hidden}.clinic-window::before{content:'';position:absolute;left:28px;top:28px;right:28px;height:140px;border-radius:32px;background:#fff;border:1px solid #dbeafe}.appointment-card{position:absolute;right:24px;bottom:24px;width:220px;border-radius:24px;background:#fff;padding:18px;border:1px solid #dbeafe;box-shadow:0 18px 44px rgba(15,118,110,.12)}.service-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.service-chips span{padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:700;color:var(--muted)}

.health-dental{--bg:#f8fbff;--surface:#ffffff;--surface-2:#f0f9ff;--ink:#0f172a;--muted:#64748b;--line:#dbeafe;--brand:#0284c7;--brand-2:#22c55e;--soft:#eef7ff}
.soft-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}.doctor-panel{background:linear-gradient(145deg,#fff,#eef7ff);border:1px solid #dbeafe;border-radius:36px;min-height:430px;position:relative;padding:30px;overflow:hidden}.doctor-panel::before{content:'';position:absolute;left:30px;top:34px;width:220px;height:220px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#22c55e)}.doctor-panel::after{content:'';position:absolute;right:28px;bottom:28px;width:180px;height:110px;border-radius:28px;background:#fff;border:1px solid #dbeafe}.before-after{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}.before-after div{padding:18px;border-radius:20px;background:#fff;border:1px solid #dbeafe}

.corporate-agency{--bg:#09111f;--surface:#101a2e;--surface-2:#162338;--ink:#f8fafc;--muted:#a7b6cc;--line:rgba(255,255,255,.09);--brand:#2563eb;--brand-2:#14b8a6;--soft:rgba(37,99,235,.14)}
.agency-hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.agency-board{min-height:430px;border-radius:38px;background:linear-gradient(135deg,#0f172a,#1d4ed8);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}.agency-board::before{content:'';position:absolute;inset:28px;display:block;border-radius:28px;border:1px solid rgba(255,255,255,.1)}.agency-board::after{content:'';position:absolute;left:40px;bottom:34px;width:200px;height:120px;border-radius:28px;background:rgba(255,255,255,.08)}.ticker{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.ticker span{padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-weight:800}.case-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.case-main,.case-side{border-radius:28px;border:1px solid var(--line);padding:22px;background:rgba(255,255,255,.02)}

.corporate-industrial{--bg:#0c0a09;--surface:#18181b;--surface-2:#27272a;--ink:#fafaf9;--muted:#a8a29e;--line:rgba(255,255,255,.1);--brand:#f97316;--brand-2:#facc15;--soft:rgba(249,115,22,.16)}
.industrial-hero{display:grid;grid-template-columns:.94fr 1.06fr;gap:30px;align-items:center}.industrial-stage{min-height:420px;border-radius:38px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,#18181b,#0c0a09);position:relative;overflow:hidden}.industrial-stage::before{content:'';position:absolute;left:28px;top:28px;right:28px;height:110px;border-radius:24px;background:rgba(255,255,255,.08)}.industrial-stage::after{content:'';position:absolute;right:30px;bottom:30px;width:200px;height:200px;border-radius:34px;border:1px solid rgba(255,255,255,.18)}.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}.stats-bar div{padding:16px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.timeline{display:grid;gap:16px;margin-top:20px}.timeline .step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}.timeline .num{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;font-weight:900;color:#111}

.contact-banner{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:30px;border-radius:32px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
@media(max-width:980px){.navlinks{display:none}.catalog-hero,.split,.editorial-grid,.clean-hero,.soft-hero,.agency-hero,.industrial-hero,.menu-hero,.full-hero .inner,.story-grid,.case-grid,.catalog-grid,.grid-3,.grid-4,.grid-2,.kpis,.trust-strip,.stats-bar,.before-after{grid-template-columns:1fr}.contact-banner,.footer .wrap{flex-direction:column;align-items:flex-start}.hero-section{padding-top:56px}.full-hero{padding:30px;min-height:auto}.visual,.catalog-panel,.portrait-card,.clinic-window,.doctor-panel,.agency-board,.industrial-stage{min-height:320px}}
