/* site.css — PROPART HUB (optimized, mobile-first, premium craft aesthetic) */

:root{
  /* Palette */
  --bg: #fff4f1;
  --bg-soft: #fffaf7;
  --txt: #2b2230;
  --muted: #5a4d60;
  --muted2: #6a5d70;

  --line: rgba(43,34,48,.10);
  --line-strong: rgba(43,34,48,.14);
  --line-soft: rgba(255,255,255,.55);

  --accent:  #e56b8c;  /* rose */
  --accent2: #8c7cf0;  /* lavender */
  --accent3: #6bd0b1;  /* mint */

  --glass: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.54));
  --glass-strong: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));

  --shadow-sm: 0 10px 24px rgba(43,34,48,.08);
  --shadow: 0 18px 45px rgba(43,34,48,.10);
  --shadow-lg: 0 26px 70px rgba(43,34,48,.14);

  --radius: 22px;
  --radius-lg: 28px;
  --radius-xl: 30px;

  --focus-ring: 0 0 0 4px rgba(229,107,140,.18);
  --focus-ring-alt: 0 0 0 4px rgba(140,124,240,.22);

  --tap: transparent;

  --dur-fast: .14s;
  --dur: .2s;
  --dur-slow: .5s;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-display: ui-serif, Georgia, "Times New Roman", Times, serif;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html, body{
  height:100%;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--txt);
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ===== Ambient background ===== */

.bg{
  position:fixed;
  inset:-25vh -25vw;
  background:
    radial-gradient(900px 700px at 14% 16%, rgba(229,107,140,.22), transparent 60%),
    radial-gradient(900px 700px at 86% 26%, rgba(140,124,240,.18), transparent 55%),
    radial-gradient(900px 700px at 52% 96%, rgba(107,208,177,.14), transparent 60%),
    radial-gradient(700px 600px at 50% 50%, rgba(255,255,255,.35), transparent 55%);
  filter:blur(18px);
  opacity:.95;
  pointer-events:none;
  z-index:-2;
  transform:translateZ(0);
  animation:floaty 18s ease-in-out infinite alternate;
}

.paper{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.22;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

@keyframes floaty{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(0,-10px,0) scale(1.02); }
}

/* ===== Layout ===== */

.wrap{
  max-width:1040px;
  margin:0 auto;
  padding:22px 16px calc(92px + env(safe-area-inset-bottom));
}

img{
  max-width:100%;
}

a,
button{
  -webkit-tap-highlight-color:var(--tap);
}

a:focus-visible,
button:focus-visible{
  outline:none;
}

/* ===== Hero ===== */

.hero{
  margin-bottom:14px;
}

.brand{
  display:flex;
  gap:14px;
  padding:14px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.48));
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.brand--premium{
  align-items:flex-start;
}

.logo{
  width:clamp(120px, 30vw, 200px);
  flex:0 0 auto;
  display:block;
}

.brandText{
  min-width:0;
}

.kicker{
  margin:2px 0 6px;
  font-size:16px;
  letter-spacing:.18em;
  font-weight:900;
  color:rgba(90,77,96,.80);
}

.heroTitle{
  margin:4px 0 8px;
  font-family:var(--font-display);
  font-size:clamp(26px, 5.8vw, 38px);
  line-height:1.12;
  letter-spacing:-.02em;
}

.heroSub{
  margin:0;
  max-width:62ch;
  font-size:16px;
  line-height:1.55;
  color:var(--muted);
}

/* ===== Banner rotator ===== */

.bannerRotator{
  margin:14px 0 18px;
}

.bannerSlider{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(157,112,96,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  box-shadow:
    0 12px 30px rgba(69,37,29,.08),
    0 2px 10px rgba(69,37,29,.05);
  isolation:isolate;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.bannerTrack{
  position:relative;
  min-height:180px;
}

.bannerSlide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-slow) ease;
}

.bannerSlide.is-active{
  position:relative;
  opacity:1;
  pointer-events:auto;
}

.bannerSlide picture,
.bannerSlide img{
  display:block;
  width:100%;
  height:100%;
}

.bannerSlide img{
  aspect-ratio:16 / 6;
  object-fit:cover;
  object-position:center;
  background:#f7f2ef;
}

.bannerSlide::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.02) 0%,
    rgba(0,0,0,.04) 100%
  );
}

.bannerDots{
  position:absolute;
  left:50%;
  bottom:12px;
  z-index:3;
  display:flex;
  gap:8px;
  transform:translateX(-50%);
}

.bannerDot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
  transition:
    transform var(--dur) ease,
    background-color var(--dur) ease,
    box-shadow var(--dur) ease;
}

.bannerDot.is-active{
  background:#fff;
  transform:scale(1.15);
}

.bannerDot:focus-visible{
  box-shadow:
    0 0 0 3px rgba(255,255,255,.85),
    0 0 0 6px rgba(140,124,240,.28);
}

.bannerNav{
  position:absolute;
  top:50%;
  z-index:3;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:0;
  border-radius:999px;
  padding:0;
  cursor:pointer;
  transform:translateY(-50%);
  font-size:28px;
  line-height:1;
  color:#4c322b;
  background:rgba(255,255,255,.72);
  box-shadow:0 4px 18px rgba(0,0,0,.12);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:
    background-color var(--dur) ease,
    transform var(--dur) ease,
    box-shadow var(--dur) ease;
}

.bannerNav:hover{
  background:rgba(255,255,255,.92);
}

