:root {
  --bg: #ffffff;
  --surface: #fbfbfb;
  --surface-2: #f6f6f6;
  --text: #171717;
  --muted: #61666d;
  --line: #e6e6e6;
  --shadow: 0 10px 28px rgba(22, 22, 22, 0.08);
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1240px;
  --primary: #eb7a11;
  --primary-dark: #cc6508;
  --category-concrete: #d88a21;
  --category-brickwork: #d76541;
  --category-steel: #5a7ebc;
  --category-plastering: #62a2a8;
  --category-tiles: #9276c7;
  --category-painting: #c69236;
  --category-flooring: #6f8f76;
  --category-electrical: #2b7cdd;
  --category-estimators: #d26f18;
  --category-formulas: #3368c2;
  --category-guides: #448d57;
  --category-converters: #7d56a6;
  --category-resources: #696969;
  --category-pop-gypsum: #b88955;
  --category-blocks: #9b6b52;
  --category-cement-mortar: #7f8b91;
  --category-earthwork: #a67645;
  --category-roofing: #5e7e95;
  --category-roadwork: #59626c;
  --category-water-tanks: #2d91b8;
  --category-surveying: #cf8a2a;
  --category-stairs: #89715e;
  --category-structural: #6c6f88;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.small-container { width: min(980px, calc(100% - 32px)); margin: 0 auto; }
.topbar { background: var(--primary); color: #fff; font-size: 14px; }
.topbar .container { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:10px 0; flex-wrap:wrap; }
.topbar ul, .meta-links { list-style:none; display:flex; gap:18px; padding:0; margin:0; flex-wrap:wrap; }
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav { display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:16px 0; }
.brand { display:flex; gap:14px; align-items:center; }
.brand img { width:56px; height:56px; }
.brand h1, .brand h2 { margin:0; font-size:22px; line-height:1.05; }
.brand .tag { color:var(--muted); font-size:14px; margin-top:4px; }
.nav-links { display:flex; justify-content:center; gap:24px; align-items:center; flex-wrap:wrap; }
.nav-links a { padding:10px 2px; font-weight:700; position:relative; }
.nav-links a::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--primary); transform:scaleX(0); transition:transform .22s ease; }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.search-inline { display:grid; grid-template-columns: 1fr auto; gap:8px; min-width:310px; }
.search-inline input, .hero-search input, .form-group input, .form-group select, textarea {
  border: 1px solid var(--line); background:#fff; border-radius: 12px; padding: 14px 14px; font-size:16px; outline:none; width:100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(235,122,17,.08); }
button, .button, .button-outline, .button-light {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:12px; padding:14px 18px; font-weight:800; cursor:pointer; transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
button:hover, .button:hover, .button-outline:hover, .button-light:hover { transform: translateY(-1px); }
button, .button { background:var(--primary); color:#fff; }
button:hover, .button:hover { background:var(--primary-dark); }
.button-outline { background:#fff; border:1px solid var(--line); color:var(--text); }
.button-light { background:#fff; color:var(--text); }
.hero { border-bottom:1px solid var(--line); background:#fff; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; padding:40px 0 26px; }
.hero h2 { font-size: clamp(38px, 5vw, 62px); line-height:1.02; margin:0 0 18px; }
.hero h2 .accent { color:var(--primary); }
.lead { font-size:21px; color:var(--muted); max-width:720px; }
.hero-search { display:grid; grid-template-columns: 1fr auto; gap:10px; max-width:640px; margin:26px 0 16px; }
.bullets { display:flex; flex-wrap:wrap; gap:16px; color:#4a4f56; font-weight:700; }
.bullets span { display:inline-flex; align-items:center; gap:8px; }
.hero-visual { min-height:420px; display:flex; align-items:center; justify-content:center; }
.scene { width:min(100%, 560px); aspect-ratio:16/10; position:relative; filter: drop-shadow(0 18px 28px rgba(0,0,0,.12)); }
.scene .ground { position:absolute; left:7%; right:7%; bottom:7%; height:26px; background:#eeeeee; border-radius:999px; }
.scene .cloud { position:absolute; width:108px; height:30px; border-radius:999px; background:#f4f4f4; box-shadow: 28px 8px 0 #f4f4f4, 60px 0 0 #f4f4f4; }
.scene .cloud.a { top:14%; left:5%; transform:scale(.68); }
.scene .cloud.b { top:22%; right:6%; transform:scale(.52); }
.scene .building { position:absolute; right:26%; bottom:18%; width:36%; height:48%; background:#f1f1f1; border:2px solid #5e5e5e; border-radius:8px 8px 0 0; box-shadow: inset -14px 0 0 #e7e7e7; }
.scene .floor-line { position:absolute; left:10%; right:10%; height:2px; background:#5d5d5d; opacity:.6; }
.scene .line1 { top:32%; } .scene .line2 { top:50%; } .scene .line3 { top:68%; }
.scene .v1, .scene .v2, .scene .v3 { position:absolute; top:8%; bottom:0; width:2px; background:#5d5d5d; opacity:.6; }
.scene .v1 { left:26%; } .scene .v2 { left:50%; } .scene .v3 { left:74%; }
.scene .scaffold { position:absolute; right:13%; bottom:18%; width:20%; height:34%; border:4px solid #cf7f15; }
.scene .scaffold::before, .scene .scaffold::after { content:''; position:absolute; inset:0; border-left:3px solid #cf7f15; border-right:3px solid #cf7f15; transform: translateX(-33%); }
.scene .scaffold::after { transform: translateX(33%); }
.scene .crane-pole { position:absolute; right:9%; bottom:18%; width:12px; height:62%; background:#db8b20; }
.scene .crane-arm { position:absolute; right:10%; top:18%; width:34%; height:12px; background:#db8b20; }
.scene .crane-hook { position:absolute; right:20%; top:18%; width:4px; height:100px; background:#936118; }
.scene .truck { position:absolute; right:3%; bottom:12%; width:30%; height:19%; background:#f1a020; border:2px solid #6b4f1e; border-radius:18px 14px 12px 12px; }
.scene .truck::before { content:''; position:absolute; left:-16%; top:17%; width:40%; height:66%; background:#ea910f; border:2px solid #6b4f1e; border-radius:18px 8px 8px 14px; }
.scene .truck::after { content:''; position:absolute; left:18%; top:-40%; width:44%; height:70%; background:#f3b650; border:2px solid #6b4f1e; border-radius:50% 50% 16px 16px; transform: rotate(-25deg); }
.scene .wheel, .scene .wheel2 { position:absolute; bottom:-10px; width:28px; height:28px; border-radius:50%; background:#2f2f2f; border:5px solid #9d9d9d; }
.scene .wheel { left:14%; } .scene .wheel2 { right:10%; }
.scene .pipe { position:absolute; left:12%; bottom:15%; width:22%; height:16%; border-radius:999px; background:#cfcfcf; transform:skewX(-12deg); border:2px solid #8f8f8f; }
.scene .pipe::after { content:''; position:absolute; left:82%; top:-28%; width:80%; height:100%; border-radius:inherit; background:#dcdcdc; border:2px solid #8f8f8f; }
.scene .calc { position:absolute; left:34%; bottom:12%; width:18%; height:14%; background:#d8d8d8; border:2px solid #7c7c7c; border-radius:8px; transform:rotate(-8deg); }
.section { padding:56px 0; }
.section-title { text-align:center; margin-bottom:28px; }
.section-title h3 { margin:0 0 10px; font-size:clamp(28px, 4vw, 40px); }
.section-title p { margin:0; color:var(--muted); }
.cards-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.card {
  display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; transition:transform .22s ease, box-shadow .22s ease; box-shadow:0 0 0 rgba(0,0,0,0);
}
.card:hover { transform: translateY(-6px); box-shadow:var(--shadow); }
.card-icon-wrap { min-height:146px; display:flex; align-items:center; justify-content:center; border-radius:16px; margin-bottom:14px; background:var(--surface-2); }
.card-icon-wrap img { width:112px; height:112px; }
.card h4 { margin:0 0 10px; font-size:24px; }
.card p { margin:0; color:var(--muted); }
.card .tagline { font-size:14px; margin-top:10px; }
.category-concrete { --card-accent: var(--category-concrete); }
.category-brickwork { --card-accent: var(--category-brickwork); }
.category-steel { --card-accent: var(--category-steel); }
.category-plastering { --card-accent: var(--category-plastering); }
.category-tiles { --card-accent: var(--category-tiles); }
.category-painting { --card-accent: var(--category-painting); }
.category-flooring { --card-accent: var(--category-flooring); }
.category-electrical { --card-accent: var(--category-electrical); }
.category-estimators { --card-accent: var(--category-estimators); }
.category-formulas { --card-accent: var(--category-formulas); }
.category-guides { --card-accent: var(--category-guides); }
.category-converters { --card-accent: var(--category-converters); }
.category-resources { --card-accent: var(--category-resources); }
.category-pop-gypsum { --card-accent: var(--category-pop-gypsum); }
.category-blocks { --card-accent: var(--category-blocks); }
.category-cement-mortar { --card-accent: var(--category-cement-mortar); }
.category-earthwork { --card-accent: var(--category-earthwork); }
.category-roofing { --card-accent: var(--category-roofing); }
.category-roadwork { --card-accent: var(--category-roadwork); }
.category-water-tanks { --card-accent: var(--category-water-tanks); }
.category-surveying { --card-accent: var(--category-surveying); }
.category-stairs { --card-accent: var(--category-stairs); }
.category-structural { --card-accent: var(--category-structural); }
.category-pop-gypsum .card-icon-wrap, .feature-box.category-pop-gypsum { background:#fbf5ef; }
.category-blocks .card-icon-wrap, .feature-box.category-blocks { background:#f8f1ed; }
.category-cement-mortar .card-icon-wrap, .feature-box.category-cement-mortar { background:#f2f4f5; }
.category-earthwork .card-icon-wrap, .feature-box.category-earthwork { background:#faf3eb; }
.category-roofing .card-icon-wrap, .feature-box.category-roofing { background:#f0f5f8; }
.category-roadwork .card-icon-wrap, .feature-box.category-roadwork { background:#f1f2f3; }
.category-water-tanks .card-icon-wrap, .feature-box.category-water-tanks { background:#edf8fc; }
.category-surveying .card-icon-wrap, .feature-box.category-surveying { background:#fcf5e9; }
.category-stairs .card-icon-wrap, .feature-box.category-stairs { background:#f6f2ef; }
.category-structural .card-icon-wrap, .feature-box.category-structural { background:#f2f2f7; }

.card[class*='category-'] { border-top:4px solid var(--card-accent); }
.category-concrete .card-icon-wrap, .feature-box.category-concrete { background:#fcf5eb; }
.category-brickwork .card-icon-wrap, .feature-box.category-brickwork { background:#fdf0ed; }
.category-steel .card-icon-wrap, .feature-box.category-steel { background:#f1f5fb; }
.category-plastering .card-icon-wrap, .feature-box.category-plastering { background:#eef8f8; }
.category-tiles .card-icon-wrap, .feature-box.category-tiles { background:#f5f1fb; }
.category-painting .card-icon-wrap, .feature-box.category-painting { background:#fcf7eb; }
.category-flooring .card-icon-wrap, .feature-box.category-flooring { background:#f1f6f1; }
.category-electrical .card-icon-wrap, .feature-box.category-electrical { background:#edf4ff; }
.category-estimators .card-icon-wrap, .feature-box.category-estimators { background:#fff5ea; }
.category-formulas .card-icon-wrap, .feature-box.category-formulas { background:#f1f6fd; }
.category-guides .card-icon-wrap, .feature-box.category-guides { background:#f1f9f2; }
.category-converters .card-icon-wrap, .feature-box.category-converters { background:#f6f1fb; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feature-box { border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:grid; grid-template-columns:100px 1fr; gap:18px; align-items:center; background:#fff; }
.feature-box img { width:90px; height:90px; }
.feature-box h4 { margin:0 0 10px; font-size:26px; }
.feature-box p { margin:0 0 14px; color:var(--muted); }
.app-banner { border:1px solid var(--line); border-radius:var(--radius); background:#fbfbfb; padding:24px; display:grid; grid-template-columns: 90px 1fr auto auto auto; gap:20px; align-items:center; margin-top:28px; }
.phone-mock { width:78px; height:156px; background:#fff; border:5px solid #1f1f1f; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); }
.phone-mock .screen { padding:9px; display:grid; gap:8px; }
.phone-mock .row { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.phone-mock .chip { height:30px; border-radius:10px; background:#f1f1f1; border:1px solid #e2e2e2; }
.phone-mock .accent { background:#fff2e3; border-color:#f0c18f; }
.store-badge { min-width:180px; border-radius:14px; padding:12px 16px; border:1px solid var(--line); background:#fff; font-weight:800; }
.stats-strip { margin-top:20px; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.stat-box { border:1px solid var(--line); border-radius:16px; padding:18px; text-align:center; background:#fff; }
.stat-box strong { display:block; font-size:30px; margin-bottom:4px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stack { display:grid; gap:18px; }
.content-card { border:1px solid var(--line); border-radius:18px; padding:24px; background:#fff; }
.content-card h4, .content-card h3, .content-card h2 { margin-top:0; }
.list { margin:0; padding-left:18px; color:var(--muted); }
.cta-banner { background:var(--primary); color:#fff; border-radius:22px; padding:28px 30px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.footer { border-top:1px solid var(--line); padding:44px 0; background:#fff; margin-top:20px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px; }
.footer h5 { margin:0 0 12px; font-size:18px; }
.footer ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; color:var(--muted); }
.footer p { color:var(--muted); }
.breadcrumbs { color:var(--muted); font-size:14px; margin-bottom:14px; }
.page-hero { padding:34px 0 14px; }
.hero-shell { border:1px solid var(--line); border-radius:24px; padding:26px; display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:center; background:#fff; }
.page-hero h2 { margin:0 0 10px; font-size:clamp(30px, 5vw, 48px); }
.page-hero p { margin:0; color:var(--muted); font-size:18px; }
.mini-card { border:1px solid var(--line); border-radius:18px; padding:18px; background:#fff; display:grid; gap:14px; }
.tool-list { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tool-item { border:1px solid var(--line); border-radius:16px; padding:20px; background:#fff; }
.tool-item h4 { margin:0 0 8px; font-size:22px; }
.tool-item p { margin:0 0 12px; color:var(--muted); }
.tool-item a { font-weight:800; color:var(--primary); }
.tool-item ul { margin:0; padding-left:18px; color:var(--muted); }
.calc-box { border:1px solid var(--line); border-radius:20px; background:#fff; padding:24px; }
.form-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.form-group { display:grid; gap:8px; }
.form-group label { font-weight:800; font-size:14px; }
.result-panel { margin-top:18px; border:1px solid var(--line); border-radius:18px; padding:20px; background:#fcfcfc; }
.result-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.result-stat { border:1px solid var(--line); border-radius:14px; padding:14px; background:#fff; }
.result-stat span { display:block; font-size:13px; color:var(--muted); }
.result-stat strong { display:block; font-size:26px; margin-top:5px; }
.helper-note { margin-top:12px; color:var(--muted); font-size:14px; }
.formula-box { border:1px solid var(--line); border-radius:16px; background:#fcfcfc; padding:18px; font-weight:800; font-size:20px; }
.faq-item { border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff; }
.faq-item h5 { margin:0 0 8px; font-size:18px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.related-card { border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff; }
.related-card h4 { margin:0 0 8px; }
.related-card p { margin:0 0 12px; color:var(--muted); }
.ad-slot { border:2px dashed #dadada; background:#fcfcfc; color:#8c9098; text-align:center; border-radius:16px; padding:18px; font-weight:800; }
.ad-unit { border:1px solid var(--line); border-radius:16px; background:#fcfcfc; padding:16px; text-align:center; overflow:hidden; min-height:60px; }
.ad-unit-label { display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.notice { border-left:4px solid var(--primary); background:#fff8f1; padding:14px 16px; border-radius:12px; color:#6c5843; }
.table-wrap { overflow:auto; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { border:1px solid var(--line); padding:12px; text-align:left; }
.table th { background:#fafafa; }
.tag-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.tag { display:inline-flex; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font-weight:700; font-size:14px; }
.reveal { opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s ease; }
.reveal.is-visible { opacity:1; transform:translateY(0); }
.subtle-float { animation:floatY 5s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@media (max-width: 1100px) {
  .nav { grid-template-columns:auto auto; }
  .nav-links { grid-column:1/-1; justify-content:flex-start; overflow:auto; padding-bottom:4px; }
  .hero-grid, .hero-shell { grid-template-columns:1fr; }
  .cards-grid, .feature-grid { grid-template-columns:repeat(2,1fr); }
  .tool-list, .related-grid { grid-template-columns:repeat(2,1fr); }
  .stats-strip { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
  .app-banner { grid-template-columns:90px 1fr; }
  .form-grid, .result-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 760px) {
  .topbar .container { display:block; }
  .nav { display:block; }
  .search-inline { min-width:0; margin-top:14px; }
  .hero-grid { padding-top:26px; }
  .hero-search, .search-inline { grid-template-columns:1fr; }
  .cards-grid, .feature-grid, .tool-list, .three-col, .two-col, .related-grid, .stats-strip, .footer-grid, .form-grid, .result-grid { grid-template-columns:1fr; }
  .feature-box { grid-template-columns:1fr; text-align:center; }
  .app-banner { grid-template-columns:1fr; }
  .cta-banner { display:grid; }
  .lead { font-size:18px; }
}


/* Realistic visual refresh */
.hero-photo-card { background:#fff; border:1px solid var(--line); border-radius:28px; padding:18px; box-shadow: var(--shadow); min-height:auto; }
.hero-photo { width:100%; border-radius:20px; display:block; aspect-ratio:4/3; object-fit:cover; }
.cards-grid .card-icon-wrap { background:#fff !important; border:1px solid var(--line); padding:18px; min-height:190px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.015); }
.cards-grid .card-icon-wrap img, .feature-box img, .mini-card img { object-fit:contain; }
.cards-grid .card-icon-wrap img { width:148px; height:148px; }
.feature-box { background:#fff; }
.feature-box img { width:100px; height:100px; }
.hero, .section, .footer, .content-card, .card, .tool-item, .mini-card, .app-banner, .hero-shell, .calc-box, .result-panel, .cta-banner { background-image:none !important; }
.cta-banner { background:var(--primary); }


/* Mobile app showcase */
.app-showcase { margin-top:34px; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; }
.app-showcase-main { display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; padding:32px; background:#fff; }
.app-copy { max-width:720px; }
.app-brand-row { display:flex; align-items:center; gap:18px; }
.app-store-icon { width:86px; height:86px; border-radius:22px; border:1px solid var(--line); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.eyebrow { color:var(--primary); font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:900; }
.app-brand-row h3 { margin:5px 0 2px; font-size:clamp(28px,4vw,42px); line-height:1.08; }
.app-tagline { margin:0; color:var(--muted); font-weight:700; }
.app-description { color:var(--muted); font-size:18px; margin:20px 0 16px; max-width:650px; }
.app-feature-pills { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.app-feature-pills span { border:1px solid #ead6c4; background:#fff8f1; color:#6e4a2f; padding:8px 12px; border-radius:999px; font-size:14px; font-weight:800; }
.app-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.store-button { display:inline-flex; align-items:center; gap:11px; background:#151515; color:#fff; padding:10px 16px; border-radius:12px; min-width:190px; transition:transform .18s ease, box-shadow .18s ease; }
.store-button:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.14); }
.store-icon { width:28px; height:28px; flex:0 0 28px; }
.store-button small { display:block; font-size:9px; letter-spacing:.08em; line-height:1.1; }
.store-button strong { display:block; font-size:19px; line-height:1.15; }
.app-policy-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.app-policy-links .button-outline { padding:10px 14px; color:var(--primary); }
.app-policy-links .button-outline:hover { border-color:var(--primary); }
.app-promo-visual { display:flex; justify-content:center; align-items:center; min-height:420px; }
.app-promo-visual img { width:min(260px,100%); border-radius:22px; box-shadow:0 18px 40px rgba(0,0,0,.16); border:1px solid var(--line); }
.app-gallery-wrap { border-top:1px solid var(--line); padding:24px 26px 28px; background:#fafafa; }
.app-gallery-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px; }
.app-gallery-heading h4 { margin:4px 0 0; font-size:24px; }
.app-gallery-heading > a { color:var(--primary); font-weight:800; }
.app-screenshot-gallery { display:grid; grid-auto-flow:column; grid-auto-columns:190px; gap:14px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity; scrollbar-width:thin; }
.app-screenshot-gallery a { scroll-snap-align:start; }
.app-screenshot-gallery img { width:100%; height:auto; aspect-ratio:166/296; object-fit:cover; border-radius:18px; border:1px solid var(--line); box-shadow:0 8px 20px rgba(0,0,0,.08); background:#fff; transition:transform .18s ease, box-shadow .18s ease; }
.app-screenshot-gallery img:hover { transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.13); }
@media (max-width:900px) { .app-showcase-main { grid-template-columns:1fr; } .app-promo-visual { min-height:auto; } }
@media (max-width:600px) { .app-showcase-main { padding:22px; } .app-brand-row { align-items:flex-start; } .app-store-icon { width:72px; height:72px; border-radius:18px; } .app-gallery-heading { align-items:flex-start; display:grid; } .app-screenshot-gallery { grid-auto-columns:160px; } }

/* Per-tool realistic visual system */
.tool-item { overflow:hidden; }
.tool-card-image { display:flex; align-items:center; justify-content:center; height:176px; margin:-20px -20px 18px; background:#fff; border-bottom:1px solid var(--line); }
.tool-card-image img { width:100%; height:100%; object-fit:contain; padding:13px; }
.tool-page-icon { width:150px !important; height:150px !important; object-fit:contain; flex:0 0 auto; background:transparent !important; }
.related-thumb { width:100%; height:128px; object-fit:contain; border-radius:12px; background:#fff; border:1px solid var(--line); margin-bottom:12px; padding:8px; }
.policy-content { color:var(--muted); }
.policy-content h2, .policy-content h3 { color:var(--text); }
.policy-content h2 { margin-bottom:8px; }
.policy-content h3 { margin-top:28px; margin-bottom:8px; }
.policy-content a { color:var(--primary); font-weight:800; overflow-wrap:anywhere; }
.policy-content ul { padding-left:22px; }
@media (max-width:760px){ .tool-card-image{height:158px;} .tool-page-icon{width:120px !important;height:120px !important;} }