:root{
  --bg:#f4f7fb;
  --bg-soft:#eef3f9;
  --surface:#ffffff;
  --surface-2:#f8fbff;
  --text:#0f172a;
  --text-soft:#475569;
  --text-muted:#64748b;
  --line:#dbe4ee;
  --line-strong:#c8d5e3;
  --primary:#0f172a;
  --primary-2:#1e293b;
  --accent:#f97316;
  --accent-2:#ea580c;
  --success:#0f766e;
  --shadow-sm:0 10px 30px rgba(15,23,42,.06);
  --shadow-md:0 18px 50px rgba(15,23,42,.09);
  --shadow-lg:0 30px 80px rgba(15,23,42,.14);
  --radius-xs:12px;
  --radius-sm:16px;
  --radius-md:22px;
  --radius-lg:30px;
  --radius-xl:38px;
  --container:1240px;
  --header-h:84px;
  --transition:all .28s ease;
}

*,
*::before,
*::after{
  box-sizing:border-box;
  min-width:0;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:'Inter', Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(249,115,22,.08), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, #f3f7fc 35%, #f6f8fc 100%);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
  border:none;
  background:none;
}

input,
select,
textarea{
  width:100%;
  outline:none;
}

textarea{
  resize:vertical;
}

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

.section{
  padding:100px 0;
}

.section-heading{
  max-width:860px;
  margin-bottom:44px;
}

.section-heading.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.section-heading.narrow{
  max-width:760px;
}

.section-heading h2{
  margin:0 0 18px;
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:1.08;
  letter-spacing:-0.04em;
}

.section-heading p{
  margin:0;
  font-size:1.06rem;
  color:var(--text-soft);
}

.section-tag,
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding:8px 14px;
  border:1px solid rgba(249,115,22,.18);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--accent-2);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);
  max-width:100%;
}

.section-tag.light{
  color:#fff;
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.16);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 22px;
  border-radius:999px;
  font-weight:700;
  font-size:.98rem;
  transition:var(--transition);
  white-space:nowrap;
  max-width:100%;
}

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

.btn-primary{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff;
  box-shadow:0 18px 40px rgba(234,88,12,.28);
}

.btn-primary:hover{
  box-shadow:0 24px 50px rgba(234,88,12,.34);
}

.btn-secondary{
  background:#fff;
  color:var(--primary);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}

.btn-secondary:hover{
  border-color:var(--line-strong);
  background:#fbfdff;
}

.btn-ghost{
  background:rgba(255,255,255,.6);
  color:var(--primary);
  border:1px solid rgba(15,23,42,.08);
  backdrop-filter:blur(8px);
}

.btn-ghost:hover{
  background:#fff;
  border-color:rgba(15,23,42,.14);
}

.btn-white{
  background:#fff;
  color:var(--primary);
  box-shadow:var(--shadow-sm);
}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(14px);
  background:rgba(248,251,255,.82);
  border-bottom:1px solid rgba(15,23,42,.06);
  overflow:visible;
}

.header-inner{
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:relative;
  width:100%;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:-0.03em;
  flex-shrink:1;
  min-width:0;
  max-width:calc(100% - 80px);
}

.brand-logo{
  display:flex;
  align-items:center;
  flex-shrink:1;
  min-width:0;
}

.brand-logo-img{
  display:block;
  width:auto;
  height:40px;
  max-width:100%;
  object-fit:contain;
}
.footer-logo-img{
  display:block;
  width:auto;
  height:48px;
  max-width:100%;
  object-fit:contain;
}

@media (max-width: 640px){
  .footer-logo-img{
    height:40px;
  }
}
.brand-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, var(--primary) 0%, #334155 100%);
  color:#fff;
  font-size:.96rem;
  box-shadow:0 14px 26px rgba(15,23,42,.18);
  flex-shrink:0;
}

.brand-text{
  font-size:1.04rem;
  line-height:1.1;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:30px;
}

