/* SR Clean Hamburg — Optimized CSS (no framework) */

/* ===== RESET & BASE ===== */
*,*::after,*::before{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
ol,ul,menu{list-style:none}
img,svg,video,picture{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}
button,[type="button"],[type="reset"],[type="submit"]{appearance:button}
summary{display:list-item;list-style:none}
summary::marker,summary::-webkit-details-marker{display:none;content:''}
::placeholder{opacity:.5;color:currentcolor}
[hidden]{display:none!important}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
textarea{resize:vertical}

/* ===== CUSTOM PROPERTIES ===== */
:root{
  --sr-blue:#009ade;
  --sr-blue-hover:#0080b8;
  --blue-50:#eff6ff;
  --blue-100:#dbeafe;
  --blue-500:#3b82f6;
  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-400:#9ca3af;
  --gray-600:#4b5563;
  --white:#fff;
  --black:#000;
  --spacing:0.25rem;
  --max-w:80rem;
  --transition:150ms cubic-bezier(.4,0,.2,1);
}

/* ===== LAYOUT UTILITIES ===== */
.container{max-width:var(--max-w);margin-inline:auto;padding-inline:1rem}
@media(min-width:40rem){.container{padding-inline:1.5rem}}
@media(min-width:64rem){.container{padding-inline:2rem}}

/* ===== NAVIGATION ===== */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--gray-200);background:var(--white)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:5rem}
.nav-logo{flex-shrink:0;color:var(--sr-blue)}
.nav-logo a{display:block}
.nav-logo-title{font-size:1.5rem;font-weight:700;line-height:1}
.nav-logo-sub{margin-top:-0.125rem;font-size:.75rem;opacity:.8}
.nav-tabs{display:none;position:relative;align-items:center;gap:.5rem;border-radius:9999px;padding:.25rem;background:var(--blue-50)}
@media(min-width:48rem){.nav-tabs{display:flex}}
.nav-indicator{position:absolute;top:.25rem;height:calc(100% - .5rem);border-radius:9999px;background:var(--sr-blue);transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)}
.nav-tab{position:relative;z-index:10;padding:.75rem 1.5rem;border-radius:9999px;color:var(--sr-blue);transition:color var(--transition),background var(--transition)}
.nav-tab:hover{background:var(--sr-blue);color:var(--white)}
.nav-tab.active{color:var(--white)}
.nav-cta-wrap{display:none}
@media(min-width:48rem){.nav-cta-wrap{display:block}}
.btn-primary{display:inline-flex;align-items:center;padding:.75rem 1.5rem;border-radius:9999px;color:var(--white);background:var(--sr-blue);transition:color var(--transition),background var(--transition);white-space:nowrap;font-weight:400}
.btn-primary:hover{background:var(--blue-100);color:var(--sr-blue)}
.btn-primary--bold{font-weight:700}
.btn-outline{display:inline-flex;align-items:center;padding:.75rem 1.5rem;border-radius:9999px;color:var(--gray-600);background:var(--white);transition:color var(--transition),background var(--transition);white-space:nowrap;font-weight:700}
.btn-outline:hover{background:var(--blue-50);color:var(--sr-blue)}

/* Mobile hamburger */
.hamburger{display:flex;flex-direction:column;justify-content:center;width:1.5rem;height:1.5rem;border:none;padding:.25rem;background:transparent;cursor:pointer}
@media(min-width:48rem){.hamburger{display:none}}
.hamburger-line{display:block;height:2px;width:100%;margin:3px 0;border-radius:2px;background:var(--sr-blue);transition:transform var(--transition),opacity var(--transition)}
.hamburger.active .hamburger-line:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.active .hamburger-line:nth-child(2){opacity:0}
.hamburger.active .hamburger-line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{display:none;border-top:1px solid var(--gray-200);padding:1rem;background:var(--white)}
.mobile-menu.open{display:flex;flex-direction:column;gap:.75rem}
.mobile-menu>.mobile-menu-item{display:block;padding:.75rem 0;font-weight:500;border-bottom:1px solid var(--gray-200);color:var(--sr-blue);transition:all var(--transition)}
.mobile-menu>.mobile-menu-item:last-of-type{border-bottom:none}
.mobile-menu>.mobile-menu-item:hover{color:var(--sr-blue-hover);padding-left:.5rem}
.mobile-menu-cta{padding-top:1rem;text-align:center}
.mobile-menu-cta a{display:inline-block;padding:.75rem 2rem;border-radius:9999px;color:var(--white);font-weight:600;background:var(--sr-blue);border-bottom:none;transition:background var(--transition)}
.mobile-menu-cta a:hover{background:var(--sr-blue-hover);padding-left:0}

