/* ============================================================
   WEPARTNAS  —  Shared Design System
   Editorial Luxury · Cormorant Garamond + Epilogue
   Peach · Warm Brown · Ash
   ============================================================ */

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

/* ---- TOKENS ---- */
:root {
  --ink:        #1C1209;
  --ink-80:     rgba(28,18,9,0.80);
  --ink-50:     rgba(28,18,9,0.50);
  --ink-20:     rgba(28,18,9,0.12);
  --ink-06:     rgba(28,18,9,0.06);

  --peach:      #E8936A;
  --peach-lt:   #F5D8C8;
  --peach-xt:   #FBF0EA;
  --peach-dk:   #C06B40;

  --brown:      #6B3F20;
  --brown-lt:   #9C6840;
  --brown-dk:   #3D2010;

  --ash:        #EDE8E2;
  --ash-lt:     #F7F4F0;
  --ash-dk:     #C8BFB4;
  --grey:       #7A6F65;

  --white:      #FEFCF9;

  --rule:       1px solid var(--ink-20);
  --rule-dk:    1px solid var(--ink);

  --r-sm:       6px;
  --r-md:       12px;
  --r-lg:       20px;

  --sh-sm:  0 2px 12px rgba(28,18,9,0.08);
  --sh-md:  0 8px 32px rgba(28,18,9,0.12);
  --sh-lg:  0 20px 60px rgba(28,18,9,0.18);
  --sh-xl:  0 32px 80px rgba(28,18,9,0.22);

  --ease:   cubic-bezier(0.4,0,0.2,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --t:      0.28s var(--ease);
}

/* ---- RESET ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:'Epilogue',sans-serif;
  background:var(--white);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit}

/* ---- TYPOGRAPHY ---- */
.t-display{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.01em;
}
.t-display-lg{ font-size:clamp(2.8rem,8vw,5.5rem); }
.t-display-md{ font-size:clamp(2.2rem,5.5vw,3.8rem); }
.t-display-sm{ font-size:clamp(1.6rem,4vw,2.5rem); }

.t-heading{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600;
  line-height:1.15;
}
.t-heading-lg{ font-size:clamp(1.4rem,3.5vw,2rem); }
.t-heading-md{ font-size:clamp(1.15rem,2.5vw,1.5rem); }

.t-label{
  font-family:'Epilogue',sans-serif;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--grey);
}

.t-body{font-size:1rem;line-height:1.75;color:var(--grey)}
.t-body-sm{font-size:0.875rem;line-height:1.7;color:var(--grey)}

/* ---- LAYOUT ---- */
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 24px}

section{padding:80px 0}
.bg-ash{background:var(--ash-lt)}
.bg-ink{background:var(--ink)}
.bg-brown{background:var(--brown-dk)}

/* ---- HORIZONTAL RULE ---- */
.hr{width:100%;height:1px;background:var(--ink-20)}
.hr-dk{width:100%;height:1px;background:var(--ink)}
.hr-color{
  height:2px;
  background:linear-gradient(90deg,var(--peach),var(--brown-lt));
  border:none;
}

/* ---- OVERLINE LABEL ---- */
.overline{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Epilogue',sans-serif;
  font-size:0.72rem;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--peach-dk);
}
.overline::before{
  content:'';
  display:block;width:28px;height:2px;
  background:var(--peach);
  flex-shrink:0;
}

