/*
Theme Name: Graham PetroNexus Group
Author: OpenAI
Description: Premium custom dark theme for Graham PetroNexus Group Ltd.
Version: 8.0 4.0
Text Domain: graham-petronexus-group
*/
:root{
  --bg:#0A0A0A;
  --bg2:#111111;
  --card:#151515;
  --gold:#C8A95A;
  --gold-soft:#d7bc7c;
  --text:#F5F2E9;
  --muted:#cfc7b3;
  --line:rgba(200,169,90,.24);
  --shadow:0 20px 50px rgba(0,0,0,.32);
  --radius:22px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:
    radial-gradient(circle at top right, rgba(200,169,90,.08), transparent 28%),
    radial-gradient(circle at top left, rgba(200,169,90,.05), transparent 22%),
    linear-gradient(180deg, #121212 0%, var(--bg) 28%, #090909 100%);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}
a{color:var(--text);text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(calc(100% - 2rem),var(--max));margin:0 auto}
.section{padding:88px 0;border-bottom:1px solid var(--line);position:relative}
.kicker{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.78rem;
  margin-bottom:1rem;
}
h1,h2,h3,h4{
  font-family:"Cinzel","Times New Roman",serif;
  line-height:1.08;
  margin:0 0 .85rem;
}
h1{font-size:clamp(2.7rem,5.6vw,5rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem}
.section-intro{max-width:72ch;color:var(--muted);margin-bottom:2rem}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:1rem 1.28rem;
  border-radius:999px;
  border:1px solid var(--gold);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  font-weight:600;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.25)}
.btn.primary{background:var(--gold);color:#0A0A0A}
.btn.secondary{color:var(--text);background:rgba(255,255,255,.02)}
.button-row{display:flex;gap:1rem;flex-wrap:wrap}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(200,169,90,.18);
}
.site-header .inner{
  min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
}
.brand img{height:72px; width:auto}
.main-nav{display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap}
.main-nav a{
  color:var(--muted); font-size:.95rem; position:relative; padding:.2rem 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-.2rem; width:0; height:1px; background:var(--gold);
  transition:width .28s ease;
}
.main-nav a:hover{color:var(--text)}
.main-nav a:hover::after{width:100%}

/* Animated command grid / route map */
.site-bg-map{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  overflow:hidden;
  opacity:.95;
}
.site-bg-map .grid{
  position:absolute;
  inset:-10%;
  background-image:
    linear-gradient(rgba(200,169,90,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,169,90,.04) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(900px) rotateX(68deg) scale(1.4) translateY(-6%);
  transform-origin:center top;
  animation:gridDrift 24s linear infinite;
  mask-image:radial-gradient(circle at center, rgba(0,0,0,.95) 28%, rgba(0,0,0,.55) 62%, transparent 88%);
}
.site-bg-map .glow{
  position:absolute;
  width:34vw;
  height:34vw;
  border-radius:50%;
  filter:blur(55px);
  background:radial-gradient(circle, rgba(200,169,90,.12), rgba(200,169,90,.02) 45%, transparent 70%);
  animation:glowFloat 16s ease-in-out infinite;
}
.site-bg-map .glow.g1{top:2%; left:-8%;}
.site-bg-map .glow.g2{top:28%; right:-10%; animation-delay: -6s;}
.site-bg-map .glow.g3{bottom:-8%; left:22%; animation-delay: -11s;}
.site-bg-map svg.routes{
  position:absolute; inset:0; width:100%; height:100%; opacity:.32;
}
.site-bg-map .route{
  fill:none; stroke:rgba(200,169,90,.28); stroke-width:1.35; stroke-linecap:round; stroke-dasharray:7 16;
  animation:routeFlow 14s linear infinite;
}
.site-bg-map .route.r2{animation-duration:18s; animation-delay:-4s;}
.site-bg-map .route.r3{animation-duration:20s; animation-delay:-8s;}
.site-bg-map .route.r4{animation-duration:22s; animation-delay:-3s;}
.site-bg-map .node{
  fill:rgba(200,169,90,.75); filter:drop-shadow(0 0 10px rgba(200,169,90,.35));
  animation:nodePulse 3.8s ease-in-out infinite;
}
.site-bg-map .node.n2{animation-delay:-1.2s;}
.site-bg-map .node.n3{animation-delay:-2.1s;}
.site-bg-map .node.n4{animation-delay:-.7s;}
.site-bg-map .node.n5{animation-delay:-2.8s;}
.site-bg-map .node.n6{animation-delay:-1.8s;}

/* single watermark */
.logo-watermark{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
.logo-watermark img{
  position:absolute;
  width:min(80vw,1100px);
  max-width:none;
  right:-8%;
  top:50%;
  transform:translateY(-50%);
}
.logo-watermark.center img{
  left:50%;
  right:auto;
  transform:translate(-50%,-50%);
  width:min(72vw,1000px);
}

/* hero */
.hero{padding:100px 0 78px; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 35%);
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
}
.hero-copy p{max-width:60ch; font-size:1.1rem; color:var(--muted)}
.hero-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:28px;
  padding:1.2rem;
  box-shadow:var(--shadow);
  animation:floatCard 8s ease-in-out infinite;
}
.hero-card img{border-radius:16px}
.hero-badge{
  display:inline-flex; gap:.5rem; align-items:center;
  padding:.45rem .8rem; border:1px solid var(--line); border-radius:999px;
  color:var(--gold-soft); background:rgba(255,255,255,.02); margin-bottom:1.25rem;
}
.signal-dot{
  width:8px; height:8px; border-radius:999px; background:var(--gold);
  box-shadow:0 0 0 0 rgba(200,169,90,.5); animation:pulse 2.4s infinite;
}
.hero-stats{margin-top:1.75rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.stat{
  padding:1rem; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.02);
}
.stat strong{display:block; font-size:1.35rem; color:var(--gold); margin-bottom:.25rem}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.45rem;
  box-shadow:var(--shadow);
  transition:transform .28s ease, border-color .28s ease;
}
.card:hover{transform:translateY(-4px); border-color:rgba(200,169,90,.42)}
.card h3{color:var(--gold)}
.card p,.card li,.fine{color:var(--muted)}

