/* ==========================================
   MARTIN v2
   Design 2026
========================================== */

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

:root{

--bg:#F5F2EC;
--card:#FCF8F2;
--text:#241C16;
--textLight:#786C61;

--white:#FFFFFF;

--shadow:
0 10px 35px rgba(0,0,0,.08);

--radius:28px;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Manrope",sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

user-select:none;

-webkit-user-drag:none;

}

button{

border:none;

outline:none;

background:none;

cursor:pointer;

font-family:inherit;

}

a{

text-decoration:none;

color:inherit;

}

.app{

width:100%;

max-width:430px;

margin:auto;

background:var(--bg);

min-height:100vh;

}

/* ==========================================
   HERO
========================================== */

.hero{

position:relative;

height:100vh;

min-height:760px;

overflow:hidden;

display:flex;

align-items:flex-start;

justify-content:flex-start;

}

.heroBackground{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

object-position:center;

z-index:1;

}

.heroOverlay{

position:absolute;

inset:0;

z-index:2;

background:

linear-gradient(

90deg,

rgba(17,15,14,.72) 0%,

rgba(17,15,14,.48) 28%,

rgba(17,15,14,.12) 60%,

transparent 100%

);

}

/* ==========================================
   HEADER
========================================== */

.heroHeader{

position:absolute;

left:0;

right:0;

top:0;

z-index:5;

padding:24px;

display:flex;

justify-content:space-between;

align-items:center;

}

.brand{

display:flex;

align-items:center;

gap:14px;

color:white;

}

.brandLogo{

width:48px;

height:48px;

border-radius:18px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(18px);

display:flex;

align-items:center;

justify-content:center;

}

.brandLogo img{

width:24px;

height:24px;

filter:brightness(100);

}

.brand h3{

font-size:18px;

font-weight:800;

line-height:1;

}

.brand p{

font-size:13px;

opacity:.75;

margin-top:4px;

}

.headerButtons{

display:flex;

align-items:center;

gap:12px;

}

.supportBtn{

height:46px;

padding:0 18px;

border-radius:18px;

background:rgba(255,255,255,.14);

backdrop-filter:blur(20px);

display:flex;

align-items:center;

gap:10px;

color:white;

font-weight:700;

font-size:15px;

}

.supportBtn img{

width:18px;

height:18px;

}

.menuBtn{

width:46px;

height:46px;

border-radius:18px;

background:rgba(255,255,255,.14);

backdrop-filter:blur(20px);

display:flex;

align-items:center;

justify-content:center;

}

.menuBtn img{

width:22px;

height:22px;

}
/* ==========================================
   HERO CONTENT
========================================== */

.heroContent{

position:relative;

z-index:5;

margin-top:150px;

padding:0 24px;

width:100%;

max-width:300px;

color:#fff;

}

.heroContent h1{

font-size:58px;

font-weight:800;

line-height:.95;

letter-spacing:-2px;

margin-bottom:10px;

text-transform:uppercase;

}

.heroContent h2{

font-size:26px;

font-weight:700;

line-height:1.2;

margin-bottom:18px;

}

.heroLine{

width:72px;

height:5px;

border-radius:30px;

background:white;

opacity:.9;

margin-bottom:22px;

}

.heroContent p{

font-size:17px;

line-height:1.8;

color:rgba(255,255,255,.92);

margin-bottom:34px;

}

/* ==========================================
   SOCIAL BUTTONS
========================================== */

.socialButtons{

display:flex;

flex-direction:column;

gap:14px;

}

.socialButton{

height:58px;

border-radius:18px;

display:flex;

align-items:center;

padding:0 18px;

gap:14px;

font-size:16px;

font-weight:700;

color:white;

backdrop-filter:blur(18px);

transition:.25s;

}

.socialButton img{

width:22px;

height:22px;

}

.socialButton:active{

transform:scale(.97);

}

.tiktok{

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

}

.instagram{

background:linear-gradient(
135deg,
rgba(131,58,180,.88),
rgba(253,29,29,.82),
rgba(252,176,69,.82)
);

}

.youtube{

background:rgba(255,255,255,.18);

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

}

.telegram{

background:rgba(26,140,255,.72);

}

/* ==========================================
   SECTION
========================================== */

.accordionSection{

padding:26px 18px 0;

margin-top:-36px;

position:relative;

z-index:10;

}

.accordionButton{

width:100%;

background:var(--card);

border-radius:28px;

padding:22px;

display:flex;

align-items:center;

justify-content:space-between;

box-shadow:var(--shadow);

}