/* ---- BUTTONS ---- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Epilogue',sans-serif;
  font-size:0.875rem;font-weight:600;
  letter-spacing:0.03em;
  padding:13px 26px;
  border-radius:var(--r-sm);
  transition:var(--t);
  cursor:pointer;
  line-height:1;
}
.btn-primary{
  background:var(--ink);color:var(--white);
  box-shadow:var(--sh-sm);
}
.btn-primary:hover{
  background:var(--brown);
  transform:translateY(-2px);
  box-shadow:var(--sh-md);
}
.btn-peach{
  background:var(--peach);color:var(--white);
  box-shadow:0 4px 18px rgba(232,147,106,0.38);
}
.btn-peach:hover{
  background:var(--peach-dk);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(232,147,106,0.48);
}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink-20);
}
.btn-ghost:hover{
  border-color:var(--ink);
  background:var(--ink-06);
}
.btn-white{
  background:var(--white);color:var(--ink);
  box-shadow:var(--sh-md);
}
.btn-white:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-lg);
}

/* ---- NAVBAR ---- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:999;
  height:64px;
  background:rgba(254,252,249,0.92);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:var(--rule);
  transition:var(--t);
}
.navbar-inner{
  height:100%;max-width:1160px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}
.nav-logo{
  display:flex;align-items:center;gap:0;
  cursor:pointer;flex-shrink:0;
}
.nav-logo-mark{
  width:36px;height:36px;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%);
}
.nav-logo-text{
  margin-left:10px;
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;font-weight:700;
  color:var(--ink);letter-spacing:-0.01em;
}
.nav-logo-text sup{
  font-size:0.55rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--peach);margin-left:2px;
  vertical-align:super;
}
.nav-links{
  display:flex;align-items:center;gap:2px;
  flex:1;justify-content:center;
}
.nav-link{
  font-size:0.82rem;font-weight:500;letter-spacing:0.02em;
  color:var(--ink-80);
  padding:7px 14px;
  border-radius:4px;
  cursor:pointer;
  transition:var(--t);
  position:relative;
}
.nav-link::after{
  content:'';
  position:absolute;bottom:4px;left:14px;right:14px;
  height:1.5px;background:var(--peach);
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.24s var(--ease);
}
.nav-link:hover{color:var(--ink);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
.nav-link.active{color:var(--ink);font-weight:600;}

.nav-cta-wrap{display:flex;align-items:center;gap:10px;flex-shrink:0;}

/* Hamburger */
.hamburger{
  display:none;flex-direction:column;gap:5px;
  padding:8px;cursor:pointer;
}
.hamburger span{
  display:block;width:22px;height:1.5px;
  background:var(--ink);border-radius:2px;
  transition:var(--t);
}
/* Mobile drawer */
.mobile-drawer{
  display:none;flex-direction:column;
  position:fixed;top:64px;left:0;right:0;bottom:0;
  background:var(--white);
  padding:24px;gap:4px;
  z-index:998;
  overflow-y:auto;
  border-top:var(--rule);
  transform:translateX(100%);
  transition:transform 0.3s var(--ease);
}
.mobile-drawer.open{transform:translateX(0);}
.mobile-link{
  padding:14px 16px;
  font-size:1.1rem;font-weight:500;
  color:var(--ink-80);
  border-bottom:var(--rule);
  cursor:pointer;
  transition:var(--t);
}
.mobile-link:hover,.mobile-link.active{color:var(--peach-dk);}
.mobile-link.active{font-weight:700;}
.mobile-cta{margin-top:20px;}

/* ---- PHONE WIDGET ---- */
.phone-shell{
  width:240px;
  background:var(--brown-dk);
  border-radius:32px;
  padding:10px;
  box-shadow:var(--sh-xl), 0 0 0 1px rgba(255,255,255,0.06);
  flex-shrink:0;
}
.phone-screen{
  background:var(--ash-lt);
  border-radius:24px;
  overflow:hidden;
  position:relative;
}
.phone-statusbar{
  background:var(--brown-dk);
  padding:10px 18px 8px;
  display:flex;justify-content:space-between;align-items:center;
}
.phone-statusbar-time{
  font-family:'Epilogue';font-size:0.7rem;font-weight:700;color:var(--white);
}
.phone-statusbar-icons{display:flex;gap:4px;align-items:center;}
.phone-statusbar-icons svg{width:12px;height:12px;color:rgba(255,255,255,0.8);}

