/* ═══════════════════════════════════════
   PALETTE & TOKENS
═══════════════════════════════════════ */
:root {
  /* Core palette — African warmth */
  --terra:   #C2522A;   /* terracotta */
  --terra2:  #A03F1F;
  --gold:    #E8A025;
  --gold2:   #F5C84A;
  --kaki:    #2E7D32;   /* savane vert */
  --kaki2:   #1B5E20;
  --night:   #1A110A;   /* fond nuit chaude */
  --night2:  #241710;
  --sand:    #FBF3E8;   /* sable clair */
  --sand2:   #F4E4CC;
  --ink:     #1A110A;
  --ink2:    #5C3D28;
  --ink3:    #9C7B60;
  --border:  rgba(232,160,37,.22);
  --r:       12px;
  --ease:    cubic-bezier(.4,0,.2,1);
  /* shadows warm */
  --s1: 0 4px 20px rgba(194,82,42,.15);
  --s2: 0 8px 40px rgba(194,82,42,.22);
  --s3: 0 20px 60px rgba(194,82,42,.28);
}
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;color:var(--night);background:var(--sand);overflow-x:hidden;line-height:1.7}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ═══════════════════════════════════════
   KENTE PATTERN (SVG inline reusable)
═══════════════════════════════════════ */
.kente-bar {
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--terra) 0px, var(--terra) 12px,
    var(--gold)  12px, var(--gold)  24px,
    var(--kaki)  24px, var(--kaki)  36px,
    var(--night) 36px, var(--night) 48px,
    var(--gold2) 48px, var(--gold2) 60px,
    var(--terra) 60px, var(--terra) 72px
  );
}
.kente-border {
  border-top: 4px solid transparent;
  border-image: repeating-linear-gradient(
    90deg,
    var(--terra) 0, var(--terra) 8px,
    var(--gold)  8px, var(--gold)  16px,
    var(--kaki)  16px, var(--kaki) 24px,
    var(--gold2) 24px, var(--gold2) 32px
  ) 1;
}

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
section{padding:100px 0}

.sec-eyebrow {
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:800;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;
}
.sec-eyebrow::before,
.sec-eyebrow::after {content:'◆';font-size:8px;color:var(--terra)}

