* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #18251f;
  background: #f5f7f3;
}
a { color: inherit; text-decoration: none; }
.header {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7%;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid #e1e7e1;
}
.logo { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:1px; }
.logo b { color:#4d765c; }
.logo-mark {
  width:38px; height:38px; display:grid; place-items:center;
  background:#e5efe7; border-radius:12px; font-size:22px;
}
nav { display:flex; gap:30px; color:#637067; font-size:14px; }
nav a:hover { color:#315640; }
.login {
  border:1px solid #b9c9bd; background:white; padding:10px 20px;
  border-radius:10px; color:#315640; font-weight:700;
}
.hero {
  min-height:560px; padding:80px 7%; display:flex; align-items:center;
  justify-content:space-between; gap:60px;
  background:linear-gradient(135deg,#eef5ef,#f8faf7);
}
.hero-text { max-width:650px; }
.badge, .section-title span, .security span {
  color:#4d765c; font-size:12px; font-weight:800; letter-spacing:1.5px;
}
h1 { font-size:clamp(44px,6vw,72px); line-height:1.02; margin:20px 0; }
h1 span { color:#4d765c; }
.hero p { color:#68756e; font-size:18px; line-height:1.7; max-width:600px; }
.buttons { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.primary {
  display:inline-block; background:#315640; color:white; padding:15px 24px;
  border-radius:11px; font-weight:700; box-shadow:0 8px 20px rgba(49,86,64,.18);
}
.secondary { padding:15px 24px; border:1px solid #c7d2ca; border-radius:11px; font-weight:700; }
.cloud-card {
  width:360px; padding:45px 35px; text-align:center; background:white;
  border-radius:28px; box-shadow:0 25px 60px rgba(34,59,43,.12);
  border:1px solid #e1e8e2;
}
.cloud { font-size:80px; line-height:1; }
.shield {
  margin:-8px auto 20px; width:48px; height:48px; display:grid; place-items:center;
  border-radius:50%; background:#dcecdf; color:#315640; font-size:25px; font-weight:bold;
}
.cloud-card h3 { margin:10px 0; font-size:22px; }
.cloud-card p { color:#748078; line-height:1.6; }
.section { padding:90px 7%; background:white; }
.section-title { text-align:center; }
.section-title h2, .security h2, .cta h2 { font-size:38px; margin:12px 0 45px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cards article {
  padding:32px; border:1px solid #e1e7e1; border-radius:18px; background:#fbfcfb;
}
.icon { font-size:28px; margin-bottom:22px; }
.cards h3 { font-size:21px; }
.cards p { color:#6e7972; line-height:1.7; }
.security {
  padding:90px 7%; display:grid; grid-template-columns:1.2fr .8fr; gap:70px;
  align-items:center; background:#e8f0e9;
}
.security h2 { margin-bottom:18px; }
.security p { color:#657169; line-height:1.8; max-width:650px; }
.stats { display:grid; gap:14px; }
.stats div {
  background:white; padding:22px 25px; border-radius:14px; display:flex;
  align-items:baseline; justify-content:space-between;
}
.stats strong { font-size:25px; color:#315640; }
.stats small { color:#748078; }
.cta { padding:100px 20px; text-align:center; }
.cta h2 { margin-bottom:12px; }
.cta p { color:#6e7972; margin-bottom:30px; }
footer {
  padding:30px 7%; display:flex; justify-content:space-between; align-items:center;
  background:#1d2b23; color:#dfe8e1;
}
footer p { color:#9eaaa2; font-size:13px; }
@media (max-width: 800px) {
  nav { display:none; }
  .hero { padding:60px 6%; flex-direction:column; align-items:flex-start; }
  .cloud-card { width:100%; max-width:420px; align-self:center; }
  .cards, .security { grid-template-columns:1fr; }
  .section, .security { padding:65px 6%; }
  footer { flex-direction:column; gap:15px; text-align:center; }
}


/* Дополнительные рамки и визуальные карточки */
.visuals {
  padding: 55px 7%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 18px;
  background: #f5f7f3;
  border-top: 1px solid #cfd9d1;
  border-bottom: 1px solid #cfd9d1;
  position: relative;
}
.visuals:before, .visuals:after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  height: 1px;
  background: #d7dfd9;
}
.visuals:before { top: 16px; }
.visuals:after { bottom: 16px; }

.visual-card {
  min-height: 190px;
  border: 1px solid #cbd6ce;
  outline: 1px solid rgba(203,214,206,.35);
  outline-offset: -7px;
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(35,58,43,.06);
}
.visual-card.large { min-height: 240px; }
.visual-art {
  flex: 1;
  min-height: 125px;
  display: grid;
  place-items: center;
  border: 1px dashed #b8c9bd;
  border-radius: 12px;
  font-size: 65px;
  background: linear-gradient(135deg,#edf5ef,#fafcf9);
}
.art-photo { background: linear-gradient(135deg,#f1eee5,#faf8f1); }
.art-doc { background: linear-gradient(135deg,#edf1f5,#fafbfd); }
.art-lock { background: linear-gradient(135deg,#edf3ed,#fafcf9); }
.visual-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 14px 3px 2px;
}
.visual-label b { font-size: 14px; }
.visual-label span { color:#7a857e; font-size:11px; text-align:right; }

.cards article {
  border: 1px solid #cbd6ce;
  position: relative;
}
.cards article:before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #e5ebe6;
  border-radius: 13px;
  pointer-events: none;
}
.cloud-card {
  border: 1px solid #bfcfc4;
  position: relative;
}
.cloud-card:after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid #edf1ed;
  border-radius: 21px;
  pointer-events: none;
}
.security {
  border-top: 1px solid #bdcdc1;
  border-bottom: 1px solid #bdcdc1;
}
.stats div {
  border: 1px solid #d0dbd3;
}

@media (max-width: 1000px) {
  .visuals { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .visuals { grid-template-columns: 1fr; padding-left:6%; padding-right:6%; }
  .visuals:before, .visuals:after { left:6%; right:6%; }
}

/* Bear Keeper product pages */
.app-body { background:#f5f7f3; }
.app-header { height:72px; padding:0 4%; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #d9e1db; }
.user { display:flex; align-items:center; gap:10px; color:#526158; font-weight:700; }
.user span { width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dfeae2;color:#315640; }
.dashboard { display:grid; grid-template-columns:230px 1fr; min-height:calc(100vh - 72px); }
.sidebar { padding:28px 16px; background:#fff; border-right:1px solid #d9e1db; }
.sidebar a { display:block; padding:13px 15px; border:1px solid transparent; border-radius:10px; color:#69756e; margin-bottom:5px; }
.sidebar a.active,.sidebar a:hover { background:#edf4ee; border-color:#cddbd0; color:#315640; font-weight:700; }
.side-line { height:1px;background:#e0e6e1;margin:25px 8px; }
.content { padding:45px 5%; max-width:1250px; width:100%; margin:auto; }
.dash-top { display:flex; justify-content:space-between; align-items:end; margin-bottom:25px; }
.dash-top h1 { font-size:40px; margin:8px 0 0; }
.eyebrow,.pricing-head>span { font-size:11px; letter-spacing:1.6px; color:#4d765c; font-weight:800; }
.upload { background:#315640;color:#fff;border:0;padding:14px 20px;border-radius:10px;font-weight:700; }
.storage { background:#fff;border:1px solid #cdd8d0;border-radius:15px;padding:20px;margin-bottom:20px; }
.storage>div:first-child { display:flex;gap:14px;align-items:center; }
.storage-icon { width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#e8f1e9;font-size:22px; }
.storage p { margin:5px 0 0;color:#77827b;font-size:13px; }
.progress { height:8px;background:#e6ece7;border-radius:10px;margin-top:17px;overflow:hidden; }
.progress span { display:block;width:25%;height:100%;background:#4d765c;border-radius:10px; }
.toolbar { display:flex;gap:10px;margin:25px 0; }
.toolbar input { flex:1;border:1px solid #cdd8d0;border-radius:10px;padding:13px 16px;background:#fff;font-size:14px; }
.toolbar button { border:1px solid #cdd8d0;background:#fff;border-radius:10px;padding:0 17px;color:#315640;font-weight:700; }
.file-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
.file-card { background:#fff;border:1px solid #cbd6ce;border-radius:15px;padding:12px; }
.file-image { height:120px;border:1px solid #dbe3dd;border-radius:10px;display:grid;place-items:center;font-size:52px;margin-bottom:13px; }
.photo{background:#f3eee5}.docs{background:#eef2f6}.archive{background:#f3f0e7}.work{background:#eaf2ec}
.file-card b { display:block;margin:0 3px 5px; }.file-card small{color:#7b867f;margin:0 3px}
.recent-title{font-size:23px;margin:38px 0 14px}.recent{background:#fff;border:1px solid #cbd6ce;border-radius:15px;overflow:hidden}
.recent div{padding:17px 20px;border-bottom:1px solid #e5eae6;display:grid;grid-template-columns:30px 1fr 220px 25px;align-items:center;gap:10px}
.recent div:last-child{border-bottom:0}.recent span{color:#7c877f;font-size:13px}.recent i{color:#8a958e}
.pricing-head{text-align:center;padding:75px 20px 30px}.pricing-head h1{font-size:48px;margin:12px 0}.pricing-head p{color:#748078}
.plans{max-width:1100px;margin:25px auto 90px;padding:0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{background:#fff;border:1px solid #cbd6ce;border-radius:18px;padding:32px;position:relative}.plan.featured{border:2px solid #4d765c;transform:translateY(-8px);box-shadow:0 18px 45px rgba(35,58,43,.1)}
.plan label{position:absolute;top:15px;right:15px;font-size:9px;letter-spacing:1px;background:#e2eee4;color:#315640;padding:7px 9px;border-radius:20px;font-weight:800}
.plan h2{font-size:25px}.price{font-size:35px;font-weight:800;color:#315640;margin:22px 0 10px}.price small{font-size:13px;color:#7b867f;font-weight:400}.plan p{color:#77827b;line-height:1.6;min-height:50px}.plan ul{padding:0;list-style:none;line-height:2.2;color:#526158;margin:25px 0}.plan li:before{content:"✓";color:#4d765c;font-weight:800;margin-right:8px}.plan .primary,.plan .secondary{display:block;text-align:center}
.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#edf4ee,#f8faf7);padding:20px}
.login-card{width:min(430px,100%);background:#fff;border:1px solid #cbd6ce;border-radius:20px;padding:40px;box-shadow:0 20px 60px rgba(35,58,43,.1)}
.login-card .logo{justify-content:center;margin-bottom:35px}.login-card h1{font-size:34px;margin:0 0 8px}.login-card>p{color:#78837c;margin-bottom:25px}
.login-card label{display:block;font-size:13px;font-weight:700;color:#526158;margin:15px 0}.login-card input{display:block;width:100%;margin-top:7px;padding:13px;border:1px solid #cbd6ce;border-radius:9px;font-size:15px}.login-btn{display:block;text-align:center;margin-top:22px}.or{text-align:center;color:#9aa39d;margin:20px 0}.social{width:100%;padding:13px;border:1px solid #cbd6ce;border-radius:9px;background:#fff;font-weight:700;color:#526158}.login-card>small{display:block;text-align:center;margin-top:22px;color:#78837c}.login-card>small a{color:#315640;font-weight:700}
@media(max-width:900px){.file-grid{grid-template-columns:1fr 1fr}.plans{grid-template-columns:1fr}.plan.featured{transform:none}.dashboard{grid-template-columns:1fr}.sidebar{display:none}}
@media(max-width:600px){.content{padding:28px 5%}.dash-top{align-items:start;gap:15px;flex-direction:column}.toolbar{flex-direction:column}.toolbar button{padding:13px}.file-grid{grid-template-columns:1fr}.recent div{grid-template-columns:25px 1fr 25px}.recent span{display:none}.pricing-head h1{font-size:38px}.login-card{padding:28px}}