/*
 * landing-svetaines.css — GBareikis child theme
 * Specifinis CSS tik /paslaugos/internetiniu-svetainiu-kurimas/ puslapiui
 * Priklauso nuo: base.css
 */

/* ══ HERO ══ */
.hero {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 70% 55% at 30% -5%, rgba(10,69,53,0.5) 0%, transparent 65%),
        radial-gradient(ellipse 50% 45% at 85% 30%, rgba(45,35,120,0.22) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 10% 80%, rgba(200,194,255,0.06) 0%, transparent 55%),
        var(--g900);
    display: flex;
    align-items: center;
    padding: 150px 0 110px;
    position: relative;
    overflow: hidden;
    margin-top: -130px;
}

.personal-wrap.fu.vis .pill.pill-lav {
    max-width: 203px;
}

.hero .amb1 {
    width: 600px;
    height: 600px;
    background: rgba(200,194,255,0.07);
    top: -180px;
    right: -100px;
}
.hero .amb2 {
    width: 500px;
    height: 500px;
    background: rgba(218,255,153,0.05);
    bottom: -80px;
    left: -80px;
}
.hero .amb3 {
    width: 350px;
    height: 350px;
    background: rgba(120,100,255,0.05);
    top: 35%;
    right: 10%;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    background: rgba(200,194,255,0.09);
    border: 1px solid rgba(200,194,255,0.22);
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--lav);
    letter-spacing: 0.04em;
    margin-bottom: 28px;
}
.hero-eyebrow span {
    opacity: 0.5;
}

.hero h1 {
    color: var(--white);
    margin-bottom: 24px;
}
.hero-sub {
    font-size: 1.08rem;
    color: rgba(255,255,255,0.56);
    line-height: 1.75;
    margin-bottom: 42px;
    max-width: 490px;
}
.hero-sub strong {
    color: rgba(255,255,255,0.88);
    font-weight: 600;
}
.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 52px;
}
.hero-proof {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}
.hp-item {
    display: flex;
    flex-direction: column;
}
.hp-num {
    font-size: 1.95rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--white);
    line-height: 1;
}
.hp-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.38);
    margin-top: 3px;
    font-weight: 500;
}

