/* ========================================================================
   RESET & NORMALIZE (Mobile first, box-sizing, fonts)
   ======================================================================== */
html {
  box-sizing: border-box;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  font-family: 'Roboto', Arial, sans-serif;
  background: #F2F5F7;
  color: #232A34;
  line-height: 1.56;
  letter-spacing: 0.01em;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: #32B3AE; text-decoration: none; transition: color .2s cubic-bezier(.7,.2,.17,1); }
a:hover, a:focus { color: #232A34; text-decoration: underline; outline: none; }
ul, ol { padding-left: 1.5em; margin-bottom: 1em; }
li { margin-bottom: 0.5em; }

/* ========================================================================
   BRAND FONTS & HEADINGS (Geometric Structured Style)
   ======================================================================== */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,600,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', Arial, sans-serif;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #232A34;
}
h1 { font-size: 2.25rem; line-height: 1.13; margin-bottom: 24px; }
h2 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 18px; }
h3 { font-size: 1.12rem; line-height: 1.17; margin-bottom: 12px; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
p, .subheadline {
  font-size: 1rem;  /* 16px */
  color: #232A34;
  margin-bottom: 16px;
}
.subheadline { font-size: 1.125rem; font-family: 'Montserrat', Arial, sans-serif; color: #32B3AE; font-weight: 500; margin-bottom: 24px; }


/* ========================================================================
   LAYOUT CONTAINERS (Spacing, grids, responsive, geometric blocks)
   ======================================================================== */
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  width: 100%;
  z-index: 2;
}
.section, section {
  margin-bottom: 60px;
  padding: 40px 0 0 0;
}
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; box-shadow: 0 2px 14px 0 rgba(35,42,52,0.06); border-radius: 18px; background: #fff; }
.content-grid,
.feature-row,
.category-row,
.software-cards,
.smartphone-review-cards,
.ai-tool-cards,
.startup-review-cards,
.success-story-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.text-image-section{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
@media (max-width:768px){.text-image-section{flex-direction:column;align-items:flex-start;}}
.testimonial-card{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:20px;background:#fff;box-shadow:0 2px 10px 0 rgba(50,179,174,0.06);border-radius:18px;margin-bottom:20px;min-width:260px;max-width:390px;}
.testimonial-slider{display:flex;flex-wrap:wrap;gap:24px;}
.feature-item{display:flex;flex-direction:column;align-items:flex-start;gap:15px;background:#fff;border-radius:18px;padding:24px 20px;box-shadow:0 1px 8px 0 rgba(35,42,52,0.05);margin-bottom: 20px;min-width:230px;flex:1 1 260px;}

/* .feature-grid/row responsive */
.feature-grid,.feature-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;}
@media(max-width:960px){.feature-grid,.feature-row{gap:18px;}}
@media (max-width:768px) {
  .container { padding: 0 10px; }
  .content-grid, .feature-row, .category-row, .software-cards, .smartphone-review-cards, .ai-tool-cards, .startup-review-cards {
    flex-direction: column;
    gap: 16px;
  }
  .feature-grid { flex-direction: column; gap: 18px; }
}


/* ========================================================================
   HEADER & NAVIGATION (Desktop & Mobile)
   ======================================================================== */
header {
  background: #fff;
  border-bottom: 2.5px solid #F2F5F7;
  position: sticky;
  top: 0;
  z-index: 50;
}
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  padding-bottom: 18px;
}
header img { height: 40px; width: auto; }
.main-nav {
  display: flex;
  gap: 24px;
  align-items: center;
}
.main-nav a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #232A34;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  position: relative;
  transition: color .18s, border-color .2s;
}
.main-nav a:hover, .main-nav a:focus {
  color: #32B3AE;
  border-bottom: 2.5px solid #32B3AE;
}
.btn-primary {
  background: #32B3AE;
  color: #fff !important;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .03em;
  font-size: 1rem;
  border: none;
  border-radius: 14px;
  padding: 11px 32px;
  cursor: pointer;
  box-shadow: 0 4px 22px 0 rgba(50,179,174,0.14);
  margin-left: 18px;
  transition: background .14s, transform .15s cubic-bezier(.7,.2,.17,1);
  position:relative;
}
.btn-primary:hover, .btn-primary:focus {
  background: #232A34;
  color: #fff;
  transform: translateY(-2px) scale(1.04);
}
.btn-secondary {
  background: #fff;
  border: 2px solid #32B3AE;
  color: #32B3AE;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  border-radius: 14px;
  padding: 11px 28px;
  margin-top: 18px;
  cursor:pointer;
  transition: border .17s, color .17s, background .14s;
}
.btn-secondary:hover, .btn-secondary:focus {
  background: #32B3AE;
  color: #fff;
  border-color:#232A34;
}

/* Hamburger & mobile navigation */
.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.05rem;
  background: none;
  border: none;
  color: #32B3AE;
  cursor: pointer;
  padding: 8px 12px;
  z-index: 120;
  margin-left: 18px;
  border-radius: 8px;
  transition: background .16s;
}
.mobile-menu-toggle:focus, .mobile-menu-toggle:hover {
  background: #e6faf9;
  color: #232A34;
}
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 2000;
  transform: translateX(-110vw);
  transition: transform .32s cubic-bezier(.83,.02,.13,1) ;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 0 0;
  box-shadow: 2px 0 20px 0 rgba(50,179,174,0.09);
}
.mobile-menu.open {
  transform: translateX(0);
  transition: transform .37s cubic-bezier(.7,.4,.18,1.07);
}
.mobile-menu-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: #32B3AE;
  font-size: 2.1rem;
  padding: 16px 24px 12px 16px;
  margin: 0 0 0;
  cursor: pointer;
  border-radius: 8px;
  transition: background .18s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
  background: #e6faf9;
  color: #232A34;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 24px;
}
.mobile-nav a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  padding: 16px 0;
  border-bottom: 1px solid #F2F5F7;
  color: #232A34;
  outline: none;
  transition: background .13s, color .13s;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover, .mobile-nav a:focus {
  background: #e6faf9;
  color: #32B3AE;
}

