/* SellSmart components and layout refinements */
/* COMPACT LAYOUT */
:root{
--container: 1180px;
}

/* Header mai compact */
.site-header{
padding-left: max(24px, calc((100vw - var(--container)) / 2));
padding-right: max(24px, calc((100vw - var(--container)) / 2));
}

/* Hero mai îngust */
.hero{
min-height: 520px;
grid-template-columns: 0.9fr 1fr;
padding: 50px max(24px, calc((100vw - var(--container)) / 2)) 44px;
}

.hero h1{
font-size: clamp(42px, 4.1vw, 58px);
max-width: 560px;
}

.hero p{
max-width: 500px;
font-size: 16px;
}

.hero-visual{
min-height: 420px;
}

.hero-pos-image{
width: min(600px, 100%);
}

.gradient-orb{
width: 620px;
height: 450px;
right: -160px;
}

/* Beneficii mai compacte */
.quick-benefits{
width: var(--container);
max-width: calc(100% - 48px);
margin: -10px auto 55px;
}

.benefit-card{
padding: 20px 26px;
min-height: 100px;
}

/* Video mai compact */
.video-section{
width: var(--container);
max-width: calc(100% - 48px);
margin: 35px auto 60px;
padding: 18px 36px;
grid-template-columns: 330px 1fr;
gap: 36px;
}

.video-preview{
height: 320px;
}

/* Produse mai compacte */
.section{
padding: 36px max(24px, calc((100vw - var(--container)) / 2)) 28px;
}

.section-heading{
margin-bottom: 36px;
}

.section-heading h2{
font-size: 42px;
}

.product-grid{
gap: 18px;
}

.product-grid--five{
grid-template-columns:repeat(6,minmax(0,1fr));
}

.product-grid--five > .product-card{
grid-column:span 2;
}

.product-grid--five > .product-card:nth-child(-n+3) .product-image{
height:200px;
}

.product-grid--five > .product-card:nth-child(n+4){
grid-column:span 3;
display:flex;
flex-direction:column;
}

.product-grid--five > .product-card:nth-child(n+4) .product-image{
height:210px;
}

.product-card{
padding: 20px;
}

.product-image{
height: 155px;
}

.card-btn{
height: 44px;
}

/* Mobile section compact */
.mobile-feature{
width: var(--container);
max-width: calc(100% - 48px);
margin: 20px auto 42px;
padding: 30px 38px;
grid-template-columns: 260px 1fr 320px;
gap: 44px;
}

.mobile-image img{
width: 230px;
}

.mobile-copy h2{
font-size: 42px;
}

.mobile-copy p{
font-size: 16px;
line-height: 1.65;
}

/* Why section */
.why-section{
width: var(--container);
max-width: calc(100% - 48px);
margin: 35px auto 42px;
}

/* Logos */
.logos{
width: var(--container);
max-width: calc(100% - 48px);
margin: 0 auto;
padding: 0 0 60px;
}

.cta-banner{
  width: var(--container);
  max-width: calc(100% - 48px);

  margin: 40px auto 60px;

  padding: 28px 32px;

  display:flex;
  align-items:center;
  gap:24px;

  background:linear-gradient(
      135deg,
      #2f37e8,
      #473df1,
      #5b4cf7
  );

  border-radius:20px;

  box-shadow:
      0 20px 50px rgba(79,70,229,.28);
}

.cta-icon{
  width:64px;
  height:64px;

  border-radius:16px;

  background:rgba(255,255,255,.12);

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

  color:white;

  flex-shrink:0;
}

.cta-icon svg{
  width:30px;
  height:30px;
}

.cta-content{
  flex:1;
}

.cta-content h3{
  margin:0 0 6px;

  color:white;

  font-size:30px;
  font-weight:800;
}

.cta-content p{
  margin:0;

  color:rgba(255,255,255,.85);

  font-size:16px;
}

.cta-button{
  height:58px;

  padding:0 30px;

  border-radius:12px;

  background:white;

  color:#3d44ec;

  font-weight:800;

  display:flex;
  align-items:center;
  gap:14px;

  flex-shrink:0;

  transition:.25s;
}

.cta-button:hover{
  transform:translateY(-2px);
}


.contact-section{
  width: var(--container);
  max-width: calc(100% - 48px);

  margin: 40px auto 70px;
margin-bottom: 70px;
  padding: 50px;

  display:grid;
  grid-template-columns: 1fr 520px;
  gap:60px;

  background:white;

  border:1px solid #e4e8f5;
  border-radius:24px;

  box-shadow:
      0 20px 50px rgba(41,50,100,.06);
}

.contact-info h2{
  margin:20px 0;

  font-size:52px;
  line-height:1.05;
  letter-spacing:-0.05em;

  color:#0f1640;
}

