/* HRCS India – home page: 360° Home-Buying Protection content (loads after premium.css) */

.compare{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:stretch;max-width:1040px;margin:auto}
.cmp-old,.cmp-new{border-radius:24px;padding:36px}
.cmp-old{background:#fff;border:1px solid var(--line)}
.cmp-old h3{font-size:22px;margin-bottom:18px;color:var(--muted)}
.cmp-old ul{display:grid;gap:14px}
.cmp-old li{display:flex;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.cmp-old li:last-child{border:0;padding-bottom:0}
.cmp-old li span{color:var(--ink)}
.cmp-old li b{text-align:right;color:#B4532A;font-weight:600}
.cmp-old li b small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.cmp-new{background:linear-gradient(150deg,var(--teal-dd),var(--teal-d));color:#D3E8E6}
.cmp-new .eyebrow{color:var(--accent-l)}
.cmp-new h3{color:#fff;font-size:26px}
.cmp-price{font:600 clamp(48px,6vw,68px)/1 var(--serif);color:var(--accent-l);margin:10px 0 16px}
.cmp-tag{font:600 italic 20px var(--serif);color:#fff;margin:14px 0 22px}

.privacy{display:flex;gap:8px;justify-content:center;align-items:center;font-size:14px;margin:16px 0 0!important;color:var(--cream)}
.privacy svg{width:15px;height:15px;flex:none}

.field .err{display:block;color:#B42318;font-size:12.5px;margin-top:4px}

.saved{background:var(--teal-l);color:var(--teal-dd);padding:10px 14px;border-radius:10px;margin:14px 0 0;font-size:14px}

@media (max-width:860px){.compare{grid-template-columns:1fr}.cmp-old,.cmp-new{padding:26px}}

/* 360° section on the restored home page */

.p360-price{background:linear-gradient(150deg,var(--teal-dd),var(--teal-d));color:#D3E8E6;border:0;display:flex;flex-direction:column;justify-content:center}
.p360-price .eyebrow{color:var(--accent-l)}
.p360-price p{color:#D3E8E6!important;margin-bottom:20px}
.p360-price .btn{align-self:flex-start}

/* Big 360° display */
.big360{font:700 clamp(110px,15vw,220px)/.82 var(--serif);letter-spacing:-.04em;background:linear-gradient(120deg,var(--cream) 0%,var(--accent) 45%,var(--cream) 70%,var(--teal-l) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0 14px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}
.big360 sup{font-size:.42em;vertical-align:top;position:relative;top:.18em;margin-left:.04em}
.slide-360 h2{font-size:clamp(30px,4.2vw,52px)}
.slide-360 .slide-txt{max-width:760px}

.sec-360{max-width:860px}
.sec-360 h2{font-size:clamp(32px,4.4vw,56px)!important}
@media (max-width:560px){.big360{font-size:96px}}

/* ===== 360° orbit: what's included (professional) ===== */
.orbit{--S:min(600px,92vw);--R:calc(var(--S) * .39);position:relative;width:var(--S);height:var(--S);margin:10px auto 70px}
.orbit-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit-svg circle{fill:none}
.o-glow{stroke:rgba(31,115,116,.05);stroke-width:30}
.o-ring{stroke:var(--teal-d);stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:300px 300px;opacity:.75}
.o-dash{stroke:rgba(31,115,116,.22);stroke-width:1;stroke-dasharray:1 7;opacity:0}
.o-inner{stroke:rgba(31,115,116,.12);stroke-width:1}
.o-dot{fill:var(--hl);opacity:0}
.o-dot{r:5px}
.o-spin{transform-origin:300px 300px}
.orbit-core{position:absolute;left:50%;top:50%;width:calc(var(--S) * .42);height:calc(var(--S) * .42);transform:translate(-50%,-50%);opacity:0;border-radius:50%;background:var(--teal-dd);box-shadow:0 24px 60px -24px rgba(14,59,61,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#D3E8E6;border:1px solid rgba(249,247,207,.35)}
.orbit-core b{font:600 calc(var(--S) * .14)/.9 var(--serif);color:var(--accent-l);letter-spacing:-.03em}
.orbit-core b sup{font-size:.42em;vertical-align:top;position:relative;top:.15em}
.orbit-core span{font:600 calc(var(--S) * .019)/1.3 'Poppins',sans-serif;letter-spacing:.18em;text-transform:uppercase;margin:8px 12% 6px;color:#BFD8D5}
.orbit-core strong{font:600 calc(var(--S) * .056)/1 var(--serif);color:#fff}
.orbit-node{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translate(var(--R)) rotate(calc(var(--a) * -1))}
.on-in{position:absolute;left:0;top:0;transform:translate(-50%,-50%);opacity:0;display:flex;flex-direction:column;align-items:center;gap:10px;width:clamp(100px,22vw,160px);text-align:center}
.on-ic{width:clamp(48px,10vw,66px);height:clamp(48px,10vw,66px);border-radius:50%;background:#fff;color:var(--teal-d);display:grid;place-items:center;border:1px solid rgba(31,115,116,.25);box-shadow:0 10px 26px -14px rgba(14,59,61,.45);transition:background .35s,color .35s,border-color .35s}
.on-ic svg{width:44%;height:44%}
.on-t{font:600 clamp(11px,1.8vw,13.5px)/1.3 'Poppins',sans-serif;color:var(--teal-dd);letter-spacing:.01em}
.on-t i{display:block;font:500 11px/1 'Inter',sans-serif;letter-spacing:.16em;color:var(--accent);font-style:normal;margin-bottom:4px}
.orbit-node:hover .on-ic,.orbit-node:focus-visible .on-ic{background:var(--teal-d);color:#fff;border-color:var(--teal-d)}
.p360-on{border-color:var(--hl)!important;box-shadow:0 0 0 2px var(--hl),var(--shadow-lg)!important}
#protection-360 .card .ic svg{width:28px;height:28px}

/* play once in view: the ring fills clockwise from the top (3.5s), and each service
   lights up the moment the fill reaches it (delays set inline: .3s, 1s, 1.7s, 2.4s, 3.1s) */
.o-glow{stroke:rgba(31,115,116,.10);stroke-width:8}
.o-ring{stroke:url(#orbG);stroke-width:6;opacity:1}
.o-dash{display:none}
.o-dot{r:7px;filter:drop-shadow(0 0 6px rgba(53,153,153,.8))}
.orbit.play .o-ring{animation:oDraw 3.5s linear .3s forwards}
.orbit.play .o-dot{animation:oFade .3s ease .3s forwards,oFadeOut .5s ease 3.8s forwards}
.orbit.play .o-spin{animation:oSpin 3.5s linear .3s forwards}
.orbit.play .orbit-core{animation:oCore .9s cubic-bezier(.16,1,.3,1) .1s forwards}
.orbit.play .on-in{animation:oNode .6s cubic-bezier(.16,1,.3,1) var(--d) forwards}
.orbit.play .on-ic{animation:oLit .5s ease var(--d) forwards}
@keyframes oDraw{to{stroke-dashoffset:0}}
@keyframes oFade{to{opacity:1}}
@keyframes oFadeOut{to{opacity:0}}
@keyframes oSpin{to{transform:rotate(360deg)}}
@keyframes oCore{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes oNode{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes oLit{from{background:#fff;color:var(--teal-d)}to{background:var(--teal-d);color:#fff;border-color:var(--teal-d);box-shadow:0 0 0 5px rgba(53,153,153,.25),0 12px 28px -12px rgba(14,59,61,.6)}}
@media (max-width:560px){.orbit{--R:calc(var(--S) * .37)}.on-t i{font-size:10px}}
@media (prefers-reduced-motion:reduce){.orbit .o-ring{stroke-dashoffset:0}.orbit .o-dash,.orbit .o-dot,.orbit .orbit-core,.orbit .on-in{opacity:1;animation:none!important}}

/* ===== 360° banner slide entrance ===== */
.big360-wrap{position:relative;display:block;width:max-content;padding:6px 34px 6px 10px;margin:4px 0 10px}
.b360-ring{position:absolute;left:-6%;top:8%;width:112%;height:88%;transform:rotate(-6deg);overflow:visible;pointer-events:none}
.b360-ring ellipse{fill:none;stroke:rgba(249,247,207,.6);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100}
.slide-360 .big360{margin:0;background-size:220% 100%;background-image:linear-gradient(110deg,var(--cream) 0%,var(--accent) 30%,#fff 45%,var(--accent) 60%,var(--teal-l) 100%)}
.b360-n{display:inline-block;min-width:2.15ch;text-align:left;font-variant-numeric:tabular-nums}
.s360-chips{display:flex;flex-wrap:wrap;gap:8px;margin:-12px 0 26px}
.s360-chips span{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(249,247,207,.35);color:#F2EBD6;font:600 13px/1 'Poppins',sans-serif;backdrop-filter:blur(6px);opacity:0;transform:translateY(12px)}
.s360-chips svg{width:15px;height:15px;color:var(--accent-l)}
.slide-360.s360-go .b360-ring ellipse{animation:b360Ring 1.6s cubic-bezier(.65,0,.35,1) .2s forwards}
.slide-360.s360-go .big360{animation:b360Shine 4.5s ease-in-out 1.6s infinite}
.slide-360.s360-go .s360-chips span{animation:b360Chip .6s cubic-bezier(.16,1,.3,1) calc(1s + var(--i) * .14s) forwards}
.slide-360.s360-go .s360-price{animation:b360Glow 1.6s ease 1.9s 1}
@keyframes b360Ring{to{stroke-dashoffset:0}}
@keyframes b360Shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes b360Chip{to{opacity:1;transform:none}}
@keyframes b360Glow{0%,100%{text-shadow:none}40%{text-shadow:0 0 18px rgba(249,247,207,.85),0 0 40px rgba(53,153,153,.5)}}
@media (max-width:560px){.s360-chips{margin-top:-6px}.s360-chips span{font-size:11.5px;padding:6px 10px}.big360-wrap{padding-right:24px}}
@media (prefers-reduced-motion:reduce){.b360-ring ellipse{stroke-dashoffset:0}.s360-chips span{opacity:1;transform:none}.slide-360 .big360{animation:none!important}}

/* ===== 360° section: sliding entrances (js/p360-anim.js) ===== */
.p360-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:860px){.p360-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.p360-grid{grid-template-columns:1fr}}
.p360-js #protection-360 [data-slide]:not(.p360-in){opacity:0}
.p360-js #protection-360 [data-slide="left"]{--fx:-110px;--fy:0px}
.p360-js #protection-360 [data-slide="right"]{--fx:110px;--fy:0px}
.p360-js #protection-360 [data-slide="up"]{--fx:0px;--fy:90px}
.p360-js #protection-360 .cmp-old li[data-slide]{--fx:-50px}
.p360-js #protection-360 [data-slide].p360-in{animation:p360Slide .95s cubic-bezier(.16,1,.3,1) var(--dl,0s) backwards}
@keyframes p360Slide{from{opacity:0;transform:translate(var(--fx),var(--fy))}to{opacity:1;transform:none}}
/* the price inside the ₹25,000 box rises in after the box arrives */
.p360-js #protection-360 .cmp-new.p360-in .cmp-price,.p360-js #protection-360 .p360-price.p360-in .cmp-price{animation:p360Price .8s cubic-bezier(.16,1,.3,1) calc(var(--dl,0s) + .45s) backwards}
@keyframes p360Price{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}
@media (max-width:560px){.p360-js #protection-360 [data-slide="left"],.p360-js #protection-360 [data-slide="right"]{--fx:0px;--fy:60px}}
.p360-js #protection-360 [data-slide]{transition-property:transform,box-shadow,border-color,background,color}
/* 360 number: full-height (lining) figures and room for the accent fill so no part of the digits is clipped */
.big360,.orbit-core b{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;line-height:1.05;padding:.06em .02em .1em}
.slide-360 .big360 .b360-n{line-height:inherit}
.slide-360 .big360{font-size:clamp(96px,12vw,172px);line-height:1}
.slide-360 .big360-wrap{margin:0 0 4px}
.slide-360 .slide-tag{margin-bottom:10px}
.slide-360 h2{margin-bottom:14px}
.slide-360 .slide-txt p{margin-bottom:22px}
.slide-360{padding-bottom:84px}

/* ===== 360° slide: animated background showing every service + ring ===== */
.slide-360 .s360-bgs{transform:none!important;transition:none!important;background:#0b2f31}
.s360-bgs i{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.12);transition:opacity 1s ease,transform 6s linear}
.s360-bgs i.on{opacity:1;transform:scale(1)}
.slide-360::after{background:linear-gradient(95deg,rgba(6,30,32,.94) 0%,rgba(10,50,52,.82) 42%,rgba(10,50,52,.55) 70%,rgba(10,50,52,.7) 100%)}
.s360-orb{position:absolute;z-index:3;right:max(5vw,48px);top:50%;width:min(34vw,430px);aspect-ratio:1;transform:translateY(-54%)}
.s360-orb-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.s360-orb-ring circle{fill:none}
.s360-orb-ring .t{stroke:rgba(249,247,207,.22);stroke-width:1.5}
.s360-orb-ring .p{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.15s linear;filter:drop-shadow(0 0 6px rgba(53,153,153,.6))}
.s360-node{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;display:grid;place-items:center;color:var(--accent-l);background:rgba(6,30,32,.75);border:1px solid rgba(249,247,207,.35);backdrop-filter:blur(6px);transform:rotate(var(--a)) translate(calc(min(34vw,430px) * .44)) rotate(calc(var(--a) * -1)) scale(.86);transition:background .5s,color .5s,border-color .5s,box-shadow .5s,transform .6s cubic-bezier(.16,1,.3,1)}
.s360-node svg{width:26px;height:26px}
.s360-node.done{background:rgba(31,115,116,.9);color:#fff;border-color:rgba(249,247,207,.6)}
.s360-node.on{background:var(--hl);color:#fff;border-color:#fff;box-shadow:0 0 0 8px rgba(53,153,153,.22),0 16px 34px -10px rgba(0,0,0,.6);transform:rotate(var(--a)) translate(calc(min(34vw,430px) * .44)) rotate(calc(var(--a) * -1)) scale(1.08)}
.s360-orb-core{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(31,115,116,.85),rgba(6,30,32,.92) 70%);border:1px solid rgba(249,247,207,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 8%;backdrop-filter:blur(4px)}
.s360-orb-core b{font:600 clamp(40px,4.4vw,64px)/1.05 var(--serif);color:var(--accent-l);font-variant-numeric:lining-nums}
.s360-orb-label{position:relative;display:block;width:100%;height:2.8em;margin:6px 0 4px}
.s360-orb-label em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 clamp(12px,1.1vw,15px)/1.3 'Poppins',sans-serif;font-style:normal;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.s360-orb-label em.on{opacity:1;transform:none}
.s360-orb-core small{font:500 12px/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#BFD8D5}
@media (max-width:1100px){.s360-orb{display:none}.slide-360::after{background:linear-gradient(95deg,rgba(6,30,32,.94),rgba(10,50,52,.7))}}
@media (prefers-reduced-motion:reduce){.s360-bgs i{transition:none}.s360-orb-ring .p{transition:none}}
@media (min-width:1101px){.slide-360 .slide-txt{max-width:min(760px,56vw)}}

/* Orbit labels sit outside the ring, beside their icon, so the ring never runs through the words.
   Wide screens: each label points away from the centre (top label above, right-hand labels to the
   right, left-hand labels to the left). */
@media (min-width:900px){
  .orbit{--lab:calc(clamp(48px,10vw,66px) / 2 + 14px)}
  .on-in{width:auto}
  .on-t{position:absolute;width:150px;left:calc(50% + cos(var(--a)) * var(--lab));top:calc(50% + sin(var(--a)) * var(--lab));transform:translate(calc(-50% + cos(var(--a)) * 50%),calc(-50% + sin(var(--a)) * 50%))}
  .orbit-node[data-card="p360-2"] .on-t,.orbit-node[data-card="p360-3"] .on-t{text-align:left}
  .orbit-node[data-card="p360-4"] .on-t,.orbit-node[data-card="p360-5"] .on-t{text-align:right}
}
/* Narrower screens have no room beside the ring: the label keeps its place under the icon on a
   background-coloured tag, so the ring passes behind it instead of through the letters */
@media (max-width:899px){
  .on-t{position:relative;z-index:1;background:var(--cream-l);padding:4px 8px;border-radius:10px}
}