/* IziCost website — same family as izicamera.com: light base, one accent colour, pill buttons,
   generous responsive padding, no text sitting on photos.

   Security by construction: this site loads nothing from anywhere else and runs NO JavaScript at
   all. No CDNs, no web fonts, no analytics, no scripts. It therefore cannot track anybody and has
   nothing to leak. (izicamera.com needs scripts for its web viewer; IziCost's site does not, so the
   two languages are separate pages rather than a toggle — better for search engines too.) */

:root {
  --ink: #141715;
  --grey: #5d6560;
  --grey-3: #68716c;   /* 5.0:1 on white, 4.7:1 on the cream hero — WCAG AA */
  --green: #0B6E4F;
  --green-dark: #08553D;
  --fresh: #1E9E5A;
  --warm: #B5542F;
  --cream: #f3f7f4;
  --soft: #f7f8f7;
  --border: #e6eae7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; }
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: clip;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--fresh); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(24px, 4.5vw, 56px); }

/* The header is sticky, so a jump to #how would otherwise put the heading behind it. */
section[id] { scroll-margin-top: 84px; }
@media (max-width: 560px) { section[id] { scroll-margin-top: 178px; } }

/* ---------- Buttons ---------- */
.btn, .cta-btn {
  display: inline-block; font-weight: 700; border-radius: 45px;
  padding: 12px 26px; font-size: 15.5px; cursor: pointer;
}
.btn.solid, .cta-btn { background: var(--green); color: #fff; }
.btn.solid:hover, .cta-btn:hover { background: var(--green-dark); }
.btn.ghost { border: 2px solid var(--ink); color: var(--ink); padding: 10px 24px; }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.light { background: #fff; color: var(--green); }
.btn.outline-light { border: 2px solid rgba(255,255,255,.6); color: #fff; padding: 10px 24px; }
.btn.outline-light:hover { background: #fff; color: var(--green); }
.btn.big { padding: 16px 38px; font-size: 17px; }

/* Plain text, not a recreated Play badge: Google's brand rules forbid redrawing their logo, and there is no
   official "coming soon" badge. The real one goes here the day the app is live. */
.soon {
  display: inline-block; margin-top: 24px; border: 1.5px solid var(--border); background: #fff;
  border-radius: 999px; padding: 9px 18px; font-size: 14.5px; font-weight: 600; color: var(--grey);
}

/* ---------- Header ---------- */
header { position: sticky; top: 0; background: #fff; z-index: 50; border-bottom: 1px solid var(--border); }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px clamp(16px, 4vw, 24px); max-width: 1280px; margin: 0 auto; flex-wrap: wrap;
}
.logo { font-size: 22px; font-weight: 700; letter-spacing: -.4px; display: flex; align-items: center; gap: 10px; }
.logo img { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; }
.logo .wm { display: flex; flex-direction: column; line-height: 1; }
.logo .izi { color: var(--green); }
.logo .slogan {
  font-size: 8px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--grey-3); margin-top: 3px;
}
.links { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); flex-wrap: wrap; }
.links a { font-size: 15px; color: var(--grey); font-weight: 500; }
.links a:hover { color: var(--ink); }
.links a.lang {
  border: 1.5px solid var(--border); border-radius: 999px; padding: 4px 11px;
  font-size: 13px; font-weight: 700; color: var(--green);
}
.links a.lang:hover { border-color: var(--green); }
.links a.cta-btn { color: #fff; font-weight: 700; }

/* ---------- Hero ---------- */
.hero { background: var(--cream); padding: clamp(40px, 7vw, 76px) 0; }
.hero .inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 15px 7px 11px; font-size: 13.5px; color: var(--grey); margin-bottom: 20px;
}
.kicker .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fresh); flex-shrink: 0; }
h1 { font-size: clamp(34px, 5.4vw, 54px); line-height: 1.08; letter-spacing: -1.4px; font-weight: 800; }
.hero .sub { font-size: clamp(17px, 2vw, 20px); color: var(--grey); margin-top: 18px; max-width: 34ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero .note { margin-top: 14px; font-size: 14px; color: var(--grey-3); }
.band .note { margin-top: 16px; font-size: 14px; color: var(--grey-3); }
.hero-visual { display: flex; justify-content: center; }
.hero-visual img { width: min(260px, 70vw); height: auto; border-radius: 46px; box-shadow: 0 22px 60px rgba(11,110,79,.22); }

/* ---------- Sections ---------- */
section.band { padding: clamp(44px, 6vw, 78px) 0; }
section.band.soft { background: var(--soft); }
.head { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 38px); }
h2 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; letter-spacing: -.9px; font-weight: 800; }
.head p { color: var(--grey); margin-top: 12px; font-size: 17.5px; }
h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
section.band:not(.soft) .card { background: var(--soft); border-color: transparent; }
.card p { color: var(--grey); font-size: 15.5px; }
.ico {
  width: 42px; height: 42px; border-radius: 12px; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 14px;
}