@media (min-width: 1028px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle,
  .mobile-menu { display: none !important; }
}
@media (max-width:1027.9px) {
  .main-nav { display: none !important; }
  .mobile-menu-toggle { display: flex !important; }
}

/* ========================================================================
   HERO SECTIONS & STRUCTURE
   ======================================================================== */
.hero {
  background: linear-gradient(135deg, #F2F5F7 80%, #e2f8f8 100%);
  border-bottom: 1.5px solid #32B3AE;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 0 44px 0;
  margin-bottom: 0 !important;
}
.hero .content-wrapper {
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 16px;
}
@media(max-width:640px){
  .hero{min-height:200px;padding:36px 0;}
  .hero .content-wrapper{gap:10px;}
}

/* ========================================================================
   FEATURES, BENEFITS & LISTS
   ======================================================================== */
.features, .feature-descriptions, .innovation-timeline, .benefit-list, .newsletter-benefits, .tips-list, .editorial-prediction, .editor-recommendations, .mission-statement, .editorial-team {
  margin-bottom: 32px;
  width: 100%;
}
.features .feature-item img,
.feature-item img { width: 38px; height: 38px; border-radius: 6px; background: #e6faf9; }
ul {
  margin-bottom: 18px;
  margin-top: 2px;
}
ul li {
  font-size: 1rem;
  color: #232A34;
  padding-left: 0.3em;
  margin-bottom: 8px;
  position: relative;
}
.feature-grid,
.feature-row,
.category-row,
.newsletter-benefits ul,
.software-cards,
.smartphone-review-cards,
.ai-tool-cards,
.startup-review-cards {
  gap: 24px;
  margin-bottom: 22px;
}
.category-row > div {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 8px 0 rgba(35,42,52,0.06);
  padding: 18px 14px 14px 14px;
  flex: 1 1 210px;
  margin-bottom: 20px;
}
@media(max-width:768px){
  .category-row>div{padding:14px 9px;}
}

/* ========================================================================
   TESTIMONIALS / REVIEWS / BADGES
   ======================================================================== */
.testimonials {
  background: #e6faf9;
  padding: 40px 0;
  margin-bottom: 0 !important;
  border-top: 1.5px solid #32B3AE;
}
.testimonials .content-wrapper > h2 {
  color: #232A34;
  margin-bottom: 32px;
}
.stars img {
  display: inline-block;
  width: 22px; height: 22px;
  margin-right: 2px;
}
.author { font-size: .95rem; font-family: 'Montserrat', Arial, sans-serif; color: #32B3AE; font-weight: 600; }

.review-card, .review-summary-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 10px 0 rgba(50,179,174,0.07);
  padding: 22px 22px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  min-width:220px; max-width:370px;
  border-left: 6px solid #32B3AE;
  transition:box-shadow .19s,transform .18s;
}
.review-card .badge, .review-summary-card .badge {
  align-self: flex-start;
  display: inline-block;
  padding: 3px 16px 2px 16px;
  border-radius: 999px;
  font-size: .93rem;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 600;
  margin-bottom: 5px;
  background: #F2F5F7;
  color: #232A34;
  border: 1.5px solid #32B3AE;
}
.badge-gold { background: #fcf7e3; color: #c99a11; border-color: #eebc4d; }
.badge-silver { background: #f0f2f4; color: #969ea8; border-color: #bfc5ce; }
.badge-bronze { background: #f5ede3; color: #b98038; border-color: #e1b67d; }
.review-card:hover, .review-summary-card:hover{
  box-shadow: 0 7px 26px 0 rgba(50,179,174,0.13);
  transform:translateY(-3px) scale(1.02);
  border-left: 6px solid #232A34;
}


/* ========================================================================
   ARTICLE & POLICY SECTIONS
   ======================================================================== */
.policy {
  background: #fff;
  border-radius: 22px;
  padding: 48px 32px;
  box-shadow: 0 2px 14px 0 rgba(50,179,174,0.09);
  margin-bottom: 60px;
}
@media(max-width:600px){.policy{padding:22px 10px;}}
.policy h1, .policy h2, .policy h3{margin-bottom:14px;margin-top:14px;}


/* ========================================================================
   CATEGORY-TAG, BADGES, AND TAGS
   ======================================================================== */
.category-tag {
  background: #e6faf9;
  color: #32B3AE;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: .92rem;
  font-weight: 600;
  border-radius: 14px;
  padding: 0.3em 1.3em 0.2em 1em;
  margin-left: 10px;
}

/* ========================================================================
   NEWSLETTER BLOCKS
   ======================================================================== */
.newsletter-signup, .footer-newsletter {
  background: #F2F5F7;
  border-radius: 18px;
}
.newsletter-signup .content-wrapper {
  align-items: flex-start;
}
.newsletter-benefits ul, .newsletter-benefits li {
  list-style: none;
  margin:0; padding:0;
  display: flex; align-items: center; gap:8px;
  font-size: 1rem;
  color: #232A34;
  margin-bottom: 7px;
}
.newsletter-benefits img { width: 22px; height:22px; margin-right:8px; }
@media (max-width:600px) {
  .newsletter-signup .content-wrapper{gap:12px;}
}

/* ========================================================================
   FOOTER
   ======================================================================== */
footer {
  background: #232A34;
  color: #fff;
  padding: 36px 0 20px 0;
  margin-top: 20px;
}
footer .content-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
  justify-content: space-between;
}
footer a,img {
  color: #32B3AE;
  fill: #32B3AE;
}
footer img { width: 38px; height: auto; margin-bottom: 10px; }
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-nav a {
  color: #e7f6f5;
  font-size: .98rem;
  letter-spacing: .01em;
  padding: 3px 0 3px 0;
  font-family:'Montserrat',Arial,sans-serif;
  font-weight: 600;
  border-left: 2.5px solid #32B3AE;
  padding-left: 12px;
  transition: color .14s;
}
.footer-nav a:hover, .footer-nav a:focus {
  color: #32B3AE;
}
.footer-contact ul {
  padding-left: 0;
  margin: 0;
  list-style-type: none;
}
.footer-contact li {
  display: flex;
  align-items: center;
  font-size: .96rem;
  margin-bottom: 8px;
  color: #f2f5f7;
}
.footer-contact img {
  width: 18px; height: 18px;
  margin-right: 10px;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.footer-social a {
  background: #32B3AE;
  padding: 6px;
  border-radius: 8px;
  transition:background .14s, box-shadow .17s;
}
.footer-social a:hover, .footer-social a:focus { background: #F2F5F7; box-shadow:0 0 0 3px #32B3AE; }
.footer-newsletter {
  margin-top: 8px;
  color: #e7f6f5;
  font-size: 1rem;
  font-style: italic;
  max-width: 270px;
}
@media (max-width:920px){
  footer .content-wrapper{flex-direction:column;gap:16px;}
  .footer-social{margin-top:0;}
}

/* ========================================================================
   Cookie Consent Banner & Modal
   ======================================================================== */
.cookie-banner {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 -2px 12px rgba(35,42,52,0.08);
  z-index: 3500;
  padding: 16px 16px 10px 16px;
  gap: 18px;
  border-top: 2.5px solid #32B3AE;
  font-family: 'Roboto',Arial,sans-serif;
  font-size: 1rem;
  animation: slideUpBanner .42s cubic-bezier(.81,.13,.29,1.21);
}
@keyframes slideUpBanner {
  from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; }
}
.cookie-banner__text { flex: 1; color: #232A34; }
.cookie-banner__actions { display: flex; gap: 12px; }
.cookie-btn {
  border-radius: 12px;
  font-family: 'Montserrat',Arial,sans-serif;
  font-size: .96rem;
  font-weight: 700;
  padding: 10px 22px;
  border: none;
  cursor:pointer;
  transition: background .15s, border .15s, color .13s;
}
.cookie-btn--accept { background:#32B3AE; color:#fff; }
.cookie-btn--accept:hover, .cookie-btn--accept:focus {background:#232A34;}
.cookie-btn--reject {
  background: #fff;
  border:2px solid #232A34;
  color: #232A34;
}
.cookie-btn--reject:hover, .cookie-btn--reject:focus { background:#232A34; color:#fff;}
.cookie-btn--settings {
  background: #F2F5F7;
  color: #232A34;
  border:1.5px solid #32B3AE;
}
.cookie-btn--settings:hover, .cookie-btn--settings:focus { background: #32B3AE; color:#fff;}

/* Cookie Modal */
.cookie-modal-backdrop {
  position: fixed; top:0; left:0; width:100vw; height:100vh; background:#232A34bb; z-index:3600;
  display:none;align-items:center;justify-content:center;
  animation:fadeInModal .44s;
}
.cookie-modal-backdrop.open { display:flex; }
@keyframes fadeInModal{from{opacity:0}to{opacity:1}}
.cookie-modal {
  background: #fff;
  color: #232A34;
  border-radius: 22px;
  box-shadow: 0 8px 32px 0 rgba(35,42,52,0.23);
  padding: 32px 26px 28px 26px;
  min-width: 330px;
  max-width: 95vw;
  font-family: 'Roboto', Arial, sans-serif;
}
.cookie-modal h3{font-family:'Montserrat',Arial,sans-serif; font-size:1.2rem;margin-bottom:13px;}
.cookie-modal h4{font-size:1.05rem; margin:11px 0 7px 0;}
.cookie-modal-close {
  position: absolute;
  right: 18px;
  top: 12px;
  background: none;
  border: none;
  color: #32B3AE;
  font-size: 1.6rem;
  cursor: pointer;
}
.cookie-category {
  display: flex; align-items: center; gap: 14px; margin-bottom: 8px;
  font-size: 1rem;
}
.cookie-category input[type=checkbox]{ width:19px;height:19px; accent-color:#32B3AE; }
.cookie-category--essential label {
  font-weight: 700; color:#232A34; opacity:.8;
}
.cookie-category--essential input[type=checkbox]{ display: none; }
.cookie-category-desc { font-size:.95rem;color:#6b7178;margin-left:45px;margin-bottom:7px;}
.cookie-modal-actions {
  margin-top: 18px;
  display: flex;
  gap: 12px;
}
@media (max-width:600px){
  .cookie-modal{padding:16px 6px;min-width:90vw;}
  .cookie-banner{flex-direction:column;gap:9px;padding:12px 3vw;}
  .cookie-banner__actions{gap:5px;}
}

/* ========================================================================
   INTERACTIONS, MICRO-ANIMATIONS & FOCUS STYLES
   ======================================================================== */
button, .btn-primary, .btn-secondary, .cookie-btn {
  outline: none;
  transition: box-shadow .13s, border .12s;
}
button:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .cookie-btn:focus-visible {
  box-shadow: 0 0 0 3px #e6faf9, 0 0 0 6px #32B3AE;
}
input, textarea, select {
  border-radius: 5px;
  border: 1px solid #e0e8f0;;
  transition: border .13s;
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border: 1.7px solid #32B3AE;
}

/* Geometric separators & accents */
hr { border: 0; height: 2.5px; background: #32B3AE; opacity: 0.08; margin: 30px 0; border-radius: 3px; }

/* Mini geometric icons (for structured look) */
img[alt*='icon'] {
  background: #e6faf9;
  border-radius: 7px;
  padding: 3px;
}

/* ========================================================================
   UTILITY CLASSES & SPACING
   ======================================================================== */
.mt-0{margin-top:0!important;}
.my-24{margin-top:24px!important;margin-bottom:24px!important;}
.mb-40{margin-bottom:40px!important;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.geometric-shape{
  width:48px; height:48px;
  background:#32B3AE;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);
  opacity:.12;
  margin-right:9px;
}

/* ========================================================================
   RESPONSIVE: Columns (flex only!) & Typography scale
   ======================================================================== */
@media (max-width: 850px) {
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.15rem; }
  .review-card, .review-summary-card { min-width:180px; }
}
@media (max-width: 650px) {
  .container { padding: 0 4px; }
  .footer-contact, .footer-social, .footer-newsletter {max-width:99vw;}
}

/* Guaranteed minimum spacing between cards/sections */
.section>*, .content-wrapper>*{margin-bottom:20px;}
.content-wrapper>*:last-child{margin-bottom:0!important;}
.card-container > .card, .feature-row > *, .feature-grid > *, .category-row > *, .software-cards >*, .smartphone-review-cards >*, .ai-tool-cards > *, .startup-review-cards >*, .success-story-cards > * {
  margin-bottom: 20px;
}

/* Prevent overlapping + ensure no abs/rel overlap (except decorative) */
.card,.testimonial-card,.feature-item,.review-card,
.review-summary-card,.success-card {
  z-index: 1;
}

/* ========================================================================
   GEOMETRIC/STRUCTURED STYLE EXTRAS
   ======================================================================== */
.section, section, .features, .testimonials, .newsletter-signup, .policy {
  border-radius: 22px;
}
.card, .testimonial-card, .feature-item, .review-card, .review-summary-card, .success-card {
  border-radius: 18px;
}
/* Angular primary font, geometric touch */
h1,h2,h3,.btn-primary,.btn-secondary,.badge{
  font-family:'Montserrat',Arial,sans-serif;
  font-style:normal;
  text-transform:none;
  letter-spacing:0.02em;
}

/* Visual hierarchy spacing */
.section, section { margin-bottom: 60px !important; padding: 40px 0 0 0 !important; }
@media(max-width:520px){
  .section, section {margin-bottom:30px;padding:22px 0 0 0!important;}
}

/* ========================================================================
   PRINT (ensures readability)
   ======================================================================== */
@media print{body{background:#fff!important;color:#232A34!important;}}

/* ========================================================================
   END
   ======================================================================== */