/* ════════════════════════════════════════════════════════
   PAULLSTUDIO WIDGET STYLES — widgets.css v1.0
   Semua section: header, footer, hero, works, about,
   contact, services, single porto.
   Theming 100% via CSS variables (dark/light otomatis).
   ════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   HEADER
   ────────────────────────────────────────────────────── */

.ps-header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: var(--ps-header-h);
    background: color-mix(in srgb, var(--ps-bg) 85%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--ps-border);
    z-index: 99999;
    display: flex;
    align-items: center;
    transition: background .4s ease, border-color .4s ease;
}

.ps-nav-inner-split {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

.ps-logo-img {
    height: 42px; width: 42px;
    display: block; object-fit: contain;
}

.ps-left-nav { display: flex; gap: 40px; }

.ps-left-nav a, .ps-lang-btn {
    color: var(--ps-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .05em;
    transition: color .3s var(--ps-curve);
}

.ps-left-nav a:hover,
.ps-lang-btn:hover,
.ps-lang-btn.active { color: var(--ps-text); }

.ps-right-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
}

.ps-lang-switcher { font-size: 12px; display: flex; align-items: center; gap: 2px; }
.ps-sep { color: var(--ps-sep); margin: 0 2px; }

/* Dark/light mode button in header */
.ps-mode-btn {
    background: none;
    border: 1px solid var(--ps-border);
    color: var(--ps-muted);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
}

.ps-mode-btn:hover { color: var(--ps-text); border-color: var(--ps-border-hover); }
.ps-mode-btn svg { width: 15px; height: 15px; }

/* Icon visibility by theme */
[data-theme="dark"]  .icon-sun  { display: none; }
[data-theme="dark"]  .icon-moon { display: block; }
[data-theme="light"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: block; }

.ps-cta-white {
    background: var(--ps-accent);
    color: var(--ps-accent-inv) !important;
    padding: 10px 22px;
    border-radius: var(--ps-radius-md);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: .3s var(--ps-curve);
    white-space: nowrap;
    box-shadow: var(--ps-shadow-sm);
}

.ps-cta-white:hover { background: var(--ps-accent-hover); box-shadow: var(--ps-shadow-md); }

/* Hamburger */
.ps-menu-trigger {
    display: none;
    background: none; border: none;
    width: 44px; height: 44px;
    cursor: pointer; z-index: 100001;
}

#ps-icon-svg line {
    stroke: var(--ps-text);
    stroke-width: 2.5;
    transition: transform .4s var(--ps-curve);
    transform-origin: center;
}

.ps-menu-trigger.active #ps-line1 { transform: translateY(4px)  rotate(45deg); }
.ps-menu-trigger.active #ps-line2 { transform: translateY(-4px) rotate(-45deg); }

/* Mobile overlay */
.ps-mobile-overlay {
    position: fixed;
    inset: 0;
    background: var(--ps-bg);
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    transition: all .5s var(--ps-curve);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-mobile-overlay.open { visibility: visible; opacity: 1; }

.ps-mobile-container { text-align: center; width: 100%; }

.ps-mobile-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 48px;
}

.ps-mobile-lang { font-size: 14px; color: var(--ps-sep); display: flex; gap: 6px; }
.ps-mobile-lang a { text-decoration: none; color: var(--ps-muted); transition: .3s; }
.ps-mobile-lang a.active { color: var(--ps-text); font-weight: 600; }

