:root{
--bg:#252525;
--surface:#2f2f2f;
--text:#ffffff;
--muted:#9d9d9d;
--primary:#6f1c24;
--accent:#efd173;
--mint:#d8ece7;
--quote:#ecdca8;
--container:75rem;
--radius:1.25rem;
--input-bg:#3c3c3c;
--input-bg-focus:#494949;
--border-subtle:#454545;
--error:#ff8585;
--error-bg:rgba(255,100,100,.08);
--accent-hover:#d9bb4b;
--radius-pill:999px;
}

*,
*::before,
*::after{box-sizing:border-box;}

html{font-size:16px;}

body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.5;
}

h1,h2,h3,p{margin:0;}
ul{list-style:none;margin:0;padding:0;}
a{text-decoration:none;color:inherit;}

.container{
width:min(var(--container),calc(100% - 8rem));
margin-inline:auto;
}

.site-header{padding:2rem 0;}
.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{font-size:1.5rem;font-weight:700;}
.nav-list{display:flex;align-items:center;gap:2rem;}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.9rem 1.8rem;
border-radius:0.75rem;
font-weight:600;
}

.btn-primary{background:var(--accent);color:#222;}
.btn-secondary{background:var(--primary);color:#222;}


.hero-content{text-align:center;}
.hero {
   padding-bottom: 0 !important;
}
.hero h1{font-size:4rem;line-height:1.1;}
.hero p{
max-width:40rem;
margin:2rem auto;
color:var(--muted);
}

.hero-visual{
position:relative;
height:32rem;
display:flex;
justify-content:center;
align-items:flex-start;
}

.hero-arc{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:68rem;
height:16rem;
background:var(--mint);
border-radius:34rem 34rem 0 0;
display:flex;
align-items:center;
justify-content:center;
}

.hero-arc img{
  max-width:100%;
  height:auto;
  display:block;
  transform:translateY(-15%);
}

.placeholder{
background:var(--surface);
border:0.125rem dashed rgba(255,255,255,.15);
border-radius:var(--radius);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:2rem;
color:var(--muted);
}




.partners{
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
}

.partners-list{
display:flex;
justify-content:space-between;
font-size:2rem;
color:#666;
font-weight:700;
}


.showcase-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:2rem;
background:var(--primary);
padding:3rem;
border-radius:var(--radius);
}

.dashboard{height:22rem;width:100%;object-fit:cover;border-radius:var(--radius);display:block;}
.table-card{height:18rem;align-self:start;}


.features-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:4rem;
align-items:center;
}

.feature{
display:flex;
gap:1.5rem;
margin-bottom:2.5rem;
}

.icon-placeholder{
width:4rem;
height:4rem;
background:#444;
border-radius:1rem;
flex-shrink:0;
}

.feature p{color:var(--muted);margin-top:.5rem;}

.phone-mockup{
height:26rem;
background:var(--mint);
color:#444;
}


.testimonial blockquote{
margin:0;
padding:6rem;
background:var(--quote);
border-radius:var(--radius);
text-align:center;
color:#222;
}

.testimonial footer{
margin-top:2rem;
opacity:.6;
}

.cta-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:4rem;
align-items:center;
}

.cta p{
max-width:22rem;
margin-bottom:2rem;
color:var(--muted);
}

.kydari-card{
height:22rem;
background:var(--mint);
color:#444;
}

.site-footer{
border-top:1px solid rgba(255,255,255,.08);
}

.footer-inner{
display:flex;
justify-content:space-between;
align-items:center;
}

.footer-links{
display:flex;
gap:2rem;
font-size:.95rem;
}

.section{padding:5rem 0;}

.heading{
font-size:2.5rem;
line-height:1.25;
margin-bottom:1.5rem;
}

.subheading{
color:var(--muted);
font-size:1.125rem;
max-width:40rem;
}

.problem{text-align:center;}
.problem .subheading{margin-inline:auto;}

.spacer{height:8rem;}

.personas{
padding:4rem 0;
}

.personas-row{

margin-top: 3rem;
display:flex;
align-items:center;
justify-content:center;
gap:2rem;
}

.personas-row img{
width:12rem;
height:12rem;
object-fit:cover;
}

.personas-row img:first-child{
transform:scaleX(-1);
}

.retirement-framework{padding:8rem 0;}

