/* Decorative styles for homepage: style-band + floating shapes
   Includes: half-circles, floating rects, dots, rings, rotated squares, crosses, triangles.
*/
:root{
    /* New decorative palette provided by user */
    --decor-1: #dc485f; /* reddish */
    --decor-2: #2A1540; /* deep purple */
    --decor-3: #917cb1; /* light purple */
    --decor-4: #e16f38; /* orange */
    --decor-5: #49a2c6; /* blue */
    --decor-6: #49a573; /* green */
    --decor-7: #3e3f3d; /* dark neutral */
}

/* Top purple band with orange half-circles */
.style-band{
    position:absolute;left:0;right:0;top:0;height:140px;background: linear-gradient(180deg,var(--brand) 0%, #3f2a5a 100%);z-index:0;pointer-events:none;overflow:visible
}
.style-band .half-circle{position:absolute;width:220px;height:110px;border-radius:110px 110px 0 0;background:var(--decor-4);box-shadow:0 6px 18px rgba(0,0,0,0.06);transform:translateY(-30%)}
.style-band .half-1{left:6%;top:54%}
.style-band .half-2{right:10%;top:62%;width:190px;height:95px;border-radius:95px 95px 0 0}
.style-band .accent-dot{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--decor-3);box-shadow:0 4px 10px rgba(0,0,0,0.06)}
.style-band .dot-1{left:28%;top:40%;background:var(--decor-3)}
.style-band .dot-2{right:28%;top:48%;background:var(--decor-1)}

/* Core decor area */
.decor-area{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.9}

/* Ensure hero content sits above decorative shapes */
.hero, .hero-inner{position:relative;z-index:3}

/* Rectangles removed per request */
/* .floating-rect styles intentionally removed to eliminate outlined rectangles */

/* Small circular accents */
.floating-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--decor-5);box-shadow:0 3px 6px rgba(0,0,0,0.04);opacity:0.92}
.fdot-1{left:13%;top:20%;background:var(--decor-5)}
.fdot-2{right:11%;top:18%;background:var(--decor-6)}
.fdot-3{right:28%;top:46%;background:var(--decor-1)}

/* Rings (stroke-only circles) */
.ring{position:absolute;border-radius:50%;width:180px;height:180px;border:12px solid rgba(61,28,79,0.06);box-shadow:none;background:transparent;transform:translateZ(0);opacity:0.7}
.ring-1{right:-10px;top:34%;border-color:rgba(61,28,79,0.08)}
.ring-2{left:-30px;bottom:12%;width:140px;height:140px;border-width:10px;border-color:rgba(145,124,177,0.06)}

/* Rotated squares (diamond shapes) */
.rot-square{position:absolute;width:56px;height:56px;background:rgba(145,124,177,0.06);border:3px solid rgba(61,28,79,0.6);transform:rotate(45deg);box-shadow:none;opacity:0.85}
.rot-1{left:12%;top:8%}
.rot-2{right:14%;top:28%}

/* Cross / plus shapes built with pseudo-elements */
.shape-cross{position:absolute;width:26px;height:26px;left:20%;top:32%;opacity:0.95}
.shape-cross:before,.shape-cross:after{content:"";position:absolute;background:var(--decor-1);left:50%;top:50%;transform:translate(-50%,-50%);} 
.shape-cross:before{width:2px;height:22px}
.shape-cross:after{height:2px;width:22px}

/* Small triangles (CSS border trick) */
.triangle{position:absolute;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:20px solid rgba(61,28,79,0.12);opacity:0.9}
.tri-1{left:86%;top:10%}
.tri-2{left:76%;top:52%}

/* Subtle motion (very small slow drifts) */
@keyframes floatSlow{0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(0)}}
.decor-area .ring,.decor-area .rot-square,.decor-area .floating-dot{animation:floatSlow 14s ease-in-out infinite}

/* Responsiveness */
@media (max-width:1024px){
    .ring{width:160px;height:160px}
    .rot-square{width:56px;height:56px}
}
@media (max-width:768px){
    .style-band{height:96px}
    .style-band .half-circle{width:160px;height:80px;border-radius:80px 80px 0 0;transform:translateY(-50%)}
    .ring{display:block;opacity:0.6}
    .rot-square{display:block}
    .floating-dot{width:12px;height:12px}
}
@media (max-width:420px){
    .decor-area{display:none}
    .style-band{height:56px}
    .style-band .half-circle{display:none}
}