@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Sora', sans-serif;
}

body {
  background: rgba(172, 169, 169, 0.6); /* universal background  */
}


* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* REMOVE MOBILE TAP HIGHLIGHT */

*{
    -webkit-tap-highlight-color: transparent;
}

button,
a,
input,
textarea,
select{
    outline:none;
    -webkit-tap-highlight-color: transparent;
}

html{
    -webkit-touch-callout:none;
}


/* =========================================
   ISIMULE PUBLIC SITE — VISIBLE GRADIENT UPGRADE
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --font-app:"Inter", system-ui, sans-serif;

  --ink:#17110d;
  --muted:#6f625a;

  --cream:#fff1df;
  --peach:#f4b997;
  --sand:#e8c28f;
  --copper:#b66a43;
  --brown:#3a2118;
  --black:#0b0b0b;
}

/* FONT SYSTEM */

body,
button,
input,
select,
textarea,
a,
p,
span,
label{
  font-family:var(--font-app) !important;
  font-size:15px;
}

h1,h2,h3,h4,
.nav-logo{
  font-family:var(--font-app) !important;
  letter-spacing:-0.045em;
}

h1{
  font-size:clamp(42px,5vw,68px) !important;
  line-height:0.95;
  font-weight:800;
}

h2{
  font-size:clamp(30px,3.5vw,46px) !important;
  line-height:1;
  font-weight:800;
}

h3{
  font-size:19px !important;
  font-weight:750;
}

p{
  font-size:15px !important;
  line-height:1.65;
}

/* KEEP HERO IMAGE, ADD PREMIUM OVERLAY ONLY */

.hero{
  position:relative;
  isolation:isolate;
  background-color:transparent !important;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;

  background:
    radial-gradient(circle at 20% 20%, rgba(255,210,160,0.35), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(80,38,20,0.45), transparent 34%),
    linear-gradient(135deg, rgba(20,10,5,0.45), rgba(120,65,38,0.18));
}



/* BIG VISIBLE SECTION GRADIENTS */