.process{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.step{
  padding:1.25rem; border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,var(--card), #111);
  position:relative; overflow:hidden;
}
.step::before{
  content:""; position:absolute; inset:auto -15% -40% auto; width:140px; height:140px;
  background:radial-gradient(circle, rgba(200,169,90,.12), transparent 65%);
}
.num{font-size:1.15rem; font-weight:700; color:var(--gold); margin-bottom:.5rem}

.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.metric{
  text-align:center; padding:1.4rem; border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg, #161616, #101010);
}
.metric .big{font-size:2.3rem; font-weight:700; color:var(--gold); line-height:1; margin-bottom:.35rem}

.custom-box{
  border:1px solid var(--line); border-radius:24px; padding:1.5rem; background:linear-gradient(180deg,#151515,#101010); box-shadow:var(--shadow);
}
.custom-list{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1rem}
.custom-item{
  padding:1rem; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.02);
}
.custom-item strong{color:var(--gold); display:block; margin-bottom:.35rem}

.contact-wrap{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:1.4rem;
}
.contact-card,.form-card{
  border:1px solid var(--line); border-radius:24px; padding:1.45rem; background:linear-gradient(180deg, #151515, #101010);
  box-shadow:var(--shadow);
}
.contact-list{display:grid; gap:.8rem; margin-top:1.25rem}
.contact-line{
  padding:.9rem 1rem; border:1px solid var(--line); border-radius:16px; color:var(--muted);
  background:rgba(255,255,255,.02);
}
.contact-box{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.contact-box input,.contact-box textarea,.contact-box select{
  width:100%; background:#0d0d0d; border:1px solid var(--line); border-radius:14px; color:var(--text);
  padding:.95rem 1rem; outline:none; transition:border-color .2s ease, transform .2s ease;
}
.contact-box input:focus,.contact-box textarea:focus,.contact-box select:focus{border-color:rgba(200,169,90,.55); transform:translateY(-1px)}
.contact-box textarea{min-height:140px; grid-column:1/-1}
.contact-box .full{grid-column:1/-1}

.cta{text-align:center; padding:96px 0; background:radial-gradient(circle at center, rgba(200,169,90,.12), transparent 42%)}
.site-footer{padding:32px 0 46px; border-top:1px solid var(--line)}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.footer-logo{height:60px; width:auto}

[data-reveal]{opacity:0; transform:translateY(18px); animation:revealUp .85s ease forwards}
[data-delay="1"]{animation-delay:.08s}
[data-delay="2"]{animation-delay:.16s}
[data-delay="3"]{animation-delay:.24s}
[data-delay="4"]{animation-delay:.32s}
[data-delay="5"]{animation-delay:.40s}

@keyframes revealUp{to{opacity:1; transform:none}}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(200,169,90,.42)}
  70%{box-shadow:0 0 0 12px rgba(200,169,90,0)}
  100%{box-shadow:0 0 0 0 rgba(200,169,90,0)}
}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes gridDrift{
  0%{transform:perspective(900px) rotateX(68deg) scale(1.4) translateY(-6%) translateX(0)}
  100%{transform:perspective(900px) rotateX(68deg) scale(1.4) translateY(-6%) translateX(-64px)}
}
@keyframes routeFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-230}}
@keyframes nodePulse{0%,100%{opacity:.72; transform:scale(1)}50%{opacity:1; transform:scale(1.35)}}
@keyframes glowFloat{0%,100%{transform:translate3d(0,0,0)}33%{transform:translate3d(5vw,2vh,0)}66%{transform:translate3d(-3vw,-3vh,0)}}

