/* Fonts are served from this site (the "fonts" folder), not from Google. */
@font-face{font-family:"Pacifico";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/pacifico-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:800;font-display:swap;src:url(fonts/playfair-display-latin-800-italic.woff2) format("woff2")}
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bebas-neue-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/caveat-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Abril Fatface";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/abril-fatface-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Lobster";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lobster-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Permanent Marker";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/permanent-marker-latin-400-normal.woff2) format("woff2")}
:root{--teal:#12b5b0;--blue:#2a8cf0;--ink:#16303a;--muted:#5a6f78;--bg:#f5fafb;--card:#fff;--line:#dbe8ec}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--blue)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;color:#1b4b9b;text-decoration:none}
.brand img{width:36px;height:36px;border-radius:9px}
nav a{margin-left:18px;text-decoration:none;color:#1b4b9b;font-size:.95rem}
.hero{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;padding:56px 0 96px;position:relative}
/* A gentle fade from the hero colours into the page background below it. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(to bottom,rgba(245,250,251,0),rgba(245,250,251,.35) 45%,var(--bg));pointer-events:none}
/* The same gentle fade where the white sections meet the off-white ones. */
.sectors,#pricing{position:relative}
.sectors::before,.sectors::after,#pricing::before,#pricing::after{content:"";position:absolute;left:0;right:0;height:44px;pointer-events:none}
.sectors::before,#pricing::before{top:0;background:linear-gradient(to bottom,var(--bg),rgba(255,255,255,0))}
.sectors::after,#pricing::after{bottom:0;background:linear-gradient(to top,var(--bg),rgba(255,255,255,0))}
.hero .wrap{display:flex;gap:40px;align-items:center;flex-wrap:wrap}
.hero h1{font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.15;margin:0 0 14px}
.hero p{font-size:1.1rem;margin:0 0 22px;opacity:.95}
.hero .txt{flex:1 1 340px}
.hero img.art{width:180px;height:180px;border-radius:40px;box-shadow:0 14px 40px rgba(0,0,0,.25)}
.btn{display:inline-block;background:#fff;color:#0a5f8a;font-weight:700;padding:12px 22px;border-radius:12px;text-decoration:none}
.note{font-size:.9rem;opacity:.9;margin-top:10px}
section{padding:48px 0}
h2{font-size:1.6rem;margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 26px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:linear-gradient(90deg,var(--g0),var(--g1));border:0;border-radius:16px;padding:18px;color:#0c3374;box-shadow:0 6px 18px rgba(20,80,120,.14)}
.card h3{margin:0 0 6px;font-size:1.05rem;color:#0c3374}
.card p{margin:0;color:#0c3374;font-size:.92rem;line-height:1.5}
/* Four columns (two rows of four): one continuous fade across the row, light green on the left
   to light blue on the right. The dark blue text stays readable on all of it. */
.card:nth-child(4n+1){--g0:#58d0a0;--g1:#5ec8b8}
.card:nth-child(4n+2){--g0:#5ec8b8;--g1:#64c0d0}
.card:nth-child(4n+3){--g0:#64c0d0;--g1:#6ab8e7}
.card:nth-child(4n){--g0:#6ab8e7;--g1:#70b0ff}
@media(max-width:860px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .card:nth-child(odd){--g0:#58d0a0;--g1:#64c0d0}
  .card:nth-child(even){--g0:#64c0d0;--g1:#70b0ff}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr}
  .card:nth-child(n){--g0:#58d0a0;--g1:#70b0ff}
}
/* Headings and the line beneath them in blue: "Everything you need..." and
   "Made for small businesses". */
#features h2,#features .lead,.sectors h2,.sectors .lead,.how h2,.how .lead,.steps li,#pricing h2,#pricing .lead,#pricing .plan h3,#pricing .price,#pricing .price small,#pricing .plan ul,#contact h2,#contact .lead,.doc h1,.doc h2,.doc h3,.doc p,.doc li{color:#1b4b9b}
/* Sectors: eight equally spaced words, alternating between a high and a low
   lane at slightly different heights, fading from green (left) to blue (right).
   Each word sets its own position (--i), height (--y), colour, font and size. */
.who{position:relative;height:250px;margin-top:6px}
.who span{position:absolute;top:var(--y);left:calc(12.5% + var(--i) * (75% / 7));transform:translateX(-50%);width:max-content;max-width:170px;text-align:center;line-height:1.05;color:var(--c);font-family:var(--f);font-size:var(--s);font-weight:var(--w,400);font-style:var(--st,normal)}
.who span:nth-child(1){--i:0;--y:10px;--c:#0ea66a;--f:"Pacifico",cursive;--s:1.9rem}
.who span:nth-child(2){--i:1;--y:130px;--c:#12a17d;--f:"Playfair Display",Georgia,serif;--s:1.7rem;--w:800;--st:italic}
.who span:nth-child(3){--i:2;--y:24px;--c:#169c90;--f:"Bebas Neue",Impact,sans-serif;--s:2.5rem}
.who span:nth-child(4){--i:3;--y:140px;--c:#1a97a3;--f:"Caveat",cursive;--s:2.3rem;--w:700}
.who span:nth-child(5){--i:4;--y:0;--c:#1e91b5;--f:"Abril Fatface",Georgia,serif;--s:1.55rem}
.who span:nth-child(6){--i:5;--y:122px;--c:#228cc8;--f:"Lobster",cursive;--s:2.1rem}
.who span:nth-child(7){--i:6;--y:28px;--c:#2687db;--f:"Fredoka",system-ui,sans-serif;--s:1.75rem;--w:600}
.who span:nth-child(8){--i:7;--y:148px;--c:#2a82ee;--f:"Permanent Marker",cursive;--s:1.5rem}
/* On narrow screens there is no room for eight columns, so the words flow
   and wrap, still staggered and still fading in order. */
@media(max-width:720px){
  .who{height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:6px 24px;padding-bottom:8px}
  .who span{position:static;transform:none;max-width:none;margin-top:calc(var(--y) / 3)}
}
.steps{counter-reset:s;display:grid;gap:14px;padding:0;list-style:none}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px 16px 60px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;display:grid;place-items:center;font-weight:700}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.plan.pro{border:2px solid var(--blue)}
.price{font-size:2rem;font-weight:800;margin:4px 0 10px}
.price small{font-size:1rem;font-weight:500;color:var(--muted)}
.plan ul{padding-left:20px;margin:0;color:var(--muted)}
.tag{display:inline-block;background:#e6f0fe;color:#1d63c9;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:999px}
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:.92rem}
footer a{margin-right:16px}
.doc{max-width:760px;margin:0 auto;padding:30px 20px 60px}
.doc h1{margin-top:10px}
.doc h2{font-size:1.25rem;margin-top:30px}
header.top{flex-wrap:wrap;gap:8px}
@media(max-width:560px){nav a{margin-left:12px;font-size:.9rem}.hero img.art{width:120px;height:120px;border-radius:28px}}