.ps-mode-btn-mobile {
    background: none;
    border: 1px solid var(--ps-border);
    color: var(--ps-muted);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-mode-btn-mobile svg { width: 15px; height: 15px; }

.ps-mobile-links {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.ps-mobile-links a {
    font-size: 48px;
    font-weight: 700;
    color: var(--ps-text);
    text-decoration: none;
    letter-spacing: -.05em;
    opacity: 0;
    transform: translateY(30px);
    transition: .6s var(--ps-curve);
}

.ps-mobile-overlay.open .ps-mobile-links a { opacity: 1; transform: translateY(0); }
.ps-mobile-overlay.open .ps-mobile-links a:nth-child(1) { transition-delay: .1s; }
.ps-mobile-overlay.open .ps-mobile-links a:nth-child(2) { transition-delay: .2s; }
.ps-mobile-overlay.open .ps-mobile-links a:nth-child(3) { transition-delay: .3s; }
.ps-mobile-overlay.open .ps-mobile-links a:nth-child(4) { transition-delay: .4s; }

.ps-cta-mobile { font-size: 20px !important; color: var(--ps-muted) !important; }

.ps-mobile-footer {
    position: absolute;
    bottom: 40px; left: 0; width: 100%;
    font-size: 10px;
    color: var(--ps-label-color);
    text-transform: uppercase;
    letter-spacing: .2em;
}

/* ──────────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────────── */

.ps-footer {
    background: var(--ps-bg);
    padding: 100px 5% 40px;
    border-top: 1px solid var(--ps-border);
    transition: background .4s ease;
}

.ps-footer .ps-container { max-width: 1400px; margin: 0 auto; }

.ps-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
}

.ps-footer-brand { max-width: 350px; }
.ps-footer-logo  { height: 42px; width: 42px; margin-bottom: 24px; }

.ps-footer-desc {
    color: var(--ps-muted-safe);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.ps-footer-nav { display: flex; gap: 80px; }

.ps-footer-col a {
    display: block;
    color: var(--ps-muted-safe);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 12px;
    transition: color .3s;
}

.ps-footer-col a:hover { color: var(--ps-text); }

.ps-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid var(--ps-border);
    color: var(--ps-icon-color);
    font-size: 12px;
}

#ps-time { color: var(--ps-muted-safe); font-weight: 500; }

/* ──────────────────────────────────────────────────────
   HERO SECTION
   ────────────────────────────────────────────────────── */

.ps-hero-section {
    background: var(--ps-bg);
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 120px 24px 80px;
    transition: background .4s ease;
}

.ps-hero-section .ps-container {
    position: relative; z-index: 10;
    text-align: center;
    max-width: 920px; width: 100%;
}

.ps-headline {
    font-size: clamp(2.4rem, 8vw, 5.5rem);
    font-weight: 700;
    color: var(--ps-text);
    line-height: 1.1;
    letter-spacing: -.04em;
    margin-bottom: 24px;
}

.ps-subheading {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: var(--ps-muted);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 40px;
}

.ps-cta-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 60px;
}

.ps-btn-main {
    background: var(--ps-accent);
    color: var(--ps-accent-inv);
    padding: 18px 36px;
    border-radius: var(--ps-radius-md);
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    transition: .3s var(--ps-curve);
    display: inline-block;
    box-shadow: var(--ps-shadow-sm);
}

.ps-btn-main:hover { background: var(--ps-accent-hover); box-shadow: var(--ps-shadow-md); transform: translateY(-2px); }

.ps-btn-ghost {
    color: var(--ps-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: .3s;
    border-bottom: 1px solid transparent;
}

.ps-btn-ghost:hover { color: var(--ps-text); border-bottom-color: var(--ps-text); }

.ps-footer-tags {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--ps-muted);
}

.ps-hero-dot {
    width: 8px; height: 8px;
    background: #34c759;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(52,199,89,.5);
}

/* ──────────────────────────────────────────────────────
   WORKS SECTION
   ────────────────────────────────────────────────────── */

.ps-works-section {
    background: var(--ps-bg);
    padding: 120px 5%;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--ps-border);
    transition: background .4s ease;
}

.ps-works-section .ps-container { max-width: 1300px; margin: 0 auto; position: relative; z-index: 10; }

.ps-works-header {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    margin-bottom: 80px;
    align-items: flex-end;
}

.ps-section-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--ps-label-color);
    margin-bottom: 20px;
    display: block;
}

.ps-section-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--ps-text);
    margin: 0;
}

.ps-header-desc {
    font-size: 1.15rem;
    color: var(--ps-muted);
    line-height: 1.6;
    border-left: 1px solid var(--ps-text);
    padding-left: 30px;
}