.contact-info p{
  max-width:500px;

  color:#5f6685;

  line-height:1.8;
}

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

  margin-top:40px;
}

.contact-item{
  display:flex;
  align-items:center;
  gap:16px;
}

.contact-icon{
  width:52px;
  height:52px;

  border-radius:14px;

  background:#f2f3ff;

  color:#5b5cf0;

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

  font-size:22px;
}

.contact-item strong{
  display:block;
  margin-bottom:4px;
}

.contact-item span{
  color:#6b7280;
}

.contact-form{
  display:grid;
  gap:16px;
}

.form-feedback{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  border:1px solid;
  border-radius:12px;
  font-size:14px;
  line-height:1.5;
}

.form-feedback strong{
  font-size:15px;
}

.form-feedback--success{
  color:#166534;
  background:#f0fdf4;
  border-color:#bbf7d0;
}

.form-feedback--error{
  color:#991b1b;
  background:#fef2f2;
  border-color:#fecaca;
}

.contact-form input,
.contact-form textarea{
  width:100%;

  border:1px solid #dfe5f3;

  border-radius:12px;

  padding:16px 18px;

  font-size:15px;

  outline:none;
}

.contact-form textarea{
  height:160px;
  resize:none;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#5b5cf0;
}

.contact-form button{
  height:56px;

  border:none;

  border-radius:12px;

  background:linear-gradient(
      135deg,
      #3b55f6,
      #6b4cf6
  );

  color:white;

  font-weight:700;

  cursor:pointer;
}


@media(max-width:900px){

  .cta-banner{
      flex-direction:column;
      text-align:center;
  }

  .cta-content{
      flex:none;
  }
}

.site-footer{
width: var(--container);
max-width: calc(100% - 48px);
margin: 0 auto;
padding: 50px 0 24px;
border-top: 1px solid var(--line);
padding-bottom: 28px;
}

.footer-grid{
display:grid;
grid-template-columns: 1.5fr repeat(4, 1fr);
gap:50px;
}

.footer-brand p{
max-width:320px;
color:var(--muted);
line-height:1.7;
margin:18px 0 22px;
}

.socials{
display:flex;
gap:14px;
}

.socials a{
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
color:#0f1640;
font-weight:800;
}

.site-footer h4{
margin:0 0 18px;
font-size:16px;
color:#0f1640;
}

.site-footer div:not(.footer-brand):not(.footer-grid):not(.footer-bottom):not(.socials):not(.footer-certifications):not(.footer-legal-links){
display:flex;
flex-direction:column;
gap:12px;
}

.site-footer a{
color:#5f6685;
font-weight:500;
}

.site-footer a:hover{
color:var(--primary);
}

.footer-bottom{
margin-top: 40px;
padding-top: 22px;
border-top: 1px solid var(--line);

display:flex;
justify-content:space-between;
align-items:center;
gap:20px;

color:#5f6685;
font-size:14px;
}

.footer-bottom div{
display:flex;
gap:24px;
}

.footer-bottom a{
color:#5f6685;
}

.footer-bottom a:hover{
color:var(--primary);
}

.ai-chat{
position:fixed;
right:34px;
bottom:100px;
width:min(320px, calc(100vw - 32px));
background:white;
border:1px solid var(--line);
border-radius:22px;
overflow:hidden;
box-shadow:0 24px 60px rgba(41,50,100,.18);
z-index:20;
opacity:0;
pointer-events:none;
transform:translateY(20px);
transition:.25s ease;
}

.ai-chat.open{
opacity:1;
pointer-events:auto;
transform:translateY(0);
}