.bannerNav:focus-visible{
  box-shadow:
    0 0 0 4px rgba(255,255,255,.7),
    0 0 0 7px rgba(229,107,140,.20),
    0 4px 18px rgba(0,0,0,.12);
}

.bannerPrev{ left:12px; }
.bannerNext{ right:12px; }

.bannerSlider.is-single .bannerDots,
.bannerSlider.is-single .bannerNav{
  display:none;
}

/* ===== Main split ===== */

.mainSplit{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:start;
  margin-top:14px;
}

/* ===== Access cards ===== */

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.card{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:24px;
  text-decoration:none;
  color:inherit;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.56)) padding-box,
    linear-gradient(
      135deg,
      rgba(229,107,140,.42),
      rgba(140,124,240,.28),
      rgba(107,208,177,.18)
    ) border-box;
  background-clip:padding-box, border-box;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:
    transform var(--dur-fast) ease,
    filter var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.card--primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62)) padding-box,
    linear-gradient(
      135deg,
      rgba(229,107,140,.70),
      rgba(140,124,240,.55),
      rgba(107,208,177,.30)
    ) border-box;
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.60;
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(255,255,255,.30), transparent 55%),
    radial-gradient(520px 300px at 95% 40%, rgba(255,255,255,.18), transparent 60%);
  mix-blend-mode:screen;
}

.card:active{
  transform:translateY(1px) scale(.995);
}

.card:focus-visible{
  box-shadow:var(--focus-ring), var(--shadow-lg);
}

.icon.icon--brand{
  width:64px;
  height:64px;
  flex:0 0 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}

.brandmark{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(43,34,48,.16));
  transition:filter var(--dur-fast) ease;
}

.meta{
  flex:1;
  min-width:0;
}

.title{
  font-size:18px;
  font-weight:950;
  letter-spacing:-.01em;
}

.desc{
  margin-top:3px;
  font-size:14px;
  line-height:1.4;
  color:var(--muted2);
}

.chev{
  padding-left:6px;
  font-size:16px;
  opacity:.9;
}

@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-3px);
    filter:brightness(1.02) saturate(1.03);
    box-shadow:var(--shadow-lg);
  }

  .card:hover .brandmark{
    filter:drop-shadow(0 14px 24px rgba(43,34,48,.20));
  }
}

/* ===== Video panel ===== */

.promo{
  position:relative;
}

.promoFrame{
  position:relative;
  overflow:hidden;
  padding:10px;
  border-radius:var(--radius-xl);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.46));
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.promoFrame::before{
  content:"";
  display:block;
  aspect-ratio:9 / 16;
}

.promoVideo{
  position:absolute;
  inset:10px;
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  border-radius:24px;
  object-fit:cover;
  background:#000;
}

.promoFrame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(760px 260px at 30% 0%, rgba(255,255,255,.26), transparent 55%),
    radial-gradient(520px 420px at 95% 70%, rgba(140,124,240,.12), transparent 60%);
  mix-blend-mode:screen;
  opacity:.70;
}

/* ===== Footer ===== */

.foot{
  margin-top:18px;
  text-align:center;
  color:rgba(90,77,96,.78);
}

/* ===== Bottom nav ===== */

.bottomNav{
  position:fixed;
  left:10px;
  right:10px;
  bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:50;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  padding:10px;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.82);
  box-shadow:0 18px 50px rgba(43,34,48,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.bnItem{
  display:grid;
  justify-items:center;
  gap:6px;
  padding:8px 6px;
  border-radius:16px;
  text-decoration:none;
  color:var(--txt);
  font-size:12px;
  font-weight:950;
  transition:
    background-color var(--dur-fast) ease,
    transform var(--dur-fast) ease;
}

.bnIcon{
  width:26px;
  height:26px;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(43,34,48,.12));
}

.bnItem:active{
  background:rgba(43,34,48,.06);
  transform:translateY(1px);
}

.bnItem:focus-visible{
  box-shadow:var(--focus-ring);
}

/* ===== Responsive ===== */

@media (min-width:560px){
  .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:980px){
  .mainSplit{
    grid-template-columns:1fr 320px;
  }

  .promoFrame{
    position:sticky;
    top:18px;
  }

  .bottomNav{
    display:none;
  }

  .wrap{
    padding-bottom:20px;
  }
}

@media (max-width:860px){
  .bannerRotator{
    margin:10px 0 16px;
  }

  .bannerSlide img{
    aspect-ratio:16 / 8.5;
  }

  .bannerNav{
    width:34px;
    height:34px;
    font-size:24px;
  }

  .bannerPrev{ left:8px; }
  .bannerNext{ right:8px; }

  .bannerDots{
    bottom:10px;
  }
}

@media (max-width:560px){
  .bannerSlider{
    border-radius:20px;
  }

  .bannerSlide img{
    aspect-ratio:4 / 5;
  }
}

@media (max-width:420px){
  .brand{
    align-items:center;
  }

  .logo{
    width:clamp(112px, 29vw, 150px);
  }

  .kicker{
    font-size:13px;
    letter-spacing:.14em;
  }

  .heroTitle{
    font-size:clamp(24px, 8vw, 32px);
  }

  .heroSub{
    font-size:15px;
  }

  .icon.icon--brand{
    width:58px;
    height:58px;
    flex-basis:58px;
  }

  .title{
    font-size:17px;
  }

  .desc{
    font-size:13px;
  }
}

/* ===== Motion/accessibility ===== */

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  .bg{
    animation:none;
  }

  .card,
  .brandmark,
  .bannerSlide,
  .bannerDot,
  .bannerNav,
  .bnItem{
    transition:none;
  }
}