.phone-header{
  padding:14px 14px 10px;
}
.phone-header-label{
  font-size:0.58rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--grey);margin-bottom:3px;
}
.phone-header-name{
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;font-weight:700;color:var(--ink);
}
.phone-balance{
  background:var(--ink);
  border-radius:10px;
  padding:12px 13px;
  margin:0 14px 12px;
}
.phone-balance-label{
  font-size:0.58rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);margin-bottom:4px;
}
.phone-balance-amount{
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;font-weight:700;color:var(--white);
}
.phone-balance-sub{
  font-size:0.6rem;color:rgba(255,255,255,0.4);margin-top:2px;
}

.phone-services{padding:0 14px 10px;}
.phone-services-label{
  font-size:0.58rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--grey);margin-bottom:8px;
}
.phone-svc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
}
.phone-svc-item{
  background:var(--white);border-radius:8px;
  padding:8px 4px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  border:1px solid var(--ash);
}
.phone-svc-icon{
  width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
}
.phone-svc-icon svg{width:13px;height:13px;color:var(--white);}
.phone-svc-name{font-size:0.5rem;font-weight:600;color:var(--ink);text-align:center;line-height:1.2;}

.phone-txn-list{padding:0 14px 14px;}
.phone-txn-label{
  font-size:0.58rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--grey);margin-bottom:7px;
}
.phone-txn{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;
  border-bottom:1px solid var(--ash);
}
.phone-txn:last-child{border-bottom:none;}
.phone-txn-dot{
  width:27px;height:27px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.phone-txn-dot svg{width:12px;height:12px;color:var(--white);}
.phone-txn-info{flex:1;min-width:0;}
.phone-txn-name{font-size:0.6rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.phone-txn-date{font-size:0.53rem;color:var(--grey);}
.phone-txn-amount{font-size:0.63rem;font-weight:700;color:var(--peach-dk);}

/* ---- CARDS ---- */
.card{
  background:var(--white);
  border:var(--rule);
  border-radius:var(--r-md);
  padding:28px 24px;
  transition:var(--t);
}
.card:hover{
  border-color:var(--peach);
  box-shadow:var(--sh-md);
  transform:translateY(-3px);
}
.card-dark{
  background:var(--ink);
  border-color:rgba(255,255,255,0.08);
  color:var(--white);
}
.card-dark .t-body,.card-dark .t-body-sm{color:rgba(255,255,255,0.6);}

/* ---- ICON BOX ---- */
.icon-box{
  width:50px;height:50px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.icon-box svg{width:22px;height:22px;}
.ib-ash{background:var(--ash);color:var(--brown);}
.ib-peach{background:var(--peach-lt);color:var(--peach-dk);}
.ib-ink{background:var(--ink);color:var(--white);}
.ib-sm{width:40px;height:40px;}
.ib-sm svg{width:18px;height:18px;}

/* ---- SECTION HEADER ---- */
.sec-hd{margin-bottom:52px;}
.sec-hd-center{text-align:center;}
.sec-hd-center .overline{justify-content:center;}
.sec-hd .overline{margin-bottom:14px;}
.sec-hd h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,4.5vw,3rem);
  font-weight:700;line-height:1.12;
  color:var(--ink);margin-bottom:14px;
}
.sec-hd p{max-width:520px;font-size:1rem;color:var(--grey);line-height:1.75;}
.sec-hd-center p{margin:0 auto;}

/* ---- FORM ---- */
.f-group{margin-bottom:18px;}
.f-label{
  display:block;
  font-size:0.75rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink);margin-bottom:6px;
}
.f-control{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--ash-dk);
  border-radius:var(--r-sm);
  font-size:0.9rem;
  color:var(--ink);
  background:var(--white);
  transition:var(--t);
  outline:none;
  appearance:none;
}
.f-control:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(28,18,9,0.07);}
.f-control::placeholder{color:var(--ash-dk);}
textarea.f-control{min-height:120px;resize:vertical;}

