:root { --navy:#0b1e2d; --orange:#f45a1e; --orange-light:#fff0e9; --white:#fff; --gray:#f5f7fa; --muted:#60707d; --line:#dfe6eb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:105px; }
body { margin:0; background:var(--white); color:var(--navy); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:inherit; text-decoration:none; }
.page-shell { min-height:100vh; overflow:clip; position:relative; background:linear-gradient(135deg,#fff 0%,#fff 74%,#f8fafb 100%); }
.container { width:min(1180px, calc(100% - 64px)); margin:0 auto; position:relative; z-index:1; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding:32px 0 20px; }
.brand { display:flex; align-items:center; gap:16px; font-size:25px; font-weight:800; letter-spacing:-.04em; }
.brand em { color:var(--orange); font-style:normal; font-weight:500; }
.brand strong { color:var(--orange); }
.header-link { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; }
.header-link img,.contact-link img { width:18px; height:18px; }
.hero { display:grid; grid-template-columns:minmax(360px,.86fr) minmax(480px,1.14fr); gap:48px; align-items:center; padding:54px 0 84px; }
.eyebrow { margin:0 0 14px; color:var(--orange); font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:20px; font-size:clamp(48px,6vw,76px); line-height:.99; letter-spacing:-.07em; max-width:620px; }
h1 span { color:var(--orange); }
.lead { margin-bottom:29px; font-size:21px; font-weight:650; letter-spacing:-.02em; }
.lead b { color:var(--orange); padding:0 11px; }
.promo { display:inline-flex; align-items:center; gap:12px; padding:15px 19px; border-radius:14px; background:var(--orange); color:#fff; font-size:15px; font-weight:800; box-shadow:0 10px 24px rgba(244,90,30,.14); }
.promo img { width:22px; height:22px; filter:brightness(0) invert(1); }
.intro { max-width:475px; margin:25px 0 25px; color:var(--muted); font-size:15px; line-height:1.65; }
.primary-button { display:inline-flex; align-items:center; gap:10px; padding:14px 19px; border:1px solid var(--navy); border-radius:12px; color:var(--white); background:var(--navy); font-size:14px; font-weight:800; transition:transform .2s, background .2s; }
.primary-button:hover { transform:translateY(-2px); background:#142f43; }
.primary-button img { width:18px; height:18px; filter:brightness(0) invert(1); }
.hero-visual { position:relative; min-height:560px; display:flex; align-items:center; justify-content:center; }
.service-board { position:relative; width:100%; max-width:620px; min-height:455px; overflow:hidden; padding:28px 32px 25px; border-radius:20px; color:#fff; background:var(--navy); box-shadow:0 20px 60px rgba(11,30,45,.16); }
.service-board:before { content:""; position:absolute; inset:0; opacity:.32; background:linear-gradient(120deg,transparent 0 48%,rgba(244,90,30,.7) 48.2% 48.5%,transparent 48.7%),linear-gradient(90deg,transparent 0 74%,rgba(255,255,255,.18) 74.2% 74.4%,transparent 74.6%); }
.board-top,.board-main,.board-bottom { position:relative; z-index:1; }.board-top,.board-bottom { display:flex; justify-content:space-between; color:#91a4af; font-size:10px; font-weight:800; letter-spacing:.13em; }.board-top span:first-child { color:#ff9b71; }.board-main { display:flex; align-items:center; gap:34px; min-height:330px; }.board-kicker { margin:0 0 13px; color:#ff9b71; font-size:12px; font-weight:800; letter-spacing:.16em; }.board-main h2 { margin:0 0 17px; font-size:clamp(38px,5vw,62px); line-height:.96; letter-spacing:-.07em; }.board-main h2 strong { color:var(--orange); }.board-text { margin:0; color:#b7c6d0; font-size:14px; line-height:1.55; }.board-chip { position:relative; flex:none; width:155px; height:155px; border:1px solid rgba(255,255,255,.45); border-radius:28px; transform:rotate(-12deg); background:linear-gradient(135deg,#102c40,#091722); box-shadow:inset 0 0 0 9px rgba(255,255,255,.04),0 0 0 12px rgba(244,90,30,.13); }.chip-core { position:absolute; inset:39px; display:block; border:1px solid var(--orange); border-radius:12px; box-shadow:0 0 28px rgba(244,90,30,.35); }.chip-core:after { content:"TL"; position:absolute; inset:0; display:grid; place-items:center; color:#ff9b71; font-size:26px; font-weight:900; letter-spacing:-.1em; }.board-chip i,.board-chip b { position:absolute; display:block; width:18px; height:1px; background:#ff9b71; }.board-chip i:nth-of-type(1){left:-18px;top:42px}.board-chip i:nth-of-type(2){left:-18px;top:77px}.board-chip i:nth-of-type(3){left:-18px;top:112px}.board-chip i:nth-of-type(4){right:-18px;top:42px}.board-chip b:nth-of-type(1){right:-18px;top:77px}.board-chip b:nth-of-type(2){right:-18px;top:112px}.board-chip b:nth-of-type(3){left:42px;top:-18px;width:1px;height:18px}.board-chip b:nth-of-type(4){right:42px;bottom:-18px;width:1px;height:18px}.board-lines { position:absolute; right:28px; top:95px; display:grid; gap:10px; width:105px; opacity:.55; }.board-lines span { height:1px; background:#88a0ad; }.board-lines span:nth-child(2){width:72%}.board-lines span:nth-child(3){width:86%}.board-lines span:nth-child(4){width:54%}.board-bottom { padding-top:17px; border-top:1px solid rgba(255,255,255,.18); }.board-bottom b { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:var(--orange); }
.visual-label,.visual-note { position:absolute; display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 13px; color:var(--muted); font-size:11px; font-weight:800; box-shadow:0 8px 24px rgba(11,30,45,.08); }
.visual-label { top:26px; left:2px; } .visual-label span { color:var(--orange); } .visual-note { right:4px; bottom:34px; }
.visual-note img { width:16px; height:16px; }
.services-section { padding:30px 0 86px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:24px; }
h2 { margin-bottom:0; font-size:clamp(29px,4vw,44px); letter-spacing:-.055em; line-height:1; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.service-card { min-height:170px; padding:22px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.9); }
.service-card.featured { border-color:var(--orange); background:var(--orange-light); }
.service-card img { width:27px; height:27px; margin-bottom:22px; }
.service-card h3 { margin-bottom:7px; font-size:17px; letter-spacing:-.02em; } .service-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.contact-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; margin-bottom:28px; padding:28px 30px; border-radius:18px; background:var(--navy); color:#fff; }
.contact-card .eyebrow { color:#ff9b71; margin-bottom:9px; } .contact-card h2 { font-size:28px; margin-bottom:8px; } .contact-card p:not(.eyebrow) { margin:0; color:#b7c6d0; font-size:14px; }
.contact-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:14px; background:var(--orange); } .contact-icon img { width:25px; height:25px; filter:brightness(0) invert(1); }
.contact-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px 16px; max-width:390px; }.contact-links a { display:flex; gap:7px; align-items:center; color:#fff; font-size:12px; font-weight:800; white-space:nowrap; }.contact-links img { width:15px; height:15px; filter:brightness(0) invert(1); }.location { grid-column:2 / -1; color:#b7c6d0; font-size:13px; display:flex; gap:8px; align-items:center; margin-top:-4px; } .location img { width:15px; filter:invert(80%); }
.footer { display:flex; justify-content:space-between; padding:20px 0 30px; color:#81909a; font-size:12px; }
.footer span:first-child { color:var(--navy); font-weight:800; }
.circuit { position:absolute; width:240px; height:180px; opacity:.75; pointer-events:none; background:linear-gradient(var(--orange),var(--orange)) 30px 42px/100px 1px no-repeat,linear-gradient(var(--orange),var(--orange)) 130px 42px/1px 33px no-repeat,linear-gradient(var(--orange),var(--orange)) 130px 75px/85px 1px no-repeat,linear-gradient(var(--orange),var(--orange)) 215px 75px/1px 40px no-repeat; }
.circuit:before,.circuit:after,.circuit span,.circuit i,.circuit b { content:""; position:absolute; border:1px solid var(--orange); border-radius:50%; width:5px; height:5px; background:#fff; }
.circuit:before { left:27px; top:39px; }.circuit:after { left:127px; top:39px; }.circuit span { left:127px; top:72px; }.circuit i { left:212px; top:72px; }.circuit b { left:212px; top:112px; }
.circuit-top { top:0; left:0; }.circuit-bottom { right:0; bottom:0; transform:rotate(180deg); }
@media (max-width:850px) { .container{width:min(100% - 36px,620px)} .header-link{font-size:0}.header-link img{width:20px;height:20px} .hero{display:flex;flex-direction:column;align-items:stretch;gap:34px;padding:35px 0 58px}.hero-copy{order:1}.hero-visual{order:2;min-height:auto}.services-section{padding-bottom:58px}.services-grid{grid-template-columns:repeat(2,1fr)}.section-heading{display:block}.section-heading .eyebrow{margin-bottom:12px}.contact-card{grid-template-columns:auto 1fr;padding:23px;gap:16px}.contact-links{grid-column:2;justify-content:flex-start;grid-row:2}.location{grid-column:2;grid-row:3}.contact-icon{grid-row:1 / span 3} }
@media (max-width:520px) { .container{width:calc(100% - 32px)} }

/* Calm service visual and first review */
.service-board { min-height:455px; padding:29px 32px 30px; background:linear-gradient(145deg,#102b3e,#071827 72%); }
.service-board:before { opacity:.28; background:linear-gradient(118deg,transparent 0 55%,rgba(244,90,30,.7) 55.2% 55.5%,transparent 55.7%),linear-gradient(90deg,transparent 0 78%,rgba(255,255,255,.13) 78.2% 78.4%,transparent 78.6%); }
.board-main { min-height:326px; align-items:center; }.board-main h2 { font-size:clamp(42px,5.4vw,68px); }.board-points { position:relative; z-index:1; display:flex; justify-content:space-between; gap:12px; padding-top:17px; border-top:1px solid rgba(255,255,255,.18); color:#b7c6d0; font-size:11px; font-weight:700; }.board-points span { display:flex; gap:7px; align-items:center; }.board-points b { color:#ff9b71; font-size:10px; }
.review-section { padding:0 0 84px; }.review-card { display:grid; grid-template-columns:minmax(320px,.9fr) minmax(440px,1.1fr); overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 18px 48px rgba(11,30,45,.08); }.review-photo { min-height:440px; background:#f4f6f7; }.review-photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }.review-content { padding:31px 34px 24px; }.review-meta { display:flex; justify-content:space-between; align-items:center; color:var(--orange); font-size:23px; font-weight:900; letter-spacing:-.04em; }.review-tag { padding:7px 10px; border-radius:7px; background:var(--orange-light); color:var(--orange); font-size:10px; letter-spacing:.12em; }.review-content h3 { margin:20px 0 10px; font-size:34px; line-height:1.03; letter-spacing:-.06em; }.review-description { max-width:430px; margin-bottom:24px; color:var(--muted); font-size:14px; line-height:1.55; }.spec-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); }.spec-grid div { padding:13px 10px 13px 0; border-bottom:1px solid var(--line); }.spec-grid span { display:block; margin-bottom:5px; color:#8a99a2; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }.spec-grid strong { display:block; font-size:13px; line-height:1.3; }.review-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:19px; font-size:12px; font-weight:800; }.review-footer > span { display:flex; gap:7px; align-items:center; color:var(--muted); }.review-footer img { width:16px; height:16px; }.review-footer a { padding:10px 13px; border-radius:9px; color:#fff; background:var(--navy); }.review-footer a span { color:#ff9b71; margin-left:6px; }.review-ticker { overflow:hidden; margin-top:17px; border-radius:10px; color:#fff; background:var(--orange); }.review-ticker div { display:flex; width:max-content; gap:42px; padding:10px 0; animation:ticker 24s linear infinite; }.review-ticker span { font-size:12px; font-weight:800; white-space:nowrap; } @keyframes ticker { to { transform:translateX(-50%); } }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }.reveal.is-visible { opacity:1; transform:none; }.service-card { transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }.service-card:hover { transform:translateY(-5px); box-shadow:0 13px 28px rgba(11,30,45,.08); border-color:#bccbd4; }.promo { animation:soft-pulse 3.5s ease-in-out infinite; } @keyframes soft-pulse { 0%,100%{box-shadow:0 10px 24px rgba(244,90,30,.14)}50%{box-shadow:0 12px 30px rgba(244,90,30,.28)} }
@media (max-width:850px) { .review-card { grid-template-columns:1fr; }.review-photo { min-height:330px; max-height:440px; }.review-content { padding:25px 23px 21px; }.contact-card { grid-template-columns:auto 1fr; }.contact-links { max-width:none; }.board-main { min-height:326px; } }

/* Final layout polish */
.hero { grid-template-columns:minmax(500px, .98fr) minmax(560px, 1.02fr); gap:64px; padding-top:66px; }
h1 { font-size:clamp(54px, 5.35vw, 74px); line-height:.94; max-width:540px; }
.hero-visual { min-height:590px; }.service-board { max-width:none; min-height:500px; padding:34px 38px 30px; border-radius:22px; }.board-main { min-height:367px; }.board-main h2 { font-size:clamp(46px, 5.3vw, 72px); }
.contact-card { grid-template-columns:minmax(350px,1fr) minmax(440px,1.1fr); gap:30px; padding:31px 36px 25px; border-radius:20px; }.contact-heading h2 { font-size:32px; }.contact-heading p:not(.eyebrow) { max-width:380px; }.contact-links { justify-content:flex-start; align-content:center; gap:12px 20px; max-width:none; }.contact-links a { padding:7px 0; font-size:13px; }.location { grid-column:1 / -1; padding-top:14px; margin-top:0; border-top:1px solid rgba(255,255,255,.13); }.location span { color:var(--orange); }
@media (max-width:1180px) and (min-width:851px) { .hero { grid-template-columns:minmax(430px,.95fr) minmax(480px,1.05fr); gap:36px; } h1 { font-size:clamp(50px,5vw,66px); } }

/* Hero without product image: the offer is the focus */
.hero { display:block; padding:94px 0 112px; }.hero-copy { max-width:920px; }.hero-copy h1 { max-width:850px; font-size:clamp(62px,8vw,112px); line-height:.9; }.hero-copy .lead { font-size:25px; margin-top:29px; }.hero-copy .intro { max-width:620px; font-size:16px; }.hero-visual { display:none; }
@media (max-width:850px) { .hero { padding:58px 0 76px; }.hero-copy h1 { font-size:clamp(53px,12vw,80px); } }

/* Centered, compact first screen */
.hero { padding:78px 0 94px; text-align:center; }.hero-copy { max-width:850px; margin:0 auto; }.hero-copy h1 { max-width:850px; margin:0 auto 22px; font-size:clamp(54px,6.7vw,82px); line-height:.94; }.hero-copy .lead { margin:0 auto 28px; }.hero-copy .promo { margin:0 auto; }.hero-copy .intro { margin:24px auto; max-width:570px; }.hero-copy .primary-button { margin:0 auto; }
@media (max-width:850px) { .hero { padding:58px 0 76px; }.hero-copy h1 { font-size:clamp(48px,10vw,68px); } }

/* New clean contact section */
.contact-card { position:relative; grid-template-columns:minmax(340px,.9fr) minmax(480px,1.1fr); overflow:hidden; color:var(--navy); background:#fff; border:1px solid var(--line); box-shadow:0 16px 42px rgba(11,30,45,.07); }.contact-card:before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--orange); }.contact-heading .eyebrow { color:var(--orange); }.contact-heading h2 { color:var(--navy); }.contact-heading p:not(.eyebrow) { color:var(--muted); }.contact-links a { padding:11px 13px; border:1px solid var(--line); border-radius:10px; color:var(--navy); background:#f8fafb; transition:background .2s,border-color .2s,transform .2s; }.contact-links a:hover { transform:translateY(-2px); border-color:#ffb49a; background:var(--orange-light); }.contact-links img { filter:none; }.location { color:var(--muted); border-color:var(--line); }.location img { filter:none; }
.review-ticker { display:none; }

/* Footer matching exact reference layout */
.site-footer {
  margin-top: 20px;
  padding: 52px 0 24px;
  color: #a9b6bd;
  background: #071827;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 45px;
}
.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}
.footer-column:nth-child(1) {
  justify-self: start;
}
.footer-column:nth-child(2) {
  justify-self: center;
}
.footer-column:nth-child(3) {
  justify-self: end;
}
.footer-column h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.footer-column h3 img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}
.footer-column a {
  color: #96a5ad;
  font-size: 14px;
  line-height: 1.4;
  transition: color 0.2s, transform 0.2s;
}
.footer-column a:hover {
  color: #fff;
  transform: translateX(3px);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: #86969e;
  font-size: 12px;
}
.footer-bottom span:first-child {
  color: #a9b6bd;
  font-weight: 400;
}
.footer-bottom a {
  color: #ff9b71;
  font-weight: 700;
  transition: color 0.2s;
}
.footer-bottom a:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 850px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
  }
  .footer-column:last-child {
    min-width: auto;
  }
}

/* Services and real customer review */
.services-section { padding-top:72px; }.section-heading { align-items:flex-end; margin-bottom:28px; }.section-heading h2 { max-width:620px; }.services-grid { gap:14px; }.service-card { position:relative; min-height:182px; padding:24px; border-radius:18px; background:#fff; transition:transform .25s,box-shadow .25s,border-color .25s; }.service-card:after { content:""; position:absolute; right:20px; top:20px; width:6px; height:6px; border-radius:50%; background:#d9e1e6; }.service-card.featured:after { background:var(--orange); box-shadow:0 0 0 5px rgba(244,90,30,.1); }.service-card img { width:29px; height:29px; margin-bottom:30px; }.service-card h3 { font-size:18px; }.service-card p { max-width:210px; }.service-card:hover { transform:translateY(-6px); box-shadow:0 16px 32px rgba(11,30,45,.1); border-color:#b9c9d2; }.client-review { display:flex; align-items:flex-start; gap:12px; margin-top:18px; padding:14px 0 15px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.client-avatar { flex:none; width:39px; height:39px; border-radius:50%; object-fit:cover; }.client-review strong { display:block; margin-bottom:4px; font-size:12px; }.client-review p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }.review-footer { padding-top:15px; }.review-content { padding-bottom:20px; }
.review-section > .section-heading { display:block; text-align:center; margin-bottom:30px; }.review-section > .section-heading .eyebrow { margin-bottom:10px; }.review-section > .section-heading h2 { max-width:none; }.client-avatar { filter:blur(3px); opacity:.82; }.client-review strong { color:var(--navy); }.review-footer { justify-content:flex-end; }.review-footer > span { display:none; }.review-footer a { display:inline-flex; align-items:center; gap:7px; margin-left:auto; }.review-footer a img { width:12px; height:12px; flex:none; }
.services-section > .section-heading { display:block; text-align:center; margin-bottom:30px; }.services-section > .section-heading .eyebrow { margin-bottom:10px; }.services-section > .section-heading h2 { max-width:none; }

/* Floating icons */
.floating-icons { position:absolute; top:55px; bottom:0; width:120px; z-index:0; pointer-events:none; overflow:hidden; }.floating-left { left:3.5%; }.floating-right { right:3.5%; }.floating-icons span { position:absolute; left:50%; display:grid; place-items:center; width:38px; height:38px; opacity:0; animation:fall-icon 15s linear infinite; }.floating-icons span:nth-child(1){animation-delay:-1s;}.floating-icons span:nth-child(2){animation-delay:-3.2s;}.floating-icons span:nth-child(3){animation-delay:-5.4s;}.floating-icons span:nth-child(4){animation-delay:-7.6s;}.floating-icons span:nth-child(5){animation-delay:-9.8s;}.floating-icons span:nth-child(6){animation-delay:-12s;}.floating-right span:nth-child(1){animation-delay:-2s;}.floating-right span:nth-child(2){animation-delay:-4.2s;}.floating-right span:nth-child(3){animation-delay:-6.4s;}.floating-right span:nth-child(4){animation-delay:-8.6s;}.floating-right span:nth-child(5){animation-delay:-10.8s;}.floating-right span:nth-child(6){animation-delay:-12.5s;}.floating-icons img { width:21px; height:21px; opacity:.34; }.floating-right img { opacity:.27; } @keyframes fall-icon { 0% { transform:translate(-50%,-80px) rotate(-10deg); opacity:0; } 12% { opacity:.48; } 50% { transform:translate(calc(-50% + 18px),45vh) rotate(8deg); opacity:.28; } 88% { opacity:.15; } 100% { transform:translate(calc(-50% - 14px),calc(100vh + 90px)) rotate(18deg); opacity:0; } }
@media (max-width:850px) { .floating-icons { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }

/* Rules */
.rules-link { position:absolute; left:50%; transform:translateX(-50%); color:var(--muted); font-size:13px; font-weight:750; }.rules-link:hover { color:var(--orange); }.rules-strip { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(520px,1.28fr); gap:42px; align-items:center; margin:0 0 78px; padding:30px 34px; border-radius:20px; background:var(--navy); color:#fff; box-shadow:0 18px 44px rgba(11,30,45,.1); }.rules-strip .eyebrow { color:#ff9b71; margin-bottom:10px; }.rules-intro h2 { margin-bottom:12px; font-size:clamp(25px,3vw,36px); line-height:1.02; }.rules-intro > p:last-child { max-width:290px; margin:0; color:#aebec7; font-size:13px; line-height:1.5; }.rules-list { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.rule-item { padding-left:15px; border-left:1px solid rgba(255,255,255,.2); }.rule-item > span { display:block; margin-bottom:17px; color:#ff9b71; font-size:11px; font-weight:800; }.rule-item strong { display:block; margin-bottom:8px; font-size:14px; line-height:1.2; }.rule-item p { margin:0; color:#aebec7; font-size:12px; line-height:1.5; }.rules-strip.reveal { transform:translateY(14px); }.rules-strip.reveal.is-visible { transform:none; }
.rules-strip { position:relative; overflow:hidden; color:var(--navy); background:#fff; border:1px solid var(--line); box-shadow:0 16px 38px rgba(11,30,45,.07); }.rules-strip:before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--orange); }.rules-strip .eyebrow { color:var(--orange); }.rules-intro > p:last-child { color:var(--muted); }.rule-item { border-left-color:var(--line); }.rule-item > span { color:var(--orange); }.rule-item strong { color:var(--navy); }.rule-item p { color:var(--muted); }

/* Review carousel */
.review-slides { display:grid; position:relative; }
.review-slide { grid-area:1 / 1; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .38s ease,visibility .38s; }
.review-slide.is-active { opacity:1; visibility:visible; pointer-events:auto; z-index:1; position:relative; }
.review-slide:not(.is-active) { display:none; }
.review-dots { display:flex; justify-content:center; gap:9px; margin-top:19px; }
.review-dots button { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:#c9d2d8; cursor:pointer; transition:width .25s,background .25s; }
.review-dots button.is-active { width:27px; border-radius:999px; background:var(--orange); }
.review-carousel { position:relative; }

/* Rounded top navigation bar */
.site-header { position:sticky; top:12px; z-index:50; margin-top:16px; padding:12px 16px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.94); box-shadow:0 8px 24px rgba(11,30,45,.06); backdrop-filter:blur(12px); transition:padding .25s,box-shadow .25s,top .25s; }
.site-header.is-scrolled { top:8px; padding-top:8px; padding-bottom:8px; box-shadow:0 10px 28px rgba(11,30,45,.12); }
.site-header .brand { flex:none; font-size:22px; }
.header-nav { display:flex; align-items:center; justify-content:center; gap:26px; margin:0 auto; }
.header-nav a { color:var(--muted); font-size:13px; font-weight:700; transition:color .2s; }
.header-nav a:hover,.header-nav a:focus-visible { color:var(--orange); }
.header-actions { display:flex; align-items:center; gap:8px; flex:none; }
.header-link { display:inline-flex; align-items:center; gap:8px; flex:none; padding:9px 12px; border-radius:10px; color:var(--navy); background:#f5f7fa; font-size:12px; font-weight:700; }
.header-link:hover { color:var(--orange); }
.header-link-olx { font-weight:800; }

/* MacBook service case */
.review-photo--contain { display:flex; align-items:center; justify-content:center; padding:0; background:#fff; }
.review-photo--contain img { width:80%; height:auto; max-width:80%; max-height:80%; object-fit:contain; object-position:center; flex:none; }

/* Brand logo */
.brand { gap:12px; }
.brand-logo { flex:none; width:38px; height:38px; border-radius:10px; object-fit:cover; }
.brand-name { display:flex; align-items:center; gap:14px; }

/* Test contact notification */
.contact-toast { position:fixed; right:24px; bottom:24px; z-index:100; display:grid; grid-template-columns:42px 1fr 28px; align-items:center; gap:12px; width:min(360px,calc(100% - 32px)); padding:14px; border:1px solid var(--line); border-radius:16px; color:var(--navy); background:rgba(255,255,255,.98); box-shadow:0 18px 48px rgba(11,30,45,.2); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(18px); transition:opacity .28s ease,transform .28s ease,visibility .28s; }
.contact-toast.is-visible { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.contact-toast-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--orange); }
.contact-toast-icon img { width:20px; height:20px; filter:brightness(0) invert(1); }
.contact-toast-copy { min-width:0; }
.contact-toast-copy strong { display:block; margin-bottom:3px; font-size:14px; }
.contact-toast-copy a { color:var(--orange); font-size:15px; font-weight:900; letter-spacing:.01em; }
.contact-toast-close { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:8px; color:var(--muted); background:#f4f6f7; font:700 18px/1 Arial,sans-serif; cursor:pointer; }
.contact-toast-close:hover,.contact-toast-close:focus-visible { color:var(--navy); background:#e9eef1; }

/* Service Cards and Price Badges */
.service-card:after { display: none !important; }
.service-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.service-card-top img { margin-bottom: 0 !important; width: 29px; height: 29px; }
.service-price-tag { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: var(--orange-light); color: var(--orange); font-size: 13px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0; }
.service-price-tag.secondary { background: #f0f4f7; color: var(--muted); font-size: 12px; }
.service-card.featured-ai { border-color: #ffb49a; background: linear-gradient(160deg, #ffffff 0%, #fff4ee 100%); box-shadow: 0 8px 24px rgba(244, 90, 30, 0.08); }
.service-card.featured-ai .service-price-tag { background: var(--orange); color: #fff; box-shadow: 0 4px 12px rgba(244, 90, 30, 0.25); }
.service-card.featured-ai:hover { border-color: var(--orange); box-shadow: 0 16px 36px rgba(244, 90, 30, 0.16); transform: translateY(-6px); }
.service-card-icon-wrap { display: flex; align-items: center; gap: 10px; }
.ai-popular-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: var(--orange-light); color: var(--orange); font-size: 11px; font-weight: 850; letter-spacing: 0.02em; border: 1px solid rgba(244, 90, 30, 0.25); white-space: nowrap; flex-shrink: 0; }
.ai-popular-pill img { width: 13px; height: 13px; flex: none; margin-bottom: 0 !important; }

/* Dedicated Mobile Overrides */
@media (max-width: 620px) {
  .header-nav { display: none; }
  .site-header { padding: 8px 12px; margin-top: 8px; border-radius: 14px; }
  .site-header .brand { font-size: 16px; gap: 8px; }
  .brand-logo { width: 28px; height: 28px; border-radius: 7px; }
  .brand-name { font-size: 16px; gap: 6px; letter-spacing: -0.02em; }
  .brand-name em { font-size: 12px; }
  .header-actions { gap: 5px; }
  .header-link-olx { height: 32px; padding: 0 9px; font-size: 11px; font-weight: 800; border-radius: 8px; background: #f0f4f7; }
  .header-link:not(.header-link-olx) { width: 32px; height: 32px; border-radius: 8px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0; }
  .header-link:not(.header-link-olx) img { width: 16px; height: 16px; }

  /* Hero mobile */
  .hero { padding: 40px 0 54px; }
  .hero-copy h1 { font-size: clamp(38px, 9.5vw, 48px); line-height: 1.0; }
  .hero-copy .lead { font-size: 16px; margin-top: 18px; }
  .hero-copy .intro { font-size: 14px; margin: 18px auto 22px; }

  /* Rules mobile */
  .rules-link { display: none; }
  .rules-strip { margin-bottom: 48px; padding: 22px 18px; border-radius: 16px; }
  .rules-intro h2 { font-size: 24px; }
  .rules-list { grid-template-columns: 1fr; gap: 16px; }
  .rule-item { padding: 0 0 0 14px; }
  .rule-item > span { margin-bottom: 6px; font-size: 11px; }
  .rule-item strong { font-size: 14px; margin-bottom: 4px; }
  .rule-item p { font-size: 12px; line-height: 1.45; }

  /* Services mobile (1 column, clean badges) */
  .services-section { padding-top: 36px; padding-bottom: 50px; }
  .services-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-card { min-height: auto; padding: 18px 18px 20px; border-radius: 16px; }
  .service-card-top { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
  .service-card-icon-wrap { display: flex; align-items: center; gap: 8px; }
  .service-card-top img { width: 24px; height: 24px; margin-bottom: 0 !important; }
  .service-price-tag { font-size: 12px; padding: 4px 10px; white-space: nowrap; flex-shrink: 0; }
  .ai-popular-pill { font-size: 10px; padding: 2px 7px; gap: 4px; white-space: nowrap; flex-shrink: 0; }
  .ai-popular-pill img { width: 12px; height: 12px; }
  .service-card h3 { font-size: 17px; margin-bottom: 6px; }
  .service-card p { max-width: none; font-size: 13px; line-height: 1.5; }

  /* Reviews mobile (no empty space) */
  .review-section { padding-bottom: 50px; }
  .review-card { grid-template-columns: 1fr; min-height: auto; border-radius: 16px; }
  .review-photo { min-height: 180px; max-height: 220px; padding: 12px 0; }
  .review-photo img { max-height: 180px; width: auto; max-width: 85%; }
  .review-content { padding: 18px 16px 16px; }
  .review-meta { font-size: 18px; margin-bottom: 2px; }
  .review-tag { font-size: 9px; padding: 4px 8px; }
  .review-content h3 { font-size: 21px; margin: 10px 0 6px; line-height: 1.15; }
  .review-description { font-size: 13px; line-height: 1.45; margin-bottom: 12px; }
  .spec-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .spec-grid div { padding: 8px 6px 8px 0; }
  .spec-grid span { font-size: 9px; margin-bottom: 2px; }
  .spec-grid strong { font-size: 12px; line-height: 1.25; }
  .client-review { margin-top: 12px; padding: 10px 0; gap: 10px; }
  .client-avatar { width: 32px; height: 32px; }
  .client-review strong { font-size: 11px; margin-bottom: 2px; }
  .client-review p { font-size: 11px; line-height: 1.4; }
  .review-footer { padding-top: 12px; margin-top: 0; justify-content: flex-end; }
  .review-footer a { padding: 8px 13px; font-size: 12px; border-radius: 8px; }

  /* Footer mobile */
  .site-footer { padding: 32px 0 20px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding-bottom: 0;
    row-gap: 0;
  }
  /* Col 1 (Сторінки) — top-left */
  .footer-column:nth-child(1) {
    justify-self: start;
    grid-column: 1;
    grid-row: 1;
    padding: 20px 12px 20px 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    gap: 7px;
    width: 100%;
  }
  /* Col 2 (Зв'язок) — full width 2-column grid */
  .footer-column:nth-child(2) {
    justify-self: start;
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    width: 100%;
  }
  /* Col 3 (Послуги) — top-right */
  .footer-column:nth-child(3) {
    justify-self: start;
    grid-column: 2;
    grid-row: 1;
    padding: 20px 0 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    gap: 7px;
    width: 100%;
  }
  /* Зв'язок h3 — hide on mobile, contacts speak for themselves */
  .footer-column:nth-child(2) h3 {
    display: none;
  }
  /* Contact links as 2-column grid buttons */
  .footer-column:nth-child(2) a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 9px 8px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: #c8d6de;
    font-size: 12px;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
  }
  .footer-column:nth-child(2) a:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    transform: none;
  }
  /* Viber full width row 3 */
  .footer-column:nth-child(2) a:nth-child(5) {
    grid-column: 1 / -1;
    order: 10;
  }
  .footer-column h3 { font-size: 13px; margin-bottom: 2px; gap: 6px; }
  .footer-column h3 img { width: 13px; height: 13px; }
  .footer-column:nth-child(1) a,
  .footer-column:nth-child(3) a { font-size: 12px; padding: 1px 0; color: #8fa0a8; }
  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding-top: 16px;
    font-size: 11px;
    line-height: 1.5;
  }

  /* Contact toast mobile */
  .contact-toast { right: 16px; bottom: 16px; grid-template-columns: 40px 1fr 28px; padding: 12px; }
  .contact-toast-icon { width: 40px; height: 40px; }
  .contact-toast-copy strong { font-size: 13px; }
  .contact-toast-copy a { font-size: 14px; }
}