.section-heading{
max-width:42rem;
margin:0 auto 4rem;
text-align:center;
}

.section-heading h2{
margin-bottom:1.5rem;
font-size:3rem;
line-height:1.1;
font-weight:700;
}

.section-heading p{
color:var(--muted);
font-size:1.125rem;
}

.framework-diagram{
position:relative;
min-height:50rem;
margin-top:5rem;
}

.framework-connectors{
position:absolute;
inset:0;
z-index:1;
}

.svg-placeholder{
width:100%;
height:100%;
border:0.125rem dashed rgba(255,255,255,.15);
border-radius:2rem;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:var(--muted);
background:repeating-linear-gradient(-45deg,rgba(255,255,255,.02),rgba(255,255,255,.02) 1rem,transparent 1rem,transparent 2rem);
}

.framework-svg{
width:100%;
height:100%;
object-fit:contain;
}

.framework-chart{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:3;
}

.donut-chart{
width:18rem;
height:18rem;
border-radius:50%;
background:conic-gradient(#f0cf70 0deg 72deg,#ff8d70 72deg 144deg,#7ad4c0 144deg 216deg,#6d92ff 216deg 288deg,#c09cff 288deg 360deg);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 1.5rem 4rem rgba(0,0,0,.35);
}

.donut-chart__inner{
width:10rem;
height:10rem;
border-radius:50%;
background:var(--bg);
display:flex;
align-items:center;
justify-content:center;
}

.donut-chart__inner span{
font-size:1.25rem;
font-weight:700;
}

.plan-card{
position:absolute;
width:16rem;
padding:1.5rem;
background:var(--surface);
border:0.0625rem solid rgba(255,255,255,.08);
border-radius:var(--radius);
z-index:4;
}

.plan-card h3{
margin-bottom:.75rem;
}

.plan-card p{
color:var(--muted);
}

.plan-icon-placeholder{
width:4rem;
height:4rem;
margin-bottom:1rem;
border-radius:1rem;
background:linear-gradient(135deg,rgba(182,156,247,.35),rgba(239,209,115,.35));
}

.plan-card--financial{
top:3rem;
left:0;
}

.plan-card--legal{
top:3rem;
right:0;
}

.plan-card--health{
bottom:10rem;
right:0;
}

.plan-card--social{
bottom:10rem;
left:0;
}

.plan-card--transition{
bottom:0;
left:50%;
transform:translateX(-50%);
}


/* ============================================
   Auth pages
   ============================================ */

body.auth-page{
display:flex;
flex-direction:column;
height:100dvh;
}

body.auth-page .site-header{flex-shrink:0;padding:1.25rem 0;}

.bg-decor{
position:fixed;
inset:0;
overflow:hidden;
z-index:0;
pointer-events:none;
}

.bg-decor::before,
.bg-decor::after{
content:"";
position:absolute;
width:620px;
height:620px;
border-radius:50%;
background:var(--mint);
opacity:.05;
}

.bg-decor::before{top:-220px;left:-220px;}
.bg-decor::after{bottom:-260px;right:-260px;background:var(--accent);}

.auth-wrap{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
flex:1;
min-height:0;
padding:0 1.5rem;
}

.auth-card{
background:var(--surface);
border-radius:var(--radius);
padding:1.75rem 2rem 1.5rem;
box-shadow:0 30px 60px -25px rgba(0,0,0,.6);
border:1px solid rgba(255,255,255,.04);
width:100%;
max-width:680px;
}

.auth-heading{
font-size:1.625rem;
font-weight:700;
letter-spacing:-.01em;
margin:0 0 .375rem;
}

.auth-subtext{
color:var(--muted);
font-size:.9rem;
margin:0 0 .875rem;
line-height:1.5;
}

.auth-card form{
display:flex;
flex-direction:column;
gap:.875rem;
}

.field{
display:flex;
flex-direction:column;
gap:.5rem;
}

.field label{
font-size:.875rem;
font-weight:700;
color:var(--muted);
padding-left:.375rem;
letter-spacing:.01em;
}

.field-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
}

.input-shell{
position:relative;
display:flex;
align-items:center;
}

.input-shell input{
width:100%;
font-family:Inter,Arial,sans-serif;
font-size:.9375rem;
color:var(--text);
background:var(--input-bg);
border:1.5px solid transparent;
border-radius:.625rem;
padding:.75rem 1.25rem;
outline:none;
transition:background .15s ease,border-color .15s ease;
}

