/* "Software house" layout style — solid navy header, light hero with illustration,
   pill buttons, soft shadow cards. Layered on theme.css; colours come from a variant file. */
:root{ --display:'Poppins','Inter',sans-serif; --body:'Poppins','Inter',sans-serif; --mono:'Poppins','Inter',sans-serif;
  --hero-bg:#F3F5FA; --card-shadow:0 12px 34px -12px rgba(20,30,80,.14); --radius:12px; }
body{font-size:15.5px;}
h1,h2,h3,h4{font-family:var(--display); letter-spacing:-0.01em; color:var(--navy);}
h2{font-weight:700;}

/* top bar + header: one solid dark band */
.topbar{background:var(--hdr-deep); border-bottom:1px solid rgba(255,255,255,.06);}
.topbar a,.topbar{color:#C3CAE0;} .ti{color:var(--accent);}
header{background:var(--hdr); border-bottom:none; box-shadow:0 6px 24px -10px rgba(0,0,0,.35); backdrop-filter:none;}
nav.wrap{height:78px;}
.brand img{background:#fff; padding:6px 10px; border-radius:8px; height:44px !important; box-sizing:content-box;}
.navlinks{gap:2rem;}
.navlinks > li > a{color:#fff; text-transform:uppercase; font-size:.8rem; font-weight:600; letter-spacing:.06em;}
.navlinks > li > a::after{background:var(--accent);}
.navlinks > li > a:hover{color:#fff;}
.dropdown a{text-transform:none; letter-spacing:0;}
.nav-phone{color:#fff;} .nav-phone > div span{color:#AEB7D2 !important;}
.nav-phone .ic{background:rgba(255,255,255,.1);} .nav-phone .ic .ti{color:#fff;}
.menu-btn svg path{stroke:#fff;}
.mobile-nav{background:var(--hdr);} .mobile-nav a{color:#fff; border-bottom-color:rgba(255,255,255,.08);}

/* buttons: rounded pills, uppercase */
.btn{border-radius:999px; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; font-weight:600; padding:.95rem 1.9rem;}
.btn-sm{padding:.75rem 1.5rem; font-size:.76rem;}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 10px 22px -10px var(--accent-glow);}
.btn-primary:hover{background:var(--accent-dark); box-shadow:0 14px 26px -10px var(--accent-glow); transform:translateY(-1px);}

/* hero: light background, navy text, illustration on the right */
.hero{background:var(--hero-bg); color:var(--navy); min-height:620px;}
.hero-bg-shape{background:none;}
.hero-bg-shape::after{background-image:none; -webkit-mask-image:none; mask-image:none;}
.hero-bg-shape::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70' fill='none' stroke='%23B9C0D8' stroke-width='1.3'%3E%3Cpath d='M35 6 60 20v30L35 64 10 50V20z'/%3E%3Cpath d='M10 20l25 14 25-14M35 34v30'/%3E%3C/svg%3E") no-repeat 4% 14% / 62px,
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70' fill='none' stroke='%23C9CFE2' stroke-width='1.3'%3E%3Cpath d='M35 6 60 20v30L35 64 10 50V20z'/%3E%3Cpath d='M10 20l25 14 25-14M35 34v30'/%3E%3C/svg%3E") no-repeat 46% 8% / 52px,
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60'%3E%3Cg fill='%23C3C9DD'%3E%3Ccircle cx='4' cy='4' r='2.4'/%3E%3Ccircle cx='20' cy='4' r='2.4'/%3E%3Ccircle cx='36' cy='4' r='2.4'/%3E%3Ccircle cx='52' cy='4' r='2.4'/%3E%3Ccircle cx='4' cy='20' r='2.4'/%3E%3Ccircle cx='20' cy='20' r='2.4'/%3E%3Ccircle cx='36' cy='20' r='2.4'/%3E%3Ccircle cx='52' cy='20' r='2.4'/%3E%3Ccircle cx='4' cy='36' r='2.4'/%3E%3Ccircle cx='20' cy='36' r='2.4'/%3E%3Ccircle cx='36' cy='36' r='2.4'/%3E%3Ccircle cx='52' cy='36' r='2.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat 3% 62% / 80px,
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cellipse cx='30' cy='20' rx='24' ry='14' fill='none' stroke='%23C9D0E6' stroke-width='7'/%3E%3C/svg%3E") no-repeat 82% 6% / 58px,
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cellipse cx='30' cy='20' rx='24' ry='14' fill='none' stroke='%23D3D8EA' stroke-width='7'/%3E%3C/svg%3E") no-repeat 8% 92% / 50px;}
.slide h1, .slide .slide-title{color:var(--navy); font-weight:700; letter-spacing:-0.015em;}
.slide p.lead{color:#4A5370;}
.slide .tag{color:var(--accent-dark); background:var(--accent-tint); border:none; border-radius:999px; padding:.42rem 1rem; letter-spacing:.08em;}
.hero .btn-outline{color:var(--navy); border-color:var(--navy); border-width:1.5px;}
.hero .btn-outline:hover{background:var(--navy); color:#fff;}
.hero-visual{background:var(--ill) no-repeat center / contain; border:none; box-shadow:none; min-height:430px; padding:0;}
.hero-visual > *{visibility:hidden;}
.slider-controls button{background:#C6CCDF;} .slider-controls button.active{background:var(--accent);}
.slide-arrow{background:#fff; border:1px solid #E1E5EF; color:var(--navy); box-shadow:var(--card-shadow);}
.slide-arrow:hover{background:var(--accent); color:#fff; border-color:var(--accent);}
@media (max-width:900px){.hero-visual{min-height:300px;}}

/* strip under hero */
.usp{background:#fff; box-shadow:var(--card-shadow); position:relative; z-index:2;}
.usp-grid b{color:var(--navy);}

/* section labels & heads */
.eyebrow{color:var(--accent); letter-spacing:.12em;} .eyebrow::before{background:var(--accent);}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);}

/* cards: borderless, soft shadow */
.svc-card,.product-box,.dept-group,.test-card,.price-card,.blog-card,.rel-grid a,.feat,.pain-card,.client-card,.intro-visual{border:1px solid #EEF0F6; box-shadow:var(--card-shadow); border-radius:var(--radius);}
.svc-card:hover{border-color:transparent; box-shadow:0 22px 44px -16px rgba(20,30,80,.22);}
.svc-icon{background:var(--accent-tint); color:var(--accent); border-radius:50%; width:58px; height:58px;}
.svc-card .more{color:var(--accent); text-transform:uppercase; font-size:.76rem; letter-spacing:.06em;}
.product-thumb{background:linear-gradient(135deg,var(--hdr),var(--hdr-soft)) !important;}
.product-thumb::after{background:var(--accent);}
.dept-group h3{color:var(--navy);}
.process-step::after{border-color:var(--accent);} .process-step .idx{color:var(--accent);}

/* stats + dark bands use the header colour */
.stats,.compare-card.new,.price-card.featured{background:var(--hdr);}
.price-card.featured::before{background:var(--accent);}
.compare-card.new li .ico{color:var(--accent);}
.blog-thumb{background:linear-gradient(135deg,var(--hdr),var(--hdr-soft));}
.blog-date{background:var(--accent); border:none;}

/* inner pages: light hero with illustration */
.d-hero{background:var(--hero-bg); color:var(--navy);}
.d-hero::before{background:var(--ill) no-repeat right 4% center / 400px; -webkit-mask-image:none; mask-image:none; opacity:1;}
@media (max-width:1100px){.d-hero::before{opacity:.12;}}
.d-hero h1{color:var(--navy); font-weight:700;} .d-hero p.lead{color:#4A5370;}
.d-hero .tag{color:var(--accent-dark); background:var(--accent-tint); border:none; border-radius:999px;}
.crumbs{color:#7A839C;} .crumbs a{color:#4A5370;} .crumbs a:hover{color:var(--accent);}
.d-hero .btn-outline{color:var(--navy); border-color:var(--navy);}
.d-hero .btn-outline:hover{background:var(--navy); color:#fff;}

/* CTA band + contact */
.cta-band,.callback{background:var(--hdr);}
.cta-band h2,.callback h2{color:#fff;}
footer{background:var(--hdr-deep);}
footer h5{color:#fff;}
.back-top{background:var(--accent);}

/* Pricing: billing switch + plan cards */
.billing-switch{display:flex; width:max-content; max-width:100%; margin:-1.4rem auto 3rem; background:#fff; border:1px solid #E3E7F1; border-radius:999px; padding:6px; box-shadow:var(--card-shadow); gap:4px;}
.billing-switch button{font-family:var(--body); font-weight:600; font-size:.9rem; color:var(--navy); background:none; border:none; border-radius:999px; padding:.7rem 1.5rem; cursor:pointer; display:flex; align-items:center; gap:.5rem; transition:background .18s, color .18s;}
.billing-switch button:hover{background:var(--hero-bg);}
.billing-switch button.active{background:var(--hdr); color:#fff;}
.billing-switch .save{font-size:.68rem; font-weight:700; background:var(--accent); color:#1F1300; padding:.2rem .55rem; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;}
.price-card{text-align:left; padding:2.4rem 2.2rem;}
.price-card h3{margin:.7rem 0 .2rem; font-size:1.35rem;}
.price-card .plan-sub{color:var(--ink-soft); font-size:.88rem; margin:0 0 1.3rem;}
.price-card .price{font-family:var(--display); font-weight:700; font-size:2.3rem; line-height:1.1; letter-spacing:-0.02em; color:var(--navy); margin:0;}
.price-card .price-per{font-size:.85rem; color:var(--ink-mute); margin:.2rem 0 .9rem;}
.price-card .price-note{font-size:.8rem; font-weight:600; color:var(--accent-dark); background:var(--accent-tint); display:inline-block; padding:.35rem .75rem; border-radius:6px; margin:0 0 1.4rem;}
.price-card ul{margin-bottom:1.8rem;}
.price-card li{display:flex; gap:.6rem; align-items:flex-start; border-top:none; padding:.42rem 0;}
.price-card li::before{content:""; flex:0 0 18px; height:18px; margin-top:2px; border-radius:50%; background:var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2C6B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat;}
.price-card .btn{width:100%; justify-content:center;}
.price-card.featured .price,.price-card.featured h3{color:#fff;}
.price-card.featured .plan-sub,.price-card.featured .price-per{color:#A9B9DA;}
.price-card.featured .price-note{background:rgba(255,255,255,.1); color:#FFD27A;}
.price-card.featured li{color:#E3E9F6;}
.price-card.featured li::before{background-color:var(--accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1300' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");}
.price-card.featured .tag{color:var(--accent);}
.price-foot{text-align:center; color:var(--ink-soft); font-size:.9rem; max-width:70ch; margin:2.4rem auto 0;}
.price-foot a{color:var(--accent-dark); font-weight:600;}
@media (max-width:560px){.billing-switch button{padding:.6rem .9rem; font-size:.82rem;} .billing-switch .save{display:none;}}
.price-card .price-note{color:var(--navy);}
.price-card.featured li{border-top:none;}
.price-foot a{color:var(--navy);}