/* Perferro — bright, modern, professional */
:root{
  --bg: #f6f9ff;
  --card: #ffffff;
  --text: #0b1220;
  --muted: rgba(11,18,32,.68);
  --line: rgba(11,18,32,.10);

  --primary: #e53935;          /* brand red */
  --primary2: #ff5f57;

  --shadow: 0 18px 60px rgba(11,18,32,.12);
  --shadow2: 0 10px 30px rgba(11,18,32,.08);

  --r: 18px;
  --r2: 24px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(229,57,53,.12), transparent 55%),
    radial-gradient(1000px 700px at 90% 20%, rgba(11,34,57,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), #ffffff 60%, #f7fbff);
  color:var(--text);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.95}
img{max-width:100%; display:block}

.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}

.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:9999; background:#fff; padding:10px 14px; border-radius:12px; box-shadow: var(--shadow2)}

/* Header */
.header{
  position: sticky;
  top:0;
  z-index: 1000;
  backdrop-filter: blur(14px);
  background: rgba(246,249,255,.70);
  border-bottom: 1px solid var(--line);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding: 14px 0}
.brand{display:flex; gap:12px; align-items:center}
.brand__logo{width:38px; height:38px; object-fit:contain; border-radius: 12px; box-shadow: var(--shadow2); background:#fff}
.brand__name{font-weight:800; letter-spacing:-.02em; font-size: 18px}
.nav{display:flex; gap: 10px; align-items:center}
.nav a{font-weight:700; color: rgba(11,18,32,.78); padding: 10px 12px; border-radius: 12px}
.nav a:hover{background: rgba(11,18,32,.06)}
.menu{display:none; border:0; background:transparent; padding:10px; border-radius: 12px}
.menu span{width:22px; height:2px; background: rgba(11,18,32,.78); display:block; margin:5px 0; border-radius: 2px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 16px; border-radius: 14px; font-weight:800;
  border:1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{transform: translateY(1px)}
.btn--sm{padding: 10px 12px; border-radius: 12px; font-weight:900}
.btn--primary{color:#fff; background: linear-gradient(135deg, var(--primary), var(--primary2)); box-shadow: 0 16px 35px rgba(229,57,53,.25)}
.btn--primary:hover{box-shadow: 0 18px 45px rgba(229,57,53,.30)}
.btn--secondary{background: rgba(11,18,32,.06); border-color: rgba(11,18,32,.10)}
.btn--secondary:hover{background: rgba(11,18,32,.08)}
.btn--ghost{background: rgba(255,255,255,.70); border-color: rgba(11,18,32,.10); box-shadow: var(--shadow2)}
.btn--dark{color:#fff; background: linear-gradient(135deg, #06192b, #0b2239); box-shadow: 0 18px 45px rgba(11,34,57,.25)}
.btn--block{width:100%}

/* Hero */
.hero{padding: 54px 0 26px; position:relative}
.bg-orbs{position:absolute; inset:0; pointer-events:none}
.orb{position:absolute; filter: blur(22px); opacity: .9; border-radius: 999px}
.orb--1{width: 520px; height: 520px; left:-140px; top:-120px; background: radial-gradient(circle at 30% 30%, rgba(229,57,53,.35), rgba(229,57,53,.10) 45%, transparent 70%)}
.orb--2{width: 520px; height: 520px; right:-160px; top: -80px; background: radial-gradient(circle at 40% 40%, rgba(11,34,57,.28), rgba(11,34,57,.08) 55%, transparent 75%)}
.orb--3{width: 420px; height: 420px; left: 38%; bottom: -220px; background: radial-gradient(circle at 50% 50%, rgba(255,180,170,.28), rgba(255,180,170,.10) 55%, transparent 75%)}

.hero__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items:start; position:relative}
.pill{display:inline-flex; gap:10px; align-items:center; background: rgba(255,255,255,.70); border: 1px solid rgba(11,18,32,.10); padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow2); color: rgba(11,18,32,.75); font-weight:700; margin-bottom: 16px}
.dot{width:10px; height:10px; border-radius:999px; background: linear-gradient(135deg, var(--primary), var(--primary2)); box-shadow: 0 10px 20px rgba(229,57,53,.30)}
h1{margin: 0 0 14px; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -0.04em}
.accent{background: linear-gradient(135deg, var(--primary), var(--primary2)); -webkit-background-clip:text; background-clip:text; color: transparent}
.lead{margin: 0 0 20px; font-size: 17px; line-height: 1.55; color: rgba(11,18,32,.74)}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 18px}
.proof{display:flex; gap: 14px; flex-wrap:wrap}
.proof__item{background: rgba(255,255,255,.72); border: 1px solid rgba(11,18,32,.10); padding: 12px 14px; border-radius: 16px; box-shadow: var(--shadow2); min-width: 160px}
.proof__value{font-weight:900; letter-spacing:-.02em}
.proof__label{color: var(--muted); font-size: 13px; margin-top: 2px}

/* Cards */
.card{border-radius: var(--r2); border: 1px solid rgba(11,18,32,.10); background: var(--card); box-shadow: var(--shadow2)}
.card--soft{padding: 18px; background: rgba(255,255,255,.82)}
.card--glass{padding: 18px; background: rgba(255,255,255,.62); backdrop-filter: blur(14px); box-shadow: var(--shadow)}
.card--featured{position:relative; padding: 22px; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.70)); border: 1px solid rgba(229,57,53,.28); box-shadow: 0 25px 70px rgba(229,57,53,.16); transform: translateY(-6px)}
.ribbon{position:absolute; top: 16px; right: 16px; background: linear-gradient(135deg, var(--primary), var(--primary2)); color:#fff; padding: 8px 10px; border-radius: 999px; font-weight: 900; font-size: 12px; box-shadow: 0 14px 35px rgba(229,57,53,.25)}
.card__top{display:flex; align-items:center; justify-content:space-between}
.badge{font-size: 12px; font-weight: 900; color: rgba(11,18,32,.75); padding: 8px 10px; border-radius: 999px; background: rgba(11,18,32,.06); border: 1px solid rgba(11,18,32,.10)}
.divider{height:1px; background: rgba(11,18,32,.10); margin: 14px 0}

.checklist, .bullets{margin: 12px 0 0; padding: 0; list-style:none}
.checklist li{padding-left: 28px; position:relative; margin: 10px 0; color: rgba(11,18,32,.74)}
.checklist li::before{content:""; width: 18px; height: 18px; position:absolute; left:0; top: 2px; border-radius: 6px; background: linear-gradient(135deg, rgba(229,57,53,.20), rgba(255,95,87,.20)); border: 1px solid rgba(229,57,53,.25); box-shadow: 0 12px 25px rgba(229,57,53,.12)}
.checklist li::after{content:"✓"; position:absolute; left:4px; top: 0px; font-weight: 900; color: rgba(229,57,53,.95)}
.bullets li{margin: 8px 0; padding-left: 14px; position:relative; color: rgba(11,18,32,.74)}
.bullets li::before{content:"•"; position:absolute; left:0; color: var(--primary); font-weight: 900}

/* Right panel cards */
.hero__panel{display:flex; flex-direction:column; gap: 14px}
.card--stat{padding: 14px 16px; background: rgba(255,255,255,.70)}
.stat{display:flex; gap: 12px; align-items:flex-start}
.stat__icon{width: 38px; height: 38px; border-radius: 14px; display:grid; place-items:center; background: rgba(11,18,32,.06); border: 1px solid rgba(11,18,32,.10); font-weight: 900}
.stat__title{font-weight:900; letter-spacing:-.02em}
.stat__desc{color: var(--muted); font-size: 13px; margin-top: 2px}
.mini{display:flex; align-items:center; justify-content:space-between; gap: 12px}
.mini__title{font-weight:900}
.mini__desc{color: var(--muted); font-size: 13px; margin-top: 2px}

/* Sections */
.section{padding: 42px 0}
.section--alt{background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(11,34,57,.04), rgba(255,255,255,.0)); border-top: 1px solid rgba(11,18,32,.06); border-bottom: 1px solid rgba(11,18,32,.06)}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap: 16px; margin-bottom: 18px}
.section__head h2{margin:0; font-size: 30px; letter-spacing:-.03em}
.section__head p{margin:0; color: var(--muted); max-width: 620px}
.grid{display:grid; gap: 14px}
.grid--3{grid-template-columns: repeat(3, 1fr)}
.muted{color: var(--muted)}
.small{font-size: 13px}

