/**
 * Pivio landing page. Standalone stylesheet: no Bootstrap, no shell.
 * Brand tokens shared with the product (navy, orange, Plus Jakarta Sans)
 * so the marketing page looks like the app it sells.
 */

:root {
    --ld-navy: #232B6A;
    --ld-navy-deep: #1c2352;
    --ld-navy-hover: #1b2153;
    --ld-orange: #FF8C3F;
    --ld-orange-soft: #fff3ea;
    --ld-ink: #191b22;
    --ld-ink-2: #3a3d49;
    --ld-mut: #7c7f8b;
    --ld-mut-2: #9a9da8;
    --ld-line: #e7e8ec;
    --ld-page: #ffffff;
    --ld-tint: #f5f6f8;
    --ld-radius: 16px;
    --ld-radius-sm: 10px;
    --ld-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
    --ld-shadow-shot: 0 24px 64px rgba(28, 35, 82, .18), 0 2px 8px rgba(28, 35, 82, .08);
    --ld-max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.landing {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    color: var(--ld-ink);
    background: var(--ld-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.landing a { text-decoration: none; color: inherit; }
.landing img { max-width: 100%; display: block; }

.ld-container { max-width: var(--ld-max); margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------------ nav */
.ld-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 68px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ld-nav.scrolled { border-bottom-color: var(--ld-line); box-shadow: 0 4px 20px rgba(16, 24, 40, .05); }

.ld-nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.ld-nav-logo img { height: 32px; }
.ld-nav-links { display: flex; gap: 24px; margin-left: 8px; }
.ld-nav-links a { font-size: 14.5px; font-weight: 600; color: var(--ld-ink-2); }
.ld-nav-links a:hover { color: var(--ld-navy); }
.ld-nav-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ------------------------------------------------------------- buttons */
.ld-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 22px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    white-space: nowrap;
}

.ld-btn:active { transform: translateY(1px); }

.landing .ld-btn-primary { background: var(--ld-navy); color: #fff; box-shadow: 0 2px 8px rgba(35, 43, 106, .28); }
.landing .ld-btn-primary:hover { background: var(--ld-navy-hover); color: #fff; box-shadow: 0 6px 18px rgba(35, 43, 106, .32); }

.landing .ld-btn-ghost { background: transparent; color: var(--ld-ink-2); border-color: var(--ld-line); }
.landing .ld-btn-ghost:hover { border-color: var(--ld-mut-2); color: var(--ld-ink); }

.landing .ld-btn-inverse { background: var(--ld-orange); color: #2b1503; box-shadow: 0 2px 8px rgba(255, 140, 63, .35); }
.landing .ld-btn-inverse:hover { background: #ff9c59; color: #2b1503; box-shadow: 0 6px 18px rgba(255, 140, 63, .4); }

.ld-btn-sm { padding: 9px 16px; font-size: 14px; }

/* ---------------------------------------------------------------- hero */
.ld-hero {
    padding: 28px 0 64px;
    overflow: hidden;
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(35, 43, 106, .05) 0%, transparent 70%),
        radial-gradient(40% 30% at 85% 55%, rgba(255, 140, 63, .06) 0%, transparent 70%);
}

.ld-hero-center { max-width: 780px; margin: 0 auto; text-align: center; }
.ld-hero-center .ld-hero-sub { margin-left: auto; margin-right: auto; }
.ld-hero-center .ld-hero-ctas { justify-content: center; }

.ld-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ld-mut);
}

.ld-facts span { display: inline-flex; align-items: center; gap: 6px; }
.ld-facts i { color: #16a34a; font-size: 13px; }


/* Hero demo: one browser window holding the product video. Replaces the
   three-screenshot collage — a 30s loop of real use sells it better than
   stills, and it is the same 1280px frame so the layout is unchanged. */
.ld-demo {
    position: relative;
    margin-top: 26px;
}

.ld-demo-frame {
    /* Also capped by the height left below the headline, so the whole demo
       lands above the fold instead of asking the visitor to scroll for it.
       415px is the hero text, facts row and breathing space. */
    width: min(100%, 1120px, calc((100vh - 415px) * 16 / 9));
    margin: 0 auto;
    /* The recording carries its own gradient backdrop, so a browser chrome
       around it would frame an already-framed picture. */
    border-radius: var(--ld-radius);
    overflow: hidden;
    box-shadow: var(--ld-shadow-shot);
}

.ld-demo-video {
    display: block;
    width: 100%;
    height: auto;
    /* the recording is 16:9 — reserve the box so the hero never jumps */
    aspect-ratio: 16 / 9;
    background: #f1f2f5;
    object-fit: cover;
}

.ld-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ld-orange-soft);
    color: #c05e14;
    border: 1px solid #ffd9bd;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 22px;
}

.ld-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
}

.ld-hero h1 .accent { color: var(--ld-orange); }

.ld-hero-sub {
    margin: 0 0 22px;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--ld-mut);
    max-width: 46ch;
}

.ld-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.ld-shot-frame {
    background: #fff;
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
    box-shadow: var(--ld-shadow-shot);
    overflow: hidden;
}

.ld-shot-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--ld-line);
    background: #fafafb;
}

.ld-shot-bar span { width: 10px; height: 10px; border-radius: 999px; background: #e4e4e7; }

.ld-shot-url {
    /* full-width omnibox, like a real browser */
    flex: 1;
    margin-left: 10px;
    text-align: center;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ld-mut);
    background: #fff;
    border: 1px solid var(--ld-line);
    border-radius: 999px;
    padding: 4px 14px;
    line-height: 1.3;
}

.ld-hero-shot { transform: rotate(0.6deg) translateY(0); }

/* ------------------------------------------------------------ sections */
.ld-section { padding: 88px 0; }
.ld-section.tint { background: var(--ld-tint); }

