:root {
  --navy: #0b1d2d;
  --navy-2: #102b42;
  --blue: #168ff5;
  --blue-dark: #0872cf;
  --cyan: #28bcd2;
  --green: #72bd2a;
  --text: #183247;
  --muted: #657786;
  --surface: #ffffff;
  --surface-soft: #f4f8fb;
  --line: #dce7ee;
  --shadow: 0 24px 70px rgba(11, 29, 45, .12);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background: var(--surface);
  line-height: 1.6;
}
body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(220,231,238,.75);
  backdrop-filter: blur(18px);
}
.nav-wrap {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--blue), var(--cyan));
  box-shadow: 0 10px 25px rgba(22,143,245,.2);
}
.brand-mark svg { width: 31px; color: white; }
.brand-mark path, .brand-mark circle {
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.brand-text { font-size: 1.35rem; color: var(--navy); }
.brand-text span { color: var(--blue); }

.main-nav { display: flex; align-items: center; gap: 26px; font-size: .91rem; font-weight: 700; }
.main-nav > a:not(.btn) { color: #3c5569; transition: color .2s; }
.main-nav > a:not(.btn):hover { color: var(--blue); }
.nav-login { margin-left: 8px; }

.menu-toggle {
  display: none; border: 0; background: transparent; padding: 8px; cursor: pointer;
}
.menu-toggle span { display:block; width:25px; height:2px; background:var(--navy); margin:5px; transition:.25s; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid var(--blue);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: white;
  font-weight: 800;
  box-shadow: 0 13px 30px rgba(22,143,245,.2);
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(22,143,245,.28); }
.btn-sm { min-height: 42px; padding: 0 17px; border-radius: 12px; }
.btn-secondary { color: var(--navy); background: white; border-color: var(--line); box-shadow: none; }
.btn-full { width: 100%; }
.btn-light { background: white; color: var(--navy); border-color: white; box-shadow:none; }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,.5); box-shadow:none; }

