@import url('/v03-base.css');

/* Livelier approved visual direction: illustrated, colourful, still professional. */
body{
  background:
    radial-gradient(circle at 10% 8%,rgba(22,137,255,.07),transparent 24%),
    radial-gradient(circle at 92% 18%,rgba(255,178,76,.10),transparent 26%),
    #fbfdff;
}
.topbar{background:rgba(255,255,255,.91);box-shadow:0 8px 28px rgba(18,64,106,.05)}

.v03-hero{
  position:relative;
  min-height:600px;
  padding:58px 42px 52px;
  margin-top:28px;
  border-radius:36px;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,226,168,.62),transparent 30%),
    radial-gradient(circle at 18% 92%,rgba(183,232,255,.58),transparent 30%),
    linear-gradient(135deg,#f7fbff 0%,#ffffff 50%,#fffaf0 100%);
  border:1px solid #dceaf5;
  box-shadow:0 24px 64px rgba(25,75,120,.10);
  overflow:hidden;
}
.v03-hero:after{
  content:"";position:absolute;left:-65px;bottom:-85px;width:210px;height:210px;border-radius:50%;
  background:linear-gradient(135deg,rgba(42,151,255,.16),rgba(111,219,192,.13));filter:blur(2px);pointer-events:none
}
.illustration-stage{
  min-height:430px;
  background-image:
    url('/assets/service-1.webp?v=2'),
    url('/assets/service-2.webp?v=2'),
    url('/assets/service-3.webp?v=2'),
    url('/assets/service-4.webp?v=2'),
    linear-gradient(135deg,#eaf6ff,#fff8e8);
  background-size:50.5% 50.5%,50.5% 50.5%,50.5% 50.5%,50.5% 50.5%,100% 100%;
  background-position:left top,right top,left bottom,right bottom,center;
  background-repeat:no-repeat;
  background-color:#f5fbff;
  border-color:#d7e9f7;
  box-shadow:0 22px 60px rgba(27,71,114,.15);
}
.illustration-stage .hero-logo,.illustration-stage .mini-scene{display:none}

/* Calmer typography: no billboard-sized headings. */
.hero-copy h1{font-size:clamp(2.35rem,3.4vw,3.25rem);line-height:1.04;letter-spacing:-.032em;max-width:660px;margin:.28em 0 .38em}
.section-heading h2,.automation-layout h2,.pricing-layout h2,.contact-layout h2{font-size:clamp(1.85rem,2.55vw,2.35rem);line-height:1.08}
.lead{font-size:1.05rem;line-height:1.58}
.lead-small{font-size:1rem;line-height:1.6}
.eyebrow{font-weight:800;letter-spacing:.01em;color:#0876da}

/* Four services: make the approved illustrated panels the visual anchor. */
.v03-services{align-items:stretch;gap:16px}
.service-card{
  overflow:hidden;
  padding:0 20px 22px;
  border-color:#d7e6f1;
  box-shadow:0 16px 38px rgba(20,69,110,.10);
  transition:transform .18s ease,box-shadow .18s ease;
}
.service-card:hover{transform:translateY(-3px);box-shadow:0 22px 45px rgba(20,69,110,.14)}
.service-blue{background:linear-gradient(180deg,#eaf6ff 0,#f7fbff 52%,#fff 100%)}
.service-mint{background:linear-gradient(180deg,#e8fbf5 0,#f6fffb 52%,#fff 100%)}
.service-amber{background:linear-gradient(180deg,#fff3cf 0,#fffaf0 52%,#fff 100%)}
.service-rose{background:linear-gradient(180deg,#ffe9e9 0,#fff7f7 52%,#fff 100%)}
.service-card .scene{
  height:205px;
  margin:0 -20px 18px;
  border-radius:23px 23px 18px 18px;
  background-size:cover;
  background-repeat:no-repeat;
  border-bottom:1px solid rgba(13,45,79,.08);
}
.service-card .scene span,.service-card .scene i{display:none}
.service-card:nth-child(1) .scene{background-image:url('/assets/service-1.webp?v=2');background-position:center 24%}
.service-card:nth-child(2) .scene{background-image:url('/assets/service-2.webp?v=2');background-position:center 30%}
.service-card:nth-child(3) .scene{background-image:url('/assets/service-3.webp?v=2');background-position:center 30%}
.service-card:nth-child(4) .scene{background-image:url('/assets/service-4.webp?v=2');background-position:center 28%}
.service-card h3{font-size:1.19rem;margin-top:.35rem}
.service-card p{font-size:.96rem;line-height:1.52}
.automation-tag{font-size:.82rem}
.linked-strip{
  background:linear-gradient(90deg,#dff3ff 0%,#e8fbf5 45%,#fff5da 100%);
  color:var(--navy);border:1px solid #c8e3f5;box-shadow:0 12px 30px rgba(20,69,110,.07)
}
.linked-strip p{color:var(--muted)}

/* Alternate coloured surfaces so the page does not flatten into white. */
.automation-section{
  background:
    radial-gradient(circle at 15% 30%,rgba(65,183,255,.16),transparent 28%),
    radial-gradient(circle at 85% 70%,rgba(65,203,164,.15),transparent 30%),
    linear-gradient(135deg,#edf8ff,#effbf7);
}
.automation-flow div{background:rgba(255,255,255,.92);box-shadow:0 10px 26px rgba(22,77,119,.07)}
.automation-flow div:nth-child(2){background:#f4fffb}.automation-flow div:nth-child(3){background:#fff9e9}.automation-flow div:nth-child(4){background:#fff2f2}

#how{padding:64px 36px;margin:34px auto;border-radius:30px;background:linear-gradient(135deg,#fff8e6,#f7fbff);border:1px solid #f1e6cb}
.steps>div{box-shadow:0 12px 28px rgba(19,68,110,.08)}
.steps>div:nth-of-type(1){background:#eef8ff}.steps>div:nth-of-type(2){background:#eefbf7}.steps>div:nth-of-type(3){background:#fff4e6}

#calculator.section-soft{
  background:
    radial-gradient(circle at 12% 22%,rgba(48,165,255,.15),transparent 30%),
    radial-gradient(circle at 88% 78%,rgba(255,183,80,.16),transparent 30%),
    linear-gradient(135deg,#eef8ff,#fff8ea);
}
.calculator-card{box-shadow:0 16px 34px rgba(19,69,111,.08)}
.result-card{background:linear-gradient(145deg,#113f70,#0a2c54)}

.pricing-layout{padding:54px 42px;margin-block:32px;border-radius:32px;background:linear-gradient(135deg,#f5f0ff 0%,#f4fbff 52%,#fff8e6 100%);border:1px solid #e2def2}
.checkout-card{background:linear-gradient(150deg,#123f70,#0b2d55);box-shadow:0 22px 52px rgba(15,54,93,.18)}

#faq.section-soft{background:linear-gradient(135deg,#edf7ff 0%,#f2fbf8 50%,#fff7e8 100%)}
.v03-faq details:nth-child(4n+1){background:#eff7ff}.v03-faq details:nth-child(4n+2){background:#edfbf6}.v03-faq details:nth-child(4n+3){background:#fff7df}.v03-faq details:nth-child(4n){background:#fff0f0}

.contact-layout{padding:52px 42px;margin-block:36px;border-radius:32px;background:linear-gradient(135deg,#eef8ff,#fff8ec 55%,#fff1f5);border:1px solid #e4e8ed;align-items:center}
.contact-mascot{width:220px;max-width:58%;filter:drop-shadow(0 18px 28px rgba(57,37,111,.18))}
.contact-card{box-shadow:0 16px 36px rgba(19,69,111,.08)}
.footer{background:#f4f9fd;border-top:1px solid #dbe8f2}

/* Assistant: use the approved avatar rather than an empty circle. */
.support-launch img{width:84px;height:84px;object-fit:cover;object-position:center 20%;border-radius:50%;border:3px solid #fff;box-shadow:0 10px 32px rgba(78,37,145,.25);background:#f7f0ff}
.support-panel header img{width:44px;height:44px;object-fit:cover;object-position:center 20%;border-radius:50%;background:#fff}
.support-bubble{background:#fff;border-color:#6a27c7;box-shadow:0 14px 34px rgba(80,42,141,.15)}

/* Familiar social sign-in controls with provider marks. */
.social-provider{position:relative;display:flex!important;align-items:center;justify-content:center;gap:12px;min-height:52px;font-weight:700}
.provider-icon{position:absolute;left:18px;width:22px;height:22px;display:grid;place-items:center}
.provider-icon svg{width:22px;height:22px;display:block}.apple-icon{color:#111}

@media(max-width:900px){
  .v03-hero{padding:34px 28px 38px;margin-top:18px}
  .illustration-stage{min-height:390px}
  .service-card .scene{height:220px}
  .pricing-layout,.contact-layout{padding:38px 28px}
}
@media(max-width:620px){
  .v03-hero{padding:28px 18px 30px;border-radius:24px}
  .illustration-stage{min-height:320px}
  .service-card .scene{height:205px}
  .hero-copy h1{font-size:clamp(2.05rem,9.5vw,2.65rem)}
  #how,.pricing-layout,.contact-layout{padding:34px 20px;border-radius:24px}
  .support-launch img{width:66px;height:66px}
}