.ai-chat header{
height:58px;
display:flex;
align-items:center;
gap:8px;
padding:0 16px;
color:white;
font-weight:800;
background:linear-gradient(135deg,#4f46e5,#7a4fe8);
}

.ai-chat header small{
background:rgba(255,255,255,.18);
padding:3px 7px;
border-radius:999px;
font-size:10px;
}

.ai-chat header button{
margin-left:auto;
border:0;
background:transparent;
color:white;
font-size:24px;
cursor:pointer;
}

.chat-body{
padding:18px;
display:grid;
gap:10px;
}

.chat-body p{
margin:0 0 8px;
padding:13px;
border-radius:14px;
background:#f5f7ff;
font-size:13px;
line-height:1.5;
}

.chat-body button{
padding:12px;
border-radius:10px;
border:1px solid var(--line);
background:white;
color:var(--primary);
font-weight:700;
text-align:left;
cursor:pointer;
}

.ai-chat form{
display:flex;
gap:8px;
padding:14px;
border-top:1px solid var(--line);
}

.ai-chat input{
min-width:0;
flex:1;
border:0;
background:#f8f9fe;
border-radius:10px;
padding:12px;
outline:none;
}

.ai-chat form button{
flex:0 0 38px;
width:38px;
height:38px;
border:0;
border-radius:50%;
background:var(--primary);
color:white;
font-weight:900;
cursor:pointer;
}

.chat-status{
margin:0;
padding:0 16px 16px;
color:var(--muted);
font-size:12px;
line-height:1.45;
}

.chat-fab{
position:fixed;
right:36px;
bottom:30px;
width:56px;
height:56px;
border:0;
border-radius:50%;
background:linear-gradient(135deg,#4f46e5,#6b4cf6);
color:white;
font-weight:900;
box-shadow:0 20px 45px rgba(79,70,229,.35);
z-index:19;
cursor:pointer;
}

/* 1. Hero mai compact */
.hero{
min-height: 500px;
padding-top: 42px;
padding-bottom: 38px;
}

.hero h1{
font-size: clamp(40px, 3.8vw, 54px);
line-height: 1.04;
}

.hero p{
font-size: 16px;
line-height: 1.6;
}

.hero-visual{
min-height: 390px;
}

.hero-pos-image{
width: min(560px, 100%);
}

.gradient-orb{
width: 580px;
height: 420px;
}

/* 2. Spațiu mai mic între video și produse */
.video-section{
margin-bottom: 38px;
}

.products-section{
padding-top: 24px;
}

.section-heading{
margin-bottom: 34px;
}

/* 3. Contact form nu mai pare tăiat */
.contact-section{
margin-top: 50px;
padding-top: 58px;
overflow: visible;
}

.contact-form input:first-child{
margin-top: 0;
}

/* 4. Iconuri produse mai premium */
.product-card .icon{
font-size: 0;
}

.product-card .icon svg{
width: 24px;
height: 24px;
stroke: white;
}

.footer-certifications{
display:flex;
flex-direction:row;
justify-content:center;
flex-wrap:wrap;
gap:12px;

margin-top:30px;
padding-top:24px;

border-top:1px solid var(--line);
}


.footer-certifications span{
padding:8px 14px;
border-radius:999px;

background:#f5f7ff;
border:1px solid #e7ebfa;

color:#5f6685;
font-size:13px;
font-weight:600;
}




@media(max-width:900px){
.footer-grid{
  grid-template-columns:1fr 1fr;
}
}

@media(max-width:600px){
.footer-grid{
  grid-template-columns:1fr;
}
}

/* Header premium */
.site-header{
  min-height:80px;
  height:80px;
  padding:0 clamp(20px,3vw,52px);
  gap:20px;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(218,224,241,.9);
  box-shadow:0 8px 30px rgba(31,42,91,.055);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}

.site-header .brand{
  flex:0 0 auto;
  gap:11px;
  letter-spacing:-.035em;
}

.site-header .brand-mark{
  width:36px;
  height:36px;
  border-radius:11px;
  box-shadow:0 8px 18px rgba(79,70,229,.22);
}

.site-header .nav{
  align-items:center;
  gap:2px;
  margin:0 auto;
  font-size:13px;
}

.site-header .nav a{
  padding:10px 9px;
  border-radius:10px;
  color:#343b5f;
  white-space:nowrap;
  transition:color .2s ease, background-color .2s ease, transform .2s ease;
}

.site-header .nav a:hover,
.site-header .nav a:focus-visible{
  color:var(--primary);
  background:#f2f3ff;
  outline:none;
  transform:translateY(-1px);
}

.site-header .header-actions{
  flex:0 0 auto;
  gap:8px;
}

.site-header .header-actions .btn{
  height:42px;
  padding:0 15px;
  gap:8px;
  border-radius:12px;
  font-size:13px;
  white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.header-action-icon{
  width:17px;
  height:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.header-action-icon svg{
  width:100%;
  height:100%;
}

.site-header .btn-login{
  color:#222a52;
  background:#fff;
  border-color:#dce2f2;
  box-shadow:0 4px 12px rgba(31,42,91,.035);
}

.site-header .btn-login:hover,
.site-header .btn-login:focus-visible{
  color:var(--primary);
  border-color:#bec6ee;
  background:#fafaff;
  box-shadow:0 8px 20px rgba(79,70,229,.1);
}

.site-header .btn-admin{
  color:#fff;
  background:#121a3f;
  border-color:#121a3f;
  box-shadow:0 8px 18px rgba(18,26,63,.18);
}

.site-header .btn-admin:hover,
.site-header .btn-admin:focus-visible{
  background:#202a58;
  border-color:#202a58;
  box-shadow:0 11px 24px rgba(18,26,63,.24);
}

.site-header .btn-primary:hover,
.site-header .btn-primary:focus-visible{
  box-shadow:0 14px 30px rgba(79,70,229,.34);
}