.sec-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(38px,6vw,72px);
  line-height:1;letter-spacing:2px;
  color:var(--night);margin-bottom:16px;
}
.sec-sub{font-size:16px;color:var(--ink2);max-width:560px;line-height:1.85}

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:4px;font-size:14px;font-weight:800;letter-spacing:.5px;transition:all .22s var(--ease);text-transform:uppercase}
.btn-fire{background:var(--terra);color:#fff}
.btn-fire:hover{background:var(--terra2);transform:translateY(-3px);box-shadow:var(--s2)}
.btn-gold{background:var(--gold);color:var(--night)}
.btn-gold:hover{background:var(--gold2);transform:translateY(-3px);box-shadow:0 8px 32px rgba(232,160,37,.4)}
.btn-out{border:2px solid var(--terra);color:var(--terra)}
.btn-out:hover{background:var(--terra);color:#fff;transform:translateY(-3px)}
.btn-out-gold{border:2px solid var(--gold);color:var(--gold)}
.btn-out-gold:hover{background:var(--gold);color:var(--night)}

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
#nav {
  position:fixed;inset:0 0 auto;z-index:900;padding:16px 0;
  transition:all .3s var(--ease);
}
#nav.stuck {
  padding:10px 0;
  background:rgba(251,243,232,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:2px solid transparent;
  border-image:repeating-linear-gradient(90deg,var(--terra) 0,var(--terra) 8px,var(--gold) 8px,var(--gold) 16px,var(--kaki) 16px,var(--kaki) 24px) 1;
  box-shadow:0 4px 24px rgba(194,82,42,.12);
}
.ni{display:flex;align-items:center;justify-content:space-between}
.nlogo{display:flex;align-items:center;gap:8px}
.nlogo-dez{font-family:'Dancing Script',cursive;font-size:32px;font-weight:700;color:var(--terra);line-height:1}
.nlogo-badge{background:var(--gold);color:var(--night);font-size:10px;font-weight:800;padding:2px 8px;border-radius:2px;letter-spacing:1px;text-transform:uppercase}
.nlinks{display:flex;align-items:center;gap:32px}
.nlinks a{font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.5px;text-transform:uppercase;position:relative;padding-bottom:2px;transition:color .2s}
.nlinks a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--terra);transition:width .25s var(--ease)}
.nlinks a:hover{color:var(--terra)}
.nlinks a:hover::after{width:100%}
.nr{display:flex;align-items:center;gap:12px}
.lp{display:flex;background:var(--sand2);border-radius:4px;padding:3px;border:1px solid var(--border)}
.lp button{padding:4px 12px;border-radius:3px;font-size:12px;font-weight:800;color:var(--ink3);transition:all .18s;letter-spacing:1px}
.lp button.on{background:var(--terra);color:#fff}
.burg{display:none;flex-direction:column;gap:5px;padding:4px}
.burg span{display:block;width:22px;height:2px;background:var(--terra);border-radius:2px;transition:.25s}
.burg.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burg.open span:nth-child(2){opacity:0}
.burg.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.drw{display:none;position:fixed;inset:0;z-index:800;background:var(--sand);flex-direction:column;padding:96px 32px 40px;transform:translateX(100%);transition:transform .3s var(--ease)}
.drw.open{transform:translateX(0)}
.drw a{font-size:28px;font-family:'Bebas Neue',sans-serif;letter-spacing:2px;color:var(--night);padding:14px 0;border-bottom:1px solid var(--border)}
.drw-f{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.drw-top{height:6px;background:repeating-linear-gradient(90deg,var(--terra) 0,var(--terra) 12px,var(--gold) 12px,var(--gold) 24px,var(--kaki) 24px,var(--kaki) 36px,var(--night) 36px,var(--night) 48px);margin-bottom:32px}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  min-height:100vh;display:flex;align-items:center;padding-top:80px;
  background:var(--night);position:relative;overflow:hidden;
}
/* Adinkra pattern background */
.hero::before {
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232,160,37,.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(194,82,42,.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(46,125,50,.08) 0%, transparent 60%);
  pointer-events:none;
}
/* Geometric Adinkra symbols as dots */
.hero::after {
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle, rgba(232,160,37,.06) 1px, transparent 1px),
    radial-gradient(circle, rgba(194,82,42,.04) 1px, transparent 1px);
  background-size:40px 40px, 80px 80px;
  background-position:0 0, 20px 20px;
  pointer-events:none;
}
/* Diagonal accent shape */
.hero-shape {
  position:absolute;top:0;right:0;width:42%;height:100%;
  background:linear-gradient(160deg, rgba(194,82,42,.08) 0%, rgba(232,160,37,.05) 100%);
  clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);
  pointer-events:none;
}
/* Vertical kente stripe left */
.hero-stripe {
  position:absolute;left:0;top:0;bottom:0;width:6px;
  background:repeating-linear-gradient(
    180deg,
    var(--terra) 0,var(--terra) 16px,
    var(--gold) 16px,var(--gold) 32px,
    var(--kaki) 32px,var(--kaki) 48px,
    var(--night2) 48px,var(--night2) 64px
  );
}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1}

