:root{
--ink:#101826;
--muted:#637083;
--paper:#fff;
--soft:#f3f6f5;
--brand:#16a085;
--brand-dark:#0d7966;
--accent:#e6aa45;
--line:#dde4e2;
--radius:20px;
--shadow:0 18px 55px rgba(16,24,38,.09);
--max:1180px}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
color:var(--ink);
background:var(--paper);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
line-height:1.6}
a{
color:inherit;
text-decoration:none}
button,input,select{
font:inherit}
button{
cursor:pointer}
h1,h2,h3,p{
margin-top:0}
h1{
font-size:clamp(2.6rem,8vw,5.7rem);
line-height:.98;
letter-spacing:-.055em;
max-width:850px;
margin-bottom:1.35rem}
h2{
font-size:clamp(2rem,5vw,3.6rem);
line-height:1.08;
letter-spacing:-.04em}
h3{
font-size:1.25rem;
line-height:1.25}
.section{
width:min(var(--max),calc(100% - 36px));
margin:auto;
padding:72px 0}
.site-header{
height:74px;
display:flex;
align-items:center;
justify-content:space-between;
width:min(var(--max),calc(100% - 36px));
margin:auto;
position:relative;
z-index:20}
.brand{
display:flex;
align-items:center;
gap:10px;
font-weight:900;
letter-spacing:-.03em}

