:root{
    --bg1:#f6f3ff;
    --bg2:#efeaff;
    --bg3:#e7f3ff;

    --ink:#17121f;
    --muted:#50445f;

    --card:rgba(255,255,255,.78);
    --card2:rgba(255,255,255,.62);
    --border:rgba(40, 20, 80, .10);
    --shadow: 0 18px 45px rgba(25, 10, 45, .12);

    --accent:#6d28d9;
    --accent2:#0ea5e9;
    --accent3:#10b981;
    --radius: 22px;
}

*{
    box-sizing:border-box;
    transition: all 0.2s ease-out;
}

body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: var(--ink);
    background:
            radial-gradient(900px 600px at 12% 12%, rgba(255,255,255,.75), transparent 60%),
            radial-gradient(700px 500px at 92% 28%, rgba(255,255,255,.55), transparent 62%),
            linear-gradient(140deg, var(--bg1), var(--bg2) 50%, var(--bg3));
    min-height:100svh;
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    background:
            radial-gradient(2px 2px at 12% 24%, rgba(0,0,0,.06), transparent 60%),
            radial-gradient(2px 2px at 28% 62%, rgba(0,0,0,.05), transparent 60%),
            radial-gradient(1.5px 1.5px at 44% 18%, rgba(0,0,0,.05), transparent 60%),
            radial-gradient(2px 2px at 65% 55%, rgba(0,0,0,.05), transparent 60%),
            radial-gradient(2px 2px at 82% 22%, rgba(0,0,0,.05), transparent 60%),
            radial-gradient(1.5px 1.5px at 90% 72%, rgba(0,0,0,.05), transparent 60%);
    opacity:.55;
}

.wrap{
    width:min(980px, 92vw);
    margin: clamp(18px, 3.5vw, 34px) auto;
}

.panel{
    background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.34));
    border:1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    overflow:hidden;
    position:relative;
}

header{
    --header-client-image: none;
    --header-client-position: center center;
    --header-client-size: cover;
    --header-client-opacity: 1;
    padding: clamp(34px, 6vw, 48px) clamp(18px, 4vw, 38px) clamp(28px, 4vw, 38px);
    min-height: clamp(180px, 28vw, 340px);
    text-align:center;
    background:
            linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.48)),
            linear-gradient(180deg, rgba(255,255,255,.4), transparent);
    background-size: cover, auto;
    background-position: center, center;
    background-repeat: no-repeat;
    position: relative;
}

.client-meta{
    padding: 14px clamp(16px, 4vw, 34px) 12px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
    text-align: center;
}

.client-meta .banner{
    margin: 0 auto;
}

.client-meta .description{
    margin-top: 10px;
}

.client-meta #contactPills{
    margin-top: 14px;
}

header::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--header-client-image);
    background-size: var(--header-client-size);
    background-position: var(--header-client-position);
    background-repeat: no-repeat;
    opacity: var(--header-client-opacity);
    pointer-events: none;
    z-index: 0;
}

header > *{
    position: relative;
    z-index: 1;
}

.name{
    font-weight: 900;
    font-family: Georgia, 'Times New Roman', Times, serif;
    letter-spacing: .02em;
    font-size: clamp(32px, 5vw, 52px);
    margin: 2px 0 12px;
    color: var(--ink);
    text-transform: uppercase;
    background: linear-gradient(120deg, var(--ink), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.banner{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 12px 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.70));
    border: 1px solid var(--border);
    box-shadow: 0 16px 32px rgba(0,0,0,.12);
    backdrop-filter: blur(8px);
}

.banner .label{
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 600;
    letter-spacing:.02em;
    text-transform: capitalize;
    color: var(--ink);
}

.banner .label .banner-sep{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent);
    margin: 0 .5em;
    vertical-align: baseline;
}

.banner .dot{
    width:10px; height:10px;
    border-radius:999px;
    background: var(--accent);
}

