/* ============================================================
RESET
============================================================ */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:"DM Sans", sans-serif;
line-height:1.6;
color:#121630;
background:#ffffff;
}


/* ============================================================
LAYOUT CORE
============================================================ */

section{
width:100%;
min-height:100vh;
padding:140px 0;
display:flex;
align-items:center;
}

.container{
width:100%;
max-width:1200px;
margin:0 auto;
padding:0 24px;
}


/* ============================================================
FEATURES SECTION
============================================================ */

.features {
  background: url("../images/features.jpg") center/cover no-repeat;
  color: #121630;
  padding: 140px 0;
}

.features-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.features-header {
  text-align: center;
  margin-bottom: 90px;
}

.features-header h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 44px;
  font-weight: 500;
}

/* ============================================================
FEATURES GRID
============================================================ */

.features-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ============================================================
FEATURE CARD
============================================================ */

.feature-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;

  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  padding: 34px 32px;

  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-top: 2px solid rgba(201, 168, 76, 0.25);

  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);

  transition: transform .35s ease, box-shadow .35s ease,
              border-top-color .35s ease, background .35s ease;

  overflow: hidden;
}

/* Shimmer line bottom */
.feature-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, #c9a84c, rgba(201,168,76,.2));
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
FEATURE HOVER
============================================================ */

.feature-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.88);
  border-top-color: #c9a84c;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(201, 168, 76, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.feature-item:hover::after {
  width: 100%;
}

/* ============================================================
FEATURE ICON
============================================================ */

.feature-item span {
  width: 48px;
  height: 48px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 0;
  border: 1px solid rgba(201, 168, 76, 0.3);
  background: rgba(201, 168, 76, 0.08);

  font-size: 22px;
  color: #c9a84c;

  transition: background .3s, border-color .3s, transform .3s;
}

.feature-item:hover span {
  background: rgba(201, 168, 76, 0.15);
  border-color: rgba(201, 168, 76, 0.6);
  transform: scale(1.05);
}

/* ============================================================
FEATURE TEXT
============================================================ */

.feature-item h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: .01em;
  color: #121630;
}

.feature-item p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(18, 22, 48, 0.6);
  max-width: 420px;
}

/* ============================================================
RESPONSIVE
============================================================ */

