/* Portus — общее для всех страниц сайта: цвета, разделы, карточки, кнопки, шапка, подвал. */
:root { --gold-1: #ffe2a0; --gold-2: #e6b45c; --gold-3: #9c6424; --sea-1: #5fb4d8; --sea-2: #16506e; --bg: #03060c; }
html, body { margin: 0; background: var(--bg); color: #e8e0cc; font-family: Inter, system-ui, sans-serif; }
body { overflow-x: hidden; }
a { color: inherit; }

/* шапка страниц проектов */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 12px 20px;
       background: rgba(3, 6, 12, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
       border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.top .home { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.top .home img { width: 30px; height: 30px; }
.top .home span { font-family: Cinzel, Georgia, serif; font-weight: 700; letter-spacing: 0.18em; font-size: 17px;
                  background: linear-gradient(var(--gold-1), var(--gold-2) 55%, var(--gold-3));
                  -webkit-background-clip: text; background-clip: text; color: transparent; }
.top .go { margin-left: auto; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; }

/* разделы */
.page { position: relative; z-index: 2; padding: 0 20px; }
.sec { max-width: 1120px; margin: 0 auto 12vh; }
.sec h2, .hero h1 { font-family: Cinzel, Georgia, serif; font-weight: 700; letter-spacing: 0.06em; margin: 0 0 12px;
                    -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec h2 { font-size: clamp(24px, 3.2vw, 40px); }
.gold h2, .gold h1 { background-image: linear-gradient(var(--gold-1), var(--gold-2) 55%, var(--gold-3)); }
.sea h2, .sea h1 { background-image: linear-gradient(#d8f2ff, var(--sea-1) 55%, #2f7fa8); }
.lead { font-size: clamp(15px, 1.5vw, 19px); opacity: 0.82; max-width: 760px; margin: 0 0 26px; line-height: 1.6; }
.hero { max-width: 1120px; margin: 0 auto; padding: 12vh 0 10vh; }
.hero h1 { font-size: clamp(34px, 5.6vw, 72px); line-height: 1.08; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card { position: relative; padding: 22px 22px 20px; border-radius: 18px; background: rgba(12, 18, 30, 0.62);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 226, 160, 0.14);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.sea .card { border-color: rgba(95, 180, 216, 0.18); }
.card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: #fff3d6; }
.sea .card h3 { color: #e2f5ff; }
.card p { margin: 0; font-size: 14.5px; line-height: 1.55; opacity: 0.78; }
.card::before { content: ""; position: absolute; left: 22px; top: 0; width: 42px; height: 2px; border-radius: 2px;
                background: linear-gradient(90deg, var(--gold-1), transparent); }
.sea .card::before { background: linear-gradient(90deg, var(--sea-1), transparent); }

.ex { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 26px 0 0; font-size: 14px; letter-spacing: 0.06em; opacity: 0.7; }
.ex b { font-weight: 600; color: #fff3d6; opacity: 0.85; }

.cta { display: inline-block; margin-top: 8px; padding: 13px 28px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; }
.gold .cta, .gold.cta, .top .go.gold { color: #1a1206; background: linear-gradient(var(--gold-1), var(--gold-2)); box-shadow: 0 0 28px rgba(230,180,92,0.3); }
.sea .cta, .sea.cta, .top .go.sea { color: #04121b; background: linear-gradient(#bfe8fb, var(--sea-1)); box-shadow: 0 0 28px rgba(95,180,216,0.3); }
.cta.ghost { margin-left: 10px; background: none !important; box-shadow: none !important; border: 1px solid rgba(255,226,160,0.4); color: #fff0cc; }
.sea .cta.ghost { border-color: rgba(95,180,216,0.5); color: #cfeeff; }

/* иллюстрации (вымышленные цифры) */
.demo { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,226,160,0.14);
        background: radial-gradient(ellipse at 50% 0%, rgba(230,180,92,0.08), rgba(8,12,22,0.9) 70%); }
.demo canvas { display: block; width: 100%; height: 100%; }
.demo .tag { position: absolute; right: 12px; bottom: 10px; font-size: 11px; opacity: 0.5; }
.split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.points { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.points li { padding-left: 26px; position: relative; line-height: 1.55; font-size: 15px; opacity: 0.85; }
.points li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 9px; height: 9px; border-radius: 50%;
                     background: var(--gold-2); box-shadow: 0 0 10px rgba(230,180,92,0.7); }

.steps { counter-reset: st; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.step { counter-increment: st; padding: 18px; border-radius: 16px; background: rgba(12,18,30,0.55); border: 1px solid rgba(255,255,255,0.06); }
.step::before { content: counter(st); display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
                border-radius: 50%; font-weight: 700; font-size: 14px; color: #1a1206; background: linear-gradient(var(--gold-1), var(--gold-2));
                margin-bottom: 10px; }
.step h3 { margin: 0 0 6px; font-size: 16px; color: #fff3d6; }
.step p { margin: 0; font-size: 14px; line-height: 1.5; opacity: 0.75; }

.todo { border: 1px dashed rgba(255,255,255,0.25); border-radius: 14px; padding: 18px; opacity: 0.6; font-style: italic; }
footer { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,0.06); padding: 26px 20px 40px; text-align: center;
         font-size: 13px; opacity: 0.6; }
footer a { margin: 0 10px; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.in { opacity: 1; transform: none; }
.bg-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* приход на страницу проекта (intro.js) */
.arrive { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 1; transition: opacity 1.4s cubic-bezier(.4,0,.2,1); }
.arrive.off { opacity: 0; }
.field { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.hero h1 { background-size: 260% 100%; background-position: 100% 0; }
.gold .hero h1, .hero.gold h1 { background-image: linear-gradient(100deg, var(--gold-3) 0%, var(--gold-2) 30%, #fff8e6 48%, var(--gold-1) 52%, var(--gold-2) 70%, var(--gold-3) 100%); }
.sea .hero h1, .hero.sea h1 { background-image: linear-gradient(100deg, #2f7fa8 0%, var(--sea-1) 30%, #f2fbff 48%, #d8f2ff 52%, var(--sea-1) 70%, #2f7fa8 100%); }
body.arrived .hero h1 { animation: titleIn 1.5s cubic-bezier(.2,.7,.2,1) 0.35s both, shine 2.6s ease-in-out 1.2s both; }
body.arrived .hero .reveal:not(h1) { transition-delay: 0.9s; }
body.arrived .hero .lead.reveal { transition-delay: 1.1s; }
body.arrived .hero .cta.reveal { transition-delay: 1.35s; }
@keyframes titleIn { from { opacity: 0; filter: blur(16px); letter-spacing: 0.24em; transform: translateY(24px); }
                     to { opacity: 1; filter: blur(0); letter-spacing: 0.06em; transform: none; } }
@keyframes shine { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.top { animation: topIn 0.9s ease 0.6s both; }
@keyframes topIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.arrived .hero h1, .top { animation: none; } }