.panel[aria-label="Landing Pages App"] header .banner{
    width: min(100%, 980px);
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.panel[aria-label="Landing Pages App"] header .banner .label{
    display: block;
    line-height: 1.35;
    text-wrap: balance;
    text-align: center;
}

.home-hero-banner{
    margin: 18px auto 0;
    width: min(100%, 980px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

.home-hero-banner img{
    width: 100%;
    height: auto;
    display: block;
}

.description{
    margin-top: 12px;
    font-size: clamp(14px, 2vw, 16px);
    color: var(--muted);
    font-weight: 500;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 0.6s ease-out;
}

#contactPills{
    margin-top: 18px;
}

.action-pills{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-out;
}

.pill:hover{
    filter: brightness(1.12);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.pill i{
    font-size: 16px;
}

.pill svg.icon{
    width: 16px;
    height: 16px;
    display: inline-block;
}

.pill.instagram svg.icon{
    color: #E1306C;
}

.pill.facebook svg.icon{
    color: #1877f2;
}

.contact-note{
    margin-top: 12px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


@keyframes fadeInUp{
    from{
        opacity: 0;
        transform: translateY(12px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* main is a simple flow container so pages can decide layout */
main{
    padding: 12px clamp(16px, 4vw, 34px) clamp(18px, 4vw, 32px);
    display:block;
}

.client-footer{
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
    padding: 14px clamp(16px, 4vw, 34px) 18px;
}

.client-footer-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}

.client-footer-inner a{
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}

.client-footer-inner a:hover{
    text-decoration: underline;
}

.footer-dot{
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
}

/* grid controls the service card layout */
.grid{
    display:grid;
    gap:16px;
    grid-template-columns: 1fr;
    align-items:start;
}

/* desktop: 2-column cards */
@media (min-width: 860px){
    .grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* card */
.card{
    background: linear-gradient(180deg, var(--card), var(--card2));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    color: var(--ink);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.card:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0,0,0,.15);
    border-color: var(--accent);
}

.card h2{
    margin: 0 0 8px;
    font-size: clamp(18px, 3.4vw, 22px);
}

.card-content{
    display: block;
}

.card-text{
    flex: 1;
    min-width: 0;
}

.card h2{
    margin: 0 0 8px;
    font-size: clamp(18px, 3.4vw, 22px);
    clear: both;
}

.card-image{
    float: right;
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    margin-left: 16px;
    margin-bottom: 16px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,.35);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

.card-image .thumb{
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 0;
    display: block;
}

.thumb{
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    border-radius: 18px;
    margin-bottom: 12px;
    display: block;
}

.bullets{
    margin: 0;
    padding-left: 18px;
    line-height: 1.55;
    color: var(--ink);
}

#pagesList{
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: 10px;
}

#pagesList li{
    margin: 0;
}

#pagesList .live-page-link{
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

#pagesList .note{
    margin-left: 10px;
}

#pagesList .live-page-link:hover{
    border-color: var(--accent);
    filter: brightness(1.04);
}

.tagrow{
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag{
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.subnote{
    margin-top: 12px;
}

.note{
    margin: 6px 0 0;
    font-weight: 600;
    color: var(--ink);
}

.actions{
    display:flex;
    gap: 10px;
    justify-content:center;
    flex-wrap:wrap;
}

#themesList{
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    justify-content: stretch !important;
}

#themesList .btn{
    justify-content: center;
    width: 100%;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.25;
}

.btn{
    appearance:none;
    border:0;
    border-radius: 999px;
    padding: 13px 20px;
    font-weight: 900;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    box-shadow: 0 12px 26px rgba(0,0,0,.14);
    color: white;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.btn::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.2);
    border-radius: 999px;
    transition: left 0.4s ease-out;
}

.btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

.btn:hover::before{
    left: 100%;
}

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

.btn-secondary{
    color: var(--ink);
    background: rgba(255,255,255,.8);
    border: 1px solid var(--border);
    transition: all 0.3s ease-out;
}

.btn-secondary:hover{
    background: rgba(255,255,255,.95);
    border-color: var(--accent);
}

.pwa-install-btn{
    border-radius: 999px;
    padding: 13px 20px;
}

.pwa-install-btn.floating{
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 999;
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.pwa-install-btn[hidden]{
    display: none !important;
}

.socials{
    display:flex;
    gap:12px;
    margin-top:16px;
    flex-wrap:wrap;
}

.social-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:10px 14px;
    border-radius:12px;
    background: var(--card);
    border:1px solid var(--border);
    text-decoration:none;
    color:var(--ink);
    transition: all 0.3s ease-out;
    font-weight:600;
    font-size:14px;
}

.social-link i{
    font-size:24px;
    transition: all 0.3s ease-out;
}

.social-link:hover{
    /* keep original card bg but brighten slightly so contrast is preserved */
    background: var(--card);
    filter: brightness(1.12);
    color: var(--ink); /* text stays dark or platform color remains visible */
    border-color: var(--accent);
    transform:translateY(-2px);
}

/* ensure icons keep their platform colors on hover */
.social-link:hover i{
    color:inherit !important;
}
.social-link:hover i{
    transform:scale(1.2);
}

.social-link span{
    font-size:12px;
    line-height:1.2;
}

/* platform colors */
.social-link.instagram i,
.social-link.instagram{
    color: #E1306C;
}

.social-link.facebook i,
.social-link.facebook{
    color: #1877f2;
}

a, a:visited{
    color: var(--ink);
}

a{
    transition: color 0.2s ease-out;
}

a:hover{
    color: var(--accent);
    text-decoration: underline;
}

/* optional: if you use a contact card that should span full width */
.contact-card{
    grid-column: 1 / -1;
}