/* ========================================
   Portus — Common Styles
   ======================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    background: #F7F5F0;
    color: #1A1A1A;
    -webkit-font-smoothing: antialiased;
}

/* ---------- navigation ---------- */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: background .4s, box-shadow .4s, backdrop-filter .4s;
}

.site-nav.scrolled {
    background: rgba(247, 245, 240, .85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(200, 194, 180, .25);
}

.nav-link {
    position: relative;
    color: #5C574E;
    font-size: .8rem;
    letter-spacing: .12em;
    transition: color .25s;
}

.nav-link:hover {
    color: #1A1A1A;
}

.nav-link.active {
    color: #1A1A1A;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1.5px;
    background: #B8860B;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    background: #1A1A1A;
    color: #F7F5F0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    padding: .5rem 1.25rem;
    border-radius: 999px;
    transition: all .3s cubic-bezier(.16, 1, .3, 1);
}

.nav-cta:hover {
    background: #B8860B;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(184, 134, 11, .2);
}

/* ---------- reveal ---------- */
.rv {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(.16, 1, .3, 1),
        transform 1s cubic-bezier(.16, 1, .3, 1);
}

.rv.show {
    opacity: 1;
    transform: none;
}

.d1 { transition-delay: .08s }
.d2 { transition-delay: .16s }
.d3 { transition-delay: .24s }
.d4 { transition-delay: .32s }
.d5 { transition-delay: .40s }
.d6 { transition-delay: .48s }

/* ---------- hero entrance ---------- */
@keyframes rise {
    from { opacity: 0; transform: translateY(28px) }
    to   { opacity: 1; transform: none }
}

.rise   { animation: rise 1.1s cubic-bezier(.16, 1, .3, 1) both }
.rise-1 { animation-delay: .15s }
.rise-2 { animation-delay: .35s }
.rise-3 { animation-delay: .55s }
.rise-4 { animation-delay: .75s }
.rise-5 { animation-delay: .95s }
.rise-6 { animation-delay: 1.15s }

/* ---------- gold rule ---------- */
.gold-rule {
    width: 40px;
    height: 1px;
    background: #B8860B;
}

/* ---------- grain overlay ---------- */
.grain::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .03;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") repeat;
    background-size: 200px;
    pointer-events: none;
}

