/* ======================================================
   BRINECRAFT
   Craft / Eco / Luxury Theme
====================================================== */

:root{

--bg:#0d0d0b;
--bg2:#141411;

--paper:#efe8d7;

--gold:#d9c9a3;

--green:#5f7143;

--green2:#7c8e5d;

--brown:#8b6943;

--text:#f5f1e6;

--muted:#b8b2a3;

--border:rgba(255,255,255,.08);

--shadow:0 25px 70px rgba(0,0,0,.45);

--radius:18px;

--transition:.35s ease;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);

color:var(--text);

font-family:Inter,sans-serif;

line-height:1.7;

overflow-x:hidden;

}

/* ========================================= */

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(circle at top,#22301822,transparent 40%),

radial-gradient(circle at bottom,#3b291533,transparent 45%);

z-index:-3;

}

/* ========================================= */

#noise{

position:fixed;

inset:0;

pointer-events:none;

opacity:.045;

background-image:

url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

z-index:1000;

}

/* ========================================= */

.container{

width:min(1200px,92%);

margin:auto;

}

.narrow{

max-width:760px;

}

/* ========================================= */

header{

position:fixed;

top:0;

left:0;

right:0;

backdrop-filter:blur(16px);

background:rgba(10,10,10,.45);

border-bottom:1px solid rgba(255,255,255,.05);

z-index:100;

transition:.4s;

}

.nav{

height:82px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

height:62px;

transition:.3s;

}

.logo:hover{

transform:scale(1.04);

}

/* ========================================= */

nav{

display:flex;

gap:38px;

}

nav a{

color:var(--paper);

text-decoration:none;

font-size:15px;

letter-spacing:.08em;

text-transform:uppercase;

position:relative;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:1px;

background:var(--gold);

transition:.35s;

}

nav a:hover{

color:var(--gold);

}

nav a:hover::after{

width:100%;

}

/* ========================================= */

.hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

/* mountain silhouette */

.mountains{

position:absolute;

left:0;

right:0;

bottom:0;

height:260px;

background:

linear-gradient(to top,#0b0b0b,transparent),

url("assets/machhapuchhre.svg") bottom center/cover no-repeat;

opacity:.45;

}

/* ========================================= */

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,.35),

rgba(0,0,0,.55)

),

radial-gradient(

circle,

transparent,

rgba(0,0,0,.75)

);

}

/* ========================================= */

.hero-content{

position:relative;

z-index:5;

text-align:center;

max-width:850px;

padding:20px;

animation:fadeUp 1.4s;

}

.hero h1{

font-family:"Cormorant Garamond",serif;

font-size:88px;

line-height:.95;

letter-spacing:.03em;

font-weight:700;

margin-bottom:30px;

}

.hero p{

max-width:620px;

margin:auto;

font-size:22px;

color:var(--muted);

margin-bottom:42px;

}

/* ========================================= */

.button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 42px;

border-radius:100px;

background:linear-gradient(

135deg,

var(--green),

var(--green2)

);

color:white;

text-decoration:none;

font-weight:600;

letter-spacing:.05em;

transition:var(--transition);

box-shadow:var(--shadow);

}

.button:hover{

transform:translateY(-4px);

filter:brightness(1.08);

}

/* ========================================= */

section{

padding:110px 0;

}

h2{

font-family:"Cormorant Garamond",serif;

font-size:58px;

text-align:center;

margin-bottom:50px;

color:var(--gold);

}

section p{

color:var(--muted);

font-size:18px;

}

/* ========================================= */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

/* ========================================= */

@media(max-width:900px){

.hero h1{

font-size:60px;

}

nav{

display:none;

}

.logo{

height:54px;

}

section{

padding:80px 0;

}

}
/* ======================================================
   ABOUT
====================================================== */

#about{

position:relative;

}

#about .narrow{

text-align:center;

}

#about p{

font-size:20px;

line-height:2;

color:var(--muted);

}

/* ======================================================
   PRODUCTS
====================================================== */

.product-image{

margin:60px auto;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

border:1px solid var(--border);

}

.product-image img{

display:block;

width:100%;

transition:1s;

}

.product-image:hover img{

transform:scale(1.03);

}

