/* ============================================================
   FLOWIT-BRAND.CSS — contractul vizual Flow IT pentru LP-uri
   Extras din flowit.ro (The7 css-vars + custom.css), 11.06.2026
   NU se rescrie de Cursor/Composer. Iterațiile se fac în
   interiorul acestor variabile. (Decizia 2, LP Kit)
   ============================================================ */

/* ---------- Fonturi (Google Fonts, identic cu site-ul) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Roboto:wght@400;500;700&display=swap');

:root {
  /* --- Identitate --- */
  --flow-accent:            #ff5e00;  /* portocaliu Flow — CTA, linkuri */
  --flow-accent-hover:      #f28837;  /* hover derivat (prezent în custom.css) */
  --flow-black:             #000000;  /* titluri */
  --flow-text:              #333333;  /* text accentuat */
  --flow-text-soft:         #5a5a5a;  /* body / footer */
  --flow-gray:              #888888;
  --flow-line:              #eeeeee;  /* borduri, divider */
  --flow-bg:                #ffffff;

  /* --- Accente per pack (verificate pe paginile live) --- */
  --flow-cloud:             #48bead;  /* Cloud Pack — turcoaz */
  --flow-desk:              #56be5e;  /* Desk Pack — verde */
  /* nedeclarate pe paginile salvate, preluate din SVG-urile de meniu
     (de validat de owner înainte de folosire):
     #d6a426 / #ae4c5b / #8e9e00 / #64649e / #5aacfa */

  /* --- Tipografie --- */
  --flow-font:              "Ubuntu", Helvetica, Arial, Verdana, sans-serif;
  --flow-font-secondary:    "Roboto", Helvetica, Arial, sans-serif;
  --flow-fs-base:           15px;
  --flow-lh-base:           27px;
  --flow-fs-small:          13px;

  /* --- Layout --- */
  --flow-content-width:     1180px;   /* the7-box-width */
  --flow-radius:            0px;      /* site-ul nu folosește colțuri rotunjite */
  --flow-btn-radius:        1px;
  --flow-input-radius:      2px;
  --flow-input-height:      40px;
  --flow-input-border:      rgba(51,51,51,0.11);
  --flow-input-bg:          #fdfdfd;
}

/* ---------- Reset minim ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--flow-font);
  font-size: var(--flow-fs-base);
  line-height: var(--flow-lh-base);
  color: var(--flow-text-soft);
  background: var(--flow-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--flow-accent); text-decoration: none; }
a:hover { color: var(--flow-accent-hover); }
img, svg { max-width: 100%; height: auto; }

/* ---------- Titluri (valori exacte The7) ---------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--flow-font); color: var(--flow-black); margin: 0 0 .6em; }
h1 { font-size: 28px; line-height: 33px; font-weight: 700; }
h2 { font-size: 28px; line-height: 33px; font-weight: 300; }  /* H2 e LIGHT pe site */
h3 { font-size: 17px; line-height: 22px; font-weight: 700; }
h4 { font-size: 17px; line-height: 22px; font-weight: 400; }
h5 { font-size: 17px; line-height: 26px; font-weight: 700; }
h6 { font-size: 16px; line-height: 21px; font-weight: 700; }
/* Pe LP-uri hero-ul cere mai mult decât H1=28px al site-ului: */
.lp-hero-title { font-size: clamp(32px, 5vw, 44px); line-height: 1.15; font-weight: 700; color: var(--flow-black); }

/* ---------- Butoane (echivalent .dt-btn) ---------- */
.flow-btn {
  display: inline-block;
  font-family: var(--flow-font);
  font-weight: 700;
  color: #ffffff;
  background: var(--flow-accent);
  border: 0;
  border-radius: var(--flow-btn-radius);
  cursor: pointer;
  text-transform: uppercase;
  transition: background .15s ease;
  font-size: 14px; padding: 13px 28px;          /* mărimea M, default */
}
.flow-btn:hover { background: var(--flow-accent-hover); color: #ffffff; }
.flow-btn--s { font-size: 12px; padding: 9px 18px; }
.flow-btn--l { font-size: 18px; padding: 16px 36px; }

/* ---------- Inputuri (aliniat cu site-ul, gata pentru Fluent Forms) ---------- */
.flow-input, .lp-form input[type="text"], .lp-form input[type="email"],
.lp-form input[type="tel"], .lp-form textarea, .lp-form select {
  width: 100%;
  height: var(--flow-input-height);
  padding: 5px 10px;
  font-family: var(--flow-font);
  font-size: var(--flow-fs-base);
  color: #8b8d94;
  background: var(--flow-input-bg);
  border: 1px solid var(--flow-input-border);
  border-radius: var(--flow-input-radius);
}
.lp-form textarea { height: auto; min-height: 120px; }
::placeholder { color: var(--flow-text-soft); }

/* ---------- Layout helpers ---------- */
.lp-container { max-width: var(--flow-content-width); margin: 0 auto; padding: 0 20px; }
.lp-section { padding: 60px 0; }
.lp-section--alt { background: #f7f7f8; }

/* ---------- Header LP (simplificat: logo + CTA — Decizia 5) ---------- */
.lp-header { background: var(--flow-bg); border-bottom: 1px solid var(--flow-line); }
.lp-header .lp-container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.lp-header__logo img { height: 44px; width: auto; display: block; }

/* ---------- Footer LP (legal, identic cu bottom-bar) ---------- */
.lp-footer { border-top: 1px solid var(--flow-line); padding: 18px 0; font-size: var(--flow-fs-small); color: var(--flow-text-soft); }
.lp-footer .lp-container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.lp-footer__brand img { height: 28px; width: auto; display: block; }
.lp-footer__legal a { margin-left: 16px; color: var(--flow-text-soft); }
.lp-footer__legal a:hover { color: var(--flow-accent); }

@media (max-width: 640px) {
  .lp-section { padding: 40px 0; }
  .lp-footer .lp-container { justify-content: center; text-align: center; }
}
.lp-header { border-bottom: 1px solid #eee; background: #fff; }
.lp-header__inner {
	max-width: 1180px; margin: 0 auto; padding: 14px 20px;
	display: flex; align-items: center; justify-content: space-between;
}
.lp-header__logo img { display: block; height: 60px; width: auto; }
.lp-header__cta {
	font-family: 'Ubuntu', sans-serif; font-weight: 500; font-size: 15px; line-height: 1;
	padding: 12px 22px; border-radius: 2px;
	background: #ff5e00; color: #fff; text-decoration: none;
}
.lp-header__cta:hover { background: #f28837; }
 
.lp-footer { border-top: 1px solid #eee; background: #fff; margin-top: 48px; }
.lp-footer__inner {
	max-width: 1180px; margin: 0 auto; padding: 24px 20px;
	display: flex; flex-wrap: wrap; gap: 8px 24px;
	align-items: center; justify-content: space-between;
	font-family: 'Ubuntu', sans-serif; font-size: 13px; color: #5a5a5a;
}
.lp-footer__legal a { color: #5a5a5a; text-decoration: none; margin-left: 16px; }
.lp-footer__legal a:first-child { margin-left: 0; }
.lp-footer__legal a:hover { color: #ff5e00; }

/* === Container continut LP ============================================== */
body.lp-page { margin: 0; }
.lp-main {
	max-width: 1180px; margin: 0 auto; padding: 40px 20px;
	font-family: 'Ubuntu', sans-serif;
}
.lp-main img { max-width: 100%; height: auto; }

/* Fluent Forms — aliniere brand */
.lp-page {
	--fluentform-primary: #ff5e00;
}
.lp-page .ff-btn-submit:hover {
	background-color: #f28837;
}