/* Results panel */
.results-panel {
    position: relative;
}
.rp-card {
    border-radius: var(--r-xl);
    overflow: hidden;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(60px) saturate(200%);
}
.rp-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rp-header-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    gap: 8px;
}
.rp-live {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--lime);
    font-weight: 600;
}
.rp-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}
.rp-serp {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.serp-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.3);
    font-weight: 700;
    margin-bottom: 12px;
}
.serp-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 6px;
}
.serp-item.top {
    background: rgba(218,255,153,0.07);
    border: 1px solid rgba(218,255,153,0.15);
}
.serp-pos {
    font-size: 1rem;
    font-weight: 900;
    min-width: 22px;
}
.serp-item.top .serp-pos {
    color: var(--lime);
}
.serp-item:not(.top) .serp-pos {
    color: rgba(255,255,255,0.2);
}
.serp-txt h5 {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 2px;
}
.serp-item.top .serp-txt h5 {
    color: #7db8f7;
}
.serp-item:not(.top) .serp-txt h5 {
    color: rgba(255,255,255,0.4);
}
.serp-url {
    font-size: 0.7rem;
    color: rgba(218,255,153,0.55);
}
.serp-item:not(.top) .serp-url {
    color: rgba(255,255,255,0.2);
}
.rp-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,0.07);
}
.rp-stat {
    background: rgba(5,15,10,0.6);
    padding: 18px 18px 16px;
    text-align: center;
}
.rp-stat-n {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 4px;
}
.rp-stat:nth-child(1) .rp-stat-n {
    background: linear-gradient(135deg, var(--lime), #a8f040);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.rp-stat:nth-child(2) .rp-stat-n {
    background: linear-gradient(135deg, var(--lav), #a09aff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.rp-stat:nth-child(3) .rp-stat-n {
    background: linear-gradient(135deg, #7db8f7, var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.rp-stat-l {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.35);
    font-weight: 500;
}
.rp-badge {
    position: absolute;
    bottom: -16px;
    left: -20px;
    background: rgba(10,20,15,0.92);
    border: 1px solid rgba(218,255,153,0.25);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(20px);
}
.rp-badge-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(218,255,153,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rp-badge-ico svg {
    width: 18px;
    height: 18px;
    color: var(--lime);
}
.rp-badge-label {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
}
.rp-badge-val {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1.1;
}

/* ══ TRUST STRIP ══ */
.trust-strip {
    border-top: 1px solid rgba(255,255,255,0.055);
    border-bottom: 1px solid rgba(255,255,255,0.055);
    background: rgba(255,255,255,0.018);
    padding: 20px 0;
}
.ts-inner {
    display: flex;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
}
.ts-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.35);
    font-weight: 500;
}
.ts-item strong {
    color: rgba(255,255,255,0.7);
}
.ts-chk {
    width: 13px;
    height: 13px;
    color: var(--lime);
    flex-shrink: 0;
}

/* ══ PORTFOLIO ══ */
.port-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 60px;
}
.port-story {
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--g800);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.35s ease;
}
.port-story:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 70px rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.14);
}
.port-story.wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.port-screen-wrap {
    position: relative;
    background: var(--g700);
    overflow: hidden;
}
.port-story:not(.wide) .port-screen-wrap {
    height: 200px;
}
.port-story.wide .port-screen-wrap {
    min-height: 220px;
}
.port-nav-bar {
    height: 30px;
    background: rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 5px;
}
.p-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.p-dot:nth-child(1) { background: #ff5f57; }
.p-dot:nth-child(2) { background: #febc2e; }
.p-dot:nth-child(3) { background: #28c840; }
.p-screen {
    padding: 14px 16px 10px;
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.p-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.p-txt {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.p-line {
    border-radius: 3px;
}
.p-line.h  { height: 9px; width: 65%; background: rgba(255,255,255,0.6); }
.p-line.s  { height: 5px; width: 88%; background: rgba(255,255,255,0.22); }
.p-line.s2 { height: 5px; width: 70%; background: rgba(255,255,255,0.15); }
.p-img {
    width: 52px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
}
.p-btn {
    height: 20px;
    width: 78px;
    border-radius: 10px;
    margin-top: 2px;
}
.p-cards {
    display: flex;
    gap: 7px;
}
.p-mini {
    flex: 1;
    height: 32px;
    border-radius: 7px;
}

.ps-green .port-screen-wrap { background: linear-gradient(145deg, rgba(218,255,153,0.1) 0%, rgba(5,25,18,0.8) 100%); }
.ps-green .p-img             { background: rgba(218,255,153,0.3); }
.ps-green .p-btn             { background: rgba(218,255,153,0.5); }
.ps-green .p-mini            { background: rgba(218,255,153,0.12); }
.ps-green .p-mini:nth-child(2) { background: rgba(218,255,153,0.07); }

.ps-lav .port-screen-wrap    { background: linear-gradient(145deg, rgba(200,194,255,0.12) 0%, rgba(15,10,40,0.8) 100%); }
.ps-lav .p-img               { background: rgba(200,194,255,0.3); }
.ps-lav .p-btn               { background: rgba(160,154,255,0.5); }
.ps-lav .p-mini              { background: rgba(200,194,255,0.12); }
.ps-lav .p-mini:nth-child(2) { background: rgba(200,194,255,0.07); }

.ps-blue .port-screen-wrap   { background: linear-gradient(145deg, rgba(218,234,253,0.12) 0%, rgba(10,20,45,0.8) 100%); }
.ps-blue .p-img              { background: rgba(125,184,247,0.3); }
.ps-blue .p-btn              { background: rgba(125,184,247,0.5); }
.ps-blue .p-mini             { background: rgba(125,184,247,0.12); }
.ps-blue .p-mini:nth-child(2){ background: rgba(125,184,247,0.07); }

.port-story-body {
    padding: 26px 28px 28px;
}
.port-story.wide .port-story-body {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.port-cat-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 11px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.tag-g { background: rgba(218,255,153,0.1); color: var(--lime); }
.tag-l { background: rgba(200,194,255,0.1); color: var(--lav); }
.tag-b { background: rgba(125,184,247,0.12); color: #7db8f7; }

.port-story-body h3 {
    color: var(--white);
    font-size: 1.05rem;
    margin-bottom: 14px;
}
.port-story-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.port-meta-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.85rem;
}
.meta-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.28);
    min-width: 70px;
    padding-top: 2px;
}
.meta-val {
    color: rgba(255,255,255,0.6);
    line-height: 1.55;
}
.port-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    margin-top: 4px;
}
.ps-green .port-result { background: rgba(218,255,153,0.07); border: 1px solid rgba(218,255,153,0.15); }
.ps-lav   .port-result { background: rgba(200,194,255,0.07); border: 1px solid rgba(200,194,255,0.15); }
.ps-blue  .port-result { background: rgba(125,184,247,0.07); border: 1px solid rgba(125,184,247,0.15); }

.result-num {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}
.ps-green .result-num {
    background: linear-gradient(135deg, var(--lime), #a8f040);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ps-lav .result-num {
    background: linear-gradient(135deg, var(--lav), #a09aff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ps-blue .result-num {
    background: linear-gradient(135deg, #7db8f7, var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.result-desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.45;
}

/* ══ BENTO – Kas naudoja? ══ */
.bento-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.bv-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 28px 26px 26px;
    transition: border-color .25s, background .25s;
    position: relative;
    overflow: hidden;
}
.bv-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glow, transparent);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.bv-card:hover {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
}
.bv-card:hover::before {
    opacity: 1;
}
.bv-card.glow-lav  { --glow: radial-gradient(circle at top left, rgba(200,194,255,.07), transparent 60%); }
.bv-card.glow-lime { --glow: radial-gradient(circle at top left, rgba(218,255,153,.07), transparent 60%); }
.bv-card.glow-blue { --glow: radial-gradient(circle at top left, rgba(218,234,253,.07), transparent 60%); }
.bv-card.glow-peach{ --glow: radial-gradient(circle at top left, rgba(255,235,225,.07), transparent 60%); }

.bv-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.bv-ico svg { width: 20px; height: 20px; }
.bv-ico.lav   { background: rgba(200,194,255,.12); color: var(--lav); }
.bv-ico.lime  { background: rgba(218,255,153,.10); color: var(--lime); }
.bv-ico.blue  { background: rgba(218,234,253,.10); color: var(--blue); }
.bv-ico.peach { background: rgba(255,235,225,.10); color: var(--peach); }

.bv-cat {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
    margin-bottom: 8px;
}
.bv-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 10px;
    line-height: 1.3;
    letter-spacing: -.015em;
}
.bv-desc {
    font-size: .86rem;
    color: rgba(255,255,255,.56);
    line-height: 1.6;
}

/* ══ PERSONAL – kodėl aš, ne agentūra ══ */
.personal-wrap {
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, rgba(200,194,255,0.08) 0%, rgba(5,25,18,0.3) 50%, rgba(200,194,255,0.04) 100%);
    border: 1px solid rgba(200,194,255,0.14);
    overflow: hidden;
    position: relative;
}
.personal-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,194,255,0.35), transparent);
}
.personal-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.personal-left {
    padding: 64px 56px;
    border-right: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.personal-left::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(200,194,255,0.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.personal-quote {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--white);
    margin-bottom: 24px;
}
.personal-quote em {
    font-style: normal;
    background: linear-gradient(135deg, #C8C2FF 0%, #a09aff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.personal-desc {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.75;
    max-width: 380px;
}
.personal-right {
    padding: 64px 52px;
}
.pers-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.pers-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.pers-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pers-ico svg { width: 20px; height: 20px; }
.pers-ico.lav   { background: rgba(200,194,255,0.1); border: 1px solid rgba(200,194,255,0.2); color: var(--lav); }
.pers-ico.lime  { background: rgba(218,255,153,0.1); border: 1px solid rgba(218,255,153,0.2); color: var(--lime); }
.pers-ico.blue  { background: rgba(125,184,247,0.1); border: 1px solid rgba(125,184,247,0.2); color: #7db8f7; }
.pers-ico.peach { background: rgba(255,185,153,0.1); border: 1px solid rgba(255,185,153,0.2); color: #ffb899; }

.pers-txt h3 {
    color: rgba(255,255,255,0.9);
    margin-bottom: 5px;
    font-size: 0.97rem;
}
.pers-txt p {
    font-size: 0.86rem;
    line-height: 1.65;
}

/* ══ WHY – alternating ══ */
.why-alt {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 72px;
}
.why-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}
.why-row.flip {
    direction: rtl;
}
.why-row.flip > * {
    direction: ltr;
}
.why-visual {
    border-radius: var(--r-xl);
    overflow: hidden;
    position: relative;
}
.wv-inner {
    padding: 40px 36px;
}
.wv-stat-big {
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1;
    margin-bottom: 8px;
    display: block;
}
.wv-caption {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.6;
    max-width: 260px;
}
.wv-inner.blue-card {
    background: linear-gradient(145deg, rgba(218,234,253,0.08), rgba(10,20,45,0.5));
    border: 1px solid rgba(125,184,247,0.15);
    border-radius: var(--r-xl);
}
.wv-inner.lime-card {
    background: linear-gradient(145deg, rgba(218,255,153,0.07), rgba(5,25,18,0.5));
    border: 1px solid rgba(218,255,153,0.15);
    border-radius: var(--r-xl);
}
.wv-inner.lav-card {
    background: linear-gradient(145deg, rgba(200,194,255,0.08), rgba(15,10,40,0.5));
    border: 1px solid rgba(200,194,255,0.15);
    border-radius: var(--r-xl);
}
.wv-speed-row {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.wv-speed-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
}
.wv-speed-pill.good {
    background: rgba(218,255,153,0.12);
    color: var(--lime);
    border: 1px solid rgba(218,255,153,0.22);
}
.wv-speed-pill.bad {
    background: rgba(255,80,80,0.1);
    color: rgba(255,120,120,0.8);
    border: 1px solid rgba(255,80,80,0.15);
}
.wv-google-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}
.wv-g-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.82rem;
}
.wv-g-item.pos1 {
    background: rgba(218,255,153,0.08);
    border: 1px solid rgba(218,255,153,0.15);
}
.wv-g-item.pos2,
.wv-g-item.pos3 {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.35);
}
.wv-g-pos {
    font-weight: 900;
    font-size: 0.9rem;
    min-width: 24px;
}
.wv-g-item.pos1 .wv-g-pos {
    color: var(--lime);
}
.why-text .pill  { margin-bottom: 22px; }
.why-text h2     { margin-bottom: 20px; }
.why-text p      { margin-bottom: 16px; }
.why-text p:last-of-type { margin-bottom: 0; }