/* Keep large navigation logos safely inside the top and left page edges. */
.site-header > .brand,
.auth-page > .auth-brand {
  transform: translate(10px, 10px);
}
.brand span{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:11px;
color:white;
background:var(--brand)}
.site-header nav{
display:none;
position:absolute;
top:68px;
left:0;
right:0;
background:white;
padding:18px;
border:1px solid var(--line);
box-shadow:var(--shadow);
border-radius:15px;
flex-direction:column;
gap:7px}
.site-header nav.open{
display:flex}
.site-header nav a:not(.button){
padding:9px 5px;
color:#3d4858}
.site-header nav a.active{
color:var(--brand);
font-weight:700}
.menu-toggle{
border:0;
background:transparent;
color:#050505;
-webkit-text-fill-color:#050505;
font-size:1.5rem}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
border:0;
border-radius:11px;
background:var(--brand);
color:white;
font-weight:800;
padding:13px 20px;
transition:.2s}
.button:hover{
background:var(--brand-dark);
transform:translateY(-1px)}
.button-small{
padding:9px 14px;
font-size:.9rem}
.button-ghost{
background:transparent;
color:var(--ink);
border:1px solid var(--line)}
.button-light{
background:white;
color:var(--ink)}
.button-outline-light{
background:transparent;
border:1px solid rgba(255,255,255,.45)}
.full{
width:100%}
.hero{
min-height:calc(100vh - 74px);
display:grid;
align-items:center;
gap:48px;
padding-top:35px}
.lead{
font-size:clamp(1.08rem,2vw,1.32rem);
color:var(--muted);
max-width:650px}
.eyebrow{
color:var(--brand);
font-weight:900;
font-size:.76rem;
letter-spacing:.13em;
text-transform:uppercase}
.actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin:28px 0}
.trust{
display:flex;
gap:14px;
flex-wrap:wrap;
color:var(--muted);
font-size:.86rem}
.card{
background:white;
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:0 8px 28px rgba(16,24,38,.045)}
.hero-demo{
padding:26px;
max-width:480px}
.demo-top{
display:flex;
gap:6px;
border-bottom:1px solid var(--line);
padding-bottom:18px;
margin-bottom:28px}
.dot{
width:9px;
height:9px;
border-radius:50%}
.red{
background:#ef6b64}
.amber{
background:#eab649}
.green{
background:#50b987}
.metric{
display:flex;
justify-content:space-between;
align-items:end}
.metric span,.split small{
color:var(--muted)}
.metric strong{
font-size:2rem}
.mini-chart{
height:175px;
display:flex;
gap:9px;
align-items:end;
padding:20px 0}
.mini-chart i{
flex:1;
background:linear-gradient(var(--brand),#78d9c7);
border-radius:6px 6px 2px 2px}
.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px}
.split span{
background:var(--soft);
padding:14px;
border-radius:12px}
.split b,.split small{
display:block}
.section-heading{
max-width:720px;
margin-bottom:34px}
.section-heading h2{
margin-bottom:10px}
.section-heading p:last-child{
color:var(--muted)}
.grid{
display:grid;
gap:18px}
.feature,.product-card,.lesson,.price{
padding:26px}
.feature-icon{
width:48px;
height:48px;
border-radius:14px;
background:var(--soft);
display:grid;
place-items:center;
font-size:1.4rem;
color:var(--brand);
margin-bottom:45px}
.feature p,.product-card p,.lesson p,.price p{
color:var(--muted)}
.feature a,.product-card a,.lesson a,.text-button{
font-weight:800;
color:var(--brand)}
.feature.featured{
background:var(--ink);
color:white}
.feature.featured p{
color:#bdc6d0}
.feature.featured .feature-icon{
background:rgba(255,255,255,.1)}
.muted-section{
position:relative}
.muted-section:before{
content:"";
position:absolute;
z-index:-1;
left:50%;
top:0;
bottom:0;
width:100vw;
transform:translateX(-50%);
background:var(--soft)}
.timeline{
display:grid;
gap:25px}
.timeline article{
border-top:1px solid #cfd8d5;
padding-top:20px}
.timeline b{
color:var(--brand)}
.timeline p{
color:var(--muted)}
.split-section{
display:grid;
gap:50px;
align-items:center}
.check-list{
list-style:none;
padding:0;
display:grid;
gap:10px}
.check-list li:before{
content:"✓";
color:var(--brand);
font-weight:900;
margin-right:10px}
.phone{
width:min(330px,90vw);
height:620px;
border:10px solid #101010;
border-radius:46px;
padding:9px;
background:#151515;
margin:auto;
box-shadow:var(--shadow)}
.phone-screen{
height:100%;
border-radius:29px;
background:#fff7f2;
padding:25px 18px;
overflow:hidden}
.store-nav,.store-product{
display:flex;
justify-content:space-between;
align-items:center}
.phone-screen h3{
font-family:Georgia,serif;
font-size:2.4rem;
line-height:1.05}
.product-art{
height:330px;
border-radius:140px 140px 18px 18px;
background:linear-gradient(150deg,#e6c2ac,#7b3455);
margin:20px 0}
.dress-art:after{
content:"SD";
color:#fff8;
font-family:Georgia;
font-size:5rem;
display:grid;
place-items:center;
height:100%}
.product-card .tag,.tag{
display:inline-block;
background:var(--soft);
padding:5px 10px;
border-radius:99px;
color:var(--brand);
font-size:.74rem;
font-weight:900;
text-transform:uppercase}
.product-card div{
display:flex;
justify-content:space-between;
gap:10px;
margin-top:26px}
.cta{
background:var(--ink);
color:white;
border-radius:28px;
padding:55px 28px;
margin-bottom:72px}
.cta h2{
max-width:700px}
.cta p:not(.eyebrow){
color:#bdc6d0}
footer{
width:min(var(--max),calc(100% - 36px));
margin:auto;
padding:40px 0;
display:grid;
gap:30px;
border-top:1px solid var(--line);
color:var(--muted)}
footer>div{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:7px}
footer b,footer .brand{
color:var(--ink)}
.page-hero{
padding-top:75px;
padding-bottom:40px}
.page-hero h1{
font-size:clamp(2.8rem,7vw,5rem)}
.filter-row{
display:flex;
gap:8px;
overflow:auto;
margin-bottom:28px}
.chip{
border:1px solid var(--line);
background:white;
border-radius:99px;
padding:8px 15px}
.chip.active{
background:var(--ink);
color:white}
.tool-grid article.hidden{
display:none}
.text-button{
border:0;
background:none;
padding:0}
.lesson-no{
font-size:3.5rem;
font-weight:900;
color:#e0e7e5}
.roadmap{
list-style:none;
padding:0;
counter-reset:road;
display:grid;
gap:8px}
.roadmap li{
background:white;
border:1px solid var(--line);
padding:16px;
border-radius:12px;
display:flex;
flex-direction:column}
.roadmap span{
color:var(--muted)}
.newsletter{
display:grid;
gap:25px;
align-items:center}
.newsletter form{
display:flex;
flex-direction:column;
gap:10px}
.newsletter label,.auth-card label,.design-form label,#product-form label{
display:grid;
gap:6px;
font-weight:700}
.newsletter input,.auth-card input,.design-form input,.design-form select,#product-form input{
border:1px solid var(--line);
border-radius:10px;
padding:12px;
background:white}
.case-list{
display:grid;
gap:25px}
.case{
padding:18px;
display:grid;
gap:28px;
align-items:center}
.case-visual{
min-height:280px;
border-radius:15px;
display:grid;
place-items:center;
font-size:5rem;
font-weight:900;
color:white}
.case-visual.pay{
background:linear-gradient(145deg,#102538,#20a78a)}
.case-visual.haclif{
background:linear-gradient(145deg,#131619,#b8352d)}
.case-visual.sandra{
background:linear-gradient(145deg,#daa88e,#71374f);
font-family:Georgia}
.pills{
display:flex;
gap:7px;
flex-wrap:wrap;
margin:20px 0}
.pills span{
font-size:.76rem;
padding:5px 10px;
border-radius:99px;
background:var(--soft)}
.pricing-grid{
gap:22px}
.price{
position:relative}
.price h2{
font-size:2.6rem}
.price h2 small{
font-size:.9rem;
color:var(--muted)}
.popular{
border:2px solid var(--brand)}
.popular-label{
position:absolute;
top:-14px;
right:20px;
background:var(--brand);
color:white;
border-radius:99px;
padding:5px 12px;
font-size:.75rem;
font-weight:800}
.auth-page{
min-height:100vh;
background:var(--soft);
display:grid;
place-items:center;
padding:25px}
.auth-brand{
position:absolute;
top:25px;
left:25px}
.auth-card{
width:min(450px,100%);
padding:108px 30px 30px;
position:relative}
.auth-card-logo{
position:absolute;
top:20px;
right:22px}
.auth-card-logo img.brand-wordmark{
width:106px}
.auth-card h1{
font-size:2.7rem}
.auth-card form{
display:grid;
gap:17px;
margin:25px 0}
.auth-card small{
color:var(--muted)}
.toast{
position:fixed;
left:50%;
bottom:20px;
transform:translate(-50%,120px);
background:var(--ink);
color:white;
padding:11px 17px;
border-radius:10px;
opacity:0;
z-index:100;
transition:.3s;
box-shadow:var(--shadow)}
.toast.show{
opacity:1;
transform:translate(-50%,0)}

/* =====================================================
   PUBLIC ALBERTINO ROSSI WHATSAPP CONTACT
===================================================== */

.platform-whatsapp-contact{
position:fixed;
right:18px;
bottom:calc(18px + env(safe-area-inset-bottom));
z-index:45;
display:flex;
align-items:center;
gap:9px;
min-height:48px;
padding:11px 16px;
border:1px solid #050505;
border-radius:999px;
background:#050505;
color:#fff;
box-shadow:0 14px 35px rgba(0,0,0,.22);
font-size:.88rem;
font-weight:750;
transition:transform .18s ease,background .18s ease}
.platform-whatsapp-contact svg{
width:21px;
height:21px;
fill:currentColor}
.platform-whatsapp-contact:hover,
.platform-whatsapp-contact:focus-visible{
transform:translateY(-2px);
background:#242426}

@media(min-width:760px){
.platform-whatsapp-contact{
right:28px;
bottom:28px}
}

.empty-store-directory{
grid-column:1/-1;
max-width:720px;
padding:32px}
.empty-store-directory h2{
margin:8px 0 10px}
.empty-store-directory .button{
margin-top:10px}
dialog{
border:0;
border-radius:18px;
padding:0;
box-shadow:var(--shadow);
width:min(500px,calc(100% - 30px))}
dialog::backdrop{
background:#101826aa}
.dialog-title{
display:flex;
align-items:center;
justify-content:space-between}
.dialog-title button{
border:0;
background:none;
font-size:2rem}
.dialog-title .dialog-close{
width:44px;
height:44px;
display:grid;
place-items:center;
padding:0;
border:0;
border-radius:14px;
background:#f1f1f3;
color:#050505;
-webkit-appearance:none;
appearance:none;
-webkit-tap-highlight-color:transparent;
font-size:1.8rem;
font-weight:400;
line-height:1}
.dialog-title .dialog-close:hover,
.dialog-title .dialog-close:focus-visible{
background:#e4e4e7;
color:#050505}
#product-form{
padding:25px;
display:grid;
gap:15px}

@media(min-width:760px){
.section{
padding:105px 0}
.grid-3,.pricing-grid{
grid-template-columns:repeat(3,1fr)}
.hero,.split-section{
grid-template-columns:1.15fr .85fr}
.timeline{
grid-template-columns:repeat(4,1fr)}
.newsletter{
grid-template-columns:1fr 1fr}
.newsletter form{
grid-template-columns:1fr auto;
align-items:end}
.case{
grid-template-columns:.75fr 1.25fr;
padding:25px}
footer{
grid-template-columns:2fr 1fr 1fr}
footer small{
grid-column:1/-1}
.cta{
padding:70px}
}

@media(min-width:950px){
.menu-toggle{
display:none}
.site-header nav{
display:flex;
position:static;
box-shadow:none;
border:0;
padding:0;
flex-direction:row;
align-items:center;
background:transparent;
gap:22px}
.site-header nav a:not(.button){
padding:0;
font-size:.9rem}
.hero-demo{
justify-self:end}
}

@media(max-width:500px){
h1{
font-size:2.75rem}
.button{
width:100%}
.site-header .button-small{
width:auto}
.cta{
width:calc(100% - 24px)}
.metric{
align-items:start;
flex-direction:column}
.metric strong{
font-size:1.7rem}
}


/* Albertino Rossi complete image-based wordmark */
.brand img.brand-wordmark {
  display: block;
  width: 158px;
  height: auto;
  border-radius: 0;
}

/* The homepage carries the strongest version of the platform identity. */
.home-page .site-header .brand img.brand-wordmark {
  width: 158px;
}

/* Preserve the approved registration and login card logo size. */
.auth-card .auth-card-logo img.brand-wordmark {
  width: 125px;
}

.brand-inline-logo {
  display: inline-block;
  width: 91px;
  height: auto;
  margin: 0 3px;
  vertical-align: middle;
}

.powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}