.main-nav a{
  position:relative;
  color:var(--text-soft);
  font-size:.96rem;
  font-weight:600;
  transition:var(--transition);
}

.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;
  width:0;
  height:2px;
  border-radius:999px;
  background:var(--accent);
  transition:var(--transition);
}

.main-nav a:hover{
  color:var(--text);
}

.main-nav a:hover::after{
  width:100%;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.nav-toggle{
  display:none;
  width:48px;
  height:48px;
  min-width:48px;
  padding:0;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow-sm);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  flex-shrink:0;
  margin-left:auto;
  position:relative;
  z-index:1002;
}

.nav-toggle span{
  width:20px;
  height:2px;
  border-radius:999px;
  background:var(--primary);
  transition:var(--transition);
}

.nav-toggle.is-open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2){
  opacity:0;
}

.nav-toggle.is-open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.hero{
  position:relative;
  overflow:hidden;
  padding:88px 0 70px;
}

.hero::before{
  content:"";
  position:absolute;
  inset:auto -10% -120px auto;
  width:580px;
  height:580px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(15,118,110,.10), transparent 62%);
  pointer-events:none;
  max-width:100%;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}

.hero-copy h1{
  margin:0 0 22px;
  font-size:clamp(2.8rem, 6vw, 5rem);
  line-height:.98;
  letter-spacing:-0.055em;
  max-width:760px;
  word-break:normal;
}

.hero-lead{
  margin:0 0 18px;
  font-size:1.14rem;
  color:var(--text-soft);
  max-width:740px;
}

.hero-text{
  margin:0;
  font-size:1.03rem;
  color:var(--text-muted);
  max-width:700px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}

.hero-points{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}

.hero-points li{
  position:relative;
  padding-left:28px;
  color:var(--text-soft);
  font-weight:600;
}

.hero-points li::before{
  content:"";
  position:absolute;
  top:9px;
  left:0;
  width:11px;
  height:11px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, var(--success) 100%);
  box-shadow:0 0 0 6px rgba(249,115,22,.10);
}

.hero-visual{
  position:relative;
  min-width:0;
}

.hero-card{
  position:relative;
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 100%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  backdrop-filter:blur(14px);
  max-width:100%;
}

.hero-card-panel{
  padding:28px 28px 34px;
}

.panel-badge{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--success);
  background:rgba(15,118,110,.10);
  border:1px solid rgba(15,118,110,.14);
  margin-bottom:16px;
  max-width:100%;
}

.hero-card-panel h2{
  margin:0 0 12px;
  font-size:1.7rem;
  line-height:1.12;
  letter-spacing:-0.04em;
}

.hero-card-panel p{
  margin:0;
  color:var(--text-soft);
}

.image-hero,
.image-tall,
.image-card{
  width:100%;
  display:block;
  object-fit:cover;
  max-width:100%;
}

.image-hero{
  aspect-ratio:16 / 11;
  min-height:340px;
  border-bottom:1px solid rgba(15,23,42,.05);
}

.image-tall{
  min-height:680px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}

.image-card{
  min-height:520px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}

.trust-strip{
  padding:0 0 10px;
  overflow:hidden;
}

.trust-strip-inner{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.trust-item{
  padding:24px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(12px);
  min-width:0;
}

.trust-item strong{
  display:block;
  margin-bottom:6px;
  font-size:1rem;
  letter-spacing:-0.02em;
}

.trust-item span{
  display:block;
  color:var(--text-soft);
  font-size:.97rem;
}

.problem-grid,
.benefits-grid,
.difference-grid{
  display:grid;
  gap:24px;
}

.problem-grid{
  grid-template-columns:repeat(2, 1fr);
}

.benefits-grid{
  grid-template-columns:repeat(4, 1fr);
}

.difference-grid{
  grid-template-columns:repeat(4, 1fr);
}

.problem-card,
.benefit-card,
.difference-card,
.faq-item{
  padding:30px 28px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  min-width:0;
}

.problem-card:hover,
.benefit-card:hover,
.difference-card:hover,
.faq-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.problem-card h3,
.benefit-card h3,
.difference-card h3,
.faq-item h3{
  margin:0 0 14px;
  font-size:1.22rem;
  line-height:1.2;
  letter-spacing:-0.03em;
}

.problem-card ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}