/* ══ KAS ĮEINA ══ */
.inc-card {
    border-radius: var(--r-xl);
    background: var(--g800);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 56px 60px;
    position: relative;
    overflow: hidden;
}
.inc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(218,255,153,0.3), transparent);
}
.inc-card-amb {
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(218,255,153,0.04);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    bottom: -150px;
    right: -100px;
}
.inc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 44px;
}
.inc-header-text h2 {
    color: var(--white);
}
.inc-header-text p {
    max-width: 480px;
    margin-top: 12px;
}
.inc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 40px;
    position: relative;
    z-index: 1;
}
.inc-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.inc-chk {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(218,255,153,0.1);
    border: 1px solid rgba(218,255,153,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.inc-chk svg {
    width: 11px;
    height: 11px;
    color: var(--lime);
}
.inc-item h3 {
    color: rgba(255,255,255,0.88);
    margin-bottom: 3px;
    font-size: 0.93rem;
}
.inc-item p {
    font-size: 0.82rem;
    line-height: 1.55;
}

/* ══ PROCESAS – timeline ══ */
.timeline {
    position: relative;
    margin-top: 68px;
    padding-left: 48px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: linear-gradient(180deg, rgba(200,194,255,0.4) 0%, rgba(218,255,153,0.4) 50%, rgba(125,184,247,0.4) 100%);
}
.tl-item {
    position: relative;
    margin-bottom: 48px;
}
.tl-item:last-child {
    margin-bottom: 0;
}
.tl-dot {
    position: absolute;
    left: -48px;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 900;
}
.tl-item:nth-child(1) .tl-dot { background: rgba(200,194,255,0.15); border: 2px solid rgba(200,194,255,0.4); color: var(--lav); }
.tl-item:nth-child(2) .tl-dot { background: rgba(218,255,153,0.12); border: 2px solid rgba(218,255,153,0.4); color: var(--lime); }
.tl-item:nth-child(3) .tl-dot { background: rgba(125,184,247,0.12); border: 2px solid rgba(125,184,247,0.4); color: #7db8f7; }

.tl-body {
    background: var(--g800);
    border-radius: var(--r-lg);
    padding: 28px 32px;
    border: 1px solid rgba(255,255,255,0.07);
}
.tl-item:nth-child(1) .tl-body { border-color: rgba(200,194,255,0.12); }
.tl-item:nth-child(2) .tl-body { border-color: rgba(218,255,153,0.12); }
.tl-item:nth-child(3) .tl-body { border-color: rgba(125,184,247,0.12); }

.tl-step-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.tl-item:nth-child(1) .tl-step-label { color: var(--lav); }
.tl-item:nth-child(2) .tl-step-label { color: var(--lime); }
.tl-item:nth-child(3) .tl-step-label { color: #7db8f7; }

.tl-body h3 {
    color: var(--white);
    margin-bottom: 10px;
    font-size: 1.1rem;
}
.tl-body p {
    font-size: 0.9rem;
    line-height: 1.72;
}
.tl-detail {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tl-tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
}
.proc-right-head {
    margin-bottom: 36px;
}
.proc-right-head .pill {
    margin-bottom: 18px;
}
.proc-right-head h2 {
    margin-bottom: 14px;
}
.proc-right-head p {
    max-width: 400px;
}
.proc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.proc-note-card {
    border-radius: var(--r-lg);
    padding: 24px 26px;
}
.proc-note-card:nth-child(1) {
    background: rgba(200,194,255,0.07);
    border: 1px solid rgba(200,194,255,0.14);
}
.proc-note-card:nth-child(2) {
    background: rgba(218,255,153,0.06);
    border: 1px solid rgba(218,255,153,0.13);
}
.proc-note-card .pnc-n {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-bottom: 6px;
    display: block;
}
.proc-note-card:nth-child(1) .pnc-n {
    background: linear-gradient(135deg, var(--lav), #a09aff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.proc-note-card:nth-child(2) .pnc-n {
    background: linear-gradient(135deg, var(--lime), #a8f040);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.proc-note-card p {
    font-size: 0.84rem;
    margin: 0;
    line-height: 1.6;
}

#procesas .proc-outer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* ══ KAINOS ══ */
.price-bands {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 60px;
}
.pb {
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--g800);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.35s ease;
    position: relative;
}
.pb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.pb:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 70px rgba(0,0,0,0.5);
}
.pb.featured {
    background: linear-gradient(165deg, rgba(200,194,255,0.12) 0%, rgba(10,15,50,0.5) 60%, var(--g800) 100%);
    border-color: rgba(200,194,255,0.22);
    transform: scale(1.03);
    box-shadow: 0 28px 70px rgba(80,60,200,0.15), 0 0 0 1px rgba(200,194,255,0.15);
}
.pb.featured::before {
    background: linear-gradient(90deg, transparent, rgba(200,194,255,0.4), transparent);
}
.pb.featured:hover {
    transform: scale(1.03) translateY(-5px);
}
.pb-badge {
    background: linear-gradient(90deg, var(--lav), #a09aff);
    color: #1a1650;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    padding: 9px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.pb-body {
    padding: 32px 28px;
}
.pb-label {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}
.pb-range {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
}
.pb-from {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
}
.pb-price {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--white);
    line-height: 1;
}
.pb-price sup {
    font-size: 1.1rem;
    font-weight: 600;
    vertical-align: super;
    letter-spacing: 0;
}
.pb.featured .pb-price {
    background: linear-gradient(135deg, var(--lav), #a09aff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pb.featured .pb-price sup {
    -webkit-text-fill-color: rgba(200,194,255,0.8);
}
.pb-typical {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
    padding: 6px 0 16px;
}
.pb-typical strong {
    color: rgba(255,255,255,0.6);
}
.pb-desc {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.48);
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 20px;
    line-height: 1.65;
}
.pb-feats {
    list-style: none;
    margin-bottom: 28px;
}
.pb-feats li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 7px 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.62);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pb-feats li:last-child {
    border: none;
}
.pb-chk {
    flex-shrink: 0;
    margin-top: 2px;
}
.pb-chk svg { width: 14px; height: 14px; }
.pb:not(.featured):first-child .pb-chk svg { color: var(--lime); }
.pb.featured .pb-chk svg { color: var(--lav); }
.pb:last-child .pb-chk svg { color: #7db8f7; }

.pb-cta {
    display: block;
    text-align: center;
    padding: 14px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.25s;
}
.cta-lime { background: linear-gradient(135deg, var(--lime), #b8f040); color: var(--g700); }
.cta-lime:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(218,255,153,0.35); }
.cta-lav  { background: linear-gradient(135deg, var(--lav), #a09aff); color: #1a1650; }
.cta-lav:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(200,194,255,0.3); }
.cta-ghost { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.12); }
.cta-ghost:hover { background: rgba(255,255,255,0.12); color: var(--white); }

.price-note {
    margin-top: 24px;
    background: linear-gradient(135deg, rgba(200,194,255,0.07), rgba(218,255,153,0.05));
    border: 1px solid rgba(200,194,255,0.14);
    border-radius: var(--r-lg);
    padding: 22px 30px;
    text-align: center;
}
.price-note p {
    color: rgba(255,255,255,0.62);
    font-size: 0.91rem;
    margin: 0;
}
.price-note strong {
    color: var(--lav);
}

/* ══ FAQ ══ */
.faq-list {
    max-width: 800px;
    margin: 56px auto 0;
}
.fq {
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 8px;
    background: var(--g800);
    border: 1px solid rgba(255,255,255,0.07);
    transition: border-color 0.3s;
}
.fq.open {
    border-color: rgba(200,194,255,0.22);
}
.fq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.96rem;
    color: rgba(255,255,255,0.85);
    user-select: none;
}
.fq-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(200,194,255,0.1);
    border: 1px solid rgba(200,194,255,0.2);
    color: var(--lav);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 300;
    flex-shrink: 0;
    transition: all 0.3s ease;
    line-height: 1;
}
.fq.open .fq-icon {
    transform: rotate(45deg);
    background: rgba(200,194,255,0.18);
}
.fq-a {
    padding: 0 24px 20px;
    font-size: 0.91rem;
    color: rgba(255,255,255,0.5);
    display: none;
    line-height: 1.75;
}
.fq.open .fq-a {
    display: block;
}

/* ══ CTA ══ */
.cta-block {
    background: linear-gradient(135deg, rgba(30,20,70,0.6) 0%, var(--g800) 40%, rgba(5,45,35,0.4) 100%);
    border-radius: var(--r-xl);
    padding: 88px 64px;
    text-align: center;
    border: 1px solid rgba(200,194,255,0.12);
    position: relative;
    overflow: hidden;
}
.cta-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,194,255,0.4), transparent);
}
.cta-amb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}
.cta-amb-1 {
    width: 500px;
    height: 500px;
    background: rgba(200,194,255,0.06);
    top: -150px;
    right: -100px;
}
.cta-amb-2 {
    width: 400px;
    height: 400px;
    background: rgba(218,255,153,0.05);
    bottom: -120px;
    left: -80px;
}
.cta-block h2 {
    color: var(--white);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.cta-block p {
    color: rgba(255,255,255,0.5);
    font-size: 1.05rem;
    max-width: 470px;
    margin: 0 auto 40px;
    position: relative;
    z-index: 1;
}
.cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.cta-trust {
    margin-top: 28px;
    font-size: 0.79rem;
    color: rgba(255,255,255,0.22);
    position: relative;
    z-index: 1;
}

/* ══ CTA mini – tarp sekcijų ══ */
.cta-mini {
    background: rgba(255,255,255,0.03);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 40px 0;
    text-align: center;
}
.cta-mini p {
    font-size: 1rem;
    color: rgba(255,255,255,0.55);
    margin-bottom: 20px;
}
.cta-mini strong {
    color: rgba(255,255,255,0.85);
}
.cta-mini-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 48px;
}

