/* =====================================================
   Sunny's Ice Cream — BLACK + LOGO COLOR theme
   Business-card black background, full-color logo,
   and text accents pulled from the logo palette
   ===================================================== */
:root {
  /* logo palette */
  --yellow:      #FDB813;
  --orange:      #F5811F;
  --orange-deep: #F26419;
  --teal:        #23A9D1;
  --teal-deep:   #0B88AC;
  --pink:        #E97BB0;
  --grad-sun:    linear-gradient(180deg, var(--yellow) 0%, var(--orange) 52%, var(--orange-deep) 100%);

  --bg:        #0A0A0B;   /* page background       */
  --bg-2:      #101013;   /* alternate section     */
  --surface:   #17171B;   /* cards / form          */
  --surface-2: #202027;   /* inputs / icon chips   */
  --border:    rgba(255,255,255,.10);

  --silver:      #D8DCE2;
  --silver-2:    #A6ACB5;
  --silver-dim:  #7B818B;
  --silver-hi:   #F1F3F6;

  --text:      #E6E9ED;
  --text-soft: #979DA7;
  --white:     #ffffff;

  /* brushed-chrome gradients */
  --grad-chrome:  linear-gradient(180deg, #f6f8fa 0%, #cfd4da 46%, #a4aab3 54%, #d3d8de 100%);
  --grad-chrome-v:linear-gradient(180deg, #eef1f4 0%, #b9bec6 55%, #8b9099 100%);
  --grad-steel:   linear-gradient(160deg, #1c1c21 0%, #2a2b31 55%, #141418 100%);

  --shadow-sm: 0 6px 18px rgba(0,0,0,.45);
  --shadow-md: 0 16px 40px rgba(0,0,0,.55);
  --shadow-lg: 0 30px 70px rgba(0,0,0,.65);
  --radius:    16px;
  --maxw:      1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .nav__cta, .btn, .stat__num { font-family: "Kanit", "Barlow", sans-serif; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.12; margin: 0 0 .5em; font-weight: 700; letter-spacing: .2px; color: var(--silver-hi); }
h3 { font-size: 1.2rem; margin: 0 0 .4em; font-weight: 600; letter-spacing: .2px; color: var(--silver-hi); }
p  { margin: 0 0 1em; }
a  { color: var(--yellow); text-decoration: none; }
img { max-width: 100%; display: block; }
strong { color: var(--white); font-weight: 700; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(56px, 8vw, 104px) 0; }

.kicker {
  display: inline-block; font-family: "Kanit", sans-serif;
  font-weight: 600; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange); margin-bottom: .7rem;
}
.kicker--light { color: var(--yellow); }

.section__head { max-width: 640px; margin: 0 auto clamp(32px,5vw,56px); text-align: center; }
.section__head p { color: var(--text-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.7rem; border-radius: 999px;
  font-weight: 600; font-size: 1rem; letter-spacing: .3px;
  border: none; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.btn--primary {
  background: var(--grad-sun); color: var(--white);
  box-shadow: 0 10px 26px rgba(242,100,25,.35), inset 0 1px 0 rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.2);
}
.btn--primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 32px rgba(242,100,25,.5), inset 0 1px 0 rgba(255,255,255,.45); }
.btn--ghost { background: rgba(255,255,255,.05); color: var(--text); border: 1.5px solid rgba(255,255,255,.28); }
.btn--ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.45); }
.btn--block { width: 100%; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,11,.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav__logo { height: 46px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { color: var(--text); font-weight: 500; font-size: .98rem; position: relative; letter-spacing: .2px; }
.nav__links a:not(.nav__cta):hover { color: var(--yellow); }
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 3px; width: 0;
  background: var(--grad-sun); border-radius: 3px; transition: width .2s ease;
}
.nav__links a:not(.nav__cta):hover::after { width: 100%; }
.nav__cta { background: var(--grad-sun); color: var(--white) !important; padding: .55rem 1.2rem; border-radius: 999px; box-shadow: 0 6px 16px rgba(242,100,25,.3), inset 0 1px 0 rgba(255,255,255,.35); font-weight: 600; border: 1px solid rgba(255,255,255,.2); }
.nav__cta:hover { filter: brightness(1.05); }
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__toggle span { width: 26px; height: 3px; background: var(--text); border-radius: 3px; transition: .25s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(76px, 12vw, 138px) 0 clamp(96px, 13vw, 150px);
  background: radial-gradient(120% 90% at 50% 6%, #26262b 0%, #141417 40%, var(--bg) 78%);
}
/* rotating photo slideshow background */
.hero__slideshow { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  transition: opacity 1.4s ease;
}
.hero__slide.is-active { opacity: 1; }
/* flat dark tint over the photos so the headline stays readable */
.hero__slideshow::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(10,10,11,.58);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(65% 55% at 50% 40%, rgba(10,10,11,.8) 0%, rgba(10,10,11,.45) 45%, transparent 74%);
}
.hero__sun {
  position: absolute; z-index: 1; top: -170px; left: 50%; transform: translateX(-50%);
  width: 560px; height: 560px; pointer-events: none; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(253,184,19,.38) 0%, rgba(242,100,25,.12) 38%, transparent 62%),
    repeating-conic-gradient(from 0deg, rgba(253,184,19,.14) 0deg 4deg, transparent 4deg 12deg);
}
.hero__content { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 0 24px; }
.hero__eyebrow {
  display: inline-block; background: rgba(35,169,209,.12); color: var(--teal);
  border: 1px solid rgba(35,169,209,.4);
  font-family: "Kanit", sans-serif; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  font-size: .76rem; padding: .42rem 1rem; border-radius: 999px; margin-bottom: 1.3rem;
}
.hero__title {
  font-size: clamp(2.3rem, 6vw, 4.2rem); line-height: 1.04; margin: 0 0 .55em; font-weight: 700;
  color: var(--silver-hi); letter-spacing: .3px; text-shadow: 0 4px 22px rgba(0,0,0,.6);
}
.hero__title span {
  display: inline-block; font-style: italic; font-weight: 700;
  background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
.hero__sub { font-size: clamp(1rem, 2vw, 1.18rem); color: #c4c9d0; max-width: 620px; margin: 0 auto 1.9rem; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- About ---------- */
.about { background: var(--bg); }
.about__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.about__text p { color: var(--text-soft); }
.about__points { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .6rem; }
.about__points li { position: relative; padding-left: 2rem; font-weight: 500; color: var(--text); }
.about__points li::before {
  content: ""; position: absolute; left: 0; top: .12em;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--grad-sun);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat { background: var(--surface); border-radius: var(--radius); padding: 1.6rem 1.2rem; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.stat__num { display: block; font-size: 2.15rem; font-weight: 700; line-height: 1;
  background: linear-gradient(180deg, var(--teal), var(--teal-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label { font-size: .82rem; color: var(--text-soft); font-weight: 600; letter-spacing: .3px; }

/* ---------- Services ---------- */
.services { background: var(--bg-2); }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
  background: var(--surface); border-radius: var(--radius); padding: 2rem 1.5rem;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(253,184,19,.35); }
.card p { color: var(--text-soft); margin-bottom: 0; }
.card__icon {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--grad-steel); color: var(--yellow); border: 1px solid rgba(35,169,209,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.card__icon svg { width: 28px; height: 28px; }

/* ---------- Who We Serve ---------- */
.serve { position: relative; background: linear-gradient(160deg, #17171b 0%, #232329 55%, #0f0f12 100%); overflow: hidden; }
.serve::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 22% -12%, rgba(255,255,255,.04) 0deg 6deg, transparent 6deg 16deg);
}
.section__head--light h2 { color: var(--silver-hi); }
.serve__lead { color: rgba(230,233,237,.8); }
.serve__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.serve__item {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(4px);
  border-radius: var(--radius); padding: 1.9rem 1rem; text-align: center;
  color: var(--silver-hi); font-family: "Kanit", sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: .2px;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  transition: transform .2s ease, background .2s ease;
}
.serve__ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-steel); color: var(--yellow); border: 1px solid rgba(253,184,19,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.serve__ico svg { width: 28px; height: 28px; }
.serve__item:hover { transform: translateY(-5px); background: rgba(255,255,255,.1); }

/* ---------- Our Products ---------- */
.products { background: var(--bg); }
.products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.product {
  margin: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(253,184,19,.35); }
.product img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.product figcaption { padding: 1.2rem 1.3rem 1.4rem; }
.product h3 { margin-bottom: .3em; }
.product figcaption p { color: var(--text-soft); margin: 0; font-size: .95rem; }

/* ---------- Gallery / Slider ---------- */
.gallery { background: var(--bg); }
.gallery__note { color: var(--text-soft); font-style: italic; font-size: .95rem; }
.slider { position: relative; max-width: 960px; margin: 0 auto; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.slider__track { display: flex; transition: transform .5s cubic-bezier(.6,.05,.2,1); }
.slide { min-width: 100%; }
.slide__inner {
  aspect-ratio: 16 / 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  color: var(--silver-hi);
}
/* subtle steel gradients so each placeholder slide reads a little different */
.slide--g1 .slide__inner { background: linear-gradient(135deg, #2c2d33, #131317); }
.slide--g2 .slide__inner { background: linear-gradient(135deg, #3a3b42, #17171b); }
.slide--g3 .slide__inner { background: linear-gradient(135deg, #242429, #0e0e11); }
.slide--g4 .slide__inner { background: linear-gradient(135deg, #33343b, #1a1a1f); }
.slide--g5 .slide__inner { background: linear-gradient(135deg, #202026, #0c0c0f); }
/* logo-color icon per slide */
.slide--g1 .slide__icon { color: var(--yellow); }
.slide--g2 .slide__icon { color: var(--teal); }
.slide--g3 .slide__icon { color: var(--pink); }
.slide--g4 .slide__icon { color: var(--orange); }
.slide--g5 .slide__icon { color: var(--teal); }
.slide__icon { width: clamp(78px, 14vw, 120px); height: clamp(78px, 14vw, 120px); display: grid; place-items: center; color: var(--silver); filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.slide__icon svg { width: 100%; height: 100%; }
.slide__cap { font-family: "Kanit", sans-serif; font-weight: 600; font-size: clamp(1.1rem,2.5vw,1.6rem); letter-spacing: .3px; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
/* real photo slides */
.slide--photo { position: relative; }
.slide--photo img { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; display: block; }
/* duo slides: two portrait photos side by side in the same 16:8 frame */
.slide--duo { display: flex; }
.slide--duo img { width: 50%; aspect-ratio: 8 / 8; }
.slide__cap--overlay {
  position: absolute; left: 0; right: 0; bottom: 0; display: block; text-align: center;
  padding: 2.8rem 1.5rem 2.5rem; color: #fff;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.78) 100%);
}
.slider__btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); cursor: pointer; background: rgba(20,20,24,.6); color: var(--silver-hi); font-size: 1.8rem; line-height: 1;
  display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: .2s; backdrop-filter: blur(4px);
}
.slider__btn:hover { background: rgba(20,20,24,.85); transform: translateY(-50%) scale(1.08); }
.slider__btn--prev { left: 16px; } .slider__btn--next { right: 16px; }
.slider__dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.slider__dots button { width: 11px; height: 11px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.4); transition: .2s; padding: 0; }
.slider__dots button.active { background: var(--yellow); width: 28px; border-radius: 6px; }

/* ---------- Contact ---------- */
.contact { background: var(--bg-2); }
.contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact__info p { color: var(--text-soft); }
.contact__person {
  display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem;
  padding: 1rem 1.2rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
}
.contact__avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-family: "Kanit", sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: .5px; color: var(--white);
  background: var(--grad-sun); border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.contact__person strong { display: block; font-size: 1.1rem; }
.contact__person span { color: var(--text-soft); font-size: .9rem; }

.contact__list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1.05rem; }
.contact__list li { display: flex; gap: 1rem; align-items: center; }
.contact__ico { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--grad-steel); color: var(--yellow); border: 1px solid rgba(35,169,209,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.contact__ico svg { width: 22px; height: 22px; }
.contact__list strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-soft); font-weight: 600; }
.contact__list a, .contact__list span { color: var(--text); font-weight: 600; font-size: 1.02rem; }
.contact__list .contact__ico { color: var(--yellow); }
.contact__list a:hover { color: var(--yellow); }

.contact__form-wrap { background: var(--surface); border-radius: 20px; padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--shadow-md); border: 1px solid var(--border); }
.field { margin-bottom: 1.1rem; }
.field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .4rem; color: var(--text); letter-spacing: .2px; }
.field label span { color: var(--orange); }
.field input, .field textarea {
  width: 100%; padding: .8rem 1rem; border-radius: 11px; border: 1.5px solid rgba(255,255,255,.14);
  font: inherit; color: var(--text); background: var(--surface-2); transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder { color: #757b85; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(242,100,25,.18); }
.field input.invalid, .field textarea.invalid { border-color: #ff6a6a; box-shadow: 0 0 0 4px rgba(255,106,106,.15); }
.field textarea { resize: vertical; }
.form__status { margin: 1rem 0 0; font-weight: 600; text-align: center; min-height: 1.2em; }
.form__status.ok { color: #8fe3ad; } .form__status.err { color: #ff7a7a; }

/* ---------- Footer ---------- */
.footer { background: #060607; color: var(--text-soft); padding: 48px 0 32px; text-align: center; border-top: 1px solid var(--border); }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.footer__logo { height: 62px; width: auto; }
.footer__tag { margin: 0; font-weight: 500; }
.footer__nav { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.footer__nav a { color: var(--yellow); font-weight: 600; }
.footer__nav a:hover { color: var(--white); }
.footer__copy { margin: 8px 0 0; font-size: .85rem; color: rgba(151,157,167,.6); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cards, .serve__grid { grid-template-columns: repeat(2, 1fr); }
  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .about__stats { max-width: 460px; }
  .products__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .nav__links {
    position: absolute; top: 66px; right: 16px; left: 16px; flex-direction: column; align-items: stretch; gap: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px;
    box-shadow: var(--shadow-md); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .2s;
  }
  .nav__links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__links a { padding: .6rem .4rem; }
  .nav__links a:not(.nav__cta)::after { display: none; }
  .nav__cta { text-align: center; }
  .nav__toggle { display: flex; }
  .nav__toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav__toggle.open span:nth-child(2) { opacity: 0; }
  .nav__toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
@media (max-width: 520px) {
  .cards, .serve__grid, .about__stats, .field--split { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slider__track { transition: none; }
  * { transition-duration: .01ms !important; }
}