.accordionButton h2{

display:flex;

align-items:center;

gap:12px;

font-size:24px;

font-weight:800;

margin-bottom:10px;

}

.accordionButton h2 img{

width:24px;

height:24px;

}

.accordionButton p{

font-size:15px;

line-height:1.6;

color:var(--textLight);

max-width:220px;

}

#accordionArrow{

width:22px;

height:22px;

transition:.35s;

}

.accordionContent{

display:none;

padding-top:18px;

}

.accordionContent.open{

display:block;

}
/* ==========================================
   LOVE CARDS
========================================== */

.loveGrid{

display:grid;

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

gap:16px;

}

.loveCard{

background:var(--card);

border-radius:26px;

padding:22px;

box-shadow:var(--shadow);

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

transition:.25s;

min-height:160px;

}

.loveCard:active{

transform:scale(.97);

}

.loveCard img{

width:58px;

height:58px;

margin-bottom:18px;

}

.loveCard h3{

font-size:18px;

font-weight:800;

line-height:1.3;

}

/* ==========================================
   COMMON SECTIONS
========================================== */

.photosSection,
.videosSection,
.supportSection,
.friendsSection{

padding:42px 18px 0;

}

.sectionHeader{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:22px;

}

.sectionHeader h2{

font-size:30px;

font-weight:800;

color:var(--text);

}

.sectionLink{

font-size:15px;

font-weight:700;

color:#9C846A;

}

/* ==========================================
   PHOTO SLIDER
========================================== */

.photoSlider{

display:flex;

gap:16px;

overflow-x:auto;

padding-bottom:8px;

scrollbar-width:none;

}

.photoSlider::-webkit-scrollbar{

display:none;

}

.photoCard{

flex:0 0 210px;

height:270px;

border-radius:28px;

overflow:hidden;

background:white;

box-shadow:var(--shadow);

}

.photoCard img{

width:100%;

height:100%;

object-fit:cover;

}

/* ==========================================
   VIDEO SLIDER
========================================== */

.videoSlider{

display:flex;

gap:16px;

overflow-x:auto;

padding-bottom:8px;

scrollbar-width:none;

}

.videoSlider::-webkit-scrollbar{

display:none;

}

.videoCard{

flex:0 0 270px;

background:#fff;

border-radius:28px;

overflow:hidden;

box-shadow:0 14px 36px rgba(0,0,0,.08);

transition:.3s;

cursor:pointer;

}

.videoCard:hover{

transform:translateY(-6px);

box-shadow:0 22px 48px rgba(0,0,0,.12);

}

.videoThumb{

position:relative;

height:190px;

overflow:hidden;

}

.videoThumb img{

width:100%;

height:100%;

object-fit:cover;

transition:.35s;

}

.videoCard:hover img{

transform:scale(1.05);

}

.videoDuration{

position:absolute;

right:12px;

bottom:12px;

padding:6px 10px;

border-radius:12px;

background:rgba(0,0,0,.7);

color:white;

font-size:12px;

font-weight:700;

}

.videoInfo{

padding:18px;

}

.videoInfo h3{

font-size:18px;

font-weight:800;

margin-bottom:8px;

}

.videoInfo p{

font-size:14px;

color:var(--textLight);

}
/* ==========================================
   SUPPORT
========================================== */

.supportCard{

display:flex;

align-items:center;

justify-content:space-between;

gap:18px;

background:var(--card);

padding:24px;

border-radius:32px;

box-shadow:var(--shadow);

}

.supportText{

flex:1;

}

.supportText h2{

font-size:32px;

font-weight:800;

line-height:1.2;

margin-bottom:16px;

}

.supportText p{

font-size:16px;

line-height:1.8;

color:var(--textLight);

margin-bottom:24px;

}

.supportButton{

height:56px;

padding:0 28px;

border-radius:18px;

background:#1F1A17;

color:white;

font-size:16px;

font-weight:700;

transition:.25s;

}

.supportButton:hover{

transform:translateY(-2px);

}

.supportButton:active{

transform:scale(.97);

}

.supportPhoto{

width:130px;

height:130px;

border-radius:28px;

overflow:hidden;

flex-shrink:0;

}

.supportPhoto img{

width:100%;

height:100%;

object-fit:cover;

}

/* ==========================================
   FRIENDS
========================================== */

.friendsList{

display:flex;

flex-direction:column;

gap:14px;

}

.friendCard{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 22px;

background:var(--card);

border-radius:22px;

box-shadow:var(--shadow);

}

.friendName{

font-size:17px;

font-weight:800;

}

.friendAmount{

font-size:16px;

font-weight:700;

color:#C58A3C;

}

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