.problem-card li{
  position:relative;
  padding-left:22px;
  color:var(--text-soft);
}

.problem-card li::before{
  content:"";
  position:absolute;
  top:10px;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
}

.problem-section .section-heading{
  margin-left:auto;
  margin-right:auto;
}

.solution-grid,
.security-grid{
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:48px;
  align-items:center;
}

.solution-copy h2,
.security-panel h2{
  margin:0 0 18px;
  font-size:clamp(2rem, 4vw, 3.1rem);
  line-height:1.08;
  letter-spacing:-0.045em;
}

.solution-copy p,
.security-panel p{
  margin:0 0 16px;
  color:var(--text-soft);
  font-size:1.03rem;
}

.solution-list{
  display:grid;
  gap:18px;
  margin-top:30px;
}

.solution-item{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:22px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.84);
  box-shadow:var(--shadow-sm);
  min-width:0;
}

.solution-number{
  width:52px;
  min-width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  color:#fff;
  font-weight:800;
  font-size:.9rem;
  box-shadow:0 14px 24px rgba(15,23,42,.16);
  flex-shrink:0;
}

.solution-item h3{
  margin:2px 0 8px;
  font-size:1.12rem;
  letter-spacing:-0.03em;
}

.solution-item p{
  margin:0;
  color:var(--text-soft);
  font-size:.98rem;
}

.benefits-section.alt{
  background:linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(237,243,250,.72) 100%);
  border-top:1px solid rgba(15,23,42,.04);
  border-bottom:1px solid rgba(15,23,42,.04);
}

.benefit-card p,
.difference-card p,
.faq-item p{
  margin:0;
  color:var(--text-soft);
}

.security-panel{
  padding:38px;
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(247,250,253,.92) 100%);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:var(--shadow-md);
}

.security-levels{
  display:grid;
  gap:18px;
  margin-top:28px;
}

.security-level{
  position:relative;
  padding:24px 22px 22px;
  border-radius:var(--radius-md);
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
}

.level-label{
  display:inline-flex;
  margin-bottom:12px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(249,115,22,.11);
  color:var(--accent-2);
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  max-width:100%;
}

.security-level h3{
  margin:0 0 10px;
  font-size:1.1rem;
  letter-spacing:-0.03em;
}

.security-level p{
  margin:0;
  font-size:.97rem;
}

.quote-section{
  padding-top:20px;
}

.quote-box{
  position:relative;
  padding:46px 44px;
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg, var(--primary) 0%, #1e293b 100%);
  color:#fff;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}

.quote-box::before{
  content:"";
  position:absolute;
  inset:auto -40px -60px auto;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(249,115,22,.25), transparent 60%);
}

.quote-text{
  position:relative;
  margin:0;
  max-width:980px;
  font-size:clamp(1.35rem, 2.8vw, 2.2rem);
  line-height:1.28;
  font-weight:700;
  letter-spacing:-0.035em;
}

.faq-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}

.cta-section{
  padding-top:40px;
}

.cta-box{
  display:grid;
  grid-template-columns:1fr .92fr;
  gap:34px;
  padding:42px;
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg, var(--primary) 0%, #1f2d46 100%);
  color:#fff;
  box-shadow:var(--shadow-lg);
}

.cta-copy h2{
  margin:0 0 18px;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.08;
  letter-spacing:-0.045em;
}

.cta-copy p{
  margin:0;
  color:rgba(255,255,255,.82);
  max-width:680px;
  font-size:1.03rem;
}

.cta-form{
  display:grid;
  gap:16px;
  padding:26px;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}

.form-row{
  display:grid;
  gap:8px;
}

