/* ====================================================== RESET ====================================================== */

html{
overflow-x:hidden;
width:100%;
max-width:100%;
scroll-behavior:smooth;
}

body{
overflow-x:hidden;
width:100%;
max-width:100%;
font-family:Arial, sans-serif;
background:#fff;
color:#111;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

a{
color:inherit;
text-decoration:none;
cursor:pointer;
}

/* ---------------------------- */
/* BUTTON BASE */
/* ---------------------------- */

button{
border:none;
background:none;
font-family:inherit;
cursor:pointer;
transition:all .25s ease;
}

button:disabled{
opacity:.6;
cursor:not-allowed;
}
/* ---------------------------- */
/* SMOOTH HOVER EFFECT */
/* ---------------------------- */

a,
button{
transition:opacity .25s ease, transform .25s ease;
}

a:hover,
button:hover{
opacity:.85;
}


/* ---------------------------- */
/* SCROLLBAR CLEAN */
/* ---------------------------- */

::-webkit-scrollbar{
width:6px;
}

::-webkit-scrollbar-track{
background:transparent;
}

::-webkit-scrollbar-thumb{
background:#ccc;
border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
background:#999;
}

/* ---------------------------- */
/* SELECTION COLOR */
/* ---------------------------- */

::selection{
background:#111;
color:#fff;
}



/* ====================================================== LOADER ====================================================== */

#loader{
position:fixed;
inset:0;
background:#000;
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

#loader span{
color:#222;
font-size:40px;
letter-spacing:6px;
position:relative;
}

#loader span::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,transparent,#fff,transparent);
animation:sweep 2.4s ease forwards;
}

@keyframes sweep{
from{transform:translateX(-120%)}
to{transform:translateX(120%)}
}

/* ====================================================== NAV ====================================================== */

.nav{
position:fixed;
top:0;
width:100%;
background:#000;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 6%;
z-index:1000;
}

/* ====================================================== NAV LINK SYSTEM (GLOBAL) ====================================================== */

.nav nav a{
position:relative;
color:#fff;
text-decoration:none;
font-size:13px;
letter-spacing:2px;
padding:8px 0;
margin-left:30px;
display:inline-block;
transition:color .3s ease;
}

.nav nav a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0%;
height:2px;
background:#fff;
transition:width .35s ease;
}

.nav nav a:hover::after{
width:100%;
}

.logo img{
height:60px;
width:auto;
display:block;
}

.menu-toggle{
background:none;
border:none;
display:none;
}

.menu-toggle img{
width:32px;
}

/* ====================================================== HERO (CLEAN VERSION) ====================================================== */

.hero{
height:100vh;
background:#000;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
}

.hero-inner{
position:relative;
text-align:center;
}

.main-line{
font-family:'Anton', sans-serif;
font-size:clamp(120px,20vw,260px);
line-height:.85;
}

.second-line{
font-family:'Anton', sans-serif;
font-size:clamp(120px,20vw,260px);
line-height:.85;
color:transparent;
-webkit-text-stroke:2px #fff;
position:relative;
display:inline-block;
}

/* ====================================================== REALISTIC HANGING TAG ====================================================== */

.real-tag{
position:absolute;
top:60%;
left:68%;
transform-origin:top center;
text-decoration:none;
display:block;
width:115px;
animation:heavySwing 4.5s cubic-bezier(.55,.05,.45,.95) infinite;
z-index:50;
}

/* Rope */

.rope{
position:absolute;
top:-180px;
left:50%;
transform:translateX(-50%);
width:60px;
height:180px;
filter:drop-shadow(0 4px 6px rgba(0,0,0,.7));
}

/* Tag body */

