@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --ink:#07171e;
  --ink-2:#0b222c;
  --ivory:#f6efe2;
  --paper:#fffdf8;
  --muted:rgba(246,239,226,.69);
  --line:rgba(246,239,226,.18);
  --accent:#c9707d;
  --sea:#235d71;
  --shadow:0 26px 80px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#04090c;color:var(--ivory);font-family:Manrope,system-ui,-apple-system,Segoe UI,sans-serif}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}

.page-shell{min-height:100vh;position:relative;display:grid;place-items:start center;background:#05090c}
.page-shell::before{content:"";position:fixed;inset:-24px;background:linear-gradient(rgba(2,8,11,.25),rgba(2,8,11,.78)),url('alaia-hero.jpg') center/cover no-repeat;filter:blur(26px) saturate(.8);transform:scale(1.08);opacity:.75;z-index:0}
.profile{position:relative;z-index:1;width:min(100%,660px);min-height:100vh;background:linear-gradient(180deg,#111 0%,var(--ink) 100%);box-shadow:var(--shadow);overflow:hidden}
.hero{position:relative;height:57vh;min-height:430px;max-height:610px;background:url('alaia-hero.jpg') center 23%/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,10,14,0) 46%,rgba(7,23,30,.32) 65%,var(--ink) 100%)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 12%,rgba(255,255,255,.12),transparent 22%);mix-blend-mode:screen;pointer-events:none}
.brand{position:absolute;left:0;right:0;bottom:22px;z-index:2;text-align:center;padding:0 28px}
.brand .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px}
.brand .eyebrow::before,.brand .eyebrow::after{content:"";width:22px;height:1px;background:rgba(255,255,255,.38)}
.brand h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(44px,8vw,66px);line-height:.95;margin:0;text-shadow:0 2px 30px rgba(0,0,0,.26);letter-spacing:-.035em}
.brand p{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:20px;margin:10px 0 0;color:rgba(255,255,255,.86)}

.content{padding:10px 34px 34px;background:linear-gradient(180deg,var(--ink) 0%,#071117 100%)}
.signature-line{height:1px;width:46px;background:var(--accent);margin:0 auto 28px;opacity:.88}
.cta-stack{display:grid;gap:13px}
.cta{position:relative;display:flex;align-items:center;min-height:76px;border-radius:22px;padding:15px 18px 15px 20px;transition:transform .18s ease,border-color .18s ease,background .18s ease;cursor:pointer;overflow:hidden}
.cta:hover{transform:translateY(-2px)}
.cta:active{transform:translateY(0) scale(.995)}
.cta-primary{background:var(--paper);color:#0a1b22;box-shadow:0 16px 40px rgba(0,0,0,.22)}
.cta-secondary{background:rgba(255,255,255,.035);border:1px solid rgba(246,239,226,.26);color:var(--ivory);backdrop-filter:blur(12px)}
.cta-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;margin-right:14px;background:rgba(7,23,30,.08)}
.cta-secondary .cta-icon{background:rgba(255,255,255,.07)}
.cta-exclusive .cta-icon{background:rgba(7,23,30,.08)}
.cta-copy{display:flex;flex-direction:column;gap:3px;text-align:left}
.cta-title{font-weight:700;font-size:16px;letter-spacing:-.01em}
.cta-sub{font-size:11px;line-height:1.35;color:rgba(7,23,30,.58);letter-spacing:.02em}
.cta-secondary .cta-sub{color:rgba(246,239,226,.58)}
.cta-exclusive .cta-sub{color:rgba(7,23,30,.58)}
.cta-arrow{margin-left:auto;font-size:19px;opacity:.55;padding-left:12px}
.tag{margin-left:auto;flex:0 0 auto;font-size:9px;letter-spacing:.13em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:5px 9px;opacity:.62;white-space:nowrap}

.microcopy{text-align:center;margin:24px auto 0;color:var(--muted);font-size:11px;line-height:1.65;max-width:390px}
.footer{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:29px 0 0;font-size:10px;color:rgba(246,239,226,.42)}
.footer a:hover{color:rgba(246,239,226,.78)}

.modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.66);backdrop-filter:blur(12px);padding:20px}
.modal.open{display:flex}
.modal-card{width:min(100%,520px);background:#0a1d25;border:1px solid rgba(246,239,226,.16);border-radius:28px;padding:26px;box-shadow:0 30px 90px rgba(0,0,0,.5);animation:rise .22s ease-out}
@keyframes rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.modal-mark{width:44px;height:44px;border:1px solid rgba(246,239,226,.28);border-radius:50%;display:grid;place-items:center;margin-bottom:17px}
.modal h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:34px;margin:0 0 7px;font-weight:600}
.modal p{margin:0 0 22px;color:rgba(246,239,226,.68);font-size:13px;line-height:1.65}
.modal-actions{display:grid;gap:10px}
.modal-btn{border:0;border-radius:16px;padding:15px 16px;font-weight:700;cursor:pointer}
.modal-btn.continue{background:var(--paper);color:#0a1b22}
.modal-btn.cancel{background:transparent;border:1px solid rgba(246,239,226,.2);color:var(--ivory)}
.modal-note{font-size:9px!important;color:rgba(246,239,226,.38)!important;margin:14px 2px 0!important}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:120;background:var(--paper);color:#0a1b22;border-radius:999px;padding:11px 16px;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:.2s ease;box-shadow:0 16px 42px rgba(0,0,0,.3)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:700px){
  html,body{height:100%;overflow:hidden}
  .page-shell{
    height:100vh;
    min-height:0;
    padding:18px;
    place-items:center;
    overflow:hidden;
  }
  .profile{
    width:min(100%,660px);
    height:min(920px,calc(100vh - 36px));
    min-height:0;
    max-height:calc(100vh - 36px);
    border-radius:30px;
    display:flex;
    flex-direction:column;
  }
  .hero{
    flex:0 1 56%;
    height:auto;
    min-height:0;
    max-height:none;
    background-position:center 23%;
  }
  .brand{bottom:18px;padding:0 26px}
  .brand h1{font-size:clamp(44px,4.2vw,60px)}
  .brand p{font-size:18px;margin-top:8px}
  .content{
    flex:1 1 44%;
    min-height:0;
    padding:8px 34px 22px;
    display:flex;
    flex-direction:column;
  }
  .signature-line{margin:0 auto 20px}
  .cta-stack{gap:11px}
  .cta{min-height:68px;padding:12px 16px 12px 18px;border-radius:20px}
  .cta-icon{width:40px;height:40px;margin-right:13px}
  .microcopy{margin:16px auto 0;font-size:10.5px}
  .footer{margin:16px 0 0}
  .modal{align-items:center}
}

@media (min-width:1200px){
  .profile{width:min(100%,620px)}
}
@media (max-width:699px){
  .profile{width:100%;box-shadow:none}
  .hero{height:58vh;min-height:410px}
  .content{padding:8px 18px 28px}
  .brand{bottom:18px}
  .brand h1{font-size:48px}
  .brand p{font-size:18px}
  .cta{border-radius:20px;min-height:72px}
}
@media (max-width:380px){
  .hero{min-height:390px}
  .brand h1{font-size:43px}
  .content{padding-left:14px;padding-right:14px}
}