:root{
  --navy: #1B2544;
  --navy-soft: #2B3A63;
  --amber: #E8A33D;
  --amber-dark: #C77F1F;
  --teal: #2F6F62;
  --paper: #F5F6F8;
  --paper-dim: #EBEDF2;
  --slate: #545B70;
  --white: #FFFFFF;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  background:var(--paper);
  color:var(--navy);
  line-height:1.6;
  font-size:16px;
}
h1,h2,h3{
  font-family:'Space Grotesk', sans-serif;
  color:var(--navy);
  font-weight:600;
  line-height:1.2;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--amber); color:var(--navy);
  padding:10px 16px; z-index:200; font-weight:600;
}
.skip-link:focus{left:16px; top:16px;}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(245,246,248,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(27,37,68,0.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; max-width:1100px; margin:0 auto;
}
.brand{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.3rem;
  color:var(--navy);
}
.nav-links{display:flex; align-items:center; gap:32px; list-style:none;}
.nav-links a{font-size:0.95rem; font-weight:500; color:var(--navy);}
.nav-links a:not(.btn):hover{color:var(--teal);}
.nav-toggle{display:none; background:none; border:none; font-size:1.6rem; color:var(--navy); cursor:pointer;}

@media (max-width:800px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid rgba(27,37,68,0.08);
    max-height:0; overflow:hidden; transition:max-height 0.25s ease;
  }
  .nav-links.open{max-height:320px;}
  .nav-links li{width:100%;}
  .nav-links a{display:block; padding:16px 24px; width:100%; border-bottom:1px solid rgba(27,37,68,0.06);}
  .nav-toggle{display:block;}
}

/* ===== Buttons ===== */
.btn{
  display:inline-block; padding:13px 26px; border-radius:6px;
  font-weight:600; font-size:0.95rem; cursor:pointer; border:1.5px solid transparent;
  transition:transform 0.15s ease, background 0.15s ease;
}
.btn-primary{background:var(--amber); color:var(--navy);}
.btn-primary:hover{background:var(--amber-dark); transform:translateY(-1px);}
.btn-outline{border-color:var(--navy); color:var(--navy);}
.btn-outline:hover{background:rgba(27,37,68,0.06);}
.btn-small{padding:9px 18px; font-size:0.88rem;}

section{padding:88px 0;}
h2{font-size:clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom:10px;}
.section-lead{color:var(--slate); font-size:1.05rem; max-width:52ch; margin-bottom:44px;}

/* ===== Hero ===== */
.hero{padding:70px 0 90px;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
.hero-copy h1{font-size:clamp(2.2rem, 4.6vw, 3.2rem); max-width:16ch; margin-bottom:20px;}
.hero-copy p{color:var(--slate); font-size:1.1rem; max-width:48ch; margin-bottom:32px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:40px;}
.hero-facts{display:flex; gap:36px; list-style:none;}
.hero-facts li{display:flex; flex-direction:column;}
.hero-facts strong{font-family:'Space Grotesk', sans-serif; font-size:1.4rem; color:var(--teal);}
.hero-facts span{font-size:0.85rem; color:var(--slate);}
.hero-visual{background:var(--paper-dim); border-radius:12px; padding:20px;}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1;}
}

/* ===== Services ===== */
.service-list{list-style:none; display:flex; flex-direction:column; gap:0;}
.service-list li{
  display:flex; gap:24px; align-items:flex-start;
  padding:28px 0; border-top:1px solid rgba(27,37,68,0.1);
}
.service-list li:last-child{border-bottom:1px solid rgba(27,37,68,0.1);}
.service-list img{width:40px; height:40px; flex-shrink:0; margin-top:4px;}
.service-list h3{font-size:1.15rem; margin-bottom:6px;}
.service-list p{color:var(--slate); max-width:60ch;}

/* ===== Pricing ===== */
.price-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:stretch; margin-bottom:40px;}
.price-card{
  border:1px solid rgba(27,37,68,0.15); border-radius:10px;
  padding:32px 28px; display:flex; flex-direction:column;
  background:var(--white);
}
.price-card-featured{
  border:2px solid var(--amber);
  background:var(--navy);
  position:relative;
}
.price-card-featured h3, .price-card-featured .price-amount{color:var(--white);}
.price-card-featured .price-note{color:rgba(255,255,255,0.6);}
.price-card-featured ul li{color:rgba(255,255,255,0.85); border-top-color:rgba(255,255,255,0.15);}
.price-badge{
  color:var(--amber); font-weight:600; font-size:0.82rem;
  margin-bottom:10px;
}
.price-card h3{font-size:1.2rem; margin-bottom:10px;}
.price-amount{font-family:'Space Grotesk', sans-serif; font-size:1.6rem; font-weight:700; color:var(--navy);}
.price-note{font-size:0.82rem; color:var(--slate); margin-bottom:20px;}
.price-card ul{list-style:none; flex-grow:1; margin-bottom:24px;}
.price-card ul li{
  font-size:0.92rem; color:var(--slate); padding:10px 0;
  border-top:1px solid rgba(27,37,68,0.08);
}
.price-card ul li:first-child{border-top:none;}
.price-cta{width:100%; text-align:center;}
.price-card-featured .btn-outline{border-color:var(--white); color:var(--white);}
.price-card-featured .btn-outline:hover{background:rgba(255,255,255,0.1);}