/* numbered steps */
ol.steps { counter-reset: s; list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
ol.steps li { counter-increment: s; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
ol.steps li::before {
  content: counter(s); display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff;
  font-weight: 800; font-size: 16px; margin-bottom: 14px;
}
ol.steps strong { display: block; font-size: 18px; margin-bottom: 6px; }
ol.steps span { color: var(--grey); font-size: 15.5px; }

/* ---------- Privacy band ---------- */
.privacy-band { background: var(--ink); color: #eef3f0; }
.privacy-band h2 { color: #fff; }
.privacy-band .head p { color: #b3bdb7; }
.privacy-band .plist { list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.privacy-band .plist li { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 20px; }
.privacy-band .plist strong { display: block; margin-bottom: 5px; color: #fff; }
.privacy-band .plist span { color: #b3bdb7; font-size: 15.5px; }
.privacy-band .cta-row { margin-top: 30px; }

/* ---------- Legal pages ---------- */
.legal { padding: clamp(34px, 5vw, 60px) 0 20px; }
.legal h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px; }
.legal .updated { color: var(--grey-3); font-size: 14.5px; margin-bottom: 30px; }
.legal h2 { font-size: 21px; letter-spacing: -.3px; margin: 30px 0 8px; }
.legal p, .legal li { color: #2b312d; margin-bottom: 11px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal .box { background: var(--soft); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; margin: 22px 0; }
.legal .box p:last-child, .legal p:last-child { margin-bottom: 0; }
.legal a { color: var(--green); text-decoration: underline; }

/* ---------- Footer ---------- */
footer { background: var(--soft); border-top: 1px solid var(--border); padding: clamp(34px, 4vw, 52px) 0 30px; }
.foot-grid { display: grid; gap: 28px; grid-template-columns: 1.4fr 1fr 1fr; }
.foot-grid p { color: var(--grey); font-size: 15px; margin-top: 12px; max-width: 34ch; }
.foot-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--grey-3); margin-bottom: 12px; }
.foot-grid a { display: block; color: var(--grey); font-size: 15px; margin-bottom: 8px; }
/* ...but the footer's logo is a link too, and must stay a logo. */
.foot-grid .logo { display: flex; color: var(--ink); font-size: 22px; margin-bottom: 0; }
.foot-grid a:hover { color: var(--green); }
.foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  border-top: 1px solid var(--border); margin-top: 30px; padding-top: 20px;
  color: var(--grey-3); font-size: 14px;
}

@media (max-width: 860px) {
  .hero .inner { grid-template-columns: 1fr; text-align: center; }
  .hero .sub { margin-left: auto; margin-right: auto; }
  .cta-row { justify-content: center; }
  .kicker { margin-left: auto; margin-right: auto; }
  .hero-visual { order: -1; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .nav { gap: 12px; }
  .links { width: 100%; justify-content: center; }
  .foot-grid { grid-template-columns: 1fr; }
  .logo .slogan { display: none; }
}


/* ---------- 404 ---------- */
.err404 { background: var(--cream); display: grid; place-items: center; min-height: 100vh; text-align: center; }
.err404 .box { padding: 40px 24px; max-width: 34rem; }
.err404 .code { font-size: 72px; font-weight: 800; letter-spacing: -3px; line-height: 1; }
.err404 .code .izi { color: var(--green); }
.err404 h1 { font-size: 26px; margin: 14px 0 0; letter-spacing: -.5px; }
.err404 p { color: var(--grey); margin: 12px 0 28px; }
.err404 p .en { color: var(--grey-3); }
.err404 a { display: inline-block; background: var(--green); color: #fff; font-weight: 700; padding: 13px 28px; border-radius: 999px; }
.err404 a:hover { background: var(--green-dark); }
.err404 small { display: block; margin-top: 20px; color: var(--grey-3); }