.footer{

padding:60px 20px 40px;

text-align:center;

}

.footerLogo{

display:flex;

justify-content:center;

align-items:center;

gap:14px;

margin-bottom:18px;

}

.footerLogo img{

width:34px;

height:34px;

}

.footerLogo span{

font-size:24px;

font-weight:800;

}

.footer p{

font-size:15px;

line-height:1.8;

color:var(--textLight);

max-width:320px;

margin:auto;

}

/* ==========================================
   SIDE MENU
========================================== */

.sideMenu{

position:fixed;

top:0;

right:-100%;

width:320px;

max-width:90%;

height:100vh;

background:white;

box-shadow:-20px 0 40px rgba(0,0,0,.12);

z-index:999;

transition:right .35s ease;

display:flex;

flex-direction:column;

}

.sideMenu.open{

right:0;

}

.sideMenuContent{

padding:28px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

height:100%;

}

.closeMenu{

position:absolute;

top:20px;

right:20px;

width:44px;

height:44px;

border-radius:16px;

background:#F4F1EC;

display:flex;

align-items:center;

justify-content:center;

}

.closeMenu img{

width:18px;

height:18px;

}

.sideMenuContent h2{

font-size:34px;

font-weight:800;

margin-bottom:10px;

text-align:center;

}

.comingText{

font-size:17px;

color:var(--textLight);

text-align:center;

line-height:1.7;

margin-bottom:30px;

}

.loadingDots{

display:flex;

gap:10px;

}

.loadingDots span{

width:12px;

height:12px;

border-radius:50%;

background:#C58A3C;

animation:loadingDots 1.2s infinite;

}

.loadingDots span:nth-child(2){

animation-delay:.2s;

}

.loadingDots span:nth-child(3){

animation-delay:.4s;

}

@keyframes loadingDots{

0%{

transform:translateY(0);

opacity:.35;

}

50%{

transform:translateY(-10px);

opacity:1;

}

100%{

transform:translateY(0);

opacity:.35;

}

}
/* ==========================================
   DONATE POPUP
========================================== */

.donateOverlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.55);

backdrop-filter:blur(8px);

display:none;

align-items:center;

justify-content:center;

padding:20px;

z-index:1000;

}

.donateModal{

position:relative;

width:100%;

max-width:420px;

background:#fff;

border-radius:34px;

padding:30px;

box-shadow:

0 25px 70px rgba(0,0,0,.18);

}

.closeDonate{

position:absolute;

top:18px;

right:18px;

width:44px;

height:44px;

border-radius:16px;

background:#F4F1EC;

display:flex;

align-items:center;

justify-content:center;

}

.closeDonate img{

width:18px;

height:18px;

}

.donateModal h2{

font-size:30px;

font-weight:800;

margin-bottom:14px;

}

.donateModal p{

font-size:16px;

line-height:1.7;

color:var(--textLight);

margin-bottom:22px;

}

.donateLink{

display:flex;

align-items:center;

justify-content:center;

height:56px;

border-radius:18px;

background:#1F1A17;

color:#fff;

font-weight:700;

margin-bottom:18px;

}

.donateModal input{

width:100%;

height:56px;

padding:0 18px;

margin-bottom:14px;

border:none;

outline:none;

border-radius:18px;

background:#F4F1EC;

font-size:16px;

font-family:inherit;

}

.checkbox{

display:flex;

align-items:center;

gap:12px;

font-size:15px;

margin:10px 0 22px;

color:var(--textLight);

}

.checkbox input{

width:20px;

height:20px;

}

.sendDonate{

width:100%;

height:58px;

border-radius:18px;

background:#1F1A17;

color:white;

font-size:17px;

font-weight:700;

transition:.25s;

}

.sendDonate:hover{

transform:translateY(-2px);

}

.sendDonate:active{

transform:scale(.98);

}

/* ==========================================
   MENU OVERLAY
========================================== */

.menuOverlay{

position:fixed;

inset:0;

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

backdrop-filter:blur(4px);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:998;

}

.menuOverlay.open{

opacity:1;

visibility:visible;

}

/* ==========================================
   PHOTO VIEWER
========================================== */

.photoViewer{

position:fixed;

inset:0;

display:none;

align-items:center;

justify-content:center;

background:rgba(0,0,0,.92);

z-index:1200;

padding:20px;

}

.viewerClose{

position:absolute;

top:20px;

right:20px;

width:48px;

height:48px;

border-radius:18px;

background:rgba(255,255,255,.12);

color:white;

font-size:20px;

}

#viewerImage{

max-width:100%;

max-height:90vh;