/* Card link variant (work page) */
.ps-link-btn {
    color: var(--ps-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: .3s;
}

.ps-link-btn:hover { gap: 16px; color: var(--ps-muted); }

/* ──────────────────────────────────────────────────────
   CONTACT SECTION
   ────────────────────────────────────────────────────── */

.ps-contact-section {
    background: var(--ps-bg);
    padding: 120px 5%;
    border-top: 1px solid var(--ps-border);
    position: relative;
    overflow: hidden;
    transition: background .4s ease;
}

.ps-contact-section .ps-container { max-width: 1150px; margin: 0 auto; position: relative; z-index: 10; }

.ps-contact-flex { display: flex; gap: 80px; align-items: center; }

.ps-contact-image { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }

.ps-image-wrapper { border-radius: var(--ps-radius-xl); overflow: hidden; background: var(--ps-bg-card); line-height: 0; width: 100%; box-shadow: var(--ps-shadow-sm); }

.ps-profile {
    width: 100%; max-width: 380px; height: 500px;
    object-fit: cover;
    filter: grayscale(100%);
    transition: .6s var(--ps-curve);
}

.ps-profile:hover { filter: grayscale(0%); transform: scale(1.02); }

.ps-status { margin-top: 24px; font-size: 13px; color: var(--ps-muted); display: flex; align-items: center; gap: 12px; }

.ps-contact-text { flex: 1.4; }

.ps-contact-headline {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 24px;
    letter-spacing: -.04em;
    color: var(--ps-text);
}

.ps-contact-sub {
    color: var(--ps-muted);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 48px;
    max-width: 520px;
}

.ps-contact-btns { display: flex; gap: 16px; margin-bottom: 48px; }

.ps-btn-wa {
    background: var(--ps-accent); color: var(--ps-accent-inv);
    padding: 16px 32px; border-radius: var(--ps-radius-md);
    text-decoration: none; font-weight: 600;
    transition: .3s var(--ps-curve);
    display: inline-block;
    box-shadow: var(--ps-shadow-sm);
}

.ps-btn-wa:hover { background: var(--ps-accent-hover); box-shadow: var(--ps-shadow-md); transform: translateY(-2px); }

.ps-btn-mail {
    border: 1px solid var(--ps-border-hover);
    color: var(--ps-text); padding: 16px 32px; border-radius: var(--ps-radius-md);
    text-decoration: none; transition: .3s;
    display: inline-block;
}

.ps-btn-mail:hover { border-color: var(--ps-accent); background: rgba(37,99,235,.06); color: var(--ps-accent); }

.ps-social-links {
    display: flex; gap: 24px;
    padding-top: 32px;
    border-top: 1px solid var(--ps-border);
}

.ps-social-links a {
    color: var(--ps-label-color);
    text-decoration: none;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    transition: .3s;
}

.ps-social-links a:hover { color: var(--ps-text); }

/* ──────────────────────────────────────────────────────
   ABOUT HERO SECTION
   ────────────────────────────────────────────────────── */

.ps-about-hero {
    background: var(--ps-bg);
    min-height: 100svh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 140px 5% 80px;
    transition: background .4s ease;
}

.ps-about-hero .ps-container { max-width: 1400px; margin: 0 auto; position: relative; z-index: 10; width: 100%; }

.ps-about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 100px;
    align-items: flex-end;
}

.ps-index {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--ps-label-color);
    margin-bottom: 30px;
    display: block;
}

.ps-about-title {
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 700;
    color: var(--ps-text);
    line-height: .95;
    letter-spacing: -.05em;
    margin-bottom: 40px;
}

.ps-about-lead {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    line-height: 1.3;
    color: var(--ps-text);
    max-width: 500px;
    letter-spacing: -.02em;
}

.ps-about-sub {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--ps-muted);
    line-height: 1.7;
    margin-bottom: 40px;
}

.ps-about-tags { display: flex; flex-wrap: wrap; gap: 10px; }

.ps-tag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    border: 1px solid var(--ps-border-hover);
    padding: 8px 16px;
    border-radius: var(--ps-radius-sm);
    color: var(--ps-muted);
    transition: color .3s, border-color .3s;
}

.ps-tag:hover { color: var(--ps-accent); border-color: var(--ps-accent); }

/* ──────────────────────────────────────────────────────
   PROBLEM SOLVER SECTION (About page)
   ────────────────────────────────────────────────────── */

.ps-problem-solver {
    background: var(--ps-bg);
    padding: 160px 5%;
    border-bottom: 1px solid var(--ps-border);
    transition: background .4s;
}

.ps-problem-solver .ps-container { max-width: 1400px; margin: 0 auto; }