@media (max-width:1024px){
  .hero-grid,.contact-wrap,.custom-list{grid-template-columns:1fr}
  .logo-watermark img{right:auto; left:50%; transform:translate(-50%,-50%); width:min(95vw,900px)}
}
@media (max-width:900px){
  .grid-3,.process,.metrics,.contact-box,.hero-stats{grid-template-columns:1fr}
  .brand img{height:58px}
  .site-header .inner{padding:.7rem 0}
  .site-bg-map .grid{background-size:42px 42px}
  .site-bg-map svg.routes{opacity:.25}
}


/* Premium micro-animations */
.section{
  transition:background-color .35s ease, border-color .35s ease;
}
.section:hover{
  border-color:rgba(200,169,90,.30);
}
.card, .metric, .step, .contact-card, .form-card, .stat, .custom-item{
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    border-color .32s ease,
    box-shadow .32s ease,
    background .32s ease;
  will-change:transform;
}
.card:hover, .metric:hover, .step:hover, .contact-card:hover, .form-card:hover, .stat:hover, .custom-item:hover{
  transform:translateY(-6px);
  border-color:rgba(200,169,90,.42);
  box-shadow:0 24px 55px rgba(0,0,0,.34);
}
.kicker, h1, h2, h3, p, .btn, .main-nav a, .contact-line{
  transition:opacity .28s ease, transform .28s ease, color .28s ease;
}
.main-nav a:hover{
  transform:translateY(-1px);
}
.btn:hover{
  transform:translateY(-2px) scale(1.01);
}
.hero-copy h1{
  animation:heroRise .9s cubic-bezier(.22,1,.36,1) both;
}
.hero-copy p{
  animation:heroRise .95s cubic-bezier(.22,1,.36,1) .08s both;
}
.hero .button-row{
  animation:heroRise 1s cubic-bezier(.22,1,.36,1) .14s both;
}
.hero-stats .stat:nth-child(1){animation:statRise .75s ease .18s both;}
.hero-stats .stat:nth-child(2){animation:statRise .75s ease .28s both;}
.hero-stats .stat:nth-child(3){animation:statRise .75s ease .38s both;}
.process .step:nth-child(1),
.grid-3 .card:nth-child(1),
.metrics .metric:nth-child(1){
  animation-delay:.06s;
}
.process .step:nth-child(2),
.grid-3 .card:nth-child(2),
.metrics .metric:nth-child(2){
  animation-delay:.16s;
}
.process .step:nth-child(3),
.grid-3 .card:nth-child(3),
.metrics .metric:nth-child(3){
  animation-delay:.26s;
}
.process .step:nth-child(4){animation-delay:.36s;}
.contact-line{
  position:relative;
  overflow:hidden;
}
.contact-line::before{
  content:"";
  position:absolute;
  inset:0 auto 0 -120%;
  width:55%;
  background:linear-gradient(90deg, transparent, rgba(200,169,90,.08), transparent);
  transition:left .9s ease;
}
.contact-line:hover::before{
  left:120%;
}
.logo-watermark img{
  animation:watermarkDrift 26s ease-in-out infinite;
}
.hero-card img, .brand img, .footer-logo{
  transition:transform .35s ease, filter .35s ease;
}
.hero-card:hover img{
  transform:scale(1.015);
  filter:brightness(1.03);
}
.brand:hover img, .footer-logo:hover{
  transform:translateY(-1px);
}
@keyframes heroRise{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:none}
}
@keyframes statRise{
  from{opacity:0; transform:translateY(16px) scale(.985)}
  to{opacity:1; transform:none}
}
@keyframes watermarkDrift{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-49.2%,-50.8%) scale(1.018)}
}
@media (prefers-reduced-motion: reduce){
  .card, .metric, .step, .contact-card, .form-card, .stat, .custom-item,
  .hero-copy h1, .hero-copy p, .hero .button-row, .hero-stats .stat,
  .logo-watermark img, .hero-card, .site-bg-map .grid, .site-bg-map .route,
  .site-bg-map .node, .site-bg-map .glow{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}