.featured-apartments{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(circle at 18% 18%, rgba(255,236,204,0.95), transparent 24%),
    radial-gradient(circle at 85% 30%, rgba(183,98,58,0.48), transparent 28%),
    linear-gradient(135deg,#ffe4cb 0%,#efae8c 45%,#c87452 100%) !important;
}

.why-choose-us{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(circle at 75% 20%, rgba(255,244,215,0.95), transparent 25%),
    radial-gradient(circle at 15% 80%, rgba(184,111,67,0.35), transparent 30%),
    linear-gradient(135deg,#f9dfad 0%,#edc182 45%,#d28a5e 100%) !important;
}

.how-it-works{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,235,220,0.9), transparent 25%),
    radial-gradient(circle at 85% 75%, rgba(96,48,34,0.30), transparent 32%),
    linear-gradient(135deg,#ead0d8 0%,#d8b2bd 48%,#b9818c 100%) !important;
}

.contact-section{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(circle at 75% 25%, rgba(255,238,213,0.95), transparent 26%),
    radial-gradient(circle at 20% 80%, rgba(193,105,63,0.40), transparent 30%),
    linear-gradient(135deg,#ffe3d2 0%,#f2b894 45%,#c8794f 100%) !important;
}

.apartments-listing{
  background:
    radial-gradient(circle at top right, rgba(255,214,176,0.75), transparent 30%),
    linear-gradient(135deg,#fff0df 0%,#ead5c6 50%,#d7b69f 100%) !important;
}

/* DECORATIVE “DRAWINGS” / ABSTRACT SHAPES */

.featured-apartments::before,
.why-choose-us::before,
.how-it-works::before,
.contact-section::before,
.apartments-listing::before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border:1px solid rgba(255,255,255,0.28);
  border-radius:38% 62% 55% 45%;
  right:-110px;
  top:70px;
  transform:rotate(18deg);
  pointer-events:none;
}

.featured-apartments::after,
.why-choose-us::after,
.how-it-works::after,
.contact-section::after,
.apartments-listing::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border:2px dashed rgba(58,33,24,0.16);
  border-radius:50%;
  left:-70px;
  bottom:60px;
  pointer-events:none;
}

/* PAGE HERO GRADIENTS */

.apartments-hero,
.contact-page-hero,
.login-page,
.signup-page,
.signin-page{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(circle at 20% 20%, rgba(255,212,170,0.45), transparent 26%),
    radial-gradient(circle at 80% 65%, rgba(50,24,16,0.45), transparent 34%),
    linear-gradient(135deg,#bd724c 0%,#8f4f34 48%,#2a1812 100%) !important;
}

/* CARDS MUST STAND OUT */

.apartment-card,
.listing-card,
.why-card,
.step-card,
.login-card,
.signin-card,
.signup-form{
  background:
    linear-gradient(180deg,rgba(255,249,239,0.95),rgba(255,226,198,0.92)) !important;

  border:1px solid rgba(70,38,24,0.14) !important;

  box-shadow:
    0 24px 55px rgba(65,32,18,0.22),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;

  color:var(--ink) !important;
}

.apartment-info{
  background:transparent !important;
}

/* TEXT CONTRAST */

.section-header h2,
.why-header h2,
.how-header h2,
.contact-text h2,
.listing-top h2,
.login-header h1,
.signup-header h1,
.signin-card h1{
  color:#111 !important;
}

.section-header p,
.why-header p,
.how-header p,
.contact-text p,
.apartment-info p,
.listing-info p,
.login-card p,
.signin-card p,
.signup-header p{
  color:var(--muted) !important;
}


/* INPUTS */

input,
select,
textarea{
  background:rgba(255,255,255,0.88) !important;
  border:1.5px solid rgba(65,35,22,0.18) !important;
  color:#111 !important;
  font-size:14px !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:#b66a43 !important;
  box-shadow:0 0 0 4px rgba(182,106,67,0.16) !important;
}

/* BUTTONS */

.view-all-btn,
.details-btn,
.map-btn,
.details-apply,
.contact-form button,
.login-actions a,
.login-card > a,
.signin-form button,
.signup-btn{
  background:
    linear-gradient(135deg,#111,#3a2118) !important;

  color:white !important;
  font-size:14px !important;
  border:none !important;

  box-shadow:0 14px 30px rgba(35,18,10,0.28) !important;
}

.view-all-btn:hover,
.details-btn:hover,
.map-btn:hover,
.details-apply:hover,
.contact-form button:hover,
.login-actions a:hover,
.login-card > a:hover,
.signin-form button:hover,
.signup-btn:hover{
  background:
    linear-gradient(135deg,#d58a5a,#9b5738) !important;

  transform:translateY(-4px) scale(1.03);
}

/* FOOTER BLACK ONLY */

.footer{
  background:
    linear-gradient(180deg,#111,#050505) !important;
  color:white !important;
}

/* MOTION */

.apartment-card,
.listing-card,
.why-card,
.step-card,
.login-card,
.signin-card,
.signup-form,
.search-bar,
.listing-filter-box{
  animation:premiumRise 0.6s ease both;
}

@keyframes premiumRise{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* TYPOGRAPHY SYSTEM */

body{
  font-family:'Sora',sans-serif;
  font-size:15px;
  line-height:1.6;
  color:#1f1f1f;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* HEADINGS */

h1,
h2,
h3,
h4,
h5{
  font-family:'Sora',sans-serif;
  letter-spacing:-0.03em;
  line-height:1.1;
}

/* HERO TITLES */

.hero-content h1,
.login-header h1,
.signup-header h1{
  font-size:clamp(44px,6vw,78px);
  font-weight:700;
}

/* SECTION TITLES */

section h2{
  font-size:clamp(28px,4vw,42px);
  font-weight:700;
}

/* PARAGRAPHS */

p{
  font-size:15px;
  font-weight:400;
  color:#5f5f5f;
}

/* BUTTONS */

button,
a{
  font-family:'Sora',sans-serif;
}

/* FIX HERO SEARCH INPUT SHAPE + OVERFLOW */

.search-bar{
  overflow: visible !important;
}

.search-item{
  min-width: 0;
}

.search-item .input-box{
  width: 100%;
  min-width: 0;
  border-radius: 999px !important;
  overflow: hidden;
}

.search-item input,
.search-item select{
  width: 100% !important;
  min-width: 0;
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
}

.search-item input::placeholder{
  color: rgba(0,0,0,0.55);
}

/* =========================
   WEBSITE REAL ESTATE DRAWINGS
========================= */

.featured-apartments,
.why-choose-us,
.how-it-works,
.contact-section,
.apartments-listing,
.login-page,
.signup-page,
.signin-page{
    position:relative;
    overflow:hidden;
}

/* main drawing */
.featured-apartments::before,
.why-choose-us::before,
.how-it-works::before,
.contact-section::before,
.apartments-listing::before,
.login-page::before,
.signup-page::before,
.signin-page::before{
    content:"";
    position:absolute;
    right:6%;
    bottom:35px;
    width:230px;
    height:230px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    opacity:0.075;
    pointer-events:none;
    z-index:0;
}

/* soft architectural circle */
.featured-apartments::after,
.why-choose-us::after,
.how-it-works::after,
.contact-section::after,
.apartments-listing::after,
.login-page::after,
.signup-page::after,
.signin-page::after{
    content:"";
    position:absolute;
    left:-80px;
    top:70px;
    width:260px;
    height:260px;
    border:1.5px dashed rgba(60,35,20,0.13);
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}

/* assign drawings */
.featured-apartments::before,
.apartments-listing::before,
.signup-page::before{
    background-image:url("../images/patterns/building-line.svg");
}

.why-choose-us::before,
.signin-page::before,
.login-page::before{
    background-image:url("../images/patterns/key-line.svg");
}

.how-it-works::before,
.contact-section::before{
    background-image:url("../images/patterns/floorplan-line.svg");
}

/* keep actual content above art */
.featured-apartments > *,
.why-choose-us > *,
.how-it-works > *,
.contact-section > *,
.apartments-listing > *,
.login-page > *,
.signup-page > *,
.signin-page > *{
    position:relative;
    z-index:2;
}

/* mobile soften */
@media(max-width:850px){
    .featured-apartments::before,
    .why-choose-us::before,
    .how-it-works::before,
    .contact-section::before,
    .apartments-listing::before,
    .login-page::before,
    .signup-page::before,
    .signin-page::before{
        right:-40px;
        bottom:20px;
        width:170px;
        height:170px;
        opacity:0.055;
    }

    .featured-apartments::after,
    .why-choose-us::after,
    .how-it-works::after,
    .contact-section::after,
    .apartments-listing::after,
    .login-page::after,
    .signup-page::after,
    .signin-page::after{
        width:190px;
        height:190px;
        opacity:0.6;
    }
}