.ps-solver-content { max-width: 1100px; margin: 0 auto; }

.ps-solver-headline {
    font-size: clamp(2.5rem, 5.5vw, 5rem);
    color: var(--ps-text);
    line-height: 1.05;
    letter-spacing: -.05em;
    margin-bottom: 60px;
}

.ps-solver-headline .ps-dim { color: var(--ps-dim); }

.ps-main-desc {
    color: var(--ps-muted);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    line-height: 1.5;
    max-width: 800px;
    margin-bottom: 100px;
    letter-spacing: -.01em;
}

.ps-points-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin: 80px 0;
}

.ps-point-icon {
    font-size: 12px;
    color: var(--ps-label-color);
    margin-bottom: 20px;
    font-weight: 600;
}

.ps-point h4 { color: var(--ps-text); font-size: 20px; margin-bottom: 20px; letter-spacing: -.02em; }
.ps-point p  { font-size: 15px; color: var(--ps-muted); line-height: 1.6; }

.ps-solver-quote {
    border-top: 1px solid var(--ps-border);
    padding-top: 60px;
    margin-top: 60px;
}

.ps-solver-quote blockquote {
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    color: var(--ps-text);
    font-weight: 500;
    letter-spacing: -.03em;
    max-width: 900px;
}

/* ──────────────────────────────────────────────────────
   SERVICES SECTIONS
   ────────────────────────────────────────────────────── */

.ps-services-hero {
    background: var(--ps-bg);
    padding: 160px 5% 80px;
    transition: background .4s;
}

.ps-services-hero .ps-container { max-width: 1400px; margin: 0 auto; }

.ps-service-title {
    font-size: clamp(3rem, 7vw, 6rem);
    color: var(--ps-text);
    line-height: .95;
    letter-spacing: -.05em;
    font-weight: 700;
}

.ps-accent-text { color: var(--ps-muted); }

.ps-service-sub {
    color: var(--ps-muted);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    max-width: 700px;
    margin-top: 40px;
    line-height: 1.6;
}

/* Bento grid */
.ps-services-grid {
    background: var(--ps-bg);
    padding: 80px 5%;
    transition: background .4s;
}

.ps-services-grid .ps-container { max-width: 1400px; margin: 0 auto; }

.ps-bento-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ps-service-card {
    background: var(--ps-bg-card);
    padding: 45px;
    border-radius: var(--ps-radius-xl);
    border: 1px solid var(--ps-border);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 350px;
    transition: .4s var(--ps-curve);
    box-shadow: var(--ps-shadow-sm);
}

.ps-service-card:hover {
    border-color: var(--ps-accent);
    transform: translateY(-5px);
    background: var(--ps-bg-card-hover);
    box-shadow: var(--ps-shadow-md);
}

.ps-service-card.large { grid-column: span 2; }