/* ---- TOAST ---- */
.toast-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(28,18,9,0.55);
  backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity 0.3s var(--ease);
}
.toast-overlay.show{opacity:1;pointer-events:all;}
.toast-card{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:44px 40px;
  max-width:420px;width:calc(100% - 40px);
  text-align:center;
  box-shadow:var(--sh-xl);
  transform:scale(0.9) translateY(16px);
  transition:transform 0.4s var(--spring);
}
.toast-overlay.show .toast-card{transform:scale(1) translateY(0);}
.toast-check{
  width:68px;height:68px;border-radius:50%;
  background:var(--ash);
  margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
  animation:checkPop 0.6s var(--spring) 0.1s both;
}
.toast-check svg{width:32px;height:32px;color:var(--peach-dk);}
@keyframes checkPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.toast-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;font-weight:700;color:var(--ink);
  margin-bottom:10px;
}
.toast-body{font-size:0.9rem;color:var(--grey);margin-bottom:28px;line-height:1.65;}
.toast-btn{
  padding:12px 30px;
  background:var(--ink);color:var(--white);
  border-radius:var(--r-sm);
  font-family:'Epilogue';font-size:0.87rem;font-weight:600;
  cursor:pointer;border:none;transition:var(--t);
}
.toast-btn:hover{background:var(--brown);}

/* ---- FOOTER ---- */
.footer{background:var(--ink);color:rgba(255,255,255,0.75);padding:64px 0 0;}
.footer-grid{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand{}
.footer-logo{
  display:flex;align-items:center;gap:0;
  margin-bottom:16px;
}
.footer-logo-mark{
  width:32px;height:32px;background:var(--peach);
  clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%);
  display:flex;align-items:center;justify-content:center;
}
.footer-logo-mark svg{width:14px;height:14px;color:var(--white);}
.footer-logo-name{
  margin-left:10px;
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem;font-weight:700;color:var(--white);
}
.footer-desc{font-size:0.88rem;line-height:1.7;color:rgba(255,255,255,0.5);margin-bottom:22px;}
.footer-socials{display:flex;gap:8px;}
.footer-social{
  width:36px;height:36px;border-radius:8px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;
  transition:var(--t);cursor:pointer;
}
.footer-social:hover{background:var(--peach);border-color:var(--peach);}
.footer-social svg{width:15px;height:15px;color:rgba(255,255,255,0.8);}

.footer-col-title{
  font-size:0.68rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--peach);margin-bottom:18px;
}
.footer-links{display:flex;flex-direction:column;gap:11px;}
.footer-nav-link{
  font-size:0.88rem;color:rgba(255,255,255,0.5);
  cursor:pointer;transition:var(--t);
}
.footer-nav-link:hover{color:var(--white);}

.footer-contact-item{
  display:flex;align-items:flex-start;gap:9px;
  font-size:0.84rem;color:rgba(255,255,255,0.5);
  margin-bottom:12px;line-height:1.5;
}
.footer-contact-item svg{width:14px;height:14px;color:var(--peach);margin-top:2px;flex-shrink:0;}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0;
  font-size:0.8rem;color:rgba(255,255,255,0.3);
}
.footer-bottom-links{display:flex;gap:18px;}
.footer-bottom-link{color:rgba(255,255,255,0.3);cursor:pointer;transition:var(--t);}
.footer-bottom-link:hover{color:rgba(255,255,255,0.7);}

/* ---- SCROLL-TOP ---- */
.scroll-top{
  position:fixed;bottom:24px;right:20px;
  width:42px;height:42px;
  background:var(--ink);color:var(--white);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-md);
  cursor:pointer;transition:var(--t);
  opacity:0;pointer-events:none;z-index:900;
}
.scroll-top.show{opacity:1;pointer-events:all;}
.scroll-top:hover{background:var(--brown);transform:translateY(-2px);}
.scroll-top svg{width:17px;height:17px;}

/* ---- ANIMATIONS ---- */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity 0.6s var(--ease),transform 0.6s var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:0.08s;}
.reveal-d2{transition-delay:0.16s;}
.reveal-d3{transition-delay:0.24s;}
.reveal-d4{transition-delay:0.32s;}

@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
  .nav-links,.nav-cta-wrap{display:none;}
  .hamburger{display:flex;}
  .mobile-drawer{display:flex;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center;}
}
@media(max-width:600px){
  section{padding:56px 0;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
}