/* ===== HERO ===== */
.hero{padding-top:2rem}
.hero-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:64rem){.hero-grid{grid-template-columns:3fr 2fr}}
.badge{display:inline-flex;align-items:center;padding:.5rem 1rem;border-radius:1rem;font-size:.75rem;font-weight:700;color:var(--sr-blue);background:var(--blue-100)}
.badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1rem}
.badge-row span{font-size:.875rem}
.hero h1{margin-bottom:1rem;font-size:1.875rem;font-weight:700;line-height:1.25}
@media(min-width:48rem){.hero h1{font-size:2.25rem}}
@media(min-width:64rem){.hero h1{font-size:3rem;line-height:1}}
.hero-desc{margin-bottom:2rem;font-size:1rem;color:var(--gray-600)}
@media(min-width:48rem){.hero-desc{font-size:1.125rem}}
.hero-form{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}
@media(min-width:40rem){.hero-form{flex-direction:row}}
.hero-form input{flex:1;padding:.75rem 1.5rem;border-radius:9999px;color:var(--sr-blue);background:var(--blue-50)}
.hero-form input:focus{outline:none;box-shadow:0 0 0 1px var(--sr-blue)}
.trust-row{display:flex;align-items:center;gap:1.5rem;font-size:.875rem;flex-wrap:wrap}
.trust-row svg{width:1rem;height:1rem;margin-right:.5rem;color:var(--sr-blue)}
.trust-row .star-group{display:flex;align-items:center}
.trust-row .star-group span{font-weight:600}

/* ===== SECTIONS (shared) ===== */
.section{padding:4rem 0}
.section--blue{background:var(--blue-50)}
.section--sr{background:var(--sr-blue);color:var(--white)}
.section-header{max-width:56rem;margin:0 auto 4rem;text-align:center}
.section-header h2,.section-header h3{margin-bottom:1rem;font-size:1.875rem;font-weight:700}
@media(min-width:48rem){.section-header h2,.section-header h3{font-size:2.25rem}}
@media(min-width:64rem){.section-header h2,.section-header h3{font-size:3rem;line-height:1}}
.section-header p{font-size:1.125rem;line-height:1.625;color:var(--gray-600)}
@media(min-width:48rem){.section-header p{font-size:1.25rem}}

/* ===== STATS ===== */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
@media(min-width:64rem){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center}
.stat-icon{display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:9999px;margin-bottom:1rem;background:var(--white)}
.stat-icon svg{width:2rem;height:2rem;color:var(--sr-blue)}
.stat-num{margin-bottom:.5rem;font-size:2.25rem;font-weight:700}
@media(min-width:48rem){.stat-num{font-size:3rem;line-height:1}}
.stat-label{font-weight:500;font-size:.875rem}
@media(min-width:48rem){.stat-label{font-size:1rem}}

/* ===== TWO-COL SECTIONS ===== */
.two-col{display:grid;gap:3rem;align-items:center}
@media(min-width:64rem){.two-col{grid-template-columns:repeat(2,1fr)}}
.two-col h2{margin-bottom:2rem;font-size:1.875rem;font-weight:700;line-height:1.25}
@media(min-width:48rem){.two-col h2{font-size:2.25rem}}
@media(min-width:64rem){.two-col h2{font-size:3rem;line-height:1}}
.two-col>p,.two-col .col-text>p{margin-bottom:2rem;font-size:1.125rem;line-height:1.625;color:var(--gray-600)}
.two-col img{border-radius:1rem;width:100%;height:auto;object-fit:cover}
@media(min-width:64rem){.two-col--reverse .col-img{order:1}.two-col--reverse .col-text{order:2}}
@media(max-width:63.999rem){.two-col--reverse .col-img{order:2}.two-col--reverse .col-text{order:1}}