/* ---------- chat ---------- */
.chat-human { background: #EDEAE3; }
.chat-ai    { background: #1A1A1A; color: #F7F5F0; }

/* ---------- form ---------- */
.field {
    width: 100%;
    padding: .8rem 1rem;
    min-height: 48px;
    border: 1px solid #C8C2B4;
    border-radius: 6px;
    background: #fff;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1rem;
    color: #1A1A1A;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
}

.field:focus {
    border-color: #B8860B;
    box-shadow: 0 0 0 3px rgba(184, 134, 11, .1);
}

.field::placeholder { color: #A69F91; }
.field.err { border-color: #dc2626; }

/* ---------- buttons ---------- */
.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: #1A1A1A;
    color: #F7F5F0;
    font-weight: 700;
    font-size: .95rem;
    padding: 1rem 2.5rem;
    border-radius: 999px;
    transition: all .35s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 0 2px 12px rgba(26, 26, 26, .12);
}

.btn-gold:hover {
    background: #B8860B;
    color: #fff;
    box-shadow: 0 4px 24px rgba(184, 134, 11, .25);
    transform: translateY(-2px);
}

.btn-gold-inv {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: #F7F5F0;
    color: #1A1A1A;
    font-weight: 700;
    font-size: .95rem;
    padding: 1rem 2.5rem;
    border-radius: 999px;
    transition: all .35s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 0 2px 12px rgba(26, 26, 26, .2);
}

.btn-gold-inv:hover {
    background: #B8860B;
    color: #fff;
    box-shadow: 0 4px 24px rgba(184, 134, 11, .25);
    transform: translateY(-2px);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    color: #1A1A1A;
    font-weight: 700;
    font-size: .95rem;
    padding: 1rem 2.5rem;
    border-radius: 999px;
    border: 1.5px solid #A69F91;
    transition: all .35s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 0 1px 4px rgba(26, 26, 26, .06);
}

.btn-outline:hover {
    border-color: #B8860B;
    color: #B8860B;
    background: #fffdf8;
    box-shadow: 0 4px 16px rgba(184, 134, 11, .12);
    transform: translateY(-2px);
}

.btn-gold-premium {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: transparent;
    color: #D4A22B;
    font-weight: 700;
    font-size: .95rem;
    padding: 1rem 2.5rem;
    border-radius: 999px;
    border: 1.5px solid #B8860B;
    transition: all .35s cubic-bezier(.16, 1, .3, 1);
}

.btn-gold-premium:hover {
    background: #B8860B;
    color: #fff;
    box-shadow: 0 4px 24px rgba(184, 134, 11, .3);
    transform: translateY(-2px);
}

/* ---------- plan cards ---------- */
.plan-card {
    transition: transform .35s cubic-bezier(.16, 1, .3, 1),
        box-shadow .35s cubic-bezier(.16, 1, .3, 1);
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(26, 26, 26, .08);
}

.plan-recommended {
    box-shadow: 0 4px 24px rgba(184, 134, 11, .12);
}

.plan-recommended:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(184, 134, 11, .18);
}

@media (max-width: 767px) {
    .plan-recommended {
        order: -1;
        border-left: 3px solid #B8860B;
        border-top: 2px solid #B8860B;
        box-shadow: 0 6px 32px rgba(184, 134, 11, .16);
    }
}

/* ---------- comparison table ---------- */
.col-highlight { background: rgba(184, 134, 11, .04); }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar       { width: 5px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: #C8C2B4; border-radius: 3px }

/* ---------- float indicator ---------- */
@keyframes drift {
    0%, 100% { transform: translateY(0) }
    50%      { transform: translateY(-6px) }
}

.drift { animation: drift 3s ease-in-out infinite }

/* ---------- footer ---------- */
/* ---------- mobile menu ---------- */
.mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(247, 245, 240, .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(200, 194, 180, .3);
    z-index: 49;
    padding: 1.5rem 1.5rem 2rem;
}

.mobile-menu.open {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-menu a {
    display: block;
    padding: .875rem 0;
    border-bottom: 1px solid rgba(200, 194, 180, .2);
    color: #5C574E;
    font-size: .875rem;
    letter-spacing: .08em;
    transition: color .2s;
}

.mobile-menu a:last-child {
    border-bottom: none;
    margin-top: 1rem;
    padding: .875rem 1.5rem;
    background: #1A1A1A;
    color: #F7F5F0;
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
}

.mobile-menu a:hover { color: #B8860B; }
.mobile-menu a:last-child:hover { background: #B8860B; color: #fff; }

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    border: none;
    background: none;
}

.hamburger span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: #1A1A1A;
    transition: transform .3s, opacity .3s;
}

.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 640px) {
    .hamburger { display: none; }
    .mobile-menu { display: none !important; }
}

/* ---------- dark hero nav ---------- */
.nav-dark-hero:not(.scrolled) .nav-link {
    color: rgba(247, 245, 240, .7);
}
.nav-dark-hero:not(.scrolled) .nav-link:hover,
.nav-dark-hero:not(.scrolled) .nav-link.active {
    color: #F7F5F0;
}
.nav-dark-hero:not(.scrolled) .nav-link.active::after {
    background: #D4A22B;
}
.nav-dark-hero:not(.scrolled) .nav-cta {
    background: rgba(247, 245, 240, .15);
    color: #F7F5F0;
    border: 1px solid rgba(247, 245, 240, .3);
}
.nav-dark-hero:not(.scrolled) .nav-cta:hover {
    background: #B8860B;
    border-color: #B8860B;
}
.nav-dark-hero:not(.scrolled) > div > a.font-serif {
    color: #F7F5F0;
}
.nav-dark-hero:not(.scrolled) .hamburger span {
    background: #F7F5F0;
}

/* ---------- footer ---------- */
.footer-link {
    color: #8A8478;
    font-size: .8rem;
    letter-spacing: .08em;
    transition: color .25s;
}

.footer-link:hover {
    color: #B8860B;
}