.ps-service-card h3 {
    color: var(--ps-text);
    font-size: 28px;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.ps-service-card p { color: var(--ps-muted); line-height: 1.6; font-size: 16px; }

.ps-service-tag {
    color: var(--ps-accent);
    background: rgba(37,99,235,.10);
    padding: 5px 15px;
    border-radius: var(--ps-radius-md);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    align-self: flex-start;
    margin-bottom: auto;
}

/* Process section */
.ps-process {
    background: var(--ps-bg);
    padding: 120px 5%;
    border-top: 1px solid var(--ps-border);
    transition: background .4s;
}

.ps-process .ps-container { max-width: 1400px; margin: 0 auto; }

.ps-process-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.ps-step span {
    color: var(--ps-dim);
    font-size: 40px;
    font-weight: 800;
    display: block;
    margin-bottom: 20px;
}

.ps-step h4 { color: var(--ps-text); font-size: 22px; margin-bottom: 15px; }
.ps-step p  { color: var(--ps-muted); line-height: 1.6; }

/* ──────────────────────────────────────────────────────
   SINGLE PORTFOLIO PAGE
   ────────────────────────────────────────────────────── */

.ps-single-porto { background: var(--ps-bg); min-height: 100vh; }

.ps-single-container { max-width: 1100px; margin: 0 auto; padding: 0 5%; }

.ps-single-hero {
    padding: 60px 0 40px;
    background: var(--ps-bg);
}

.ps-single-title {
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    font-weight: 700;
    color: var(--ps-text);
    letter-spacing: -.04em;
    margin: 20px 0 32px;
    line-height: 1.05;
}

.ps-single-btn-visit {
    display: inline-block;
    background: var(--ps-accent);
    color: var(--ps-accent-inv);
    padding: 14px 28px;
    border-radius: var(--ps-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: .3s;
    box-shadow: var(--ps-shadow-sm);
}

.ps-single-btn-visit:hover { background: var(--ps-accent-hover); box-shadow: var(--ps-shadow-md); }

.ps-single-featured { padding: 0 0 60px; }

.ps-single-thumb {
    width: 100%;
    border-radius: var(--ps-radius-xl);
    display: block;
}

.ps-single-meta {
    padding: 40px 0;
    border-top: 1px solid var(--ps-border);
}

.ps-single-meta-grid { display: flex; gap: 60px; flex-wrap: wrap; }

.ps-single-meta-item { display: flex; flex-direction: column; gap: 8px; }

.ps-meta-label {
    color: var(--ps-label-color);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 600;
}

.ps-meta-value { color: var(--ps-text); font-size: 18px; font-weight: 600; }

.ps-single-content { padding: 60px 0; }
.ps-single-prose   { max-width: 760px; }
.ps-single-prose p  { color: var(--ps-muted); font-size: 18px; line-height: 1.7; margin-bottom: 1.5em; }
.ps-single-prose h2 { color: var(--ps-text); font-size: 28px; font-weight: 700; margin: 48px 0 16px; letter-spacing: -.02em; }
.ps-single-prose h3 { color: var(--ps-text); font-size: 22px; font-weight: 600; margin: 36px 0 12px; }

.ps-single-tech { padding: 60px 0; border-top: 1px solid var(--ps-border); }

.ps-single-tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 60px;
}

.ps-tech-label {
    color: var(--ps-label-color);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 600;
    margin-bottom: 24px;
}

.ps-tech-list { list-style: none; padding: 0; margin: 0; }

.ps-tech-list li {
    color: var(--ps-text);
    padding: 10px 0;
    border-bottom: 1px solid var(--ps-border);
    font-size: 15px;
}

.ps-single-back { padding: 40px 0 100px; }

.ps-back-link {
    color: var(--ps-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color .3s;
}

.ps-back-link:hover { color: var(--ps-text); }

/* ──────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────── */

@media (max-width: 992px) {
    .ps-nav-inner-split { display: flex; justify-content: space-between; padding: 0 24px; }
    .ps-left-nav, .ps-right-nav { display: none; }
    .ps-menu-trigger { display: block; }
    .ps-logo-img { height: 36px; width: 36px; }

    .ps-works-header { grid-template-columns: 1fr; gap: 30px; }
    .ps-header-desc  { border-left: none; border-top: 1px solid var(--ps-text); padding: 20px 0 0; }

    .ps-contact-flex   { flex-direction: column; text-align: center; gap: 40px; }
    .ps-contact-image  { width: 100%; align-items: center; }
    .ps-contact-btns   { flex-direction: column; width: 100%; }
    .ps-btn-wa, .ps-btn-mail { text-align: center; }
    .ps-social-links   { justify-content: center; }
    .ps-contact-sub    { margin: 0 auto 40px; }

    .ps-about-grid     { grid-template-columns: 1fr; gap: 60px; }
    .ps-points-grid    { grid-template-columns: 1fr; gap: 50px; }
    .ps-bento-wrapper  { grid-template-columns: 1fr; }
    .ps-service-card.large { grid-column: span 1; }
    .ps-process-list   { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .ps-footer-top     { flex-direction: column; align-items: center; gap: 48px; text-align: center; }
    .ps-footer-brand   { text-align: center; }
    .ps-footer-logo    { margin: 0 auto 24px; }
    .ps-footer-nav     { justify-content: center; gap: 60px; }
    .ps-footer-bottom  { flex-direction: column; gap: 16px; }

    .ps-cta-group      { flex-direction: column; width: 100%; }
    .ps-btn-main       { width: 100%; text-align: center; }

    .ps-mobile-links a { font-size: 36px; }

    .ps-single-meta-grid { gap: 30px; }
}