.input-shell input::placeholder{color:#707070;}

.input-shell input:focus{
background:var(--input-bg-focus);
border-color:rgba(239,209,115,.5);
}

.field.has-error .input-shell input{
border-color:var(--error);
background:var(--error-bg);
}

.input-shell input.pw-input{padding-right:3rem;}

.toggle-visibility{
position:absolute;
right:.5rem;
width:2.25rem;
height:2.25rem;
display:flex;
align-items:center;
justify-content:center;
background:none;
border:none;
cursor:pointer;
color:var(--muted);
padding:0;
border-radius:50%;
transition:color .15s ease,background .15s ease;
}

.toggle-visibility:hover{color:var(--text);background:rgba(255,255,255,.06);}

.toggle-visibility svg{width:1.1875rem;height:1.1875rem;}

.error-text{
display:none;
font-size:.78rem;
color:var(--error);
padding-left:.375rem;
line-height:1.4;
}

.field.has-error .error-text{display:block;}

.field-hint{
font-size:.75rem;
color:#707070;
padding-left:.375rem;
}

.row-end{
display:flex;
justify-content:flex-end;
margin-top:-.25rem;
}

.link-muted{
font-size:.84rem;
color:var(--muted);
text-decoration:none;
}

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

.link-accent{
color:var(--accent);
text-decoration:none;
font-weight:600;
}

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

.auth-card .btn{
display:flex;
width:100%;
border:none;
cursor:pointer;
font-size:1rem;
border-radius:.625rem;
padding:.9rem 1.25rem;
transition:background .15s ease,transform .1s ease;
}

.auth-card .btn-primary:hover{background:var(--accent-hover);}

.auth-card .btn-primary:active{transform:scale(.99);}

.auth-card .btn-primary:disabled{opacity:.6;cursor:not-allowed;}

.switch-text{
text-align:center;
font-size:.875rem;
color:var(--muted);
margin-top:.75rem;
}

.form-success{
display:none;
align-items:center;
gap:.625rem;
background:rgba(216,236,231,.08);
border:1px solid rgba(216,236,231,.2);
color:var(--mint);
font-size:.84rem;
border-radius:1rem;
padding:.75rem 1rem;
margin-top:.25rem;
}

.form-success.visible{display:flex;}

.audit-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:4rem;
align-items:center;
}

.audit-grid+.audit-grid{margin-top:3rem;}

.audit-visual{
overflow:hidden;
border-radius:var(--radius);
}

.audit-visual img{
width:100%;
display:block;
}

.audit-visual--mint{
display:flex;
align-items:center;
justify-content:center;
}

.audit-visual--mint img{
object-fit:cover;
height:100%;
}

.audit-grid--cv{
  position:relative;
  min-height:28rem;
}

.audit-grid--cv::before{
  content:'';
  position:absolute;
  left:calc((100% - 100vw) / 2);
  top: -25%;
  height:150%;
  width:50vw;
  background:
    linear-gradient(to bottom,transparent 30%,var(--bg) 90%),
    linear-gradient(to right,transparent 80%,var(--bg) 100%),
    url('images/expert-cv-group.png') center/cover no-repeat;
  z-index:0;
}

.audit-grid--cv .audit-content{
  grid-column:2;
  position:relative;
  z-index:1;
}

.audit-content p{
color:var(--muted);
max-width:28rem;
margin-bottom:2rem;
}

.audit-pitch-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}

.audit-pitch__content p{
  color:var(--muted);
  max-width:28rem;
  margin-bottom:2rem;
}

.audit-pitch__visual{
  overflow:hidden;
  border-radius:var(--radius);
}

.audit-pitch__visual img{
  width:100%;
  display:block;
}

.whatsapp-float{
  position:fixed;
  bottom:2rem;
  right:2rem;
  width:3.5rem;
  height:3.5rem;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
  transition:transform .2s,box-shadow .2s;
  z-index:100;
}

.whatsapp-float:hover{
  transform:scale(1.1);
  box-shadow:0 6px 28px rgba(0,0,0,.45);
}

.whatsapp-float svg{
  width:1.75rem;
  height:1.75rem;
}