/* Icon feature grid */
.icon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:2rem}
.icon-feature{display:flex;flex-direction:column;align-items:flex-start}
.icon-circle{display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:9999px;margin-bottom:1rem;background:var(--blue-100)}
.icon-circle svg{width:1.5rem;height:1.5rem;color:var(--sr-blue)}
.icon-circle--sm{width:3rem;height:3rem;border-radius:1rem}
.icon-feature h3{margin-bottom:.5rem;font-weight:600}
.icon-feature p{font-size:.875rem;color:var(--gray-600)}

/* Check list */
.check-list{display:flex;flex-direction:column;gap:1rem}
.check-item{display:flex;align-items:flex-start;gap:.75rem}
.check-dot{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:9999px;margin-top:.5rem;background:var(--blue-100)}
.check-dot svg{width:1rem;height:1rem;color:var(--sr-blue)}
.check-item .label{font-weight:600}
.check-item .desc{font-size:.875rem;color:var(--gray-600)}

/* ===== WHY US ===== */
.features-grid{display:grid;gap:1.5rem}
@media(min-width:48rem){.features-grid{grid-template-columns:repeat(2,1fr)}}
.feature-card{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;border-radius:1rem;background:var(--white)}
.feature-card .icon-circle--sm{flex-shrink:0}
.feature-card h3{margin-bottom:.5rem;font-size:1.125rem;font-weight:700}
.feature-card p{font-size:.875rem}

/* ===== REVIEWS ===== */
.reviews-layout{display:grid;gap:3rem}
@media(min-width:64rem){.reviews-layout{grid-template-columns:1fr 3fr}}
.reviews-sidebar h2{margin-bottom:2rem;font-size:1.5rem;font-weight:700}
@media(min-width:48rem){.reviews-sidebar h2{font-size:1.875rem}}
.rating-box{border-radius:1rem;padding:1.5rem;margin-bottom:2rem;background:var(--sr-blue)}
.rating-box .num{font-size:3rem;font-weight:700;color:var(--white);margin-bottom:.5rem}
.rating-box .stars{display:flex;gap:.25rem;margin-bottom:.5rem}
.rating-box .stars svg{width:1.25rem;height:1.25rem;color:var(--white)}
.reviews-list{display:flex;flex-direction:column;gap:1.5rem}
.review{border-radius:1rem;padding:1.5rem;background:var(--blue-50)}
.review-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.review-avatar{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:1rem;font-weight:700;color:var(--sr-blue);background:var(--blue-100)}
.review-name{font-weight:700}
.review-stars{display:flex;gap:.25rem}
.review-stars svg{width:1rem;height:1rem;color:var(--sr-blue)}
.review p{color:var(--gray-600);line-height:1.625}

/* ===== FAQ ===== */
.faq-grid{display:grid;gap:1.5rem;margin-bottom:3rem}
@media(min-width:64rem){.faq-grid{grid-template-columns:repeat(2,1fr)}}
.faq-item{border-radius:1rem;background:var(--blue-50)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;cursor:pointer}
.faq-item summary h3{font-size:1.125rem;font-weight:600;padding-right:1rem}
.faq-item summary svg{flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--blue-500);transition:transform .25s ease}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item .faq-body{padding:0 1.5rem 1.5rem;color:var(--gray-600);line-height:1.625}

/* ===== BLOG ===== */
.blog-grid{display:grid;gap:2rem}
@media(min-width:48rem){.blog-grid{grid-template-columns:repeat(2,1fr)}}
.blog-card{overflow:hidden;border-radius:1rem;background:var(--blue-50)}
.blog-card-img{position:relative;overflow:hidden;height:16rem}
.blog-card-img img{width:100%;height:100%;object-fit:cover}
.blog-card-badge{position:absolute;top:1rem;left:1rem}
.blog-card-body{padding:2rem}
.blog-meta{display:flex;align-items:center;margin-bottom:1rem;font-size:.875rem;color:var(--gray-600)}
.blog-meta svg{width:1rem;height:1rem;margin-right:.5rem}
.blog-card-body h3{margin-bottom:1rem;font-size:1.5rem;font-weight:700}
.blog-card-body>p{margin-bottom:2rem;color:var(--gray-600);line-height:1.625}
.btn-primary svg{width:1.25rem;height:1.25rem;margin-left:.75rem}

