*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%}

body{
    font-family:Poppins,Segoe UI,sans-serif;
    background:#020814;
    color:#fff;
    overflow-x:hidden;
}

/* BACKGROUND */
.background{
    position:fixed;
    inset:0;
    object-fit:cover;
    z-index:1;
    filter:brightness(.7) saturate(1.2);
}

/* TENTÁCULOS */
.tentaculos-container{
    position:fixed;
    inset:0;
    z-index:2;
    pointer-events:none;
}

#tentaculos-canvas{
    width:100%;
    height:100%;
}

/* CONTAINER */
.container{
    position:relative;
    z-index:5;
    max-width:900px;
    margin:40px auto;
    padding:20px;
}

/* === OCEAN LAYOUT BASE === */

html, body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: #020814;
    color: #fff;
    overflow-x: hidden;
}

/* Fundo */
.background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Vinheta oceânica */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at center,
            rgba(0,0,0,0) 0%,
            rgba(2,8,20,.75) 70%,
            rgba(2,8,20,.95) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Tentáculos */
.tentaculos-container {
    position: fixed;
    inset: -15%;
    z-index: 3;
    pointer-events: none;
}

/* Conteúdo */
.container {
    position: relative;
    z-index: 4;
}

/* Botões base */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all .25s ease;
}