.hero {
  position: relative;
  overflow: hidden;
  padding: 105px 0 90px;
  background:
    radial-gradient(circle at 85% 15%, rgba(40,188,210,.16), transparent 28%),
    radial-gradient(circle at 0% 90%, rgba(114,189,42,.10), transparent 30%),
    linear-gradient(180deg, #f9fcfe 0%, #fff 100%);
}
.hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; align-items:center; gap:72px; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  color: var(--blue-dark); text-transform:uppercase;
  font-size:.76rem; letter-spacing:.13em; font-weight:800;
}
.eyebrow::before { content:""; width:25px; height:2px; background:var(--green); border-radius:10px; }
.hero h1, .section-heading h2, .section-copy h2, .cta-card h2 {
  margin: 14px 0 20px;
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.hero h1 { font-size: clamp(2.9rem, 5vw, 5.25rem); max-width: 730px; }
.hero-copy > p { max-width: 650px; font-size:1.12rem; color:var(--muted); }
.hero-actions { display:flex; gap:14px; margin:32px 0 24px; }
.hero-trust { display:flex; flex-wrap:wrap; gap:10px 22px; color:#526a7c; font-size:.82rem; font-weight:700; }

.hero-visual { position:relative; min-height:535px; display:flex; align-items:center; justify-content:center; }
.glow { position:absolute; width:420px; height:420px; border-radius:50%; background:rgba(22,143,245,.14); filter:blur(35px); }
.dashboard-preview {
  position:relative; z-index:2; width:100%; max-width:630px;
  background:#fff; border:1px solid #d9e6ee; border-radius:22px;
  overflow:hidden; box-shadow:var(--shadow); transform:rotate(1.2deg);
}
.preview-topbar { min-height:46px; display:flex; align-items:center; gap:7px; padding:0 18px; border-bottom:1px solid #e7eef2; color:#8193a0; font-size:.67rem; }
.preview-topbar span { width:8px; height:8px; border-radius:50%; background:#dbe5eb; }
.preview-topbar strong { margin-left:auto; margin-right:auto; font-size:.68rem; }
.preview-grid { display:grid; grid-template-columns:70px 1fr; min-height:390px; }
.preview-grid aside { background:var(--navy); padding:20px 14px; }
.mini-logo { width:37px; height:37px; border-radius:10px; display:grid; place-items:center; background:var(--blue); color:white; font-size:.72rem; font-weight:800; margin-bottom:28px; }
.preview-grid aside i { display:block; height:8px; border-radius:8px; background:rgba(255,255,255,.16); margin:20px 3px; }
.preview-content { padding:25px; background:#f7fafc; }
.preview-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.preview-heading small, .sync-card small, .feature-card small { color:#8ca0af; }
.preview-heading h3 { margin:1px 0 0; font-size:1rem; color:var(--navy); }
.preview-heading button { border:0; border-radius:9px; background:var(--blue); color:white; font-size:.64rem; font-weight:800; padding:9px 12px; }
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0; }
.stats-row article { background:white; border:1px solid #e2ebf0; border-radius:12px; padding:14px; }
.stats-row small { display:block; font-size:.64rem; color:#8296a4; }
.stats-row b { display:block; margin-top:4px; font-size:1.15rem; color:var(--navy); }
.sync-card { display:flex; align-items:center; gap:12px; background:white; border:1px solid #e2ebf0; border-radius:14px; padding:14px; }
.sync-icon, .round-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#e7f5ff; color:var(--blue); font-weight:800; }
.sync-card div:nth-child(2) { display:flex; flex-direction:column; flex:1; font-size:.68rem; }
.sync-card strong { color:var(--navy); }
.sync-card span { color:#8093a0; }
.sync-card em { color:#54a824; background:#edf9e6; padding:5px 8px; border-radius:8px; font-size:.58rem; font-style:normal; font-weight:800; }
.gallery-strip { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; margin-top:18px; }
.photo { min-height:105px; border-radius:12px; background-size:cover; background-position:center; }
.photo-1, .mosaic-a, .cover-1 { background-image:linear-gradient(145deg, rgba(11,29,45,.12), rgba(11,29,45,.18)), url("https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=900&q=80"); }
.photo-2, .mosaic-b, .cover-2 { background-image:linear-gradient(145deg, rgba(11,29,45,.1), rgba(11,29,45,.16)), url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80"); }
.photo-3, .mosaic-c, .cover-3 { background-image:linear-gradient(145deg, rgba(11,29,45,.08), rgba(11,29,45,.15)), url("https://images.unsplash.com/photo-1511497584788-876760111969?auto=format&fit=crop&w=900&q=80"); }
.mosaic-d { background-image:url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=900&q=80"); }

.floating-card { position:absolute; z-index:3; display:flex; align-items:center; gap:11px; background:white; border:1px solid #e2ebf0; border-radius:15px; padding:12px 15px; box-shadow:0 18px 38px rgba(11,29,45,.15); }
.floating-card small { display:block; color:#8ca0af; font-size:.64rem; }
.floating-card strong { color:var(--navy); font-size:.75rem; }
.upload-card { left:-18px; bottom:75px; }
.rating-card { right:-16px; top:73px; }
.rating-card strong { color:#f3a900; }

.logo-strip { padding:28px 0; border-top:1px solid #edf2f5; border-bottom:1px solid #edf2f5; }
.logo-strip p { text-align:center; color:#8a9aa6; font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.industry-list { display:flex; justify-content:center; flex-wrap:wrap; gap:18px 38px; margin-top:18px; color:#4d6576; font-weight:800; }

.section { padding:100px 0; }
.section-heading { max-width:760px; margin:0 auto 48px; text-align:center; }
.section-heading h2, .section-copy h2, .cta-card h2 { font-size:clamp(2.15rem,4vw,3.65rem); }
.section-heading p, .section-copy p { color:var(--muted); font-size:1.02rem; }
.split-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:85px; align-items:start; }
.problem-section { background:var(--surface-soft); }
.problem-list { display:grid; gap:14px; }
.problem-list article { display:flex; gap:18px; padding:23px; background:white; border:1px solid var(--line); border-radius:18px; }
.problem-list article > span { color:var(--blue); font-weight:800; font-size:.82rem; }
.problem-list h3 { margin:0 0 4px; color:var(--navy); }
.problem-list p { margin:0; color:var(--muted); }

.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step-card, .feature-card, .price-card { position:relative; border:1px solid var(--line); border-radius:var(--radius); background:white; }
.step-card { padding:30px 24px; min-height:285px; }
.step-number { position:absolute; right:20px; top:18px; color:#a9bac6; font-weight:800; font-size:.75rem; }
.feature-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:#e9f6ff; color:var(--blue); font-size:1.25rem; font-weight:800; }
.step-card h3, .feature-card h3 { margin:25px 0 10px; color:var(--navy); font-size:1.12rem; }
.step-card p, .feature-card p { color:var(--muted); margin:0; font-size:.91rem; }

.features-section { background:linear-gradient(180deg,#f7fafc,#fff); }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card { padding:28px; min-height:250px; overflow:hidden; }
.feature-large { grid-column:span 2; min-height:360px; display:grid; grid-template-columns:.85fr 1.15fr; gap:30px; align-items:center; }
.feature-tag { color:var(--blue); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.69rem; }
.feature-large h3 { font-size:1.8rem; line-height:1.2; }
.mini-ui { border:1px solid var(--line); background:#f8fbfd; border-radius:18px; padding:22px; }
.storage-header { display:flex; justify-content:space-between; gap:15px; font-size:.78rem; }
.progress { height:9px; background:#dce8ef; border-radius:10px; overflow:hidden; margin:16px 0 23px; }
.progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--cyan)); }
.storage-items { display:grid; gap:11px; }
.storage-items span { display:flex; justify-content:space-between; border-top:1px solid #e5edf2; padding-top:11px; color:#657986; font-size:.79rem; }
.text-link { display:inline-block; margin-top:20px; color:var(--blue); font-weight:800; }
.portfolio-mosaic { display:grid; grid-template-columns:1.3fr .8fr; grid-template-rows:1fr 1fr; gap:8px; min-height:280px; }
.portfolio-mosaic span { background-size:cover; background-position:center; border-radius:14px; }
.mosaic-a { grid-row:span 2; }

.guides-section { background:var(--navy); color:white; }
.guides-section .section-heading h2 { color:white; }
.section-heading-inline { max-width:none; display:flex; align-items:end; justify-content:space-between; text-align:left; }
.section-heading-inline > div { max-width:760px; }
.guides-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.guide-card { background:white; color:var(--text); border-radius:22px; overflow:hidden; }
.guide-cover { height:180px; background-size:cover; background-position:center; }
.guide-body { position:relative; padding:45px 22px 24px; }
.avatar { width:58px; height:58px; border-radius:50%; border:4px solid white; background:linear-gradient(135deg,#dce9f1,#a8bcc8); }
.guide-body .avatar { position:absolute; top:-29px; left:22px; }
.guide-body h3 { margin:8px 0 3px; color:var(--navy); }
.guide-body p { margin:0 0 15px; color:var(--muted); font-size:.82rem; }
.rating { color:#f4a900; font-size:.75rem; }
.rating b { color:#516879; margin-left:4px; }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.chips span { background:#eef6fa; color:#4f6878; border-radius:20px; padding:5px 10px; font-size:.67rem; font-weight:800; }
.guide-body a { color:var(--blue); font-size:.78rem; font-weight:800; }

.billing-toggle { width:max-content; margin:0 auto 35px; padding:5px; background:#edf4f8; border-radius:13px; }
.billing-toggle button { border:0; background:transparent; padding:9px 15px; border-radius:9px; font-weight:800; color:#637988; cursor:pointer; }
.billing-toggle button.active { background:white; color:var(--navy); box-shadow:0 5px 14px rgba(11,29,45,.08); }
.billing-toggle span { color:var(--green); font-size:.63rem; margin-left:4px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.price-card { padding:30px; }
.price-card.featured { border:2px solid var(--blue); box-shadow:var(--shadow); transform:translateY(-12px); }
.popular { position:absolute; right:20px; top:18px; background:#e7f5ff; color:var(--blue); border-radius:15px; padding:5px 10px; font-size:.65rem; font-weight:800; }
.plan-label { color:var(--blue); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; }
.price-card h3 { margin:7px 0; color:var(--navy); }
.price { display:flex; align-items:end; gap:5px; margin:18px 0 8px; }
.price b { font-size:2.75rem; line-height:1; color:var(--navy); letter-spacing:-.05em; }
.price span { color:var(--muted); font-size:.78rem; }
.price-card > p { min-height:68px; color:var(--muted); font-size:.86rem; }
.price-card ul { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px; }
.price-card li { color:#526a7b; font-size:.83rem; }
.price-card li::before { content:"✓"; color:var(--green); font-weight:800; margin-right:9px; }

.testimonial-section { padding-top:20px; }
.testimonial-card { position:relative; max-width:920px; padding:60px; border-radius:28px; background:var(--surface-soft); border:1px solid var(--line); }
.quote-mark { position:absolute; top:10px; left:30px; color:rgba(22,143,245,.16); font-size:8rem; line-height:1; font-weight:800; }
blockquote { position:relative; margin:0; color:var(--navy); font-weight:700; font-size:1.45rem; line-height:1.55; }
.testimonial-author { display:flex; align-items:center; gap:14px; margin-top:27px; }
.testimonial-author .avatar { border:0; width:48px; height:48px; }
.testimonial-author div:last-child { display:flex; flex-direction:column; }
.testimonial-author span { color:var(--muted); font-size:.75rem; }

.faq-section { background:var(--surface-soft); }
.faq-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; align-items:start; }
.faq-list { display:grid; gap:11px; }
.faq-item { background:white; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.faq-item button { width:100%; border:0; background:white; color:var(--navy); padding:20px 22px; display:flex; justify-content:space-between; gap:15px; text-align:left; font-weight:800; cursor:pointer; }
.faq-item button span { color:var(--blue); font-size:1.2rem; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-answer p { margin:0; padding:0 22px 21px; color:var(--muted); font-size:.88rem; }
.faq-item.active .faq-answer { max-height:180px; }

.cta-section { padding:90px 0; }
.cta-card { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:58px; border-radius:30px; background:linear-gradient(135deg,var(--navy),#123c59); color:white; box-shadow:var(--shadow); }
.cta-card h2 { color:white; max-width:720px; margin-bottom:12px; }
.cta-card p { color:#c5d5df; margin:0; }
.cta-card .eyebrow { color:#64cff0; }
.cta-actions { display:flex; gap:12px; flex-shrink:0; }

.site-footer { padding:70px 0 25px; background:#071521; color:#9eb0bd; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:50px; }
.footer-brand .brand-text { color:white; }
.footer-grid > div:first-child p { max-width:300px; font-size:.85rem; }
.footer-grid h4 { color:white; margin:0 0 15px; font-size:.9rem; }
.footer-grid > div:not(:first-child) { display:flex; flex-direction:column; gap:9px; }
.footer-grid a { font-size:.8rem; }
.footer-grid a:hover { color:white; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:55px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:.72rem; }
.footer-bottom div { display:flex; gap:20px; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@media (max-width: 1050px) {
  .main-nav { gap:16px; }
  .main-nav > a:not(.btn):not(.nav-login) { display:none; }
  .hero-grid { gap:40px; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .feature-large { grid-column:span 2; }
  .steps-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 820px) {
  .container { width:min(100% - 28px, 720px); }
  .menu-toggle { display:block; z-index:1002; }
  .main-nav {
    position:fixed; inset:78px 0 auto 0; padding:25px 20px 35px;
    flex-direction:column; align-items:stretch; gap:8px;
    background:white; border-bottom:1px solid var(--line);
    transform:translateY(-130%); transition:transform .3s ease;
    box-shadow:0 25px 40px rgba(11,29,45,.1);
  }
  .main-nav.open { transform:translateY(0); }
  .main-nav > a:not(.btn):not(.nav-login) { display:block; padding:12px 8px; }
  .nav-login { margin-left:0; padding:12px 8px; }
  .hero { padding-top:70px; }
  .hero-grid, .split-layout, .faq-layout { grid-template-columns:1fr; }
  .hero-copy { text-align:center; }
  .hero-copy > p { margin-left:auto; margin-right:auto; }
  .hero-actions, .hero-trust { justify-content:center; }
  .hero-visual { min-height:480px; }
  .upload-card { left:0; }
  .rating-card { right:0; }
  .split-layout, .faq-layout { gap:40px; }
  .guides-grid, .pricing-grid { grid-template-columns:1fr; }
  .price-card.featured { transform:none; }
  .section-heading-inline { align-items:start; gap:25px; }
  .cta-card { flex-direction:column; align-items:flex-start; }
  .footer-grid { grid-template-columns:1.3fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column:2; }
}

@media (max-width: 620px) {
  .section { padding:75px 0; }
  .hero { padding:58px 0 60px; }
  .hero h1 { font-size:2.75rem; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; }
  .hero-visual { min-height:390px; margin-top:15px; }
  .dashboard-preview { transform:none; }
  .preview-grid { grid-template-columns:48px 1fr; min-height:315px; }
  .preview-grid aside { padding:15px 8px; }
  .mini-logo { width:30px; height:30px; }
  .preview-content { padding:15px; }
  .preview-heading button { display:none; }
  .stats-row article { padding:9px; }
  .sync-card em { display:none; }
  .gallery-strip .photo { min-height:75px; }
  .floating-card { display:none; }
  .industry-list { font-size:.78rem; gap:12px 20px; }
  .steps-grid, .features-grid { grid-template-columns:1fr; }
  .feature-large { grid-column:auto; grid-template-columns:1fr; min-height:auto; }
  .portfolio-mosaic { min-height:250px; }
  .section-heading-inline { display:block; }
  .section-heading-inline .btn { margin-top:20px; }
  .testimonial-card { padding:42px 25px; }
  blockquote { font-size:1.12rem; }
  .cta-card { padding:38px 25px; }
  .cta-actions { width:100%; flex-direction:column; }
  .cta-actions .btn { width:100%; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:35px 25px; }
  .footer-grid > div:first-child { grid-column:span 2; }
  .footer-grid > div:last-child { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}
.logo{

    height:70px;

    width:auto;

}