.ld-section-head { max-width: 640px; margin: 0 0 48px; }
.ld-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.ld-section-head h2 {
    margin: 0 0 14px;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    letter-spacing: -0.025em;
    font-weight: 800;
    line-height: 1.15;
}

.ld-section-head p { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--ld-mut); }

/* ----------------------------------------------------------- bento grid */
.ld-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.ld-cell {
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
    background: #fff;
    box-shadow: var(--ld-shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ld-cell-pad { padding: 26px 28px; }

.ld-cell h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.ld-cell p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ld-mut); }

.ld-cell-shot { margin-top: auto; padding: 22px 0 0 28px; }
.ld-cell-shot img {
    border-top-left-radius: var(--ld-radius-sm);
    border: 1px solid var(--ld-line);
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 10px 30px rgba(28, 35, 82, .12);
}

.ld-cell-navy { background: var(--ld-navy-deep); border-color: var(--ld-navy-deep); }
.ld-cell-navy h3 { color: #fff; }
.ld-cell-navy p { color: rgba(255, 255, 255, .72); }

.ld-cell-orange { background: var(--ld-orange-soft); border-color: #ffd9bd; }
.ld-cell-orange h3 { color: #a34c0d; }
.ld-cell-orange p { color: #8a5a35; }

.ld-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: var(--ld-tint);
    color: var(--ld-navy);
    font-size: 18px;
}

.ld-cell-navy .ld-icon { background: rgba(255, 255, 255, .12); color: var(--ld-orange); }
.ld-cell-orange .ld-icon { background: rgba(255, 255, 255, .7); color: #c05e14; }

.ld-b-wide { grid-column: span 7; }
.ld-b-tall { grid-column: span 5; }
.ld-b-third { grid-column: span 4; }

/* ------------------------------------------------------ latvia section */
.ld-split {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 64px;
    align-items: center;
}

.ld-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }

.ld-checklist li { display: flex; gap: 14px; align-items: flex-start; }

.ld-check {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #f0fdf4;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-top: 2px;
}

.ld-checklist h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.ld-checklist p { margin: 0; font-size: .93rem; color: var(--ld-mut); line-height: 1.55; }

/* --------------------------------------------------------------- steps */
.ld-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.ld-step {
    background: #fff;
    border-radius: var(--ld-radius);
    padding: 28px 30px 30px;
    box-shadow: var(--ld-shadow-card);
}

.ld-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--ld-navy);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 20px;
}

.ld-step-num.accent { background: var(--ld-orange); color: #2b1503; }

.ld-step h3 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.ld-step p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ld-mut); }

/* ----------------------------------------------------------------- cta */
.ld-cta {
    background: var(--ld-navy-deep);
    border-radius: 22px;
    padding: 64px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.ld-cta::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 63, .25) 0%, transparent 70%);
    pointer-events: none;
}

.ld-cta h2 { margin: 0 0 10px; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; }
.ld-cta p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 1.02rem; max-width: 46ch; }

/* -------------------------------------------------------------- footer */
.ld-footer { padding: 42px 0 48px; border-top: 1px solid var(--ld-line); margin-top: 88px; }
.ld-footer-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ld-footer img { height: 26px; }
.ld-footer-links { display: flex; gap: 20px; margin-left: auto; }
.ld-footer a { font-size: 14px; font-weight: 600; color: var(--ld-mut); }
.ld-footer a:hover { color: var(--ld-ink); }
.ld-footer-copy { font-size: 13.5px; color: var(--ld-mut-2); width: 100%; margin-top: 14px; }

/* ------------------------------------------------------------- reveals */
@media (prefers-reduced-motion: no-preference) {
    .ld-reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
    }

    .ld-reveal.in { opacity: 1; transform: none; }

    .ld-hero-shot { transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 991px) {
    .ld-split { grid-template-columns: 1fr; gap: 40px; }
    .ld-hero { padding: 40px 0 64px; }
    .ld-demo { margin-top: 40px; }
    .ld-nav-links { display: none; }
    .ld-b-wide, .ld-b-tall, .ld-b-third { grid-column: span 12; }
    .ld-steps { grid-template-columns: 1fr; }
    .ld-section { padding: 60px 0; }
    .ld-cta { padding: 44px 28px; }
}

/* ------------------------------------------------------ language switch */
.landing .ld-lang {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: #f1f2f5;
    border-radius: 9px;
}
.landing .ld-lang-opt {
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ld-mut);
}
.landing .ld-lang-opt:hover { color: var(--ld-ink); }
.landing .ld-lang-opt.is-active { background: #fff; color: var(--ld-navy); box-shadow: 0 1px 2px rgba(16,24,40,.08); }

@media (max-width: 767px) {
    .landing .ld-lang-opt { padding: 5px 7px; font-size: 11.5px; }
}

/* Someone who asked the OS for less motion should not get a looping video:
   the poster frame stands in for it. */
@media (prefers-reduced-motion: reduce) {
    .ld-demo-video { display: none; }
    .ld-demo-frame {
        background-image: var(--ld-demo-poster);
        background-size: cover;
        background-position: top center;
        aspect-ratio: 16 / 9;
    }
}

/* The nav row carries logo, language switch and two buttons; without this the
   logo is the flex item that gives, and it squashes instead of scaling. */
.ld-nav-logo { flex-shrink: 0; }
.ld-nav-logo img { height: 32px; width: auto; }

@media (max-width: 600px) {
    .ld-nav-inner { gap: 10px; }
    .ld-nav-actions { gap: 6px; }
    .ld-nav-actions .ld-btn-sm { padding: 8px 11px; font-size: 13px; }
    .landing .ld-lang-opt { padding: 4px 6px; font-size: 11px; }
    .ld-nav-logo img { height: 26px; }
}