.form-row label{
  font-size:.92rem;
  font-weight:700;
  color:#fff;
}

.form-row input,
.form-row select,
.form-row textarea{
  border:none;
  border-radius:16px;
  padding:16px 18px;
  background:#fff;
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);
  max-width:100%;
}

.form-row input::placeholder,
.form-row textarea::placeholder{
  color:#94a3b8;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  box-shadow:
    inset 0 0 0 1px rgba(249,115,22,.35),
    0 0 0 4px rgba(249,115,22,.12);
}

.site-footer{
  padding:34px 0 50px;
  overflow:hidden;
}

.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
  padding-top:26px;
  border-top:1px solid rgba(15,23,42,.08);
}

.footer-brand{
  max-width:520px;
}

.footer-brand-link{
  margin-bottom:14px;
}

.footer-brand p{
  margin:0;
  color:var(--text-soft);
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.footer-links a{
  color:var(--text-soft);
  font-weight:600;
  transition:var(--transition);
}

.footer-links a:hover{
  color:var(--text);
}

@media (max-width: 1180px){
  .hero-grid,
  .solution-grid,
  .security-grid,
  .cta-box{
    grid-template-columns:1fr;
  }

  .hero-copy{
    max-width:none;
  }

  .hero-visual,
  .solution-visual,
  .security-visual{
    order:2;
  }

  .benefits-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .difference-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .cta-copy p{
    max-width:none;
  }

  .image-tall{
    min-height:520px;
  }

  .image-card{
    min-height:420px;
  }
}

@media (max-width: 980px){
  :root{
    --header-h:76px;
  }

  .main-nav,
  .header-actions{
    display:none;
  }

  .nav-toggle{
    display:flex;
  }

  .main-nav.is-open{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:16px;
    border-radius:20px;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(15,23,42,.08);
    box-shadow:var(--shadow-lg);
    backdrop-filter:blur(16px);
    z-index:1001;
    width:100%;
    max-width:100%;
  }

  .main-nav.is-open a{
    width:100%;
    padding:12px 8px;
  }

  .trust-strip-inner,
  .problem-grid,
  .faq-list{
    grid-template-columns:1fr;
  }

  .section{
    padding:86px 0;
  }

  .hero{
    padding:62px 0 56px;
  }

  .security-panel{
    padding:30px 24px;
  }
}

@media (max-width: 640px){
  .container{
    width:min(calc(100% - 22px), var(--container));
  }

  .section{
    padding:72px 0;
  }

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

  .hero-copy h1{
    font-size:clamp(2.3rem, 11vw, 3.4rem);
  }

  .hero-lead{
    font-size:1.02rem;
  }

  .hero-text,
  .section-heading p,
  .solution-copy p,
  .security-panel p,
  .cta-copy p{
    font-size:.98rem;
  }

  .brand{
    max-width:calc(100% - 64px);
  }

  .brand-logo-img{
    height:42px;
    max-width:100%;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .btn{
    width:100%;
  }

  .hero-card-panel,
  .problem-card,
  .benefit-card,
  .difference-card,
  .faq-item,
  .solution-item,
  .quote-box{
    padding-left:22px;
    padding-right:22px;
  }

  .hero-card-panel{
    padding-top:22px;
    padding-bottom:26px;
  }

  .benefits-grid,
  .difference-grid{
    grid-template-columns:1fr;
  }

  .image-hero{
    min-height:250px;
  }

  .image-tall{
    min-height:360px;
  }

  .image-card{
    min-height:300px;
  }

  .solution-item{
    gap:14px;
    align-items:flex-start;
  }

  .solution-number{
    width:46px;
    min-width:46px;
    height:46px;
    border-radius:14px;
  }

  .quote-text{
    font-size:1.34rem;
  }

  .cta-box{
    padding:24px;
  }

  .cta-form{
    padding:18px;
  }

  .footer-inner{
    flex-direction:column;
  }

  .footer-links{
    gap:14px 18px;
  }
}