.about-me-btn {
    margin-top: 24px;
}

/* ══ UTILITY KLASĖS ══ */

/* Sekcijų antraščių tarpai */
.sec-head    { margin-bottom: 48px; }
.sec-head-sm { margin-bottom: 20px; }
.sec-h2      { margin-top: 14px; }
.why-h2      { margin-bottom: 72px; }

/* Sekcijų intro tekstai */
.sec-intro {
    max-width: 520px;
    margin: 14px auto 0;
}

/* Pill tarpai */
.pill-mb    { margin-bottom: 16px; }
.pill-mb-lg { margin-bottom: 24px; }

/* Procesas intro */
.proc-intro { margin-top: 14px; }

/* Why sekcija */
.why-h3 {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}
.why-p { margin-bottom: 16px; }

/* Ryškus tekstas */
.txt-bright { color: rgba(255,255,255,.82); }

/* SERP pavyzdžio pavadinimai */
.wv-g-name     { font-size: .82rem; color: rgba(255,255,255,.75); }
.wv-g-name-dim { color: rgba(255,255,255,.4); }

/* 5s ekrano pavyzdžiai */
.wv-example-list {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wv-example {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .8rem;
    margin: 0;
}
.wv-example-good {
    background: rgba(200,194,255,0.08);
    border: 1px solid rgba(200,194,255,0.15);
    color: rgba(255,255,255,.6);
}
.wv-example-bad {
    background: rgba(255,80,80,0.07);
    border: 1px solid rgba(255,80,80,0.12);
    color: rgba(255,120,120,.7);
}

/* Portfolio result siauresnė versija */
.port-result-narrow { max-width: 400px; }

/* Pilno pločio mygtukas */
.btn-full {
    width: 100%;
    justify-content: center;
}

/* Personal quote kaip h2 */
h2.personal-quote {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
}


/* ══ RESPONSIVE ══ */
@media (max-width: 1000px) {
    .hero-grid,
    .contact-grid,
    .personal-inner,
    .why-row {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .results-panel {
        display: none;
    }
    .why-row.flip {
        direction: ltr;
    }
    .port-story-grid {
        grid-template-columns: 1fr;
    }
    .port-story.wide {
        grid-template-columns: 1fr;
    }
    .port-story.wide .port-screen-wrap {
        min-height: 160px;
    }
    .inc-card {
        padding: 40px 32px;
    }
    .inc-grid {
        grid-template-columns: 1fr 1fr;
    }
    .price-bands {
        grid-template-columns: 1fr;
    }
    .pb.featured {
        transform: none;
    }
    .personal-left {
        padding: 44px 36px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .personal-right {
        padding: 40px 36px;
    }
    .proc-grid {
        grid-template-columns: 1fr;
    }
    .cta-block {
        padding: 56px 32px;
    }
    .inc-header {
        flex-direction: column;
        gap: 20px;
    }
    .bento-v2 {
        grid-template-columns: repeat(2, 1fr);
    }
    #procesas .proc-outer {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}
@media (max-width: 700px) {
    .inc-grid {
        grid-template-columns: 1fr;
    }
    .timeline {
        padding-left: 36px;
    }
}
@media (max-width: 640px) {
   .cta-mini-btns {
    padding: 0 16px;
    }
    .ts-inner {
        gap: 12px;
    }

    .port-story-grid {
        margin-top: 42px;
    }
    .port-story-body {
        padding: 16px 16px 24px !important;
    }
    .sec-head {
        margin-bottom: 42px;
    }
    .personal-left {
        padding: 32px 24px;
    }
    .bv-card {
        padding: 24px 24px 24px;
    }

    .personal-right {
        padding: 32px 24px;
    }
        .personal-inner {
        gap: 16px;
    }
    .why-h2 {
        margin-bottom: 42px !important;
    }
    .inc-card {
        padding: 32px 24px;
    }
    .wv-inner {
        padding: 32px 24px;
    }
    .proc-note-card {
        padding: 24px 24px;
    }
    .tl-body {
        padding: 24px 24px;
    }
    .price-bands {
        margin-top: 42px;
    }
    .pb-body {
        padding: 32px 24px;
    }
    .price-note {
        padding: 22px 24px;
    }
    .cta-block {
        padding: 32px 24px;
    }
    .cta-block.fu.vis svg {
        display: none;
    }
    .cta-block.fu.vis .btn-lg {
        padding: 18px 22px;
    }
}

@media (max-width: 600px) {
    .timeline::before {
        left: 8px;
    }
    .bento-v2 {
        grid-template-columns: 1fr;
    }
}