/* Typography & variables */
/* e-Ukraine body */
@font-face{font-family:'e-Ukraine'; src:url('../fonts/e-Ukraine/e-Ukraine-Thin.otf') format('opentype'); font-weight:100; font-style:normal; font-display:swap}
@font-face{font-family:'e-Ukraine'; src:url('../fonts/e-Ukraine/e-Ukraine-UltraLight.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap}
@font-face{font-family:'e-Ukraine'; src:url('../fonts/e-Ukraine/e-Ukraine-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap}
@font-face{font-family:'e-Ukraine'; src:url('../fonts/e-Ukraine/e-Ukraine-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:'e-Ukraine'; src:url('../fonts/e-Ukraine/e-Ukraine-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:'e-Ukraine'; src:url('../fonts/e-Ukraine/e-Ukraine-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap}

/* e-Ukraine Head for headings */
@font-face{font-family:'e-Ukraine Head'; src:url('../fonts/e-Ukraine Head/e-UkraineHead-Thin.otf') format('opentype'); font-weight:100; font-style:normal; font-display:swap}
@font-face{font-family:'e-Ukraine Head'; src:url('../fonts/e-Ukraine Head/e-UkraineHead-UltraLight.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap}
@font-face{font-family:'e-Ukraine Head'; src:url('../fonts/e-Ukraine Head/e-UkraineHead-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap}
@font-face{font-family:'e-Ukraine Head'; src:url('../fonts/e-Ukraine Head/e-UkraineHead-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:'e-Ukraine Head'; src:url('../fonts/e-Ukraine Head/e-UkraineHead-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:'e-Ukraine Head'; src:url('../fonts/e-Ukraine Head/e-UkraineHead-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap}
:root{
  --bg: #0b1218;
  --bg-alt: #0e171f;
  --text: #e6edf3;
  --muted: #9fb3c8;
  --primary: #78e6d0;
  --primary-600: #35c9aa;
  --card: #0f1b24;
  --border: #173142;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: 'e-Ukraine', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text); background:var(--bg);
}
/* Custom cursor (desktop) */
@media (pointer:fine){
  body{cursor:url('/images/heart.svg') 8 8, auto}
}

h1,h2,h3{font-family: 'e-Ukraine Head', 'e-Ukraine', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial; margin:0 0 .6rem}
h1{font-size: clamp(2rem, 3.6vw, 3rem); line-height:1.12; font-weight:700; letter-spacing:.2px}
h2{font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight:600}
h3{font-size: clamp(1.125rem, 1.8vw, 1.25rem); font-weight:500}
p{color:var(--muted); line-height:1.7; margin:.5rem 0 1rem}

.container{width:min(1100px, 92%); margin-inline:auto}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(150%) blur(10px); background:linear-gradient(180deg, rgba(11,18,24,.8), rgba(11,18,24,.5) 60%, rgba(11,18,24,0)); border-bottom:1px solid rgba(255,255,255,.04)}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:.8rem}
.logo{width:38px; height:38px; border-radius:999px; display:grid; place-items:center; background:linear-gradient(135deg, var(--primary), #b3ffe6); color:#0b1513; font-weight:700; letter-spacing:.5px; box-shadow:var(--shadow)}
.brand-name{font-weight:600; font-family:'e-Ukraine Head','e-Ukraine',system-ui}
.brand-tag{color:var(--muted); font-size:.9rem; font-family:'e-Ukraine',system-ui}
.site-nav{display:flex; gap:1rem; align-items:center}
.site-nav a{color:var(--text); text-decoration:none; opacity:.86}
.site-nav a:hover{opacity:1}

.button{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; border:1px solid var(--border); color:var(--text); padding:.65rem 1rem; border-radius:10px; transition:all .2s ease; background:transparent}
.button:hover{transform:translateY(-1px)}
.button.primary{background:linear-gradient(135deg, var(--primary-600), var(--primary)); color:#08231e; border-color:transparent}
.button.ghost{background:transparent}
/* Emphasized CTA */
.button.cta{padding:.8rem 1.1rem; font-weight:600; border-radius:12px; box-shadow:0 6px 16px rgba(120,230,208,.12), inset 0 1px 0 rgba(255,255,255,.12)}
.button.cta:hover{box-shadow:0 10px 26px rgba(120,230,208,.16), inset 0 1px 0 rgba(255,255,255,.12)}

/* Hero */
.gradient-bg{position:relative; overflow:hidden}
.gradient-bg::before{
  content:""; position:absolute; inset:-20% -10% -30% -10%;
  background:
    radial-gradient(35rem 35rem at 10% 10%, rgba(120,230,208,.12), transparent 60%),
    radial-gradient(40rem 40rem at 90% 20%, rgba(91,155,255,.10), transparent 65%),
    radial-gradient(50rem 50rem at 50% 120%, rgba(255,225,167,.08), transparent 60%);
  filter: blur(20px);
}
.hero{padding:100px 0 70px}
.hero-inner{position:relative; min-height:40vh; display:grid; align-items:center}
.hero-grid{display:grid; row-gap:16px}
.hero-text p{max-width:650px}
.hero-cta{display:flex; gap:.8rem; margin-top:1rem; flex-wrap:wrap}

/* Portrait */
.portrait{display:grid; place-items:center; margin:0 0 1rem; position:relative}
.portrait img{width:min(320px, 60vw); aspect-ratio: 4/5; object-fit:cover; border-radius:28px; border:1px solid rgba(255,255,255,.08); box-shadow:0 20px 60px rgba(0,0,0,.45)}
.portrait .flip{all:unset; cursor:pointer; perspective:1000px}
.portrait .flip-inner{position:relative; width:min(320px, 60vw); height:calc(min(320px,60vw)*1.25); transform-style:preserve-3d; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.portrait .flip[aria-pressed="true"] .flip-inner{transform:rotateY(180deg)}
.portrait .front, .portrait .back{position:absolute; inset:0; backface-visibility:hidden; border-radius:28px; overflow:hidden}
.portrait .front{z-index:2; position:relative}
.portrait .back{transform:rotateY(180deg); display:grid; place-items:center}
.portrait .back-card{width:100%; height:100%; display:grid; place-items:center; border-radius:28px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(15,27,36,.9), rgba(15,27,36,.7)); color:var(--text); font-weight:600; text-align:center; padding:1rem; letter-spacing:.3px}
/* fiery glow hugging the image contour */
.portrait .front img{
  filter:
    drop-shadow(0 0 10px rgba(255,150,80,.55))
    drop-shadow(0 0 22px rgba(255,200,120,.45))
    drop-shadow(0 0 40px rgba(255,120,60,.30));
  animation:flameFlicker 2.6s ease-in-out infinite;
}
@keyframes flameFlicker{
  0%{
    filter:
      drop-shadow(0 0 8px rgba(255,150,80,.45))
      drop-shadow(0 0 18px rgba(255,200,120,.35))
      drop-shadow(0 0 32px rgba(255,120,60,.22));
  }
  35%{
    filter:
      drop-shadow(0 0 11px rgba(255,160,90,.58))
      drop-shadow(0 0 24px rgba(255,210,140,.50))
      drop-shadow(0 0 44px rgba(255,130,70,.32));
  }
  60%{
    filter:
      drop-shadow(0 0 13px rgba(255,170,95,.62))
      drop-shadow(0 0 28px rgba(255,220,150,.52))
      drop-shadow(0 0 50px rgba(255,140,70,.35));
  }
  100%{
    filter:
      drop-shadow(0 0 10px rgba(255,150,80,.55))
      drop-shadow(0 0 22px rgba(255,200,120,.45))
      drop-shadow(0 0 40px rgba(255,120,60,.30));
  }
}

/* Hero two columns: left (media+buttons), right (stacked big title) */
@media (min-width: 960px){
  .hero-grid{display:grid; grid-template-columns: 1.1fr 1fr; align-items:center; column-gap:36px}
  .hero-left{display:flex; flex-direction:column; align-items:flex-start}
  .hero-right h1{font-size: clamp(2.4rem, 6vw, 5rem); line-height:1; letter-spacing:.5px; text-align:left}
  /* Larger portrait */
  .hero-left .portrait img{width:min(640px, 44vw)}
  .hero-left .portrait .flip-inner{width:min(640px, 44vw); height:calc(min(640px,44vw)*1.25)}
  .hero-left .socials{justify-content:flex-start}
}

/* Socials */
.socials{display:flex; justify-content:center; gap:14px; margin-top:14px}
.socials .social{width:88px; height:88px; border-radius:999px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); transition:transform .2s ease, background .2s ease}
.socials .social:hover{transform:translateY(-2px); background:rgba(255,255,255,.1)}
.socials img{width:36px; height:36px}

/* Confetti on hover for .button[data-confetti] */
.button[data-confetti]{position:relative; overflow:visible}
.button[data-confetti]::before,
.button[data-confetti]::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s ease;
}
.button[data-confetti]:hover::before{opacity:1; animation:confetti 800ms ease-out forwards}
.button[data-confetti]:hover::after{opacity:1; animation:confetti 900ms ease-out reverse}
@keyframes confetti{
  0%{box-shadow:
    0 0 #0000,
    12px -8px 0 0 rgba(255,214,94,.95),
    -14px -10px 0 0 rgba(255,120,120,.95),
    -10px 12px 0 0 rgba(120,220,255,.95),
    16px 10px 0 0 rgba(180,255,160,.95),
    -20px 4px 0 0 rgba(255,170,220,.95)}
  100%{box-shadow:
    0 0 #0000,
    40px -28px 0 0 rgba(255,214,94,0),
    -48px -34px 0 0 rgba(255,120,120,0),
    -34px 40px 0 0 rgba(120,220,255,0),
    52px 34px 0 0 rgba(180,255,160,0),
    -60px 18px 0 0 rgba(255,170,220,0)}
}

/* Sections */
.section{padding:70px 0}
.section.alt{background:var(--bg-alt); border-block:1px solid rgba(255,255,255,.04)}
.section-header{margin-bottom:1.2rem}
.flow > * + *{margin-top:.8rem}

/* Contact grid */
.contact-grid{display:grid; grid-template-columns:1fr; gap:18px}
.contact-right img{width:100%; height:auto; display:block; border-radius:14px; border:1px solid var(--border)}
@media (min-width: 960px){
  .contact-grid{grid-template-columns: 1.1fr 0.9fr; align-items:start}
}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card .card-body{display:block; flex:1 1 auto}
.card h3{margin-bottom:.4rem}
.card .card-cta{margin-top:1rem; align-self:flex-start}

/* Price badge */
.price-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.4rem .8rem; margin:.4rem 0 1rem; font-weight:700; letter-spacing:.3px;
  background:linear-gradient(180deg, rgba(15,27,36,.85), rgba(15,27,36,.65));
  color:var(--text);
  border-radius:14px;
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 6px 20px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.price-badge::before{
  content:""; position:absolute; inset:-6px; border-radius:18px; pointer-events:none;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(120,230,208,.10), rgba(120,230,208,0));
  filter:blur(.2px);
}
.price-badge::after{
  content:""; position:absolute; inset:-3px; border-radius:16px; pointer-events:none;
  border:1px solid rgba(255,255,255,.10);
}
.price-badge{font-size:clamp(1rem, 1.4vw, 1.125rem)}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:30px 0; background:linear-gradient(180deg, rgba(11,18,24,0), rgba(11,18,24,.5))}
.site-footer small{color:var(--muted)}
.footer-inner{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer-links{display:flex; gap:12px}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:var(--text)}
.footer-payments{display:flex; gap:10px; align-items:center}
.footer-payments img{width:40px; height:24px; opacity:.9; filter:drop-shadow(0 2px 6px rgba(0,0,0,.2))}
.footer-payments img:hover{opacity:1}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:translateY(0)}

/* Contact section links */
#contact .content a{color:var(--primary); text-decoration:underline; text-underline-offset:2px}
#contact .content a:hover{color:#b3ffe6}
#contact .content a:visited{color:var(--primary)}

/* Responsive */
@media (max-width: 860px){
  .site-nav{display:none}
  .cards{grid-template-columns:1fr}
  .hero{padding:72px 0 56px}
  /* Mobile hero adjustments */
  .hero-text{display:block}
  .hero-grid{display:block}
  .portrait{width:100%}
  .portrait{margin-bottom:2rem}
  .portrait .flip{display:block; width:100%}
  .portrait img{display:block; width:100%; height:auto}
  .portrait .flip-inner{width:100%; height:auto; transform:none !important}
  /* Disable 3D layering on mobile to avoid overlap */
  .portrait .front, .portrait .back{position:static; display:block; width:100%}
  .portrait .back{display:none}
  .hero-right{position:static; margin-top:2rem}
  .hero-right h1{margin-top:0}
  .hero-left .hero-cta{margin-top:14px; display:flex; flex-wrap:wrap}
  .hero-right .socials{margin-top:14px}
  /* Smaller socials so they don't push CTA off-screen */
  .socials .social{width:64px; height:64px}
  .socials img{width:28px; height:28px}
}


/* Tablet hero heading tweak */
@media (min-width: 861px) and (max-width: 959px){
  .hero-right h1{font-size: clamp(1.9rem, 3.1vw, 2.6rem)}
}

/* Desktop mid-range (1240–1500px) hero heading tweak */
@media (min-width: 1240px) and (max-width: 1500px){
  .hero-right h1{font-size: clamp(2.2rem, 4.8vw, 4.4rem)}
}