.tag-body{
position:relative;
background:linear-gradient(145deg,#1c1c1c,#000);
color:#fff;
padding:24px 18px;
font-size:15px;
font-weight:900;
letter-spacing:2px;
text-align:center;
border-radius:6px;
box-shadow:
0 40px 60px rgba(0,0,0,.75),
inset 0 0 3px rgba(255,255,255,.15);
transform:rotate(20deg);
transform-origin:top center;
transition:.4s ease;
}

.tag-hole{
position:absolute;
top:-9px;
left:50%;
transform:translateX(-50%);
width:11px;
height:11px;
background:#000;
border-radius:50%;
box-shadow:
0 0 0 2px #111,
inset 0 0 2px rgba(255,255,255,.4);
}

/* UPDATED Swing animation */

@keyframes heavySwing{

0% { transform:rotate(32deg); }

18% { transform:rotate(4deg); }

38% { transform:rotate(-22deg); }

55% { transform:rotate(10deg); }

72% { transform:rotate(26deg); }

100% { transform:rotate(32deg); }

}

.real-tag:hover .tag-body{
transform:rotate(3deg) scale(1.08);
}

/* ====================================================== DROPS ====================================================== */

.drops{
background:#fff;
color:#000;
padding:160px 6%;
text-align:center;
}

.drops h2{
font-family:'Anton', sans-serif;
font-size:clamp(40px,6vw,90px);
}

.drops button{
margin-top:40px;
padding:12px 28px;
background:#000;
color:#fff;
border:none;
font-weight:900;
letter-spacing:2px;
cursor:pointer;
}

/* ====================================================== ABOUT + CONTACT ====================================================== */

.page{
padding:200px 6% 120px;
max-width:800px;
}

.page h1{
font-family:'Anton', sans-serif;
font-size:100px;
margin-bottom:40px;
}

.contact-box p{
margin-bottom:20px;
}

.contact-box a{
color:#000;
text-decoration:underline;
}

/* ====================================================== FOOTER ====================================================== */

/* ====================================================== REFINED FOOTER STRUCTURE ====================================================== */

.main-footer{
background:#000;
color:#fff;
padding:60px 6%;
}

.footer-top{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}

.footer-logo img{
height:100px;
width:auto;
display:block;
}

.footer-est{
display:flex;
align-items:center;
gap:8px;
}

.footer-est .est{
font-size:14px;
letter-spacing:2px;
opacity:.7;
}

.footer-est .infinity{
font-size:32px;
font-weight:900;
line-height:1;
}

/* ====================================================== CLASSIC STURBBØN FOOTER (LEFT / RIGHT) ====================================================== */

.sub-footer{
background:#000;
color:#fff;
padding:50px 6%;
display:flex;
justify-content:space-between;
align-items:center;
}

/* LEFT SIDE */

.footer-left{
font-family:'Anton', sans-serif;
font-size:28px;
letter-spacing:2px;
}

/* RIGHT SIDE */

.footer-right{
display:flex;
align-items:center;
gap:8px;
}

.footer-right .est{
font-size:13px;
letter-spacing:2px;
opacity:.5;
}

.footer-right .infinity{
font-size:42px;
font-weight:900;
line-height:1;
}

/* MOBILE */

@media(max-width:768px){

.main-footer{
flex-direction:column;
gap:20px;
text-align:center;
}

.footer-left{
font-size:24px;
}

.footer-right .infinity{
font-size:36px;
}

}

/* ICON ROW */

.footer-icons{
margin-top:40px;
display:flex;
justify-content:center;
gap:32px;
flex-wrap:wrap;
}

.footer-icons a{
color:#fff;
font-size:22px;
transition:.3s ease;
}

.footer-icons a:hover{
opacity:.6;
}

/* MOBILE */

@media(max-width:768px){

.footer-top{
flex-direction:column;
gap:20px;
text-align:center;
}

.footer-logo img{
height:100px;
}

}

h4{
font-size:25px;
}

/* ====================================================== MODAL ====================================================== */

#drop-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.95);
display:none;
justify-content:center;
align-items:center;
}

.drop-box{
text-align:center;
color:#fff;
}

.join-link{
display:inline-block;
margin-top:20px;
padding:12px 28px;
border:1px solid #fff;
color:#fff;
text-decoration:none;
}

/* ====================================================== MOBILE ====================================================== */

@media(max-width:768px){

.nav-links{
position:absolute;
top:100%;
left:0;
width:100%;
background:#000;
flex-direction:column;
display:none;
text-align:center;
padding:20px 0;
}

.nav-links.active{
display:flex;
}

.nav-links a{
margin:10px 0;
}

.menu-toggle{
display:block;
}

.main-line,
.second-line{
font-size:clamp(80px,18vw,160px);
}

.real-tag{
left:65%;
top:63%;
width:85px;
}

.tag-body{
padding:16px 12px;
font-size:11px;
}

.rope{
height:120px;
top:-120px;
}

.logo img{
height:75px;
}

.footer-left img{
height:100px;
}

}