@media (max-width: 760px) {
  .features-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
PRODUCT PREVIEW
============================================================ */

.product-preview{
background:#0b1320;
color:#ffffff;
}

.product-preview-inner{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

.product-text h2{
font-family:"Cormorant Garamond", serif;
font-size:42px;
margin-bottom:18px;
}

.product-text p{
opacity:.75;
font-size:18px;
margin-bottom:30px;
}

.product-dashboard{
width:100%;
border-radius:16px;
box-shadow:0 50px 120px rgba(0,0,0,.6);
}

.product-visual{
position:relative;
}

/* ============================================================
PRICING SECTION
============================================================ */

.pricing{
background:#F0EEE9;
}


/* ============================================================
PRICING HEADER
============================================================ */

.pricing-header{
text-align:center;
margin-bottom:60px;
}

.pricing-header h2{
font-family:"Cormorant Garamond", serif;
font-size:42px;
margin-bottom:14px;
}


/* ============================================================
PRICING TOGGLE
============================================================ */

.pricing-toggle{
display:flex;
justify-content:center;
align-items:center;
gap:14px;
margin-top:30px;
}

.toggle-label{
font-size:14px;
opacity:.7;
}

.toggle-label.yearly strong{
color:#c9a84c;
}


/* ============================================================
SWITCH
============================================================ */

.switch{
position:relative;
display:inline-block;
width:50px;
height:26px;
}

.switch input{
display:none;
}

.slider{
position:absolute;
cursor:pointer;
inset:0;
background:#8a96a8;
border-radius:30px;
transition:.3s;
}

.slider:before{
position:absolute;
content:"";
height:20px;
width:20px;
left:3px;
bottom:3px;
background:white;
border-radius:50%;
transition:.3s;
}

.switch input:checked + .slider{
background:#c9a84c;
}

.switch input:checked + .slider:before{
transform:translateX(24px);
}


/* ============================================================
PRICING GRID
============================================================ */

.pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
align-items:stretch;
}


/* ============================================================
PRICING CARD
============================================================ */

.pricing-card{
background:#111b2c;
padding:40px;
border-radius:16px;
border:1px solid rgba(255,255,255,.05);
color:#ffffff;
display:flex;
flex-direction:column;
transition:.35s;
}

.pricing-card:hover{
transform:translateY(-6px);
box-shadow:0 30px 70px rgba(0,0,0,.6);
}

.pricing-card.featured{
border:1px solid #c9a84c;
transform:scale(1.05);
position:relative;
}

.pricing-card.featured:hover{
transform:scale(1.05) translateY(-6px);
}
.pricing-badge{
position:absolute;
top:-12px;
left:50%;
transform:translateX(-50%);
background:linear-gradient(135deg,#c9a84c,#e4c97a);
color:#0b1320;
font-size:11px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
padding:6px 14px;
border-radius:999px;
box-shadow:0 4px 14px rgba(201,168,76,.45);
white-space:nowrap;
z-index:2;
}

/* ============================================================
PRICING BUTTONS
============================================================ */

.pricing-card .btn-primary,
.pricing-card .btn-secondary{

display:inline-block;
width:auto;

align-self:flex-start;

padding:12px 26px;

}

/* ============================================================
PRICE
============================================================ */

.price{
margin:20px 0 6px;
line-height:1;
}

.price-value{
font-size:64px;
font-weight:700;
letter-spacing:-1px;
color:#ffffff;
}

.price-period{
font-size:20px;
opacity:.75;
margin-left:6px;
}

.price-instead{
font-size:13px;
margin-top:6px;
color:#8b95a7;
}

.price-old{
text-decoration:line-through;
font-weight:500;
color:#7b8495;
}


/* ============================================================
BILLING INFO
============================================================ */

.billing{
font-size:13px;
opacity:.6;
margin-bottom:22px;
}


/* ============================================================
YEARLY SUMMARY
============================================================ */

.yearly-summary{
display:flex;
align-items:center;
gap:10px;
margin-top:8px;
margin-bottom:22px;
font-size:14px;
flex-wrap:wrap;
}

.yearly-old{
text-decoration:line-through;
opacity:.35;
}

.yearly-final{
font-weight:500;
}

.yearly-save{

color:#0b1320;
background:#c9a84c;
font-weight:600;
padding:4px 10px;
border-radius:6px;
font-size:12px;
letter-spacing:.3px;

}


/* ============================================================
CONTACT PRICE (ENTERPRISE)
============================================================ */

.contact-price{
font-size:32px;
margin-bottom:20px;
}

/* ============================================================
FEATURE LIST
============================================================ */

.pricing-features{
list-style:none;
padding:0;
margin:0 0 24px 0;
flex-grow:1;
}
.pricing-features li{
position:relative;
padding-left:20px;
line-height:1.6;
margin-bottom:6px;
}
.pricing-features li::before{
content:"";
position:absolute;
left:4px;
top:11px;
width:6px;
height:6px;
border-radius:50%;
background:#c9a84c;
}
.pricing-features li.plan-parent{
padding-left:0;
margin-bottom:10px;
}
.pricing-features li.plan-parent::before{
display:none;
}

/* ============================================================
PLAN INHERIT
============================================================ */

.plan-parent{
color:#c9a84c;
font-weight:600;
position:relative;
padding-left:18px;
}

.plan-parent::before{
content:"✓";
position:absolute;
left:0;
color:#c9a84c;
font-weight:700;
}

/* ============================================================
VIEW FEATURES BUTTON
============================================================ */

.view-features{
display:none;
}   

/* ============================================================
TESTIMONIALS
============================================================ */

.testimonials {
  background: radial-gradient(
    circle at top,
    #0f1c36 0%,
    #0b1320 40%,
    #060c1a 100%
  );
  color: #ffffff;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}

/* Linea decorativa top */
.testimonials::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,.35), transparent);
}

/* ============================================================
HEADER
============================================================ */

.testimonials-header {
  text-align: center;
  margin-bottom: 80px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.testimonials-eyebrow {
  display: inline-block;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 10px;
  color: #c9a84c;
  margin-bottom: 22px;
  position: relative;
  padding: 0 28px;
}

.testimonials-eyebrow::before,
.testimonials-eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px;
  height: 1px;
  background: #c9a84c;
  opacity: .5;
}
.testimonials-eyebrow::before { right: 100%; margin-right: -24px; }
.testimonials-eyebrow::after  { left:  100%; margin-left:  -24px; }

