/*
Theme Name: Creative Web Lab
Description: Tema WordPress luxury viola/bianco per graphic design. Nessun page builder richiesto.
Version: 1.0
Author: Creative Web Lab
Text Domain: cwl
*/
:root{--v:#5b21b6;--v2:#7c3aed;--vd:#1e0b3a;--vl:#f5f0ff;--w:#fff;--t:#2a1f3d;--m:#6b6280;--l:#e6def5}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--t);background:var(--w);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:500;line-height:1.1;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--v2);font-weight:600;margin-bottom:16px;display:block}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--l)}
header.site .wrap{display:flex;justify-content:space-between;align-items:center;height:72px}
.logo{font-family:'Fraunces',serif;font-size:1.35rem;font-weight:600;color:var(--vd)}
.logo span{color:var(--v2);font-style:italic}
.btn{display:inline-block;padding:15px 32px;border-radius:999px;background:var(--v);color:#fff!important;font-weight:500;font-size:.95rem;border:0;cursor:pointer;transition:.25s;font-family:inherit}
.btn:hover{background:var(--vd);transform:translateY(-2px);box-shadow:0 12px 30px rgba(91,33,182,.28)}
.btn.ghost{background:transparent;color:var(--v)!important;border:1px solid var(--v)}
.btn.ghost:hover{background:var(--vl);box-shadow:none}
.hero{background:radial-gradient(circle at 80% 20%,#6d28d9 0,transparent 45%),linear-gradient(160deg,var(--vd),#3b0f7a);color:#fff;padding:140px 0 120px}
.hero h1{font-size:clamp(2.6rem,7vw,5.2rem);max-width:820px;margin-bottom:28px}
.hero h1 em{color:#c4a8ff}
.hero p{max-width:560px;font-size:1.1rem;color:#d9ccf0;margin-bottom:40px}
.hero .eyebrow{color:#c4a8ff}
.hero .btn{background:#fff;color:var(--vd)!important;margin-right:12px}
.hero .btn.ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.4)}
section{padding:110px 0}
section h2{font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:56px;max-width:640px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.card{padding:40px 32px;border:1px solid var(--l);border-radius:20px;transition:.3s;background:#fff}
.card:hover{border-color:var(--v2);transform:translateY(-6px);box-shadow:0 24px 50px rgba(91,33,182,.1)}
.card i{font-family:'Fraunces',serif;font-style:normal;font-size:2.4rem;color:var(--v2);display:block;margin-bottom:20px}
.card h3{font-size:1.5rem;margin-bottom:12px}
.card p{color:var(--m);font-size:.95rem}
.soft{background:var(--vl)}
.steps .card{border:0;background:#fff}
.quote{background:var(--vd);color:#fff}
.quote .eyebrow{color:#c4a8ff}
.quote .box{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.quote h2{margin-bottom:20px}
.quote p{color:#d9ccf0}
form{display:grid;gap:16px}
input,select,textarea{width:100%;padding:16px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;font:inherit}
select option{color:#000}
input::placeholder,textarea::placeholder{color:#b9a9d9}
input:focus,select:focus,textarea:focus{outline:0;border-color:#c4a8ff}
form .btn{background:#fff;color:var(--vd)!important;justify-self:start}
.hp{position:absolute;left:-9999px}
.notice{padding:16px 20px;border-radius:12px;background:rgba(196,168,255,.2);margin-bottom:20px}
footer.site{padding:40px 0;text-align:center;color:var(--m);font-size:.85rem;border-top:1px solid var(--l)}
@media(max-width:820px){.quote .box{grid-template-columns:1fr;gap:40px}section{padding:80px 0}.hero{padding:100px 0 80px}}

section{scroll-margin-top:80px}
body.admin-bar header.site{top:32px}
@media(max-width:782px){body.admin-bar header.site{top:46px}}
nav{display:flex;align-items:center;gap:32px}
nav ul{display:flex;gap:28px;list-style:none}
nav ul a{font-size:.9rem;color:var(--m);transition:.2s}
nav ul a:hover{color:var(--v)}
.nb{padding:11px 24px;font-size:.88rem}
.burger{display:none;background:none;border:0;font-size:1.6rem;color:var(--vd);cursor:pointer}
.work{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,var(--v2),var(--vd));transition:.3s}
.work:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(91,33,182,.18)}
.work img{width:100%;height:100%;object-fit:cover;display:block}
.work span{position:absolute;left:0;right:0;bottom:0;padding:28px 24px 20px;color:#fff;font-family:'Fraunces',serif;font-size:1.25rem;background:linear-gradient(transparent,rgba(30,11,58,.85))}
@media(max-width:820px){.burger{display:block}nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:24px;border-bottom:1px solid var(--l);gap:20px}nav.open{display:flex}nav ul{flex-direction:column;gap:16px}}

.about{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.about h2{margin-bottom:0}
.about p{color:var(--m);font-size:1.05rem;margin-bottom:28px}
.vals{display:flex;gap:12px;flex-wrap:wrap}
.vals span{padding:8px 18px;border:1px solid var(--l);border-radius:999px;font-size:.85rem;color:var(--v)}
@media(max-width:820px){.about{grid-template-columns:1fr;gap:24px}}

.marq{overflow:hidden;background:#fff;border-bottom:1px solid var(--l);padding:26px 0}
.marq-track{display:flex;width:max-content;animation:mq 40s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq .grp{display:flex;align-items:center;gap:32px;padding-right:32px;flex-shrink:0}
.marq .grp span{font-family:'Fraunces',serif;font-style:italic;font-size:1.6rem;color:var(--vd);white-space:nowrap}
.marq .grp svg{color:var(--v2);flex-shrink:0}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq-track{animation:none}}

/* Pulsanti su sfondo scuro: sempre leggibili */
.quote form .btn{background:transparent;color:#B07FE0!important;border:1px solid #B07FE0}
.quote form .btn:hover{background:rgba(176,127,224,.14);color:#B07FE0!important;box-shadow:none;transform:translateY(-2px)}
.hero .btn:not(.ghost):hover{background:#B07FE0;color:var(--vd)!important;box-shadow:none}
.hero .btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff!important}

.works{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.works .work{aspect-ratio:4/3}
.works .work span{opacity:0;transition:opacity .3s}
.works .work:hover span{opacity:1}
@media(hover:none){.works .work span{opacity:1}}

.chip{display:inline-block;padding:10px 22px;border:1px solid var(--v);border-radius:999px;background:transparent;color:var(--v);font:inherit;font-size:.9rem;cursor:pointer;transition:.2s;margin:0 4px 8px 0}
.chip.on,.chip:hover{background:var(--v);color:#fff}
.filters{margin:-24px 0 40px}
.more{text-align:center;margin-top:48px}
.more .chip{margin:0 4px 8px}

.svc4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}