/* ========== PODA Website Styles ========== */
:root{
  --indigo:#292159;         /* poda_indigo */
  --cream:#FFF8EF;          /* poda_cream */
  --ink:#0f172a;
  --muted:#6b7280;
  --stroke:#e6e6ea;
}

/* Reset */
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background: linear-gradient(135deg,#FFF8EF 0%,#EAE4F6 50%,#DCE9F9 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.wrap{max-width:1140px;margin:0 auto;padding:20px}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo img{height:40px;display:block}
nav a{color:var(--indigo);text-decoration:none;font-weight:600;margin-left:18px}
nav a:hover{text-decoration:underline}

/* Hero */
.hero{padding:72px 12px 24px;text-align:center}
.hero h1{margin:0 0 12px;color:var(--indigo);font-size:2.2rem}
.hero p{margin:0 0 22px;color:var(--muted);font-size:1.08rem}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:14px;font-weight:700;text-decoration:none;margin:4px}
.btn.primary{background:var(--indigo);color:#fff}
.btn.primary:hover{box-shadow:0 6px 16px rgba(41,33,89,.25)}
.btn.ghost{background:#fff;color:var(--indigo);border:1px solid var(--indigo)}
.btn.ghost:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}

/* Features grid */
.features{padding:12px 0 40px}
.grid{display:grid;gap:26px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

/* Polaroid wrappers handle random rotation */
.polaroid-wrap{display:inline-block;transform-origin:center;filter:drop-shadow(0 10px 18px rgba(0,0,0,.12))}
.r1{transform:rotate(-2.5deg)} .r2{transform:rotate(1.5deg)}
.r3{transform:rotate(-1deg)}   .r4{transform:rotate(2deg)}
.r5{transform:rotate(-3deg)}   .r6{transform:rotate(1deg)}

/* Polaroid frame */
.polaroid{
  position:relative;
  width:100%; max-width:320px; aspect-ratio:3/4;
  margin:0 auto;
  background:url('/assets/polaroid-frame-realistic.png') no-repeat center/contain;
}

/* Inside zones */
.photo{
  position:absolute;
  /* adjust these to fit your PNG’s inner window */
  inset:14% 11% 30% 11%;
  display:flex;align-items:center;justify-content:center;
}
.caption{
  position:absolute;
  left:12%; right:12%; bottom:25%;
  text-align:center;
}
.caption h3{margin:2px 0 4px;font-size:1rem;color:var(--indigo)}
.caption p{margin:0;font-size:.88rem;color:var(--muted)}

/* Icon block */
.icon{
  width:min(86px,40%); height:min(86px,40%);
  display:grid;place-items:center;
  border:1px solid var(--stroke);border-radius:12px;background:#fff;
}
.icon svg{width:60%;height:60%;stroke:var(--indigo);stroke-width:2;fill:none}

/* Footer */
footer{padding:26px 12px 18px;text-align:center;color:var(--muted);font-size:.9rem}
footer a{color:var(--indigo);text-decoration:none}
footer a:hover{text-decoration:underline}