/* hero left */
.hero-left{}
.hero-tag {
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(232,160,37,.4);background:rgba(232,160,37,.08);
  color:var(--gold2);font-size:12px;font-weight:700;padding:7px 16px;border-radius:2px;
  margin-bottom:24px;letter-spacing:1px;
}
.hero-tag-dot{width:7px;height:7px;background:#22c55e;border-radius:50%;animation:pg 2s ease-in-out infinite}
@keyframes pg{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.hero-greet{font-size:13px;font-weight:700;color:var(--gold);letter-spacing:4px;text-transform:uppercase;margin-bottom:8px}
.hero-name {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(52px,8vw,96px);
  line-height:.95;letter-spacing:3px;
  color:#fff;margin-bottom:20px;
}
.hero-name em{
  font-style:normal;
  background:linear-gradient(135deg,var(--gold),var(--gold2),var(--terra));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.tw-wrap{
  font-size:clamp(16px,2.2vw,22px);font-weight:700;
  color:var(--sand);min-height:32px;display:flex;align-items:center;
  margin-bottom:20px;
}
.tw-text{color:var(--gold)}
.tw-cur{display:inline-block;width:2px;height:1.1em;background:var(--gold);vertical-align:middle;animation:cur .8s step-end infinite;margin-left:3px}
@keyframes cur{50%{opacity:0}}
.hero-sub{font-size:16px;color:rgba(251,243,232,.7);max-width:460px;line-height:1.9;margin-bottom:36px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.hero-soc{display:flex;gap:10px}
.soc{width:42px;height:42px;border-radius:4px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font-size:16px;border:1px solid rgba(255,255,255,.1);transition:all .2s var(--ease)}
.soc:hover{background:var(--terra);color:#fff;border-color:var(--terra);transform:translateY(-3px)}

/* hero right */
.hero-right{display:flex;justify-content:center;align-items:center}
.photo-wrap{position:relative;width:320px;height:380px}
/* Main photo container — geometric shape */
.photo-box {
  width:100%;height:100%;
  clip-path:polygon(12% 0%, 88% 0%, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0% 88%, 0% 12%);
  background:linear-gradient(145deg,var(--terra) 0%,var(--terra2) 40%,#6B2D10 100%);
  overflow:hidden;position:relative;
}
.photo-box img{width:100%;height:100%;object-fit:cover;object-position:top center}
/* Corner geometric accents */
.photo-corner{
  position:absolute;width:40px;height:40px;
  border:3px solid var(--gold);
}
.pc-tl{top:-8px;left:-8px;border-right:none;border-bottom:none}
.pc-tr{top:-8px;right:-8px;border-left:none;border-bottom:none}
.pc-bl{bottom:-8px;left:-8px;border-right:none;border-top:none}
.pc-br{bottom:-8px;right:-8px;border-left:none;border-top:none}
/* Floating chips */
.chip{
  position:absolute;background:rgba(26,17,10,.9);border-radius:4px;
  padding:9px 16px;font-size:12px;font-weight:700;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  border:1px solid rgba(232,160,37,.3);color:#fff;
  backdrop-filter:blur(8px);animation:fl 4s ease-in-out infinite;
}
.chip i{color:var(--gold);font-size:14px}
.c1{top:-14px;left:-40px;animation-delay:0s}
.c2{bottom:-10px;right:-30px;animation-delay:1.4s}
.c3{top:46%;right:-70px;animation:flm 4s ease-in-out .7s infinite}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes flm{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 9px))}}

/* ═══════════════════════════════════════
   ABOUT  (light sand)
═══════════════════════════════════════ */
.about{background:var(--sand);position:relative;overflow:hidden}
.about::before{
  content:'';position:absolute;top:-60px;right:-60px;width:320px;height:320px;
  background:radial-gradient(circle,rgba(232,160,37,.14) 0%,transparent 70%);
  pointer-events:none;
}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-img-wrap{position:relative}
.about-img{
  width:100%;aspect-ratio:3/4;border-radius:4px;overflow:hidden;
  background:var(--terra);position:relative;
  border:3px solid transparent;
  background-clip:padding-box;
}
.about-img img{width:100%;height:100%;object-fit:cover;object-position:top}
/* Kente border frame */
.about-frame{
  position:absolute;inset:-10px;
  border-radius:6px;
  background:repeating-linear-gradient(0deg,var(--terra) 0,var(--terra) 8px,var(--gold) 8px,var(--gold) 16px,var(--kaki) 16px,var(--kaki) 24px,var(--night) 24px,var(--night) 32px);
  z-index:-1;
}
.about-text .sec-title{color:var(--night)}
.about-text p{font-size:16px;color:var(--ink2);line-height:1.9;margin-bottom:16px}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}
.stat{
  text-align:center;padding:24px 12px;
  background:var(--night);border-radius:4px;position:relative;overflow:hidden;
}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.stat-n{font-family:'Bebas Neue',sans-serif;font-size:42px;letter-spacing:2px;color:var(--gold);line-height:1}
.stat-l{font-size:12px;color:rgba(251,243,232,.6);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-top:4px}

/* ═══════════════════════════════════════
   SKILLS  (dark night)
═══════════════════════════════════════ */
.skills{background:var(--night);position:relative;overflow:hidden}
.skills::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:100%;
  background:repeating-linear-gradient(
    45deg,
    rgba(232,160,37,.015) 0, rgba(232,160,37,.015) 1px,
    transparent 1px, transparent 40px
  );
  pointer-events:none;
}
.skills .sec-title{color:#fff}
.skg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:12px}
.skc{
  background:rgba(255,255,255,.04);border-radius:4px;padding:28px;
  border:1px solid rgba(232,160,37,.12);transition:all .25s var(--ease);
}
.skc:hover{background:rgba(232,160,37,.06);border-color:rgba(232,160,37,.35);transform:translateY(-5px)}
.sk-ico{width:52px;height:52px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;margin-bottom:18px}
.sk-title{font-size:13px;font-weight:800;color:var(--gold);margin-bottom:14px;letter-spacing:1px;text-transform:uppercase}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{padding:5px 12px;border-radius:2px;font-size:12px;font-weight:700;background:rgba(255,255,255,.06);color:rgba(251,243,232,.7);border:1px solid rgba(255,255,255,.1);transition:all .18s;letter-spacing:.3px}
.tag:hover{background:var(--terra);color:#fff;border-color:var(--terra)}

/* ═══════════════════════════════════════
   SERVICES  (sand)
═══════════════════════════════════════ */
.services{background:var(--sand2);position:relative}
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:14px}
.srv-card{
  background:var(--sand);border-radius:4px;padding:32px 26px;
  border:1px solid rgba(194,82,42,.15);position:relative;overflow:hidden;
  transition:all .25s var(--ease);
}
.srv-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:0;background:var(--terra);transition:height .3s var(--ease)}
.srv-card:hover{transform:translateY(-7px);box-shadow:var(--s3)}
.srv-card:hover::before{height:100%}
.srv-ico{width:60px;height:60px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:20px}
.srv-card h3{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;color:var(--night);margin-bottom:10px}
.srv-card p{font-size:14px;color:var(--ink2);line-height:1.8;margin-bottom:18px}
.srv-link{font-size:12px;font-weight:800;color:var(--terra);display:inline-flex;align-items:center;gap:6px;letter-spacing:1px;text-transform:uppercase;transition:gap .18s}
.srv-link:hover{gap:10px}