/* ====================================================== ABOUT PAGE ====================================================== */

.about-page{
padding:220px 6% 120px;
max-width:900px;
margin:0 auto;
background:#fff;
color:#000;
}

.about-title{
font-family:'Anton', sans-serif;
font-size:clamp(120px,15vw,220px);
line-height:.9;
margin-bottom:80px;
}

.about-text h2{
font-family:'Anton', sans-serif;
font-size:clamp(32px,4vw,48px);
font-weight:400;
line-height:1.4;
margin-bottom:50px;
}

.about-text p{
font-size:18px;
color: #000;
}

.about-text a{
color:#000;
text-decoration:underline;
}

.about-text a:visited{
color:#551A8B;
}

/* ====================================================== STURBBØN LINK DESIGN ====================================================== */

/* NAV LINK (HOME) */

/* ABOUT PAGE LINKS (pieces + contact) */

.about-text a{
position:relative;
color:#000;
text-decoration:none;
font-weight:600;
letter-spacing:1px;
padding:2px 0;
transition:.3s ease;
}

.about-text a::after{
content:"";
position:absolute;
left:0;
bottom:-3px;
width:100%;
height:2px;
background:#000;
transform:scaleX(.4);
transform-origin:left;
transition:transform .3s ease;
}

.about-text a:hover::after{
transform:scaleX(1);
}

/* ====================================================== CONTACT PAGE (DARK HIGH-END) ====================================================== */

/* ====================================================== CONTACT PAGE (FINAL DARK VERSION) ====================================================== */

.contact-page-dark{
background:#000;
color:#fff;
padding:220px 6% 160px;
min-height:100vh;
}

.contact-title-dark{
font-family:'Anton', sans-serif;
font-size:clamp(60px,14vw,200px);
line-height:.9;
margin-bottom:60px;
word-break:break-word;
}

.contact-subtext{
font-size:18px;
margin-bottom:50px;
letter-spacing:1px;
opacity:.8;
}

.contact-list-dark{
display:flex;
flex-direction:column;
gap:30px;
max-width:500px;
}

.contact-row-dark{
display:flex;
align-items:center;
gap:14px;
color:#fff;
text-decoration:none;
font-size:18px;
letter-spacing:1px;
transition:.3s ease;
}

.contact-row-dark:hover{
opacity:.6;
}

.contact-row-dark i{
font-size:20px;
width:28px;
display:inline-flex;
justify-content:center;
}

.contact-divider{
margin:90px 0 40px;
opacity:.6;
letter-spacing:2px;
}

.contact-piece-link a{
font-size:16px;
color:#fff;
text-decoration:none;
position:relative;
letter-spacing:2px;
}

.contact-piece-link a::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:100%;
height:2px;
background:#fff;
transform:scaleX(.4);
transform-origin:left;
transition:transform .3s ease;
}

.contact-piece-link a:hover::after{
transform:scaleX(1);
}

@media(max-width:768px){

.contact-title-dark{
margin-bottom:40px;
}

.contact-subtext{
font-size:16px;
}

.contact-row-dark{
font-size:16px;
}

}

.nav-cart{
color:white;
position:relative;
font-size:20px;
display:flex;
align-items:center;
text-decoration:none;
}

.nav-cart span{
position:absolute;
top:-6px;
right:-10px;
background:white;
color:black;
font-size:10px;
padding:2px 6px;
border-radius:20px;
}

/* PRODUCT CARD HOVER */

.product-card{
transition:transform .35s ease, box-shadow .35s ease;
}

.product-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

button{
transition:transform .15s ease, box-shadow .2s ease;
}

button:hover{
transform:translateY(-1px);
}

button:active{
transform:translateY(1px);
}

.nav-link{
position:relative;
}

.nav-link::after{
content:"";
position:absolute;
left:0;
bottom:-3px;
width:0;
height:1px;
background:#111;
transition:width .25s ease;
}

.nav-link:hover::after{
width:100%;
}

.navbar{
background:#000;
color:#fff;
}