/* ========================================= */

.cards{

margin-top:70px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.card{

background:linear-gradient(

180deg,

rgba(255,255,255,.05),

rgba(255,255,255,.02)

);

border:1px solid rgba(255,255,255,.08);

padding:40px;

border-radius:18px;

backdrop-filter:blur(12px);

transition:.4s;

position:relative;

overflow:hidden;

}

/* золотой отсвет */

.card::before{

content:"";

position:absolute;

top:-120px;

left:-80px;

width:180px;

height:180px;

border-radius:50%;

background:rgba(217,201,163,.08);

filter:blur(30px);

transition:.6s;

}

.card:hover::before{

transform:scale(1.4);

}

.card:hover{

transform:translateY(-12px);

border-color:rgba(217,201,163,.35);

box-shadow:

0 25px 60px rgba(0,0,0,.45);

}

.card h3{

font-family:"Cormorant Garamond",serif;

font-size:36px;

color:var(--gold);

margin-bottom:18px;

}

.card p{

font-size:16px;

line-height:1.8;

}

/* ======================================================
   FEATURES
====================================================== */

.features{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

margin-top:60px;

}

.feature{

padding:42px;

border-radius:18px;

background:#171714;

border:1px solid rgba(255,255,255,.05);

transition:.35s;

text-align:center;

}

.feature:hover{

background:#1d1d19;

transform:translateY(-8px);

}

.feature span{

display:block;

font-size:58px;

margin-bottom:25px;

}

.feature h3{

font-family:"Cormorant Garamond",serif;

font-size:34px;

margin-bottom:16px;

color:var(--gold);

}

.feature p{

font-size:17px;

color:var(--muted);

}

/* ======================================================
   CONTACT
====================================================== */

#contact{

position:relative;

}

form{

margin-top:45px;

display:flex;

flex-direction:column;

gap:22px;

}

input,
textarea{

background:#151513;

border:1px solid rgba(255,255,255,.08);

color:white;

padding:18px 22px;

font-size:16px;

border-radius:14px;

outline:none;

transition:.3s;

font-family:Inter,sans-serif;

}

input:focus,
textarea:focus{

border-color:var(--green2);

box-shadow:

0 0 0 3px rgba(95,113,67,.18);

}

textarea{

min-height:180px;

resize:vertical;

}

button{

border:none;

cursor:pointer;

padding:18px;

border-radius:999px;

font-size:16px;

font-weight:600;

background:linear-gradient(

135deg,

var(--green),

var(--green2)

);

color:white;

transition:.3s;

}

button:hover{

transform:translateY(-3px);

filter:brightness(1.08);

}

#result{

min-height:28px;

margin-top:10px;

font-size:15px;

color:var(--gold);

}

.honeypot{

display:none;

}

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

footer{

margin-top:80px;

padding:70px 0 25px;

background:#090909;

border-top:1px solid rgba(255,255,255,.06);

}

.footer{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:40px;

}

.footer h3{

font-family:"Cormorant Garamond",serif;

font-size:42px;

margin-bottom:12px;

color:var(--gold);

}

.footer p{

color:var(--muted);

}

.footer a{

color:var(--paper);

text-decoration:none;

transition:.3s;

}

.footer a:hover{

color:var(--gold);

}

.copyright{

margin-top:55px;

text-align:center;

font-size:14px;

color:#888;

letter-spacing:.08em;

}

/* ======================================================
   SCROLL ANIMATION
====================================================== */

.reveal{

opacity:0;

transform:translateY(60px);

transition:

opacity .9s ease,

transform .9s ease;

}

.reveal.visible{

opacity:1;

transform:none;

}

/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:900px){

.cards{

grid-template-columns:1fr;

}

.features{

grid-template-columns:1fr;

}

.footer{

grid-template-columns:1fr;

text-align:center;

}

h2{

font-size:42px;

}

#about p{

font-size:18px;

}

.hero p{

font-size:19px;

}

.product-image{

margin:40px auto;

}

}

@media(max-width:600px){

.hero h1{

font-size:46px;

}

.button{

width:100%;

}

input,
textarea,
button{

font-size:15px;

}

.logo{

height:46px;

}

}