/* ===== CTA BANNER ===== */
.cta-banner{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1.5rem}
@media(min-width:64rem){.cta-banner{flex-direction:row}}
.cta-banner h3{margin-bottom:.5rem;font-size:1.5rem;font-weight:700}
@media(min-width:48rem){.cta-banner h3{font-size:1.875rem}}
.cta-form{display:flex;flex-direction:column;gap:.75rem;width:100%}
@media(min-width:40rem){.cta-form{flex-direction:row}}
@media(min-width:64rem){.cta-form{width:auto}}
.cta-form input{flex:1;padding:.75rem 1.5rem;border-radius:9999px;color:var(--sr-blue);background:var(--white)}
@media(min-width:40rem){.cta-form input{width:20rem}}
.cta-form input:focus{outline:none;box-shadow:0 0 0 1px var(--sr-blue)}

/* ===== FOOTER ===== */
.footer{padding:4rem 0;background:var(--blue-50)}
.footer-grid{display:grid;gap:2rem;margin-bottom:3rem;color:var(--sr-blue)}
@media(min-width:48rem){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-grid h3{margin-bottom:1rem;font-weight:700}
.footer-about p{margin-bottom:1rem;color:var(--gray-600);line-height:1.625}
.social-links{display:flex;gap:.75rem}
.social-link{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:9999px;background:var(--white);transition:background var(--transition),color var(--transition)}
.social-link svg{width:1.25rem;height:1.25rem}
.social-link:hover{background:var(--sr-blue);color:var(--white)}
.footer-links{display:flex;flex-direction:column;gap:.5rem;color:var(--gray-600)}
.footer-links a{transition:color var(--transition)}
.footer-links a:hover{color:var(--sr-blue)}
.contact-list{display:flex;flex-direction:column;gap:.75rem;color:var(--gray-600)}
.contact-item{display:flex;align-items:flex-start}
.contact-item svg{flex-shrink:0;width:1.25rem;height:1.25rem;margin-right:.5rem;margin-top:.125rem}
.footer-bottom{display:flex;flex-direction:column;justify-content:space-between;align-items:center;border-top:1px solid var(--sr-blue);padding-top:2rem;gap:1rem}
@media(min-width:48rem){.footer-bottom{flex-direction:row}}
.footer-bottom p{font-size:.875rem}
.footer-bottom a{color:var(--sr-blue);transition:color var(--transition)}
.footer-bottom a:hover{color:var(--white)}
.footer-legal{display:flex;gap:1.5rem;font-size:.875rem;color:var(--sr-blue)}
.footer-legal button{background:none;cursor:pointer;transition:color var(--transition)}
.footer-legal button:hover{color:var(--white)}

/* ===== MODALS ===== */
.modal{display:none;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal.open{display:flex}
.modal-box{overflow:hidden;border-radius:1rem;max-width:48rem;width:100%;max-height:90vh;background:var(--white)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--gray-200)}
.modal-header h2{font-size:1.5rem;font-weight:700}
.modal-close{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:1rem;background:none;cursor:pointer;transition:background var(--transition)}
.modal-close:hover{background:var(--gray-100)}
.modal-close svg{width:1.5rem;height:1.5rem;color:var(--gray-600)}
.modal-body{overflow-y:auto;padding:1.5rem;max-height:calc(90vh - 12.5rem)}
.modal-body h3{margin-bottom:1rem;font-size:1.125rem;font-weight:700}
.modal-body h4{margin-bottom:.5rem;margin-top:1rem;font-weight:700}
.modal-body p{margin-bottom:1rem;line-height:1.625}
.modal-body ul{padding-left:1.5rem;margin-bottom:1rem;color:var(--gray-600);list-style:disc}
.modal-body ul li{margin-bottom:.25rem}
.modal-body .legal-note{font-size:.875rem;color:var(--gray-600)}
.modal-body a{color:#2563eb}
.modal-body a:hover{text-decoration:underline}
.modal-footer{display:flex;justify-content:flex-end;padding:1.5rem;border-top:1px solid var(--gray-200)}

/* ===== UTILITY HELPERS ===== */
.text-center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}