@media(max-width:48em){
  .container{width:min(var(--container),calc(100% - 3rem));}
  .section{padding:3.5rem 0;}
  .site-header{padding:1.25rem 0;}
  .header-inner{gap:1rem;}
  .nav-list{gap:1.25rem;}
  .btn-secondary{font-size:.875rem;padding:.5rem 1rem;}

  .hero{padding-top:3.5rem;overflow:hidden;}
  .hero h1{font-size:2.5rem;}
  .hero p{font-size:1rem;}
  .hero-visual{height:20rem;}
  .hero-arc{width:110vw;height:12rem;border-radius:17rem 17rem 0 0;}
  .hero-arc img{max-width:22rem;}

  .partners-list{flex-wrap:wrap;justify-content:center;gap:1.25rem 2rem;font-size:1.25rem;}

  .heading{font-size:2rem;}
  .subheading{font-size:1rem;}
  .personas-row{flex-wrap:wrap;justify-content:center;}
  .personas-row img{width:10rem;height:10rem;}

  .spacer{height:4rem;}
  .retirement-framework{padding:5rem 0;}
  .section-heading{max-width:100%;margin-bottom:2.5rem;}
  .section-heading h2{font-size:2rem;}
  .framework-diagram{
    position:relative;
    min-height:auto;
    margin-top:2rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
  }
  .framework-connectors{display:none;}
  .framework-chart{
    position:static;
    transform:none;
    grid-column:1/-1;
    justify-self:center;
  }
  .donut-chart{width:12rem;height:12rem;}
  .donut-chart__inner{width:7rem;height:7rem;}
  .donut-chart__inner span{font-size:1rem;}
  .plan-card{
    position:static;
    width:auto;
    transform:none;
  }
  .plan-card--financial,
  .plan-card--legal,
  .plan-card--health,
  .plan-card--social,
  .plan-card--transition{
    top:auto;left:auto;right:auto;bottom:auto;
  }

  .showcase-grid{
    grid-template-columns:1fr;
    gap:2rem;
    padding:1.5rem;
    border-radius:1rem;
  }
  .dashboard{height:auto;max-height:16rem;}
  .table-card{height:12rem;min-height:auto;}

  .features-grid{grid-template-columns:1fr;gap:2rem;}
  .phone-mockup{height:16rem;}

  .audit-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .audit-grid+.audit-grid{margin-top:2rem;}
  .audit-grid--cv{min-height:22rem;}
  .audit-grid--cv::before{
    left:calc((100% - 100vw) / 2);
    width:100vw;
  }
  .audit-grid--cv .audit-content{grid-column:1;}

  .audit-pitch-grid{grid-template-columns:1fr;gap:2rem;}

  .testimonial blockquote{padding:2.5rem;}

  .cta-grid{grid-template-columns:1fr;gap:2rem;}
  .kydari-card{height:14rem;}

  .footer-inner{flex-direction:column;align-items:center;gap:1rem;}
  .footer-links{flex-wrap:wrap;justify-content:center;gap:1rem;}

  .bg-decor::before,
  .bg-decor::after{
    width:400px;
    height:400px;
  }
  .bg-decor::before{top:-140px;left:-140px;}
  .bg-decor::after{bottom:-160px;right:-160px;}
}

@media(max-width:30em){
  .section{padding:2.5rem 0;}
  .spacer{height:3rem;}

  .hero h1{font-size:2rem;}
  .hero p{font-size:.9375rem;}
  .hero-visual{height:14rem;}
  .hero-arc{height:9rem;border-radius:12rem 12rem 0 0;}
  .hero-arc img{max-width:16rem;}

  .heading{font-size:1.5rem;margin-bottom:1rem;}
  .subheading{font-size:.9375rem;}

  .personas-row img{width:8rem;height:8rem;}

  .section-heading h2{font-size:1.5rem;}
  .framework-diagram{grid-template-columns:1fr;}

  .testimonial blockquote{padding:2rem 1.25rem;}

  .whatsapp-float{bottom:1rem;right:1rem;width:3rem;height:3rem;}
  .whatsapp-float svg{width:1.5rem;height:1.5rem;}

  .auth-card{padding:1.5rem 1.25rem 1.25rem;border-radius:1.375rem;}
  .field-row{grid-template-columns:1fr;}

  .bg-decor::before,
  .bg-decor::after{display:none;}
}