:root {
    --ink: #17192c;
    --navy: #111426;
    --navy-2: #1a1d35;
    --violet: #7856ff;
    --violet-dark: #5f3de0;
    --violet-soft: #eeeaff;
    --cyan: #54d8df;
    --pink: #ee5fa0;
    --orange: #ff9b50;
    --green: #2cbd86;
    --surface: #ffffff;
    --canvas: #f5f6fa;
    --muted: #777b90;
    --border: #e7e8ef;
    --shadow: 0 20px 60px rgba(20, 22, 42, .1);
    --font: "Segoe UI", Inter, Poppins, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: var(--font); background: var(--surface); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.btn { border-radius: 9px; font-weight: 700; letter-spacing: -.01em; padding: .72rem 1.2rem; }
.btn-lg { padding: .95rem 1.55rem; font-size: .95rem; }
.btn-primary { --bs-btn-bg: var(--violet); --bs-btn-border-color: var(--violet); --bs-btn-hover-bg: var(--violet-dark); --bs-btn-hover-border-color: var(--violet-dark); --bs-btn-active-bg: var(--violet-dark); --bs-btn-active-border-color: var(--violet-dark); box-shadow: 0 10px 25px rgba(120, 86, 255, .24); }
.btn-outline-primary { --bs-btn-color: var(--violet); --bs-btn-border-color: #d8d0ff; --bs-btn-hover-bg: var(--violet); --bs-btn-hover-border-color: var(--violet); }
.form-control { border: 1px solid #dfe1e9; border-radius: 9px; min-height: 46px; padding: .7rem .9rem; font-size: .9rem; }
.form-control:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(120, 86, 255, .12); }
.alert { border: 0; border-radius: 10px; font-size: .88rem; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 400; letter-spacing: -.045em; white-space: nowrap; }
.brand strong { font-weight: 800; }
.brand-light { color: #fff; }
.brand-dark { color: var(--ink); }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px 11px 11px 3px; background: var(--violet); box-shadow: 0 8px 22px rgba(120,86,255,.28); transform: rotate(-7deg); }
.brand-mark i { color: white; font-size: 1.3rem; transform: rotate(7deg); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-size: .73rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.eyebrow-light { color: #a896ff; }

/* Public site */
.site-body main > section { scroll-margin-top: 96px; }
.site-header { position: absolute; z-index: 50; top: 0; left: 0; width: 100%; transition: .25s ease; }
.site-header.scrolled { position: fixed; background: rgba(17, 20, 38, .96); box-shadow: 0 8px 30px rgba(0,0,0,.14); backdrop-filter: blur(16px); }
.site-nav { display: flex; min-height: 88px; align-items: center; gap: 40px; }
.site-links { display: flex; gap: 32px; margin-left: auto; }
.site-links a { position: relative; color: rgba(255,255,255,.72); font-size: .83rem; font-weight: 600; }
.site-links a:hover { color: white; }
.site-links a::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 0; height: 2px; background: var(--violet); transition: width .2s; }
.site-links a:hover::after { width: 100%; }
.site-login { margin-left: 10px; font-size: .82rem; }
.site-login i, .hero-actions i, .final-cta i { margin-left: 5px; font-size: 1.1rem; vertical-align: middle; }
.site-menu-button { display: none; width: 44px; height: 44px; flex: 0 0 44px; margin-left: auto; align-items: center; justify-content: center; color: white; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.05); font-size: 1.8rem; }
.hero { position: relative; min-height: 860px; color: white; overflow: hidden; background: var(--navy) url("../theme/demos/digital-agency-2/bg/bg-1.jpg") center/cover; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero::after { content: ""; position: absolute; left: -5%; bottom: -115px; width: 110%; height: 180px; background: white; transform: rotate(-3deg); transform-origin: center; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.hero-orb-one { top: 10%; left: -180px; width: 460px; height: 460px; background: rgba(120,86,255,.13); }
.hero-orb-two { right: -160px; bottom: 8%; width: 520px; height: 520px; background: rgba(84,216,223,.07); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: 36px; min-height: 790px; padding-top: 82px; }
.hero-grid > *, .section-heading > *, .feature-grid > *, .workflow-grid > *, .security-grid > *, .legal-shell > * { min-width: 0; }
.hero-copy { padding-bottom: 35px; }
.hero-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: #aaaec0; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hero-kicker span { width: 26px; height: 2px; background: var(--violet); }
.hero h1 { max-width: 630px; margin: 0 0 24px; font-size: clamp(3.4rem, 5.3vw, 5.45rem); line-height: .98; font-weight: 800; letter-spacing: -.065em; }
.hero h1 em, .workflow-copy h2 em { color: var(--violet); font-style: normal; }
.hero-copy > p { max-width: 555px; color: #afb2c2; font-size: 1.08rem; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 34px; }
.hero-actions .btn, .final-cta .btn { display: inline-flex; max-width: 100%; align-items: center; justify-content: center; gap: 8px; }
.hero-actions .btn i, .final-cta .btn i { flex: 0 0 auto; }
.hero-secondary { display: flex; align-items: center; gap: 10px; color: white; font-size: .86rem; font-weight: 700; }
.hero-secondary > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.hero-secondary i { margin: 0; }
.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 42px; color: #85899c; font-size: .7rem; font-weight: 600; }
.proof-icons { display: flex; flex: 0 0 auto; }
.proof-icons i { display: grid; width: 29px; height: 29px; margin-left: -5px; place-items: center; color: white; border: 2px solid var(--navy); border-radius: 50%; background: #272b45; font-size: .9rem; }
.proof-icons i:first-child { margin-left: 0; }
.hero-product { position: relative; margin-left: 20px; perspective: 1200px; }
.product-window { display: flex; min-height: 420px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: #f7f8fb; box-shadow: 0 40px 90px rgba(0,0,0,.38); transform: rotateY(-4deg) rotateX(2deg); }
.product-sidebar { display: flex; flex: 0 0 66px; flex-direction: column; align-items: center; gap: 23px; padding-top: 20px; color: #71778e; background: #181b31; }
.mini-brand { width: 26px; height: 26px; margin-bottom: 14px; border-radius: 8px 8px 8px 2px; background: var(--violet); transform: rotate(-7deg); }
.product-sidebar i { padding: 8px; border-radius: 7px; font-size: 1.05rem; }
.product-sidebar i.active { color: white; background: var(--violet); }
.product-content { min-width: 0; flex: 1; padding: 0 23px 22px; color: var(--ink); }
.product-top { display: flex; height: 58px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); color: #656a80; font-size: .68rem; font-weight: 700; }
.product-avatar { display: grid; width: 27px; height: 27px; place-items: center; color: white; border-radius: 50%; background: var(--violet); }
.product-title { display: flex; align-items: end; justify-content: space-between; padding: 24px 0 18px; }
.product-title small { display: block; margin-bottom: 3px; color: #9295a5; font-size: .54rem; }
.product-title strong { display: block; font-size: 1.15rem; }
.product-create { flex-shrink: 0; color: white; border-radius: 5px; background: var(--violet); padding: 8px 11px; font-size: .56rem; font-weight: 700; }
.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.metric-row > div { display: flex; align-items: center; gap: 9px; padding: 13px 10px; border: 1px solid var(--border); border-radius: 8px; background: white; }
.metric-row i { display: grid; width: 29px; height: 29px; place-items: center; color: var(--violet); border-radius: 7px; background: var(--violet-soft); }
.metric-row small, .metric-row strong { display: block; }
.metric-row small { color: #9497a7; font-size: .46rem; }
.metric-row strong { font-size: .86rem; }
.product-panels { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 10px; margin-top: 11px; }
.product-chart, .product-schedule { min-height: 180px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: white; }
.product-chart > span, .product-schedule > span { display: block; margin-bottom: 15px; font-size: .58rem; font-weight: 800; }
.bars { display: flex; height: 118px; align-items: end; gap: 9px; border-bottom: 1px solid var(--border); }
.bars i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--violet); opacity: .88; }
.product-schedule > div { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 7px; padding: 10px 0; border-bottom: 1px solid #eff0f4; }
.product-schedule b { width: 6px; height: 6px; border-radius: 50%; }.product-schedule .pink { background: var(--pink); }.product-schedule .blue { background: #4779f7; }.product-schedule .red { background: #ff4e55; }
.product-schedule small { color: #737789; font-size: .48rem; }.product-schedule strong { font-size: .48rem; }
.floating-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 12px 15px; color: var(--ink); border: 1px solid rgba(255,255,255,.6); border-radius: 9px; background: rgba(255,255,255,.96); box-shadow: 0 18px 45px rgba(0,0,0,.24); }
.floating-card > i { display: grid; width: 29px; height: 29px; place-items: center; color: white; border-radius: 7px; background: var(--green); }
.floating-card strong, .floating-card small { display: block; white-space: nowrap; }.floating-card strong { font-size: .61rem; }.floating-card small { margin-top: 2px; color: #8d90a1; font-size: .48rem; }
.card-upload { left: -36px; bottom: 50px; }.card-ai { right: -20px; top: 74px; }.card-ai > i { background: var(--violet); }
.hero-scroll { position: absolute; z-index: 3; bottom: 90px; left: 50%; display: flex; align-items: center; gap: 9px; color: #777b90; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transform: translateX(-50%); }
.hero-scroll span { width: 28px; height: 1px; background: var(--violet); }
.feature-intro { padding: 110px 0 130px; }
.section-heading { display: grid; grid-template-columns: 1.1fr .7fr; gap: 70px; align-items: end; margin: 18px 0 55px; }
.section-heading h2, .security-grid h2 { max-width: 690px; margin: 0; font-size: clamp(2.3rem, 4vw, 3.8rem); line-height: 1.08; font-weight: 800; letter-spacing: -.055em; }
.section-heading p { margin: 0; color: var(--muted); line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature-card { position: relative; display: flex; flex-direction: column; min-height: 390px; padding: 44px 38px; overflow: hidden; border: 1px solid var(--border); background: white; }
.feature-card::after { content: ""; position: absolute; right: -55px; bottom: -55px; width: 130px; height: 130px; border: 24px solid rgba(120,86,255,.05); border-radius: 50%; }
.feature-card-dark { color: white; border-color: var(--navy); background: var(--navy); }
.feature-card-accent { border-top: 4px solid var(--violet); }
.feature-number { position: absolute; top: 27px; right: 30px; color: #d9dbe3; font-size: .74rem; font-weight: 800; }.feature-card-dark .feature-number { color: #4b4e65; }
.feature-card > i { display: grid; width: 58px; height: 58px; margin-bottom: 50px; place-items: center; color: var(--violet); border-radius: 15px 15px 15px 4px; background: var(--violet-soft); font-size: 1.75rem; }
.feature-card-dark > i { color: white; background: var(--violet); }
.feature-card h3 { margin-bottom: 15px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.025em; }
.feature-card p { color: var(--muted); font-size: .88rem; line-height: 1.75; }.feature-card-dark p { color: #9ca0b3; }
.feature-card a, .feature-soon { position: relative; z-index: 1; align-self: flex-start; max-width: 100%; margin-top: auto; color: var(--violet); font-size: .72rem; font-weight: 800; }.feature-card a i { margin-left: 5px; vertical-align: middle; }.feature-soon { color: #a0a3b2; text-transform: uppercase; letter-spacing: .08em; font-size: .6rem; }
.workflow-section { position: relative; padding: 130px 0; color: white; overflow: hidden; background: var(--navy); }
.workflow-section::after { content: ""; position: absolute; top: -180px; right: -180px; width: 600px; height: 600px; border: 90px solid rgba(120,86,255,.07); border-radius: 50%; }
.workflow-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 100px; align-items: center; }
.workflow-copy h2 { margin: 18px 0 23px; font-size: clamp(2.5rem, 4.2vw, 4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.06em; }
.workflow-copy > p { color: #a3a7ba; line-height: 1.8; }
.workflow-copy ul { margin: 38px 0 0; padding: 0; list-style: none; }
.workflow-copy li { display: flex; gap: 15px; align-items: center; margin: 19px 0; }
.workflow-copy li > span { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; color: #b6a7ff; border: 1px solid #41455c; border-radius: 50%; font-size: .68rem; font-weight: 800; }
.workflow-copy li strong, .workflow-copy li small { display: block; }.workflow-copy li strong { font-size: .85rem; }.workflow-copy li small { margin-top: 3px; color: #777c91; font-size: .67rem; }
.workflow-visual { position: relative; min-height: 500px; }
.flow-cloud { position: absolute; top: 20px; right: 25px; display: flex; width: 265px; height: 145px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.12); border-radius: 80px; background: #1b1e36; box-shadow: 0 25px 60px rgba(0,0,0,.24); }
.flow-cloud > i { color: var(--violet); font-size: 2.3rem; }.flow-cloud strong, .flow-cloud small { display: block; }.flow-cloud strong { margin-top: 5px; font-size: .88rem; }.flow-cloud small { margin-top: 4px; color: #787c91; font-size: .62rem; }
.flow-line { position: absolute; top: 152px; right: 151px; width: 2px; height: 155px; background: repeating-linear-gradient(to bottom, var(--violet) 0, var(--violet) 6px, transparent 6px, transparent 13px); }
.flow-line span { position: absolute; bottom: 0; left: -4px; width: 10px; height: 10px; border: 2px solid var(--violet); border-radius: 50%; background: var(--navy); }
.flow-pc { position: absolute; right: 0; bottom: 15px; width: min(470px, 100%); }
.pc-screen { display: flex; height: 235px; align-items: center; justify-content: center; gap: 18px; border: 10px solid #292d46; border-bottom-width: 20px; border-radius: 15px; background: #f6f6fa; box-shadow: 0 30px 70px rgba(0,0,0,.32); color: var(--ink); }
.pc-screen > i { display: grid; width: 64px; height: 64px; place-items: center; color: white; border-radius: 17px; background: var(--violet); font-size: 2rem; }.pc-screen strong, .pc-screen small { display: block; }.pc-screen strong { font-size: 1.05rem; }.pc-screen small { margin-top: 4px; color: var(--muted); font-size: .7rem; }
.pc-base { width: 140px; height: 28px; margin: 0 auto; border-bottom: 7px solid #2d314a; background: #22253c; clip-path: polygon(28% 0,72% 0,85% 100%,15% 100%); }
.flow-tag { position: absolute; left: 2px; bottom: 120px; padding: 11px 16px; border: 1px solid #3d415a; border-radius: 7px; background: #1b1e35; color: #a4a8bb; font-size: .64rem; font-weight: 700; }.flow-tag span { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(44,189,134,.12); }
.security-section { padding: 130px 0; background: #f6f7fa; }
.security-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 100px; }
.security-grid h2 { margin-top: 18px; }
.security-list article { display: flex; gap: 22px; padding: 27px 0; border-bottom: 1px solid #dddfe7; }.security-list article:first-child { padding-top: 0; }.security-list article > i { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; color: var(--violet); border-radius: 13px; background: white; box-shadow: 0 10px 28px rgba(20,22,42,.07); font-size: 1.4rem; }.security-list h3 { margin: 2px 0 7px; font-size: 1rem; font-weight: 800; }.security-list p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.final-cta { padding: 75px 0; color: white; background: var(--violet); }.final-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.final-cta span { color: #d9d0ff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.final-cta h2 { margin: 8px 0 0; font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 800; letter-spacing: -.05em; }.final-cta .btn { color: var(--violet); }
.site-footer { padding: 42px 0; color: #8b8fa2; background: #0d1020; }
.site-footer .container { display: grid; grid-template-columns: minmax(190px, 1fr) auto auto; align-items: center; gap: clamp(30px, 5vw, 72px); }
.site-footer p { margin: 0; font-size: .76rem; }
.footer-brand { justify-self: start; }
.footer-copyright { justify-self: end; color: #858da1; font-size: .7rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }

/* Public site — premium visual direction */
.site-body {
    --site-night: #0a1020;
    --site-night-soft: #141c34;
    --site-ink: #111426;
    --site-violet: #6c5ce7;
    --site-violet-bright: #806fff;
    --site-periwinkle: #b5aaff;
    --site-coral: #ff7a66;
    --site-mint: #24b58c;
    --site-ivory: #f7f5ef;
    --site-paper: #fcfbf8;
    --site-muted: #666b7f;
    --site-border: #e5e2da;
    color: var(--site-ink);
    background: var(--site-ivory);
    font-family: "Segoe UI Variable Display", "Segoe UI Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.site-body ::selection { color: white; background: var(--site-violet); }
.site-body a:focus-visible,
.site-body button:focus-visible { outline: 3px solid rgba(181,170,255,.85); outline-offset: 4px; }
.site-body .container { max-width: 1390px; --bs-gutter-x: clamp(2rem, 6vw, 4rem); }
.site-body .brand-mark { flex-shrink: 0; }
.site-body .brand { gap: 12px; letter-spacing: -.055em; }
.site-body .brand-mark {
    border-radius: 13px 13px 13px 4px;
    background: linear-gradient(145deg, var(--site-violet-bright), #5845dd);
    box-shadow: 0 10px 28px rgba(108,92,231,.38), inset 0 1px 0 rgba(255,255,255,.25);
}
.site-body .site-header.scrolled {
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(10,16,32,.88);
    box-shadow: 0 16px 46px rgba(3,7,18,.24);
}
.site-body .site-links a { color: #c9ceda; }
.site-body .site-links a:hover { color: white; }
.site-body .site-login {
    color: white;
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.site-body .site-login:hover { border-color: rgba(181,170,255,.55); background: rgba(128,111,255,.18); }
.site-body .btn { border-radius: 999px; }
.site-body .btn-primary {
    --bs-btn-bg: var(--site-violet);
    --bs-btn-border-color: var(--site-violet);
    --bs-btn-hover-bg: #5e4bd4;
    --bs-btn-hover-border-color: #5e4bd4;
    --bs-btn-active-bg: #5341c5;
    --bs-btn-active-border-color: #5341c5;
    box-shadow: 0 16px 38px rgba(108,92,231,.34), inset 0 1px 0 rgba(255,255,255,.2);
}
.site-body .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(108,92,231,.42); }
.site-body .hero {
    min-height: 900px;
    background:
        radial-gradient(circle at 9% 36%, rgba(108,92,231,.3) 0, rgba(108,92,231,.11) 19%, transparent 43%),
        radial-gradient(circle at 92% 68%, rgba(36,181,140,.17) 0, transparent 34%),
        radial-gradient(circle at 73% 3%, rgba(255,122,102,.12) 0, transparent 27%),
        linear-gradient(125deg, #080d1a 0%, var(--site-night) 48%, #121a32 100%);
}
.site-body .hero::before {
    opacity: .65;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, black 8%, transparent 90%);
}
.site-body .hero::after { bottom: -120px; height: 190px; background: var(--site-ivory); }
.site-body .hero-orb-one {
    top: 7%; left: -220px; width: 560px; height: 560px;
    background: rgba(128,111,255,.16); filter: blur(2px);
}
.site-body .hero-orb-two {
    right: -180px; bottom: 4%; width: 560px; height: 560px;
    background: rgba(36,181,140,.09); filter: blur(2px);
}
.site-body .hero-grid { min-height: 820px; gap: 54px; }
.site-body .hero-kicker {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    padding: 9px 13px;
    color: #d7d9e4;
    border: 1px solid rgba(181,170,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(12px);
    letter-spacing: .12em;
}
.site-body .hero-kicker span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--site-coral); box-shadow: 0 0 0 5px rgba(255,122,102,.1); }
.site-body .hero h1 { color: #fff; text-wrap: balance; text-shadow: 0 4px 40px rgba(0,0,0,.16); }
.site-body .hero h1 em,
.site-body .workflow-copy h2 em {
    color: transparent;
    background: linear-gradient(92deg, #8b7cff 0%, #c5baff 55%, #55d6b1 112%);
    -webkit-background-clip: text;
    background-clip: text;
}
.site-body .hero-copy > p { color: #c0c5d3; }
.site-body .hero-secondary { color: #eef0f6; }
.site-body .hero-secondary > span {
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.site-body .hero-secondary:hover > span { color: white; border-color: rgba(181,170,255,.6); background: rgba(108,92,231,.22); }
.site-body .hero-proof { color: #aeb4c4; }
.site-body .proof-icons i { border-color: var(--site-night); background: #171f38; }
.site-body .proof-icons i:nth-child(1) { background: linear-gradient(145deg, #833ab4, #fd1d1d 65%, #fcb045); }
.site-body .proof-icons i:nth-child(2) { background: #1877f2; }
.site-body .proof-icons i:nth-child(3) { background: #ff0033; }
.site-body .proof-icons i:nth-child(4) { background: #101116; box-shadow: inset -2px 0 #25f4ee, inset 2px 0 #fe2c55; }
.site-body .hero-product { filter: drop-shadow(0 34px 60px rgba(2,6,16,.32)); }
.site-body .product-window {
    border-color: rgba(255,255,255,.2);
    border-radius: 22px;
    background: #f8f8fb;
    box-shadow: 0 50px 110px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.08);
}
.site-body .product-sidebar { background: linear-gradient(180deg, #12182e, #090f20); }
.site-body .product-sidebar i.active { background: linear-gradient(145deg, var(--site-violet-bright), #5b48de); box-shadow: 0 8px 20px rgba(108,92,231,.35); }
.site-body .product-avatar,
.site-body .product-create { background: linear-gradient(145deg, var(--site-violet-bright), #5b48de); }
.site-body .metric-row > div,
.site-body .product-chart,
.site-body .product-schedule { border-color: #e6e7ed; box-shadow: 0 8px 22px rgba(17,20,38,.035); }
.site-body .metric-row > div:nth-child(1) i { color: var(--site-violet); background: #eeeaff; }
.site-body .metric-row > div:nth-child(2) i { color: var(--site-coral); background: #fff0ec; }
.site-body .metric-row > div:nth-child(3) i { color: var(--site-mint); background: #e7f8f2; }
.site-body .bars i { background: linear-gradient(180deg, #8b7cff, #6552e7); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.site-body .floating-card {
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 20px 48px rgba(3,7,18,.2);
    backdrop-filter: blur(16px);
}
.site-body .card-upload > i { background: var(--site-mint); }
.site-body .card-ai > i { color: white; background: linear-gradient(145deg, var(--site-violet-bright), #5e4bd4); }
.site-body .hero-scroll { color: #9ba1b2; }
.site-body .hero-scroll span { background: var(--site-coral); }
.site-body .feature-intro { background: var(--site-ivory); }
.site-body .eyebrow { color: var(--site-violet); }
.site-body .section-heading h2,
.site-body .security-grid h2 { color: var(--site-ink); text-wrap: balance; }
.site-body .section-heading p { color: var(--site-muted); }
.site-body .feature-grid { gap: 18px; }
.site-body .feature-card {
    min-height: 410px;
    padding: 45px 40px;
    border-color: var(--site-border);
    border-radius: 26px;
    background: var(--site-paper);
    box-shadow: 0 22px 55px rgba(17,20,38,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.site-body .feature-card:hover { transform: translateY(-7px); box-shadow: 0 30px 72px rgba(17,20,38,.11); }
.site-body .feature-card::after { border-color: rgba(108,92,231,.07); }
.site-body .feature-card-dark {
    color: white;
    border-color: rgba(255,255,255,.06);
    background:
        radial-gradient(circle at 95% 100%, rgba(108,92,231,.24), transparent 38%),
        linear-gradient(145deg, #0b1122, #151d36);
    box-shadow: 0 28px 70px rgba(10,16,32,.25);
}
.site-body .feature-card-accent {
    border-top-width: 1px;
    background: linear-gradient(145deg, #f1edff 0%, #fcfbf8 61%);
}
.site-body .feature-number { color: #c9c6bd; font-size: .72rem; letter-spacing: .08em; }
.site-body .feature-card-dark .feature-number { color: #65708e; }
.site-body .feature-card > i {
    border-radius: 17px 17px 17px 5px;
    color: var(--site-violet);
    background: #ece8ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.site-body .feature-card-dark > i { color: white; background: linear-gradient(145deg, var(--site-violet-bright), #5845dd); box-shadow: 0 12px 28px rgba(108,92,231,.32); }
.site-body .feature-card-accent > i { color: var(--site-coral); background: #fff0ec; }
.site-body .feature-card h3 { color: var(--site-ink); font-size: 1.35rem; }
.site-body .feature-card-dark h3 { color: white; }
.site-body .feature-card p { margin-bottom: 28px; color: var(--site-muted); }
.site-body .feature-card-dark p { color: #b6bdce; }
.site-body .feature-card a,
.site-body .feature-soon {
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ece8ff;
    color: var(--site-violet);
}
.site-body .feature-card-dark a { color: #c8beff; background: rgba(128,111,255,.13); }
.site-body .feature-card-accent .feature-soon { color: #a84d3f; background: #fff0ec; }
.site-body .workflow-section {
    background:
        radial-gradient(circle at 88% 12%, rgba(108,92,231,.22), transparent 32%),
        radial-gradient(circle at 6% 94%, rgba(36,181,140,.1), transparent 28%),
        linear-gradient(145deg, #080d1a, #11182e);
}
.site-body .workflow-section::after { border-color: rgba(181,170,255,.07); }
.site-body .workflow-copy > p { color: #b8becc; }
.site-body .workflow-copy li > span { color: #d2caff; border-color: rgba(181,170,255,.3); background: rgba(108,92,231,.08); }
.site-body .workflow-copy li small { color: #929aaf; }
.site-body .flow-cloud { border-color: rgba(255,255,255,.13); background: linear-gradient(145deg, #1b2440, #11182d); }
.site-body .flow-cloud > i { color: var(--site-periwinkle); }
.site-body .flow-line { background: repeating-linear-gradient(to bottom, var(--site-coral) 0, var(--site-coral) 6px, transparent 6px, transparent 13px); }
.site-body .flow-line span { border-color: var(--site-coral); background: var(--site-night); }
.site-body .pc-screen { border-color: #27304d; background: var(--site-paper); }
.site-body .pc-screen > i { background: linear-gradient(145deg, var(--site-violet-bright), #5845dd); }
.site-body .flow-tag { color: #c0c6d4; border-color: rgba(255,255,255,.12); background: rgba(24,32,58,.92); }
.site-body .security-section { background: var(--site-paper); }
.site-body .security-list { display: grid; gap: 12px; }
.site-body .security-list article {
    padding: 24px;
    border: 1px solid var(--site-border);
    border-radius: 18px;
    background: white;
    box-shadow: 0 12px 32px rgba(17,20,38,.045);
}
.site-body .security-list article:first-child { padding-top: 24px; }
.site-body .security-list article > i { color: var(--site-violet); background: #ece8ff; }
.site-body .security-list article:nth-child(2) > i { color: var(--site-mint); background: #e7f8f2; }
.site-body .security-list article:nth-child(3) > i { color: var(--site-coral); background: #fff0ec; }
.site-body .security-list p { color: var(--site-muted); }
.site-body .final-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% -30%, rgba(181,170,255,.42), transparent 42%),
        radial-gradient(circle at 8% 120%, rgba(36,181,140,.18), transparent 34%),
        linear-gradient(120deg, #4f3dcc, #6c5ce7 52%, #342892);
}
.site-body .final-cta::before { content: ""; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 44px 44px; }
.site-body .final-cta .container { position: relative; z-index: 1; }
.site-body .final-cta span { color: #e0dcff; }
.site-body .final-cta .btn { color: #4633bd; border: 1px solid rgba(255,255,255,.8); box-shadow: 0 14px 34px rgba(22,13,80,.24); }
.site-body .site-footer { color: #9fa6b8; border-top: 1px solid rgba(255,255,255,.06); background: #080d1a; }
.site-footer-links,
.legal-footer nav { display: flex; flex-wrap: wrap; align-items: center; justify-self: center; gap: 12px 30px; }
.site-footer-links a,
.legal-footer nav a { position: relative; padding: 9px 0; color: #c1c6d4; font-size: .76rem; font-weight: 700; transition: color .16s ease; }
.site-footer-links a::after,
.legal-footer nav a::after { position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; content: ""; background: var(--site-violet-bright); transform: scaleX(0); transform-origin: center; transition: transform .18s ease; }
.site-footer-links a:hover,
.legal-footer nav a:hover { color: white; }
.site-footer-links a:hover::after,
.legal-footer nav a:hover::after,
.site-footer-links a:focus-visible::after,
.legal-footer nav a:focus-visible::after { transform: scaleX(1); }

/* Public legal documents */
.legal-body { color: var(--site-ink); background: #f3f4f8; }
.legal-header { position: relative; min-height: 82px; background: #080d1a; }
.legal-header .site-nav { min-height: 82px; }
.legal-home-link { display: inline-flex; min-height: 44px; margin-left: auto; align-items: center; gap: 7px; color: #d8dbea; font-size: .78rem; font-weight: 750; }
.legal-home-link i { font-size: 1.15rem; }
.legal-main { padding: 72px 0 92px; }
.legal-shell { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 760px); gap: clamp(42px, 7vw, 108px); align-items: start; justify-content: center; }
.legal-summary { position: sticky; top: 38px; padding: 32px; color: white; border-radius: 24px; background: radial-gradient(circle at 100% 0, rgba(123, 92, 255, .36), transparent 44%), linear-gradient(145deg, #10172c, #080d1a); box-shadow: 0 24px 55px rgba(8, 13, 26, .18); }
.legal-summary h1 { margin: 15px 0 16px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.02; font-weight: 850; letter-spacing: -.055em; }
.legal-summary > p { margin: 0; color: #b4bbce; font-size: .92rem; line-height: 1.72; }
.legal-summary dl { margin: 34px 0 0; }
.legal-summary dl div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.1); }
.legal-summary dt { color: #7f88a3; font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.legal-summary dd { margin: 0; color: #f5f6fb; font-size: .75rem; font-weight: 700; overflow-wrap: anywhere; }
.legal-summary a { color: #cfc7ff; }
.legal-document { padding: 12px 0; overflow-wrap: anywhere; }
.legal-lead { margin: 0 0 48px; color: #333a50; font-size: 1.16rem; line-height: 1.78; }
.legal-document section { position: relative; padding: 38px 0 40px; border-top: 1px solid #dfe2ea; }
.legal-document h2 { margin: 0 0 18px; color: #101629; font-size: 1.42rem; font-weight: 850; letter-spacing: -.025em; }
.legal-document p,
.legal-document li { color: #596176; font-size: .94rem; line-height: 1.82; }
.legal-document p { margin: 0 0 15px; }
.legal-document p:last-child { margin-bottom: 0; }
.legal-document ul { display: grid; gap: 10px; margin: 0; padding-left: 1.25rem; }
.legal-document strong { color: #292f42; }
.legal-document a { color: var(--site-violet); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.legal-index { display: inline-flex; margin-bottom: 12px; color: var(--site-violet); font-size: .65rem; font-weight: 850; letter-spacing: .09em; }
.legal-footer .container { gap: clamp(30px, 5vw, 72px); }

/* Authentication */
.auth-body { min-height: 100vh; background: var(--canvas); }
.auth-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(480px, 44%) 1fr; }
.auth-showcase { position: relative; display: flex; min-height: 100vh; flex-direction: column; padding: 48px clamp(42px, 5vw, 82px); color: white; overflow: hidden; background: var(--navy) url("../theme/demos/digital-agency-2/bg/bg-1.jpg") center/cover; }
.auth-showcase::before, .auth-showcase::after { content: ""; position: absolute; border-radius: 50%; }.auth-showcase::before { right: -190px; top: 23%; width: 480px; height: 480px; border: 80px solid rgba(120,86,255,.08); }.auth-showcase::after { left: -130px; bottom: -180px; width: 420px; height: 420px; background: rgba(84,216,223,.035); }
.auth-showcase-content { position: relative; z-index: 2; margin: auto 0; max-width: 520px; }.auth-showcase h1 { margin: 18px 0 24px; font-size: clamp(2.9rem, 4.6vw, 4.8rem); line-height: 1.01; font-weight: 800; letter-spacing: -.065em; }.auth-showcase h1 span { color: var(--violet); }.auth-showcase-content > p { max-width: 455px; color: #a7aabd; line-height: 1.8; }
.showcase-network { position: relative; width: 310px; height: 150px; margin: 42px 0 0 30px; }.showcase-network::before { content: ""; position: absolute; top: 69px; left: 55px; width: 210px; height: 1px; background: #373b54; }.network-center, .network-node { position: absolute; display: grid; place-items: center; border-radius: 50%; }.network-center { z-index: 2; top: 38px; left: 120px; width: 70px; height: 70px; color: white; background: var(--violet); box-shadow: 0 0 0 12px rgba(120,86,255,.12); font-size: 1.8rem; }.network-node { top: 52px; width: 40px; height: 40px; color: #c6c8d2; border: 1px solid #41455d; background: #1d2037; }.node-instagram { left: 0; }.node-facebook { left: 60px; }.node-youtube { right: 60px; }.node-tiktok { right: 0; }.auth-trust { position: relative; z-index: 2; margin: auto 0 0; color: #72768c; font-size: .66rem; }.auth-trust i { margin-right: 6px; color: var(--green); font-size: 1rem; vertical-align: middle; }
.auth-panel { display: grid; place-items: center; padding: 45px 25px; background: #fbfbfd; }.auth-form-wrap { width: min(100%, 430px); }.auth-mobile-brand { display: none; margin-bottom: 50px; }.auth-heading { margin-bottom: 30px; }.auth-heading h2 { margin: 12px 0 8px; font-size: 2.05rem; font-weight: 800; letter-spacing: -.045em; }.auth-heading p { color: var(--muted); font-size: .88rem; line-height: 1.6; }.auth-form { display: flex; flex-direction: column; gap: 20px; }.form-field label, .profile-form label { margin-bottom: 7px; font-size: .76rem; font-weight: 750; }.label-row { display: flex; justify-content: space-between; }.label-row a { color: var(--violet); font-size: .7rem; font-weight: 700; }.input-icon { position: relative; }.input-icon > i { position: absolute; z-index: 2; top: 50%; left: 14px; color: #979aaa; font-size: 1.15rem; transform: translateY(-50%); }.input-icon .form-control { padding-left: 43px; padding-right: 43px; min-height: 51px; background: white; }.password-toggle { position: absolute; z-index: 2; top: 50%; right: 7px; display: grid; width: 36px; height: 36px; place-items: center; color: #8e92a3; border: 0; background: transparent; transform: translateY(-50%); font-size: 1.1rem; }.check-row { display: flex; align-items: center; gap: 9px; color: #626678; font-size: .73rem; }.check-row input { accent-color: var(--violet); }.auth-submit { display: flex; min-height: 51px; align-items: center; justify-content: center; gap: 6px; }.auth-help { display: flex; gap: 10px; margin-top: 32px; padding: 16px; color: #767a8d; border-radius: 8px; background: #f0f1f6; font-size: .7rem; }.auth-help i { color: var(--violet); font-size: 1rem; }.auth-help a, .auth-back { color: var(--violet); font-weight: 700; }.auth-copyright { margin: 45px 0 0; color: #aaacb7; text-align: center; font-size: .62rem; }.auth-back { display: block; margin-top: 26px; text-align: center; font-size: .75rem; }.auth-success-icon { display: grid; width: 62px; height: 62px; margin-bottom: 18px; place-items: center; color: var(--green); border-radius: 50%; background: #e7f8f2; font-size: 1.8rem; }

/* Application shell */
.app-body { background: var(--canvas); }
.app-frame { display: flex; min-height: 100vh; }
.app-sidebar { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; display: flex; width: 248px; flex-direction: column; padding: 28px 18px 20px; color: #999daf; background: var(--navy); }
.sidebar-brand { margin: 0 10px 34px; font-size: 1.18rem; }.sidebar-brand .brand-mark { width: 32px; height: 32px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 5px; }.nav-label { margin: 20px 12px 7px; color: #565b72; font-size: .57rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.sidebar-nav a { display: flex; min-height: 43px; align-items: center; gap: 12px; padding: 0 12px; border-radius: 8px; font-size: .78rem; font-weight: 600; transition: .16s ease; }.sidebar-nav a > i { font-size: 1.17rem; }.sidebar-nav a:hover:not(.disabled) { color: white; background: #1c2037; }.sidebar-nav a.active { color: white; background: var(--violet); box-shadow: 0 9px 24px rgba(120,86,255,.25); }.sidebar-nav a small { margin-left: auto; color: #64687e; font-size: .48rem; font-weight: 700; text-transform: uppercase; }.sidebar-nav a.disabled { cursor: default; opacity: .7; }
.sidebar-status { display: flex; align-items: center; gap: 11px; margin-top: auto; padding: 14px 12px; border: 1px solid #292d44; border-radius: 8px; background: #171a2e; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(44,189,134,.12); }.sidebar-status strong, .sidebar-status small { display: block; }.sidebar-status strong { color: #d5d7e0; font-size: .64rem; }.sidebar-status small { margin-top: 2px; color: #666b80; font-size: .54rem; }
.app-main { display: flex; width: calc(100% - 248px); min-height: 100vh; margin-left: 248px; flex-direction: column; }.app-topbar { position: sticky; z-index: 30; top: 0; display: flex; height: 72px; align-items: center; padding: 0 34px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }.topbar-menu { display: none; color: var(--ink); border: 0; background: transparent; font-size: 1.6rem; }.topbar-title span, .topbar-title small { display: block; }.topbar-title span { font-size: .76rem; font-weight: 800; }.topbar-title small { margin-top: 2px; color: var(--muted); font-size: .56rem; }.topbar-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }.icon-button { display: grid; width: 36px; height: 36px; place-items: center; color: var(--violet); border-radius: 8px; background: var(--violet-soft); font-size: 1.15rem; }.user-button { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; text-align: left; }.user-avatar { display: grid; width: 36px; height: 36px; place-items: center; color: white; border-radius: 10px; background: var(--violet); font-size: .78rem; font-weight: 800; }.user-copy strong, .user-copy small { display: block; }.user-copy strong { max-width: 160px; overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }.user-copy small { margin-top: 1px; color: var(--muted); font-size: .54rem; }.user-button > i { color: #9296a8; }.app-content { width: 100%; max-width: 1540px; margin: 0 auto; flex: 1; padding: 36px; }.app-footer { display: flex; justify-content: space-between; padding: 18px 36px; color: #aaacb8; border-top: 1px solid var(--border); background: white; font-size: .6rem; }.sidebar-backdrop { display: none; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }.page-kicker { color: var(--violet); font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.page-heading h1 { margin: 6px 0 4px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.04em; }.page-heading h1 span { font-size: 1.35rem; }.page-heading p { margin: 0; color: var(--muted); font-size: .76rem; }.security-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; padding: 15px 18px; color: #6b541e; border: 1px solid #f1dfad; border-radius: 9px; background: #fff9e7; }.security-banner > i { font-size: 1.5rem; }.security-banner div { display: flex; flex-direction: column; }.security-banner strong { font-size: .76rem; }.security-banner span { font-size: .65rem; }.security-banner a { margin-left: auto; color: #7b5b09; font-size: .67rem; font-weight: 800; text-decoration: underline; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.stat-card { display: flex; min-height: 126px; align-items: center; gap: 15px; padding: 22px; border: 1px solid var(--border); border-radius: 10px; background: white; box-shadow: 0 7px 22px rgba(20,22,42,.035); }.stat-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 12px; font-size: 1.35rem; }.stat-icon.purple { color: var(--violet); background: var(--violet-soft); }.stat-icon.blue { color: #367bef; background: #e9f1ff; }.stat-icon.orange { color: #ef8a3b; background: #fff2e8; }.stat-icon.green { color: var(--green); background: #e7f8f2; }.stat-card small, .stat-card strong, .stat-card div > span { display: block; }.stat-card small { color: var(--muted); font-size: .61rem; }.stat-card strong { margin: 3px 0 2px; font-size: 1.3rem; }.stat-card div > span { color: #a0a3b1; font-size: .54rem; }.stat-card .status-text { color: var(--green); font-size: 1rem; }
.dashboard-grid { display: grid; grid-template-columns: 1.55fr .7fr; gap: 18px; margin-top: 18px; }.panel-card, .library-panel { border: 1px solid var(--border); border-radius: 10px; background: white; box-shadow: 0 7px 22px rgba(20,22,42,.03); }.panel-card { padding: 24px; }.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }.panel-heading h2 { margin: 0 0 4px; font-size: .94rem; font-weight: 800; }.panel-heading p { margin: 0; color: var(--muted); font-size: .64rem; }.panel-heading > a { color: var(--violet); font-size: .64rem; font-weight: 800; }
.recent-list { margin: 0 -8px -8px; }.recent-item { display: grid; grid-template-columns: 40px 1fr auto 18px; gap: 12px; align-items: center; padding: 11px 8px; border-top: 1px solid #eff0f4; }.recent-item:hover { background: #fafaff; }.media-kind { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 9px; font-size: 1.2rem; }.media-kind.image { color: var(--violet); background: var(--violet-soft); }.media-kind.video { color: var(--pink); background: #fff0f7; }.recent-item strong, .recent-item small { display: block; }.recent-item strong { max-width: 410px; overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }.recent-item small, .recent-item time { color: #9a9dac; font-size: .56rem; }.recent-item > i { color: #b5b7c1; }.next-steps .step { display: flex; position: relative; gap: 12px; padding: 10px 0; }.next-steps .step:not(:last-child)::after { content: ""; position: absolute; top: 40px; bottom: -8px; left: 14px; width: 1px; background: #e5e6ec; }.step > span { z-index: 2; display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; color: #979aaa; border: 1px solid #dfe0e7; border-radius: 50%; background: white; font-size: .6rem; font-weight: 800; }.step.done > span { color: white; border-color: var(--green); background: var(--green); }.step.current > span { color: white; border-color: var(--violet); background: var(--violet); box-shadow: 0 0 0 5px var(--violet-soft); }.step strong, .step small { display: block; }.step strong { font-size: .66rem; }.step small { margin-top: 3px; color: #9a9dac; font-size: .54rem; }
.empty-state { display: flex; min-height: 330px; flex-direction: column; align-items: center; justify-content: center; padding: 40px; text-align: center; }.empty-state.compact { min-height: 270px; }.empty-state > span { display: grid; width: 64px; height: 64px; place-items: center; color: var(--violet); border-radius: 50%; background: var(--violet-soft); font-size: 1.8rem; }.empty-state h3 { margin: 17px 0 6px; font-size: .9rem; font-weight: 800; }.empty-state p { max-width: 340px; color: var(--muted); font-size: .67rem; }.empty-state > a:not(.btn) { color: var(--violet); font-size: .68rem; font-weight: 800; }

/* Media library */
.upload-panel { display: flex; align-items: center; gap: 30px; margin-bottom: 22px; padding: 24px; color: white; border-radius: 11px; background: var(--navy) url("../theme/demos/digital-agency-2/bg/bg-3.png") right center/auto 100% no-repeat; }.upload-copy { display: flex; min-width: 280px; align-items: center; gap: 14px; }.upload-copy > span { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 13px; background: var(--violet); font-size: 1.4rem; }.upload-copy h2 { margin: 0 0 4px; font-size: .9rem; font-weight: 800; }.upload-copy p { max-width: 250px; margin: 0; color: #85899e; font-size: .6rem; line-height: 1.5; }.upload-form { display: flex; width: 100%; align-items: center; gap: 14px; }.upload-fields { display: grid; width: 100%; grid-template-columns: 1.2fr 1fr; gap: 10px; }.file-drop { display: flex; min-height: 78px; align-items: center; gap: 12px; padding: 12px 15px; cursor: pointer; border: 1px dashed #4b506c; border-radius: 8px; background: rgba(255,255,255,.035); }.file-drop.dragover { border-color: var(--violet); background: rgba(120,86,255,.13); }.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }.file-drop > i { color: #a997ff; font-size: 1.45rem; }.file-drop strong, .file-drop small { display: block; }.file-drop strong { max-width: 220px; overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }.file-drop small { margin-top: 4px; color: #70758a; font-size: .5rem; }.upload-meta { display: flex; flex-direction: column; gap: 7px; }.upload-meta .form-control { min-height: 34px; padding: .45rem .65rem; color: white; border-color: #363b54; background: #1b1e34; font-size: .62rem; }.upload-meta textarea { resize: none; }.upload-form > .btn { flex: 0 0 auto; font-size: .67rem; }
.library-panel { overflow: hidden; }.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px 22px; border-bottom: 1px solid var(--border); }.library-tabs { display: flex; gap: 6px; }.library-tabs a { padding: 8px 11px; color: #787c8f; border-radius: 7px; font-size: .65rem; font-weight: 700; }.library-tabs a.active { color: var(--violet); background: var(--violet-soft); }.library-tabs span { margin-left: 4px; color: #aaaeba; font-size: .52rem; }.library-search { position: relative; display: flex; }.library-search > i { position: absolute; top: 50%; left: 10px; color: #a1a4b2; transform: translateY(-50%); }.library-search input { width: 230px; height: 34px; padding: 0 8px 0 32px; border: 1px solid var(--border); border-radius: 7px 0 0 7px; outline: 0; font-size: .62rem; }.library-search input:focus { border-color: var(--violet); }.library-search button { color: white; border: 0; border-radius: 0 7px 7px 0; background: var(--violet); padding: 0 12px; font-size: .58rem; font-weight: 700; }
.media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 22px; }.media-card { overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: white; transition: .2s ease; }.media-card:hover { box-shadow: 0 12px 30px rgba(20,22,42,.09); transform: translateY(-2px); }.media-preview { position: relative; display: flex; height: 155px; align-items: center; justify-content: center; overflow: hidden; background: #eceef4; }.media-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }.media-card:hover img { transform: scale(1.035); }.media-preview.video { flex-direction: column; gap: 7px; color: white; background: #242840; }.media-preview.video > i { font-size: 2.5rem; }.media-preview.video > span { color: #898da1; font-size: .56rem; font-weight: 800; }.media-badge { position: absolute; top: 9px; left: 9px; padding: 5px 7px; color: white; border-radius: 5px; background: rgba(15,17,31,.72); backdrop-filter: blur(8px); font-size: .48rem; font-weight: 700; }.media-info { padding: 13px; }.media-info h3 { margin: 0; overflow: hidden; font-size: .7rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.media-info p { margin: 4px 0 10px; color: #9a9dab; font-size: .53rem; }.media-info > div { display: flex; align-items: center; color: var(--green); font-size: .52rem; font-weight: 700; }.media-info .ready-dot { width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--green); }.media-info a { margin-left: auto; color: #85899b; font-size: .85rem; }

/* Profile */
.profile-grid { display: grid; grid-template-columns: 270px 1fr; gap: 18px; align-items: start; }.profile-summary { text-align: center; }.profile-avatar { display: grid; width: 88px; height: 88px; margin: 8px auto 17px; place-items: center; color: white; border-radius: 24px; background: var(--violet); box-shadow: 0 15px 35px rgba(120,86,255,.24); font-size: 1.8rem; font-weight: 800; }.profile-summary h2 { margin: 0 0 3px; font-size: .95rem; font-weight: 800; }.profile-summary > p { color: var(--muted); font-size: .63rem; }.role-badge { display: inline-flex; align-items: center; gap: 5px; margin: 5px 0 23px; padding: 6px 9px; color: var(--violet); border-radius: 20px; background: var(--violet-soft); font-size: .55rem; font-weight: 800; }.profile-summary dl { margin: 0; text-align: left; }.profile-summary dl div { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border); }.profile-summary dt, .profile-summary dd { margin: 0; font-size: .58rem; }.profile-summary dt { color: var(--muted); }.profile-summary dd { font-weight: 700; }.profile-forms { display: flex; flex-direction: column; gap: 18px; }.profile-form { display: flex; flex-direction: column; gap: 16px; }.profile-form small { display: block; margin-top: 5px; color: #9a9dac; font-size: .55rem; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.profile-form .btn { align-self: flex-start; font-size: .68rem; }

@media (max-width: 1199px) {
    .site-body .hero-grid { gap: 32px; }
    .hero-product { margin-left: 0; }
    .site-body .feature-card { padding: 35px 28px; }
    .workflow-grid, .security-grid { gap: 45px; }
    .metric-row > div { flex-direction: column; align-items: flex-start; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }.media-grid { grid-template-columns: repeat(3, 1fr); }.upload-panel { align-items: stretch; flex-direction: column; }.upload-copy { min-width: 0; }.upload-copy p { max-width: none; }
}
@media (max-width: 991px) {
    .site-footer .container { grid-template-columns: 1fr auto; gap: 22px 34px; }.footer-copyright { grid-column: 1 / -1; width: 100%; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); text-align: right; }.legal-shell { grid-template-columns: 1fr; max-width: 780px; }.legal-summary { position: static; }
    .site-nav { position: relative; min-height: 80px; gap: 16px; }
    .site-menu-button { display: inline-flex; }
    .site-login { margin-left: 0; flex-shrink: 0; }
    .site-links { position: absolute; top: 100%; right: 16px; left: 16px; display: none; flex-direction: column; gap: 0; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; padding: 12px; border: 1px solid #30344b; border-radius: 16px; background: #11182e; box-shadow: 0 18px 44px rgba(0,0,0,.25); }
    .site-links.open { display: flex; }
    .site-links a { padding: 14px; border-radius: 8px; font-size: .95rem; }
    .site-links a:hover, .site-links a:focus-visible { background: rgba(128,111,255,.12); }
    .site-links a::after { display: none; }
    .site-body .hero { min-height: 0; }
    .site-body .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 52px; padding-top: 144px; padding-bottom: 124px; }
    .hero-copy { width: 100%; max-width: 680px; margin-inline: auto; padding: 0; }
    .hero-product { width: min(680px, 100%); margin: 0 auto; }
    .product-window { transform: none; }
    .hero-scroll { display: none; }
    .feature-grid { grid-template-columns: minmax(0, 1fr); }
    .site-body .feature-card { min-height: 0; padding: 32px; }
    .feature-card > i { margin-bottom: 24px; }
    .workflow-grid, .security-grid { grid-template-columns: minmax(0, 1fr); }
    .workflow-visual { max-width: 540px; width: 100%; margin: 0 auto; }
    .security-grid { gap: 40px; }
    .auth-shell { grid-template-columns: minmax(400px, 44%) 1fr; }.auth-showcase { padding: 42px; }.app-sidebar { transform: translateX(-100%); transition: transform .25s ease; }.app-sidebar.open { transform: translateX(0); }.app-main { width: 100%; margin-left: 0; }.topbar-menu { display: block; margin-right: 15px; }.sidebar-backdrop { position: fixed; z-index: 35; inset: 0; background: rgba(9,11,24,.58); }.sidebar-backdrop.open { display: block; }.dashboard-grid { grid-template-columns: 1fr; }.media-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .site-footer { padding: 36px 0; }.site-footer .container { grid-template-columns: 1fr; justify-items: center; gap: 18px; text-align: center; }.footer-brand { justify-self: center; }.site-footer-links, .legal-footer nav { width: 100%; justify-content: center; gap: 28px; }.footer-copyright { grid-column: auto; justify-self: stretch; padding-top: 18px; text-align: center; }.legal-main { padding: 42px 0 62px; }.legal-summary { padding: 26px; }.legal-document { padding-top: 0; }.legal-lead { font-size: 1.03rem; }
    .site-nav { min-height: 76px; gap: 12px; }
    .site-login { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; font-size: 0; }
    .site-login i { margin: 0; font-size: 1.2rem; }
    .site-body .hero-grid { padding-top: 120px; padding-bottom: 96px; gap: 40px; }
    .hero h1 { font-size: clamp(2.5rem, 8.5vw + .5rem, 3.8rem); line-height: 1.06; letter-spacing: -.055em; }
    .hero-copy > p { max-width: 36rem; font-size: 1rem; line-height: 1.75; }
    .hero-actions { margin-top: 28px; }
    .hero-proof { margin-top: 30px; font-size: .75rem; line-height: 1.6; }
    .hero-product { width: 100%; }
    .product-window { min-height: 0; }
    .floating-card { display: none; }
    .section-heading { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 32px; }
    .feature-intro, .workflow-section, .security-section { padding: 68px 0; }
    .section-heading h2, .security-grid h2, .workflow-copy h2 { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.12; }
    .workflow-visual { min-height: 440px; }
    .flow-pc { right: 50%; width: min(430px, 100%); transform: translateX(50%); }
    .flow-cloud { right: 50%; max-width: 100%; transform: translateX(50%); }
    .flow-line { right: 50%; }
    .flow-tag { display: none; }
    .pc-screen { height: 210px; gap: 12px; padding: 14px; }
    .pc-screen > i { flex-shrink: 0; width: 48px; height: 48px; }
    .final-cta .container { align-items: flex-start; flex-direction: column; }
    .final-cta .btn { flex-shrink: 0; }
    .legal-header .site-nav { flex-wrap: wrap; gap: 8px 16px; padding-block: 14px; }
    .legal-footer .container { gap: 18px; }
    .auth-shell { display: block; }.auth-showcase { display: none; }.auth-panel { min-height: 100vh; padding: 35px 22px; }.auth-mobile-brand { display: inline-flex; }.app-topbar { padding: 0 18px; }.user-copy, .user-button > i { display: none; }.app-content { padding: 24px 16px; }.app-footer { padding: 16px; }.page-heading { align-items: flex-start; }.page-heading .btn { font-size: 0; padding: .7rem; }.page-heading .btn i { margin: 0; font-size: 1.2rem; }.stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.stat-card { min-height: 104px; padding: 14px; }.stat-icon { width: 38px; height: 38px; }.dashboard-grid { margin-top: 10px; }.panel-card { padding: 18px; }.security-banner { align-items: flex-start; }.security-banner a { display: none; }.upload-form { align-items: stretch; flex-direction: column; }.upload-fields { grid-template-columns: 1fr; }.library-toolbar { align-items: stretch; flex-direction: column; }.library-tabs { overflow-x: auto; }.library-search input { width: 100%; }.library-search { width: 100%; }.library-search input { flex: 1; }.profile-grid { grid-template-columns: 1fr; }.form-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .container { --bs-gutter-x: 2rem; }.brand { font-size: 1.12rem; }.brand-mark { width: 32px; height: 32px; }
    .site-body .hero-kicker { padding: 8px 12px; font-size: .625rem; letter-spacing: .08em; line-height: 1.6; }
    .hero-actions { align-items: stretch; flex-direction: column; gap: 18px; }
    .hero-actions .btn { width: 100%; padding: 16px; }
    .hero-secondary { align-self: flex-start; min-height: 44px; }
    .hero-secondary > span { width: 44px; height: 44px; flex-shrink: 0; }
    .product-sidebar { flex-basis: 42px; gap: 16px; padding-top: 16px; }
    .product-sidebar i { padding: 7px; font-size: .9rem; }
    .mini-brand { width: 22px; height: 22px; margin-bottom: 8px; }
    .product-content { padding: 0 12px 14px; }
    .product-top { height: 46px; }
    .product-title { padding: 16px 0; gap: 8px; }
    .product-title strong { font-size: 1rem; }
    .product-title small { font-size: .6rem; }
    .product-create { display: none; }
    .metric-row { gap: 6px; }
    .metric-row > div { gap: 8px; padding: 10px 8px; }
    .metric-row small { font-size: .6rem; }
    .metric-row strong { font-size: .9rem; }
    .product-panels { grid-template-columns: minmax(0, 1fr); }
    .product-schedule { display: none; }
    .product-chart { min-height: 158px; padding: 12px; }
    .product-chart > span { font-size: .65rem; }
    .bars { height: 98px; gap: 7px; }
    .site-body .feature-card { padding: 28px 24px; border-radius: 22px; }
    .site-body .security-list article { padding: 20px; gap: 14px; }
    .site-body .security-list article:first-child { padding-top: 20px; }
    .security-list article > i { width: 40px; height: 40px; }
    .pc-screen strong { font-size: .92rem; }
    .pc-screen small { font-size: .65rem; }
    .final-cta { padding: 60px 0; }
    .final-cta .btn { width: 100%; padding-inline: 16px; }
    .stats-grid { grid-template-columns: 1fr; }.stat-card { min-height: 92px; }.recent-item { grid-template-columns: 40px 1fr 18px; }.recent-item time { display: none; }.media-grid { grid-template-columns: 1fr; }.media-preview { height: 205px; }.library-tabs a { padding: 8px; }.upload-panel { padding: 18px; }.app-footer span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .site-body *, .site-body *::before, .site-body *::after { transition: none; }
}