/* ═══════════════════════════════════════
   PROJECTS  (night)
═══════════════════════════════════════ */
.projects{background:var(--night)}
.projects .sec-title{color:#fff}
.frow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.fb{
  padding:8px 20px;border-radius:2px;font-size:12px;font-weight:800;
  border:1px solid rgba(232,160,37,.25);color:rgba(251,243,232,.5);
  background:transparent;letter-spacing:1px;text-transform:uppercase;
  transition:all .18s;
}
.fb.on,.fb:hover{background:var(--terra);color:#fff;border-color:var(--terra)}
.pjg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pjc{
  border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(232,160,37,.1);
  transition:all .25s var(--ease);
}
.pjc:hover{transform:translateY(-6px);box-shadow:var(--s3);border-color:rgba(232,160,37,.35)}
.pjt{height:180px;position:relative;overflow:hidden;flex-shrink:0}
.pjt svg{width:100%;height:100%;display:block}
.pjov{
  position:absolute;inset:0;
  background:rgba(26,17,10,.9);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s var(--ease);
}
.pjc:hover .pjov{opacity:1}
.pjov a{
  padding:11px 24px;border:2px solid var(--gold);color:var(--gold);border-radius:2px;
  font-size:12px;font-weight:800;display:flex;align-items:center;gap:8px;
  letter-spacing:1px;text-transform:uppercase;transition:all .18s;
}
.pjov a:hover{background:var(--gold);color:var(--night)}
.pjb{padding:20px}
.pjbdg{display:inline-block;font-size:10px;font-weight:800;padding:3px 10px;border-radius:2px;background:var(--terra);color:#fff;margin-bottom:9px;letter-spacing:1px;text-transform:uppercase}
.pjttl{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;color:#fff;margin-bottom:6px}
.pjd{font-size:13px;color:rgba(251,243,232,.55);line-height:1.65;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pjst{display:flex;flex-wrap:wrap;gap:6px}
.stag{padding:3px 9px;border-radius:2px;font-size:11px;background:rgba(232,160,37,.1);color:var(--gold);font-weight:700;border:1px solid rgba(232,160,37,.2);letter-spacing:.3px}

/* ═══════════════════════════════════════
   EXPERIENCE  (sand)
═══════════════════════════════════════ */
.experience{background:var(--sand);position:relative;overflow:hidden}
.tl{position:relative;max-width:820px;margin:48px auto 0}
.tl::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;
  background:repeating-linear-gradient(180deg,var(--terra) 0,var(--terra) 12px,var(--gold) 12px,var(--gold) 24px,var(--kaki) 24px,var(--kaki) 36px,var(--night) 36px,var(--night) 48px);
  transform:translateX(-50%);
}
.tli{position:relative;display:flex;margin-bottom:48px}
.tli:nth-child(odd){flex-direction:row-reverse}
.tld{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:48px;height:48px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;box-shadow:var(--s1);z-index:1;
}
.tlb{
  width:calc(50% - 44px);background:var(--sand);border-radius:4px;
  padding:24px;border:1px solid rgba(194,82,42,.18);box-shadow:var(--s1);
  position:relative;overflow:hidden;
}
.tlb::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.tli:nth-child(even) .tlb{margin-left:44px}
.tli:nth-child(odd)  .tlb{margin-right:44px;text-align:right}
.tldt{font-size:10px;font-weight:800;color:var(--terra);letter-spacing:2px;text-transform:uppercase;margin-bottom:5px}
.tlr{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;color:var(--night);margin-bottom:3px}
.tlo{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:10px}
.tltk{font-size:13px;color:var(--ink2);line-height:1.7}
.tltk li{margin-bottom:3px}

/* ═══════════════════════════════════════
   CONTACT  (night)
═══════════════════════════════════════ */
.contact{background:var(--night)}
.contact .sec-title{color:#fff}
.cg{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:start}
.cbs{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.cb{
  display:flex;align-items:flex-start;gap:14px;padding:18px;
  background:rgba(255,255,255,.04);border-radius:4px;
  border:1px solid rgba(232,160,37,.12);transition:all .2s;
}
.cb:hover{border-color:rgba(232,160,37,.4);transform:translateX(5px)}
.cb-ico{width:44px;height:44px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.cb h4{font-size:11px;font-weight:800;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-bottom:3px}
.cb p,.cb a{font-size:14px;color:rgba(251,243,232,.65);transition:color .18s}
.cb a:hover{color:var(--gold)}
.apill{display:inline-flex;align-items:center;gap:8px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#86efac;padding:10px 18px;border-radius:2px;font-size:12px;font-weight:800;margin-top:20px;letter-spacing:1px;text-transform:uppercase}
/* form */
.fw{background:rgba(255,255,255,.04);border-radius:4px;padding:36px;border:1px solid rgba(232,160,37,.12)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg{margin-bottom:18px}
.fg label{display:block;font-size:11px;font-weight:800;color:var(--gold);margin-bottom:7px;letter-spacing:2px;text-transform:uppercase}
.fg input,.fg select,.fg textarea{
  width:100%;padding:13px 16px;
  border:1.5px solid rgba(232,160,37,.18);border-radius:4px;
  font-family:'Nunito',sans-serif;font-size:14px;color:#fff;
  background:rgba(255,255,255,.06);
  transition:border-color .2s,box-shadow .2s;outline:none;-webkit-appearance:none;
}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(251,243,232,.3)}
.fg select option{background:var(--night2);color:#fff}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,160,37,.12);
}
.fg textarea{resize:vertical;min-height:120px}
.fsb{
  width:100%;padding:16px;border-radius:4px;font-size:13px;font-weight:800;
  background:var(--terra);color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;
  letter-spacing:2px;text-transform:uppercase;
  transition:all .22s var(--ease);
}
.fsb:hover{background:var(--terra2);transform:translateY(-3px);box-shadow:var(--s2)}
.fok{display:none;margin-top:14px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#86efac;padding:14px 18px;border-radius:4px;font-size:13px;font-weight:700;text-align:center;letter-spacing:.5px}
.fok.show{display:block}

/* Alert messages */
.alert{padding:14px 18px;border-radius:4px;font-size:13px;font-weight:700;text-align:center;letter-spacing:.5px;margin-bottom:18px}
.alert-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#86efac}
.alert-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5}

/* ═══════════════════════════════════════
   WA FLOAT
═══════════════════════════════════════ */
.waf{
  position:fixed;bottom:28px;right:28px;z-index:990;
  width:62px;height:62px;background:#25D366;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:30px;
  box-shadow:0 6px 24px rgba(37,211,102,.45);transition:transform .2s;
}
.waf:hover{transform:scale(1.08) rotate(-5deg)}
.waf::after{content:'';position:absolute;inset:0;border-radius:4px;background:rgba(37,211,102,.35);animation:war 2s ease-out infinite}
@keyframes war{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.8);opacity:0}}
.wat{position:absolute;right:70px;top:50%;transform:translateY(-50%);background:var(--night);color:var(--gold);font-size:12px;font-weight:800;padding:7px 14px;border-radius:4px;border:1px solid rgba(232,160,37,.3);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;letter-spacing:1px;text-transform:uppercase}
.waf:hover .wat{opacity:1}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer{background:#100B06;color:rgba(251,243,232,.5)}
.fmain{padding:72px 0 52px}
.fgr{display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:52px}
.ftag{font-size:14px;color:rgba(251,243,232,.45);line-height:1.8;margin:14px 0 20px}
.fsoc{display:flex;gap:8px}
.fsoc a{width:36px;height:36px;border-radius:4px;background:rgba(255,255,255,.05);color:rgba(251,243,232,.5);display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;border:1px solid rgba(255,255,255,.06)}
.fsoc a:hover{background:var(--terra);color:#fff;border-color:var(--terra)}
.fc h4{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px;color:var(--gold);margin-bottom:18px;padding-bottom:10px;position:relative}
.fc h4::after{content:'';position:absolute;bottom:0;left:0;width:28px;height:2px;background:var(--terra)}
.flinks{display:flex;flex-direction:column;gap:9px}
.flinks a{font-size:13px;color:rgba(251,243,232,.4);display:flex;align-items:center;gap:6px;transition:color .18s;font-weight:600}
.flinks a:hover{color:var(--gold)}
.fcts{display:flex;flex-direction:column;gap:11px}
.fci{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:rgba(251,243,232,.4)}
.fci i{color:var(--terra);margin-top:2px;width:14px;flex-shrink:0}
.fci a{color:rgba(251,243,232,.4);transition:color .18s}
.fci a:hover{color:var(--gold)}
/* signature footer */
.fsigwrap{
  text-align:center;padding:36px 0 28px;
  border-top:1px solid rgba(255,255,255,.06);
  position:relative;
}
.fsigwrap::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:4px;
  background:repeating-linear-gradient(90deg,var(--terra) 0,var(--terra) 8px,var(--gold) 8px,var(--gold) 16px,var(--kaki) 16px,var(--kaki) 24px,var(--night) 24px,var(--night) 32px);
}
.fsby{font-size:11px;color:rgba(251,243,232,.3);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px}
.fsig{
  font-family:'Dancing Script',cursive;font-size:72px;font-weight:700;
  background:linear-gradient(135deg,var(--terra),var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:inline-block;line-height:1.2;transition:transform .3s var(--ease);cursor:default;
}
.fsig:hover{transform:rotate(-5deg) scale(1.07)}
.fcp{background:rgba(0,0,0,.3);border-top:1px solid rgba(255,255,255,.04);padding:20px 28px;text-align:center}
.fcp p{font-size:12px;color:rgba(251,243,232,.2);margin-bottom:3px}

/* ═══════════════════════════════════════
   SCROLL ANIMATIONS
═══════════════════════════════════════ */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:1080px){
  .srv-grid{grid-template-columns:repeat(2,1fr)}
  .pjg{grid-template-columns:repeat(2,1fr)}
  .skg{grid-template-columns:repeat(2,1fr)}
  .fgr{grid-template-columns:1fr 1fr}
  .fgr>:last-child{grid-column:1/-1}
}
@media(max-width:840px){
  section{padding:80px 0}
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .hero-left{text-align:center}
  .hero-btns,.hero-soc{justify-content:center}
  .hero-tag{margin:0 auto 24px}
  .hero-right{order:-1}
  .about-grid{grid-template-columns:1fr}
  .about-img-wrap{display:none}
  .cg{grid-template-columns:1fr}
  .fr{grid-template-columns:1fr}
  .nlinks,.nr{display:none}
  .burg{display:flex}
  .drw{display:flex}
  .tl::before{left:20px}
  .tli,.tli:nth-child(odd){flex-direction:row}
  .tld{left:20px}
  .tli:nth-child(odd) .tlb{text-align:left;margin-right:0}
  .tlb,.tli:nth-child(even) .tlb{margin-left:52px;width:calc(100% - 52px)}
  .c3{display:none}
  .hero-shape{display:none}
  /* Reduce hero photo size on tablets */
  .photo-wrap{width:280px;height:340px}
}
@media(max-width:600px){
  .srv-grid,.skg{grid-template-columns:1fr}
  .pjg{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .fgr{grid-template-columns:1fr}
  .photo-wrap{width:240px;height:290px}
  .hero-name{font-size:56px}
  /* Better spacing for small screens */
  .wrap{padding:0 18px}
  .hero-sub{font-size:14px}
  .btn{padding:12px 22px;font-size:13px}
  .chip{padding:7px 12px;font-size:11px}
  .hero-btns{gap:10px}
}
@media(max-width:400px){
  .stats-row{grid-template-columns:1fr}
  .hero-name{font-size:44px}
  .photo-wrap{width:200px;height:250px}
  .hero-btns{flex-direction:column;align-items:center}
  .hero-soc{justify-content:center}
  .chip{font-size:10px;padding:6px 10px}
  .c1{left:-20px}
  .c2{right:-15px}
}