:root {
      --navy: #0a2a66;
      --blue: #1677ee;
      --blue-dark: #0e60c6;
      --green: #68ba41;
      --green-dark: #4ea82f;
      --text: #17304f;
      --muted: #68809a;
      --line: #d9e8f7;
      --bg: #ffffff;
      --soft: #f5fbff;
      --soft-2: #edf7ff;
      --shadow: 0 18px 50px rgba(17, 84, 153, 0.12);
      --radius: 24px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--text);
      background: var(--bg);
      line-height: 1.55;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    .container {
      width: min(var(--max), calc(100% - 42px));
      margin: 0 auto;
    }

    /* Header */
    header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(10,42,102,0.08);
    }
    .nav {
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }
    .brand img {
      width: 180px;
      height: auto;
    }
    .navlinks {
      display: flex;
      align-items: center;
      gap: 28px;
      font-size: 14px;
      font-weight: 700;
      color: #44607f;
    }
    .navlinks a {
      position: relative;
      padding: 6px 0;
      transition: color .2s ease;
    }
    .navlinks a:hover, .navlinks a.active { color: var(--blue); }
    .navlinks a.active::after,
    .navlinks a:hover::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -11px;
      width: 100%;
      height: 3px;
      border-radius: 999px;
      background: var(--blue);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 999px;
      padding: 13px 22px;
      border: 1px solid transparent;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
      cursor: pointer;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn.primary {
      color: #fff;
      background: linear-gradient(135deg, var(--blue), var(--blue-dark));
      box-shadow: 0 12px 28px rgba(22,119,238,.28);
    }
    .btn.secondary {
      color: var(--blue-dark);
      background: #fff;
      border-color: #9cc7fb;
    }

    /* Hero */
    .hero {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 78% 32%, rgba(185,232,255,.72), rgba(185,232,255,0) 24%),
        linear-gradient(135deg, #f9fdff 0%, #eff8ff 54%, #f9fffc 100%);
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: auto auto -120px -100px;
      width: 380px;
      height: 380px;
      background: radial-gradient(circle, rgba(22,119,238,.08) 0%, rgba(22,119,238,0) 68%);
      pointer-events: none;
    }
    .hero-grid {
      min-height: 720px;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      align-items: center;
      gap: 52px;
      padding: 52px 0 42px;
    }
    .eyebrow {
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: #2874c9;
      margin-bottom: 16px;
    }
    .hero h1 {
      font-size: clamp(42px, 6vw, 76px);
      line-height: .98;
      letter-spacing: -.05em;
      margin: 0 0 18px;
      color: var(--navy);
    }
    .hero h1 span { color: var(--blue); }
    .hero .lead {
      margin: 0 0 6px;
      font-size: clamp(22px, 3vw, 32px);
      line-height: 1.15;
      color: var(--navy);
      font-weight: 800;
    }
    .hero .sub {
      margin: 0;
      max-width: 570px;
      font-size: 18px;
      color: #536d87;
    }
    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin: 30px 0 28px;
    }
    .feature-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    .feature-pill {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #4c6888;
      font-weight: 700;
      font-size: 14px;
    }
    .mini-icon {
      width: 40px;
      height: 40px;
      border: 1px solid #d8e8f8;
      border-radius: 50%;
      background: rgba(255,255,255,.85);
      display: grid;
      place-items: center;
      box-shadow: 0 8px 20px rgba(12,83,154,.08);
      flex: 0 0 auto;
    }
    .mini-icon svg, .card-icon svg, .strip-item svg, .info-bullet svg {
      width: 21px;
      height: 21px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .stage {
      position: relative;
      display: grid;
      align-items: center;
      min-height: 590px;
    }
    .splash {
      position: absolute;
      inset: 110px auto auto 10px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, rgba(25,158,255,.34), rgba(25,158,255,0) 62%);
      filter: blur(12px);
      z-index: 0;
    }
    .product-box {
      position: relative;
      z-index: 2;
      width: min(100%, 580px);
      margin-left: auto;
      filter: drop-shadow(0 30px 48px rgba(12, 68, 128, .18));
    }
    .product-box-card {
      position: relative;
      border-radius: 34px;
      padding: 22px;
      background: rgba(255,255,255,.75);
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.8);
    }
    .product-box-card img {
      width: 100%;
      border-radius: 22px;
      mix-blend-mode: multiply;
    }
    .pod-floating {
      position: absolute;
      right: -20px;
      bottom: 20px;
      width: 165px;
      border-radius: 24px;
      padding: 10px;
      background: rgba(255,255,255,.94);
      box-shadow: 0 20px 36px rgba(10,67,134,.18);
      transform: rotate(6deg);
      z-index: 3;
    }
    .pod-floating img {
      border-radius: 18px;
      mix-blend-mode: multiply;
    }
    .badge-eco {
      position: absolute;
      right: 26px;
      top: 14px;
      z-index: 4;
      background: linear-gradient(180deg, #75cc46, #4fa72d);
      color: #fff;
      font-size: 13px;
      line-height: 1.15;
      text-transform: uppercase;
      text-align: center;
      font-weight: 900;
      padding: 16px 12px;
      min-width: 100px;
      border-radius: 999px 999px 999px 16px;
      box-shadow: 0 16px 24px rgba(84,167,45,.3);
    }
    .script-note {
      position: absolute;
      right: -6px;
      bottom: -20px;
      color: #3567aa;
      font-size: 22px;
      font-family: "Brush Script MT", "Segoe Script", cursive;
      line-height: 1.05;
      transform: rotate(-8deg);
      z-index: 5;
    }

    .section {
      padding: 86px 0;
    }
    .section.soft {
      background: linear-gradient(180deg, #fbfeff 0%, #f3f9ff 100%);
    }
    .section-head {
      max-width: 760px;
      text-align: center;
      margin: 0 auto 46px;
    }
    .section-head h2 {
      margin: 10px 0 12px;
      font-size: clamp(34px, 4.2vw, 52px);
      line-height: 1.08;
      letter-spacing: -.04em;
      color: var(--navy);
    }
    .section-head h2 span { color: var(--blue); }
    .section-head p {
      margin: 0;
      color: var(--muted);
      font-size: 17px;
    }

    /* About */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 54px;
      align-items: center;
    }
    .about-copy h2 {
      margin: 8px 0 18px;
      font-size: clamp(34px, 4.5vw, 54px);
      line-height: 1.08;
      letter-spacing: -.04em;
      color: var(--navy);
    }
    .about-copy h2 span { color: var(--blue); }
    .about-copy p {
      margin: 0 0 24px;
      color: #5b7390;
      font-size: 18px;
    }
    .innovation-line {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #335c8f;
      font-size: 13px;
      letter-spacing: .25em;
      font-weight: 900;
      text-transform: uppercase;
    }
    .innovation-line::before {
      content: "";
      width: 56px;
      height: 2px;
      background: var(--blue);
      border-radius: 999px;
    }

    .about-visual {
      position: relative;
      background: linear-gradient(145deg, var(--soft) 0%, #ffffff 100%);
      border: 1px solid #e0eef9;
      border-radius: 36px;
      padding: 28px;
      overflow: hidden;
      box-shadow: 0 16px 36px rgba(19,77,143,.08);
    }
    .about-visual .oval {
      position: absolute;
      left: 16px;
      top: 26px;
      width: 220px;
      height: 220px;
      background: rgba(231,244,255,.9);
      border-radius: 50%;
      z-index: 0;
    }
    .about-laundry {
      position: relative;
      z-index: 1;
      border-radius: 26px;
      overflow: hidden;
      box-shadow: 0 14px 32px rgba(9,61,122,.1);
      background: #fff;
    }
    .about-laundry img {
      width: 100%;
      height: 330px;
      object-fit: cover;
      object-position: center top;
    }
    .handwritten {
      position: absolute;
      left: 52px;
      top: 66px;
      z-index: 2;
      color: #3460a9;
      font-size: 19px;
      line-height: 1.1;
      font-family: "Brush Script MT", "Segoe Script", cursive;
      transform: rotate(-7deg);
      text-shadow: 0 2px 12px rgba(255,255,255,.9);
    }
    .handwritten::after {
      content: "";
      display: block;
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: var(--green);
      margin-top: 8px;
      transform: rotate(10deg);
    }
    .brand-chip {
      position: absolute;
      right: 32px;
      bottom: 32px;
      z-index: 2;
      background: rgba(255,255,255,.92);
      border: 1px solid #ddeaf8;
      border-radius: 22px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 12px 28px rgba(14,83,150,.11);
    }
    .brand-chip img { width: 54px; }
    .brand-chip strong {
      display: block;
      font-size: 16px;
      line-height: 1;
      color: var(--blue);
      letter-spacing: .14em;
    }
    .brand-chip span {
      display: block;
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: #547392;
      margin-top: 5px;
    }
    .about-points {
      margin-top: 22px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .about-point {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      border: 1px solid #dbe9f7;
      border-radius: 16px;
      padding: 12px;
      color: #567493;
      font-size: 14px;
      font-weight: 700;
    }

    /* Cards */
    .cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }
    .card {
      background: #fff;
      border: 1px solid #deebf8;
      border-radius: 22px;
      padding: 28px 24px;
      text-align: center;
      box-shadow: 0 12px 28px rgba(14,82,146,.07);
    }
    .card-icon {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      margin: 0 auto 16px;
      color: var(--blue);
      background: #eef6ff;
    }
    .card:nth-child(odd) .card-icon {
      color: var(--green-dark);
      background: #edf8e8;
    }
    .card h3 {
      margin: 0 0 8px;
      font-size: 23px;
      line-height: 1.14;
      color: var(--navy);
    }
    .card p {
      margin: 0;
      color: #6b819b;
      font-size: 15px;
    }

    /* Steps */
    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
      align-items: start;
    }
    .step {
      position: relative;
      text-align: center;
    }
    .step::after {
      content: "›";
      position: absolute;
      top: 62px;
      right: -15px;
      font-size: 48px;
      line-height: 1;
      color: #2d8df2;
      opacity: .8;
    }
    .step:last-child::after { display: none; }
    .step-circle {
      position: relative;
      width: 176px;
      height: 176px;
      margin: 0 auto 20px;
      border-radius: 50%;
      background: linear-gradient(145deg, #e8f4ff, #ffffff);
      border: 8px solid #f2f8ff;
      box-shadow: 0 16px 34px rgba(14,82,146,.09);
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    .step-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      mix-blend-mode: multiply;
    }
    .step-badge {
      position: absolute;
      left: 8px;
      top: 8px;
      z-index: 2;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 15px;
      font-weight: 900;
      border: 4px solid #fff;
    }
    .step-glyph {
      color: var(--blue);
      width: 70px;
      height: 70px;
    }
    .step-glyph svg {
      width: 100%;
      height: 100%;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .step h3 {
      margin: 0 0 6px;
      color: var(--navy);
      font-size: 22px;
    }
    .step p {
      margin: 0;
      color: #6a8098;
      font-size: 15px;
    }

    /* Pack cards */
    .pack-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }
    .pack {
      position: relative;
      background: #fff;
      border: 1px solid #dce9f7;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 14px 32px rgba(14,83,150,.08);
    }
    .pack.popular {
      border: 2px solid #62b939;
      transform: translateY(-4px);
    }
    .pack-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      background: linear-gradient(135deg, #79cd4b, #5bb53a);
      color: #fff;
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 900;
      box-shadow: 0 10px 18px rgba(91,181,58,.22);
      z-index: 2;
    }
    .pack-media {
      background: linear-gradient(180deg, #f0f8ff 0%, #f7fbff 100%);
      padding: 24px 18px 16px;
      min-height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pack-stage {
      position: relative;
      width: 100%;
      max-width: 210px;
    }
    .pack-stage img.main {
      width: 100%;
      border-radius: 20px;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 16px 24px rgba(16,77,138,.12));
    }
    .pack-stage img.pod {
      position: absolute;
      right: -8px;
      bottom: -4px;
      width: 74px;
      border-radius: 16px;
      background: rgba(255,255,255,.92);
      padding: 6px;
      box-shadow: 0 10px 18px rgba(10,74,138,.15);
      mix-blend-mode: multiply;
    }
    .count-chip {
      position: absolute;
      left: 10px;
      bottom: 14px;
      background: rgba(255,255,255,.94);
      border: 1px solid #d8e7f7;
      padding: 8px 10px;
      border-radius: 14px;
      line-height: 1;
      text-align: center;
      box-shadow: 0 10px 18px rgba(10,74,138,.08);
    }
    .count-chip strong {
      display: block;
      color: var(--navy);
      font-size: 18px;
    }
    .count-chip span {
      display: block;
      color: #577492;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .12em;
      margin-top: 5px;
    }
    .pack-body {
      text-align: center;
      padding: 22px 20px 24px;
    }
    .pack-body h3 {
      margin: 0 0 6px;
      color: var(--navy);
      font-size: 28px;
      line-height: 1.05;
    }
    .pack-body p {
      margin: 0 0 18px;
      min-height: 48px;
      color: #6c829a;
      font-size: 15px;
    }

    /* Strip */
    .smart-strip {
      margin-top: 36px;
      background: linear-gradient(135deg, #f3fbff 0%, #eef7ff 58%, #f7fcff 100%);
      border: 1px solid #deebf8;
      border-radius: 30px;
      padding: 30px;
      display: grid;
      grid-template-columns: 1.1fr repeat(4, 1fr) .9fr;
      gap: 18px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .smart-strip::after {
      content: "";
      position: absolute;
      right: -60px;
      bottom: -60px;
      width: 220px;
      height: 220px;
      background: radial-gradient(circle, rgba(122,198,255,.22) 0%, rgba(122,198,255,0) 68%);
    }
    .strip-copy h3 {
      margin: 0 0 8px;
      font-size: 24px;
      line-height: 1.1;
      color: var(--navy);
    }
    .strip-copy p {
      margin: 0;
      color: #67809a;
      font-size: 15px;
    }
    .strip-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      position: relative;
      z-index: 1;
    }
    .strip-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--blue);
      background: rgba(255,255,255,.85);
      border: 1px solid #d8e8f8;
      flex: 0 0 auto;
    }
    .strip-item h4 {
      margin: 0 0 3px;
      color: var(--navy);
      font-size: 15px;
      line-height: 1.2;
    }
    .strip-item p {
      margin: 0;
      color: #6b819a;
      font-size: 13px;
      line-height: 1.35;
    }
    .strip-pod {
      position: relative;
      z-index: 1;
      text-align: center;
    }
    .strip-pod img {
      width: 100%;
      max-width: 170px;
      margin: 0 auto;
      mix-blend-mode: multiply;
      border-radius: 20px;
    }
    .strip-pod .script {
      margin-top: 2px;
      font-size: 20px;
      color: #3464ab;
      font-family: "Brush Script MT", "Segoe Script", cursive;
      line-height: 1.05;
      transform: rotate(-8deg);
    }

    /* Contact */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      gap: 32px;
      align-items: stretch;
    }
    .contact-card, .form-card {
      background: #fff;
      border: 1px solid #deebf8;
      border-radius: 28px;
      box-shadow: 0 14px 28px rgba(14,83,150,.07);
      overflow: hidden;
    }
    .contact-card { display: grid; }
    .contact-image {
      min-height: 250px;
      background: linear-gradient(135deg, #eff8ff 0%, #f8fcff 100%);
      padding: 18px;
    }
    .contact-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 20px;
      mix-blend-mode: multiply;
    }
    .contact-content {
      padding: 28px;
    }
    .contact-content img.logo-small {
      width: 170px;
      margin-bottom: 16px;
    }
    .contact-content h3,
    .form-card h3 {
      margin: 0 0 10px;
      font-size: 30px;
      line-height: 1.08;
      color: var(--navy);
    }
    .contact-content p,
    .form-card p {
      margin: 0 0 18px;
      color: #677f99;
    }
    .info-list {
      display: grid;
      gap: 14px;
      margin-top: 22px;
    }
    .info-bullet {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: #54708f;
    }
    .bullet-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #eef6ff;
      color: var(--blue);
      flex: 0 0 auto;
    }
    .info-bullet strong {
      display: block;
      color: var(--navy);
      margin-bottom: 2px;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .form-card {
      padding: 30px;
    }
    form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 18px;
    }
    input, textarea, select {
      width: 100%;
      padding: 15px 16px;
      border: 1px solid #d7e5f4;
      border-radius: 14px;
      font: inherit;
      color: var(--text);
      background: #fff;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    input:focus, textarea:focus, select:focus {
      border-color: #87b9f6;
      box-shadow: 0 0 0 4px rgba(22,119,238,.08);
    }
    textarea {
      min-height: 134px;
      resize: vertical;
      grid-column: 1 / -1;
    }
    .full { grid-column: 1 / -1; }

    /* Footer */
    footer {
      padding: 28px 0 34px;
      border-top: 1px solid #e2edf8;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 28px;
      align-items: center;
      margin-bottom: 16px;
    }
    .footer-brand {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .footer-brand img {
      width: 180px;
    }
    .footer-block {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: #627a94;
    }
    .footer-block .bullet-icon {
      width: 42px;
      height: 42px;
      background: #f1f8ff;
    }
    .footer-block strong {
      display: block;
      font-size: 13px;
      color: var(--navy);
      margin-bottom: 3px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-top: 16px;
      border-top: 1px solid #e7eff8;
      color: #6d8197;
      font-size: 13px;
    }
    .footer-tagline {
      text-transform: uppercase;
      letter-spacing: .25em;
      font-weight: 800;
      color: #7a8ea3;
      text-align: right;
    }

    /* Responsive */
    @media (max-width: 1100px) {
      .cards, .pack-grid { grid-template-columns: repeat(2, 1fr); }
      .steps { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
      .step:nth-child(2)::after, .step:nth-child(4)::after { display: none; }
      .smart-strip {
        grid-template-columns: 1fr 1fr;
      }
      .strip-copy { grid-column: 1 / -1; }
      .strip-pod { grid-column: 1 / -1; }
    }
    @media (max-width: 960px) {
      .navlinks { display: none; }
      .hero-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }
      .hero-grid { min-height: auto; padding: 50px 0 30px; }
      .stage { min-height: auto; }
      .product-box { margin: 0 auto; }
      .pod-floating { width: 130px; right: 0; bottom: 18px; }
      .badge-eco { right: 20px; }
      .about-points { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-tagline { text-align: left; }
    }
    @media (max-width: 680px) {
      .container { width: min(var(--max), calc(100% - 24px)); }
      .brand img { width: 150px; }
      .nav .btn { padding: 11px 16px; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .feature-pills { gap: 14px; }
      .cards, .steps, .pack-grid, form { grid-template-columns: 1fr; }
      .step::after { display: none; }
      .smart-strip { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      .script-note { right: 10px; bottom: -14px; font-size: 18px; }
      .pack-media { min-height: 220px; }
      input, textarea, select, .full { grid-column: 1; }
    }
  
/* Screenshot-matching refinements */
body{background:#fff;color:#102d58}.container{width:min(1220px,calc(100% - 52px))}header{background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(11,55,105,.06)}.nav{min-height:76px}.brand img{width:176px}.navlinks{gap:34px;font-size:13px;color:#27476e}.nav .btn.primary{padding:12px 24px}
.hero{background:linear-gradient(90deg,#fbfdff 0%,#f3faff 52%,#eef9ff 100%)}.hero-grid{min-height:600px;padding:34px 0 24px;gap:34px}.hero h1{font-size:clamp(46px,5vw,66px);max-width:620px}.hero .lead{font-size:26px}.hero .sub{font-size:16px}.product-box{width:min(100%,560px)}.product-box-card{padding:16px;border-radius:28px}.pod-floating{width:142px;right:-10px;bottom:14px}.badge-eco{right:22px;top:8px;min-width:90px;font-size:11px;padding:14px 10px}.script-note{font-size:20px;right:4px;bottom:-18px}.feature-pills{gap:24px;margin-top:6px}
.section{padding:64px 0}.section-head{margin-bottom:34px}.section-head h2{font-size:clamp(30px,3.6vw,46px)}.about-grid{gap:36px}.about-copy h2{font-size:clamp(34px,4vw,48px)}.about-copy p{font-size:16px}.about-laundry img{height:295px}.about-points{margin-top:14px}.cards{gap:16px}.card{padding:24px 18px;border-radius:18px}.card-icon{width:58px;height:58px}.card h3{font-size:18px}.card p{font-size:14px}.steps{gap:10px}.step-circle{width:150px;height:150px;border-width:6px}.step h3{font-size:18px}.step p{font-size:14px}.step::after{top:54px;right:-8px}.pack-grid{gap:16px}.pack{border-radius:18px}.pack-media{min-height:205px;padding:18px 14px 10px}.pack-stage{max-width:180px}.pack-body{padding:18px 16px 20px}.pack-body h3{font-size:22px}.pack-body p{font-size:14px}.smart-strip{margin-top:24px;padding:24px;border-radius:24px}.strip-copy h3{font-size:21px}.strip-pod img{max-width:135px}.contact-grid{gap:22px}.contact-card,.form-card{border-radius:22px}.contact-content,.form-card{padding:24px}.footer-brand img{width:160px}
.menu-toggle{display:none;border:0;background:transparent;font-size:28px;color:var(--navy);cursor:pointer}
@media(max-width:960px){.menu-toggle{display:block;margin-left:auto}.nav>.btn.primary{display:none}.nav{position:relative}.navlinks{display:none;position:absolute;left:0;right:0;top:76px;background:#fff;border:1px solid #dfeaf6;border-radius:0 0 18px 18px;padding:16px 22px;box-shadow:0 18px 38px rgba(12,60,120,.12);flex-direction:column;align-items:flex-start;gap:6px}.navlinks.open{display:flex}.navlinks a{width:100%;padding:11px 0}.navlinks a.active::after,.navlinks a:hover::after{bottom:4px;width:36px}.hero-grid{padding-top:40px}.product-box{max-width:600px}.about-laundry img{height:340px}}
@media(max-width:680px){.container{width:min(100% - 24px,1220px)}.hero h1{font-size:44px}.hero .lead{font-size:23px}.hero-grid{gap:14px}.product-box-card{padding:10px}.pod-floating{width:110px}.cards,.steps,.pack-grid{grid-template-columns:1fr}.smart-strip{grid-template-columns:1fr}.about-visual{padding:18px}.handwritten{left:28px;top:40px}.brand-chip{right:20px;bottom:20px}.contact-image{min-height:200px}}

/* Clearer step-number badges */
.step-circle {
  overflow: visible;
}
.step-circle img {
  border-radius: 50%;
}
.step-badge {
  left: -7px;
  top: -7px;
  z-index: 10;
  width: 44px;
  height: 44px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  background: #087cf0;
  color: #fff;
  border: 4px solid #fff;
  box-shadow: 0 7px 16px rgba(8, 124, 240, .32);
}
@media (max-width: 680px) {
  .step-badge {
    width: 42px;
    height: 42px;
    font-size: 17px;
    left: -5px;
    top: -5px;
  }
}

/* Fix: footer icons rendered as filled black shapes */
.footer-block svg, .bullet-icon svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Fix: step photos spilling outside their circles */
.step-circle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  border-radius: 50%;
}
.step:first-child .step-circle img { object-position: center; }

/* Contact collage */
.contact-image img { mix-blend-mode: normal; aspect-ratio: 1200 / 760; }

/* Enquiry form */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
form { position: relative; }
.form-status { margin: 0; font-size: 14px; font-weight: 700; min-height: 1px; }
.form-status.success { color: #3f8f24; }
.form-status.error { color: #c0392b; }
.btn:disabled { opacity: .7; cursor: wait; transform: none; }