.testimonials-header h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 500;
  line-height: 1.12;
  margin-bottom: 18px;
}

.testimonials-header p {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,.55);
  margin-bottom: 0;
}

/* ============================================================
GRID
============================================================ */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ============================================================
CARD
============================================================ */

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-top: 2px solid rgba(201,168,76,.2);
  padding: 40px 36px 36px;
  transition: border-top-color .35s ease, background .35s ease,
              transform .35s ease, box-shadow .35s ease;
}

.testimonial-card:hover {
  background: rgba(255,255,255,.05);
  border-top-color: #c9a84c;
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}

/* Virgolettone decorativo */
.testimonial-quote {
  font-family: "Cormorant Garamond", serif;
  font-size: 80px;
  line-height: .7;
  color: #c9a84c;
  opacity: .25;
  margin-bottom: 16px;
  transition: opacity .35s ease;
  user-select: none;
}

.testimonial-card:hover .testimonial-quote {
  opacity: .5;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,.8);
  flex: 1;
  margin-bottom: 32px;
}

/* ============================================================
FOOTER CARD
============================================================ */

.testimonial-footer {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 24px;
}

/* Stelle */
.testimonial-stars {
  display: flex;
  gap: 3px;
}

.testimonial-stars span {
  font-size: 13px;
  color: #c9a84c;
}

/* Autore */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(201,168,76,.3);
  filter: grayscale(.2);
  transition: filter .3s;
}

.testimonial-card:hover .testimonial-author img {
  filter: grayscale(0);
}

.testimonial-author strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  letter-spacing: .02em;
}

.testimonial-author span {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  letter-spacing: .02em;
}

/* ============================================================
RESPONSIVE
============================================================ */

@media (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .testimonial-card {
    padding: 30px 24px;
  }
}

/* ============================================================
CONTACT
============================================================ */

.contact{
background:#F0EEE9;
color:#121630;
padding:140px 0;
}


/* ============================================================
GRID
============================================================ */

.contact-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:60px;
align-items:stretch;
}


/* ============================================================
FORM
============================================================ */

.contact-form h2{
font-family:"Cormorant Garamond", serif;
font-size:42px;
margin-bottom:16px;
}

.contact-form p{
opacity:.7;
margin-bottom:34px;
max-width:440px;
line-height:1.6;
}


/* ============================================================
FORM LAYOUT
============================================================ */

.contact-form form{
display:flex;
flex-direction:column;
gap:18px;
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}


/* ============================================================
INPUTS
============================================================ */

.contact-form input,
.contact-form textarea{
width:100%;
padding:15px 16px;

border:1px solid rgba(0,0,0,.14);
border-radius:10px;

font-family:"DM Sans", sans-serif;
font-size:15px;

background:#ffffff;
transition:border .25s ease, box-shadow .25s ease;
}

.contact-form textarea{
min-height:150px;
resize:vertical;
}

.hp-field{
position:absolute;
left:-9999px;
opacity:0;
pointer-events:none;
}

/* ============================================================
INPUT FOCUS
============================================================ */

.contact-form input:focus,
.contact-form textarea:focus{
outline:none;
border-color:#c9a84c;
box-shadow:0 0 0 2px rgba(201,168,76,.15);
}

.field.error input,
.field.error textarea{
border:1px solid #d93025;
}

/* ============================================================
BUTTON
============================================================ */

.btn-primary{

margin-top:10px;

background:#c9a84c;
color:#0b1320;

padding:15px 26px;

border:none;
border-radius:10px;

font-weight:600;
cursor:pointer;

transition:all .25s ease;

}

.btn-primary:hover{

background:#e0c067;
transform:translateY(-2px);

}


/* ============================================================
MAP
============================================================ */

.contact-map{
display:flex;
}

.contact-map iframe{
width:100%;
height:100%;
min-height:520px;

border:none;
border-radius:16px;

box-shadow:0 25px 70px rgba(0,0,0,.12);
}

/* Mobile */

@media (max-width:640px){

.pricing-grid,
.testimonials-grid{
grid-template-columns:1fr;
}

.features-header h2{
font-size:34px;
}

}