border-radius:24px;

object-fit:contain;

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

.loader{

position:fixed;

inset:0;

background:#F5F2EC;

display:flex;

align-items:center;

justify-content:center;

z-index:2000;

transition:.5s;

}

.loader.hide{

opacity:0;

visibility:hidden;

}

.loaderContent{

display:flex;

flex-direction:column;

align-items:center;

gap:18px;

}

.loaderPaws{

font-size:34px;

animation:paws 1.4s infinite;

letter-spacing:8px;

}

.loader h2{

font-size:34px;

font-weight:800;

color:var(--text);

}

.loader p{

font-size:16px;

color:var(--textLight);

}

@keyframes paws{

0%{

transform:translateX(-12px);

opacity:.3;

}

50%{

transform:translateX(12px);

opacity:1;

}

100%{

transform:translateX(-12px);

opacity:.3;

}

}

/* ==========================================
   ANIMATIONS
========================================== */

.heroContent,
.accordionSection,
.photosSection,
.videosSection,
.supportSection,
.friendsSection,
.footer{

animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:none;

}

}

.supportBtn,
.menuBtn,
.socialButton,
.supportButton,
.sendDonate,
.loveCard,
.photoCard,
.videoCard{

transition:.25s;

}

.supportBtn:hover,
.menuBtn:hover,
.socialButton:hover,
.supportButton:hover,
.sendDonate:hover{

transform:translateY(-2px);

}

.supportBtn:active,
.menuBtn:active,
.socialButton:active,
.supportButton:active,
.sendDonate:active{

transform:scale(.97);

}

.photoCard:hover,
.videoCard:hover,
.loveCard:hover{

transform:translateY(-6px);

box-shadow:

0 18px 45px rgba(0,0,0,.12);

}

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

@media(max-width:480px){

.hero{

min-height:720px;

}

.heroHeader{

padding:18px;

}

.heroContent{

margin-top:135px;

padding:0 18px;

max-width:270px;

}

.heroContent h1{

font-size:48px;

}

.heroContent h2{

font-size:22px;

}

.heroContent p{

font-size:15px;

}

.supportCard{

flex-direction:column;

align-items:flex-start;

}

.supportPhoto{

width:100%;

height:230px;

}

.photoCard{

flex:0 0 180px;

height:230px;

}

.videoCard{

flex:0 0 230px;

}

.sectionHeader h2{

font-size:26px;

}

.loveCard{

min-height:145px;

padding:18px;

}

.donateModal{

padding:24px;

}

}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-thumb{

background:#CFC2B5;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:transparent;

}

::selection{

background:#D9C3AA;

color:#241C16;

}
/* ==========================================
   PAW TRAIL
========================================== */

.pawTrail{

position:fixed;

width:28px;
height:28px;
opacity:.16;

pointer-events:none;

opacity:0;

z-index:30;

animation:pawTrail 3s ease forwards;

}

@keyframes pawTrail{

0%{

opacity:0;

transform:
scale(.7)
rotate(-12deg);

}

20%{

opacity:.38;

}

80%{

opacity:.38;

}

100%{

opacity:0;

transform:
scale(1)
rotate(12deg);

}

}
/* ==========================================
   VOICE POPUP
========================================== */

.voicePopup{

position:fixed;

left:50%;

bottom:20px;

transform:translateX(-50%);

width:360px;

max-width:calc(100% - 30px);

background:#fff;

border-radius:28px;

box-shadow:0 20px 60px rgba(0,0,0,.18);

overflow:hidden;

z-index:3000;

display:none;

animation:voiceShow .45s ease;

}

.voiceVideo{

display:block;

width:100%;

height:180px;

object-fit:cover;

background:#000;

}

.closeVoice{

position:absolute;

top:12px;

right:12px;

width:36px;

height:36px;

border-radius:50%;

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

color:#fff;

font-size:18px;

z-index:2;

}

.voicePopup h3{

font-size:28px;

font-weight:800;

text-align:center;

margin-top:20px;

margin-bottom:10px;

}

.voicePopup p{

font-size:16px;

line-height:1.6;

color:var(--textLight);

text-align:center;

padding:0 22px;

margin-bottom:22px;

}

.voiceButton{

width:calc(100% - 40px);

height:56px;

margin:0 20px 20px;

border-radius:18px;

background:#1F1A17;

color:#fff;

font-size:17px;

font-weight:700;

}

@keyframes voiceShow{

from{

opacity:0;

transform:translate(-50%,40px);

}

to{

opacity:1;

transform:translate(-50%,0);

}

}

from{

opacity:0;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes dogBounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}