.care-plan{
  display:flex; justify-content:space-between; align-items:center; gap:32px;
  flex-wrap:wrap; padding:32px; border-radius:10px;
  background:var(--paper-dim); border:1px dashed rgba(27,37,68,0.25);
}
.care-plan-copy{flex:1; min-width:260px;}
.care-plan-copy h3{font-size:1.1rem; margin-bottom:8px;}
.care-plan-copy h3 span{font-weight:400; color:var(--slate); font-size:0.9rem;}
.care-plan-copy p{color:var(--slate); max-width:52ch;}
.care-plan-price{text-align:right; flex-shrink:0;}
.care-plan-price .price-note{margin-bottom:14px;}

@media (max-width:900px){
  .price-grid{grid-template-columns:1fr;}
  .care-plan{flex-direction:column; align-items:flex-start; text-align:left;}
  .care-plan-price{text-align:left;}
}

/* ===== Work / Case study ===== */
.work{background:var(--navy); color:var(--white);}
.work h2, .work .section-lead{color:var(--white);}
.work .section-lead{color:rgba(255,255,255,0.7);}
.case-study{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
.case-study + .case-study{margin-top:64px; padding-top:64px; border-top:1px solid rgba(255,255,255,0.12);}
.work-status{color:rgba(255,255,255,0.6); font-size:0.95rem;}
.browser-frame{background:var(--white); border-radius:10px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,0.35);}
.browser-bar{
  display:flex; align-items:center; gap:6px; padding:10px 14px;
  background:var(--paper-dim);
}
.browser-bar span{width:9px; height:9px; border-radius:50%; background:rgba(27,37,68,0.25);}
.browser-url{
  margin-left:12px; font-size:0.75rem; color:var(--slate);
  background:var(--white); padding:3px 10px; border-radius:4px;
}
.case-kicker{color:var(--amber); font-weight:600; font-size:0.95rem; margin-bottom:8px;}
.case-copy h3{font-size:1.6rem; color:var(--white); margin-bottom:14px;}
.case-copy p{color:rgba(255,255,255,0.78); margin-bottom:26px;}
.case-stats{display:flex; gap:32px; list-style:none; flex-wrap:wrap;}
.case-stats li{display:flex; flex-direction:column;}
.case-stats strong{font-family:'Space Grotesk', sans-serif; font-size:1.3rem; color:var(--amber);}
.case-stats span{font-size:0.82rem; color:rgba(255,255,255,0.6);}

@media (max-width:860px){
  .case-study{grid-template-columns:1fr;}
}

/* ===== Razorpay demo ===== */
.razorpay-demo{background:var(--paper-dim);}
.razorpay-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
.demo-badge{
  display:inline-block; font-size:0.82rem; font-weight:600; color:var(--teal);
  background:rgba(47,111,98,0.1); padding:5px 12px; border-radius:20px; margin-bottom:16px;
}
.razorpay-copy p{color:var(--slate); margin-bottom:16px; max-width:48ch;}
.test-details{
  font-size:0.85rem; background:var(--white); padding:14px 16px;
  border-radius:6px; border:1px solid rgba(27,37,68,0.1); color:var(--navy);
  line-height:1.7;
}
.razorpay-box{
  background:var(--white); border-radius:10px; padding:32px;
  border:1px solid rgba(27,37,68,0.1); display:flex; flex-direction:column; gap:12px;
}
.razorpay-box label{font-size:0.88rem; font-weight:600; color:var(--navy);}
.razorpay-box input{
  padding:12px 14px; border:1px solid rgba(27,37,68,0.2); border-radius:6px;
  font-family:inherit; font-size:1rem; background:var(--paper); color:var(--navy);
}
.razorpay-box .btn{margin-top:6px;}
#razorpayStatus{min-height:1.2em; font-weight:500;}

@media (max-width:860px){
  .razorpay-grid{grid-template-columns:1fr;}
}

/* ===== Testimonials ===== */
.quote-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
blockquote{border-left:3px solid var(--teal); padding-left:24px;}
blockquote p{font-size:1.1rem; margin-bottom:14px; color:var(--navy);}
blockquote cite{font-size:0.88rem; color:var(--slate); font-style:normal;}
.testimonial-note{margin-top:36px; font-size:0.85rem; color:var(--slate); font-style:italic;}

@media (max-width:700px){
  .quote-grid{grid-template-columns:1fr;}
}

/* ===== Contact ===== */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px;}
.contact-copy p{color:var(--slate); margin-bottom:28px; max-width:40ch;}
.contact-info dt{font-weight:600; font-size:0.85rem; color:var(--slate); margin-top:14px;}
.contact-info dt:first-child{margin-top:0;}
.contact-info dd{font-size:1.05rem;}

form{display:flex; flex-direction:column; gap:14px; background:var(--white); padding:32px; border-radius:10px; border:1px solid rgba(27,37,68,0.1);}
label{font-size:0.88rem; font-weight:600; color:var(--navy);}
input, select, textarea{
  padding:12px 14px; border:1px solid rgba(27,37,68,0.2); border-radius:6px;
  font-family:inherit; font-size:0.98rem; background:var(--paper); color:var(--navy);
}
input:focus, select:focus, textarea:focus{border-color:var(--teal);}
textarea{resize:vertical;}
form .btn{margin-top:6px; align-self:flex-start;}
.form-note{font-size:0.82rem; color:var(--slate);}

@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;}
}

footer{
  background:var(--navy); color:rgba(255,255,255,0.6);
  padding:32px 24px; text-align:center; font-size:0.85rem;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}