/* Pricing */
.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch}
.price__top h3{margin:0}
.price__top p{margin:6px 0 0}
.price__tag{margin: 14px 0; display:flex; align-items:baseline; gap: 8px}
.currency{font-weight:900; color: rgba(11,18,32,.72)}
.amount{font-size: 40px; font-weight: 900; letter-spacing:-.04em}
.note{margin-top: 14px; padding: 18px; display:flex; justify-content:space-between; gap: 16px; align-items:center}

/* Steps */
.steps{display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px}
.step__num{width: 38px; height: 38px; border-radius: 14px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(229,57,53,.16), rgba(255,95,87,.16)); border: 1px solid rgba(229,57,53,.22); font-weight: 900; color: rgba(229,57,53,.95); margin-bottom: 10px}

/* Contact */
.contact{display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items:start}
.contact__meta{margin-top: 14px; display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
.meta{padding: 14px 16px}
.meta__k{font-size: 12px; font-weight: 900; color: rgba(11,18,32,.62); text-transform: uppercase; letter-spacing:.08em}
.meta__v{margin-top: 6px; font-weight: 900}
.form{padding: 18px}
label{display:block; font-weight:800; font-size: 13px; color: rgba(11,18,32,.70)}
input, textarea, select{width:100%; margin-top: 8px; border-radius: 14px; border: 1px solid rgba(11,18,32,.12); padding: 12px 12px; font: inherit; background: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(11,18,32,.03)}
input:focus, textarea:focus, select:focus{outline:none; border-color: rgba(229,57,53,.45); box-shadow: 0 0 0 4px rgba(229,57,53,.12)}
.form__row{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
textarea{resize: vertical}

/* Footer */
.footer{padding: 28px 0 40px; border-top: 1px solid rgba(11,18,32,.08); background: rgba(255,255,255,.55); backdrop-filter: blur(10px)}
.footer__inner{display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; align-items:center}
.footer__brand{display:flex; gap:12px; align-items:center}
.footer__brand img{width:34px; height:34px; border-radius: 12px; background:#fff; box-shadow: var(--shadow2)}
.footer__links{display:flex; gap: 10px; flex-wrap:wrap; justify-content:center; color: rgba(11,18,32,.74); font-weight: 800}
.footer__links a{padding: 8px 10px; border-radius: 12px}
.footer__links a:hover{background: rgba(11,18,32,.06)}
.footer .muted{justify-self:end}

/* Page layouts */
.page-hero{padding: 44px 0 10px}
.page-hero__inner{display:flex; justify-content:space-between; gap: 18px; align-items:flex-end}
.page-title{margin: 10px 0 8px; font-size: clamp(34px, 4vw, 52px); letter-spacing:-.04em; line-height: 1.05}
.page-hero__cta{display:flex; gap: 10px; flex-wrap:wrap; align-items:center; justify-content:flex-end}

/* Products */
.product__top{display:flex; align-items:center; justify-content:space-between; gap: 10px}
.product__meta{display:flex; align-items:center; gap: 10px; margin-top: 12px}
.price-pill{display:inline-flex; align-items:center; justify-content:center; padding: 8px 10px; border-radius: 999px; font-weight: 900; border: 1px solid rgba(229,57,53,.25); background: linear-gradient(135deg, rgba(229,57,53,.12), rgba(255,95,87,.12)); color: rgba(229,57,53,.95)}
.product__actions{margin-top: 14px}

/* Login */
.login-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items:start}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr}
  .grid--3{grid-template-columns: repeat(2, 1fr)}
  .pricing{grid-template-columns: 1fr}
  .card--featured{transform:none}
  .steps{grid-template-columns: repeat(2, 1fr)}
  .contact{grid-template-columns: 1fr}
  .page-hero__inner{flex-direction:column; align-items:flex-start}
  .page-hero__cta{justify-content:flex-start}
  .login-grid{grid-template-columns: 1fr}
  .footer__inner{grid-template-columns: 1fr; text-align:center}
  .footer .muted{justify-self:center}
  .footer__links{justify-content:center}
}
@media (max-width: 720px){
  .nav{display:none}
  .menu{display:block}
  .nav.nav--open{
    position:absolute; right: 20px; top: 64px;
    display:flex; flex-direction:column; align-items:stretch;
    padding: 12px; background: rgba(255,255,255,.90);
    border: 1px solid rgba(11,18,32,.10); border-radius: 18px; box-shadow: var(--shadow);
    width: min(340px, calc(100% - 40px));
  }
  .form__row{grid-template-columns: 1fr}
  .grid--3{grid-template-columns: 1fr}
  .section__head{flex-direction:column; align-items:flex-start}
}