
:root{--red:#9e1725;--red2:#c52d3c;--gold:#d8a63b;--cream:#f7f2ea;--ink:#15171a;--slate:#56616d;--line:#e5e7ea;--white:#fff;--shadow:0 24px 70px rgba(19,23,28,.12);--radius:26px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);line-height:1.65;background:#fff}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,92%);margin:auto}
.top{background:#111316;color:#dfe3e7;font-size:12px}.top .container{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}.top b{color:#fff}
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.07)}.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:12px}.brandmark{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,var(--red),#6f0c15);color:#fff;display:grid;place-items:center;font-weight:950;letter-spacing:-1px;box-shadow:0 10px 25px #9e17252e}.brand strong{font-size:15px;letter-spacing:.8px}.brand small{display:block;color:#7a838d;font-size:9px;letter-spacing:2.2px;font-weight:800;margin-top:1px}
.menu{display:flex;align-items:center;gap:4px}.menu a{padding:10px 12px;font-size:13px;font-weight:800;color:#363b40;border-radius:10px}.menu a:hover,.menu a.active{color:var(--red);background:#fff0f1}.menu .quote{background:var(--red);color:#fff;padding:12px 17px}.menu .quote:hover{background:#7f111c;color:#fff}.hamb{display:none;border:0;background:none;font-size:27px}
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#23080c 0%,#6e0e18 48%,#a91f2c 100%);color:#fff}.hero:after{content:"";position:absolute;inset:auto -15% -45% 35%;height:500px;border-radius:50%;background:rgba(216,166,59,.13);filter:blur(20px)}.hero .container{min-height:680px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:50px;position:relative;z-index:2}.eyebrow{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:900;color:var(--gold)}.hero h1{font-size:clamp(45px,6vw,78px);line-height:1.01;letter-spacing:-3px;margin:15px 0 22px;max-width:760px}.hero h1 em{font-style:normal;color:#ffd98a}.hero p{font-size:18px;color:#f1dfe1;max-width:650px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 19px;border-radius:12px;font-weight:900;border:1px solid transparent;transition:.2s}.btn:hover{transform:translateY(-2px)}.primary{background:var(--gold);color:#211707}.ghost{border-color:#ffffff55;color:#fff}.dark{background:var(--ink);color:#fff}
.lab-scene{position:relative;min-height:510px;display:grid;place-items:center}.orb{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff8cf 0,#f0b62f 10%,#a94b0b 35%,#5c1017 64%,transparent 65%);opacity:.55;filter:blur(1px)}.vessel{position:relative;width:300px;height:390px;border:1px solid #ffffff35;border-radius:48% 48% 35% 35%;background:linear-gradient(120deg,#ffffff1e,#ffffff08);box-shadow:inset 0 0 50px #ffffff08,0 35px 80px #0008;transform:rotate(-4deg);overflow:hidden}.vessel:before{content:"";position:absolute;left:36px;right:36px;bottom:35px;height:180px;border-radius:50% 50% 35% 35%;background:linear-gradient(180deg,#f5c23e,#b95d0b 65%,#7d1a18);box-shadow:0 -20px 45px #f0ad3038}.vessel:after{content:"TURKEY RED OIL\\A SULPHATED CASTOR OIL";white-space:pre;text-align:center;position:absolute;left:50%;top:140px;transform:translateX(-50%);width:205px;padding:18px 10px;background:#fff;color:#75131c;border-radius:12px;font-weight:950;font-size:16px;line-height:1.35;box-shadow:0 15px 35px #0003}.bubble{position:absolute;width:78px;height:78px;border:1px solid #fff4;border-radius:50%;background:#ffffff12;backdrop-filter:blur(5px)}.b1{right:20px;top:90px}.b2{left:15px;bottom:90px;width:55px;height:55px}.b3{right:40px;bottom:50px;width:35px;height:35px}
.stats{background:#121417;color:#fff}.stats .container{display:grid;grid-template-columns:repeat(4,1fr)}.stat{padding:27px 14px;text-align:center;border-right:1px solid #ffffff15}.stat:last-child{border:0}.stat b{display:block;color:#ffd47a;font-size:29px}.stat span{font-size:11px;color:#b8bec5;letter-spacing:.8px}
.section{padding:100px 0}.section.cream{background:var(--cream)}.section.darksec{background:#121417;color:#fff}.section-head{max-width:760px;margin-bottom:38px}.section h2{font-size:clamp(32px,4.3vw,53px);line-height:1.05;letter-spacing:-1.7px;margin:9px 0 16px}.lead{font-size:17px;color:var(--slate)}.darksec .lead{color:#bfc5cb}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:0 8px 35px #11111107}.card.lift:hover{transform:translateY(-5px);box-shadow:var(--shadow);transition:.25s}.darksec .card{background:#1a1d21;border-color:#ffffff12}.icon{width:55px;height:55px;border-radius:17px;background:#fff0f1;color:var(--red);display:grid;place-items:center;font-weight:950;margin-bottom:20px}.card h3{margin:0 0 8px;font-size:19px}.muted{color:var(--slate)}.darksec .muted{color:#b6bdc5}.tag{display:inline-flex;padding:7px 11px;border-radius:999px;background:#f4e8cc;color:#71500e;font-size:11px;font-weight:900;letter-spacing:.6px}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}.feature-list{list-style:none;padding:0;margin:24px 0}.feature-list li{padding:13px 0 13px 31px;border-bottom:1px solid var(--line);position:relative}.feature-list li:before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:950}.visual{min-height:460px;border-radius:34px;background:linear-gradient(145deg,#241016,#7d1721);position:relative;overflow:hidden;box-shadow:var(--shadow)}.visual:before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:#d8a63b22;top:-70px;right:-70px}.visual .copy{position:absolute;left:35px;bottom:30px;color:#fff;max-width:370px}.visual .copy strong{font-size:32px;line-height:1.1;display:block}
.pagehero{padding:86px 0 78px;background:linear-gradient(120deg,#21080c,#7a101b);color:#fff;position:relative;overflow:hidden}.pagehero:after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;right:-120px;top:-200px;background:#d8a63b18}.crumb{font-size:12px;color:#efcdd0}.pagehero h1{font-size:clamp(40px,5.5vw,65px);letter-spacing:-2px;margin:10px 0}.pagehero p{font-size:17px;color:#ead6d8;max-width:720px}
.tablebox{overflow:auto;border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 40px #11111108}table{width:100%;border-collapse:collapse;min-width:680px;background:#fff}th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}th{background:#fff3f4;color:var(--red);font-size:11px;letter-spacing:1px;text-transform:uppercase}tr:last-child td{border:0}
.cta{padding:45px;border-radius:30px;background:linear-gradient(120deg,#8d1420,#bd2938);color:#fff;box-shadow:var(--shadow)}.cta .lead{color:#f4dfe1}
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px}.contactline{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}.contactline b{display:block}.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.full{grid-column:1/-1}label{font-size:12px;font-weight:800;display:block;margin-bottom:6px}input,textarea,select{width:100%;font:inherit;padding:14px;border:1px solid #dfe2e5;border-radius:12px;outline:none}textarea{min-height:150px;resize:vertical}input:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 4px #9e172514}
.footer{background:#0d0f11;color:#b7bdc4;padding:58px 0 22px}.footergrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}.footer h3,.footer h4{color:#fff}.footer a:hover{color:#ffd47a}.footbottom{border-top:1px solid #ffffff14;margin-top:35px;padding-top:18px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:11px}
.wa{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:25px;font-weight:900;box-shadow:0 15px 35px #0004;z-index:120}.mini-note{font-size:12px;color:#77808a}
@media(max-width:950px){.menu{display:none;position:absolute;left:0;right:0;top:82px;background:#fff;border-bottom:1px solid var(--line);padding:10px 4%;flex-direction:column;align-items:stretch;box-shadow:0 20px 35px #00000010}.menu.open{display:flex}.hamb{display:block}.hero .container{grid-template-columns:1fr;padding:70px 0}.lab-scene{min-height:390px}.grid4{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr}.footergrid{grid-template-columns:1fr 1fr}.stats .container{grid-template-columns:1fr 1fr}.stat{border-bottom:1px solid #ffffff15}.split,.contact{grid-template-columns:1fr}}
@media(max-width:620px){.top .container{justify-content:center;text-align:center}.nav{height:72px}.menu{top:72px}.brandmark{width:43px;height:43px}.brand strong{font-size:13px}.brand small{font-size:8px}.hero h1{letter-spacing:-1.7px}.hero p{font-size:16px}.section{padding:70px 0}.grid2,.grid3,.grid4{grid-template-columns:1fr}.form{grid-template-columns:1fr}.full{grid-column:auto}.visual{min-height:360px}.cta{padding:30px}.footergrid{grid-template-columns:1fr}.pagehero{padding:65px 0}.vessel{width:250px;height:330px}.vessel:after{top:120px;width:170px;font-size:13px}.orb{width:330px;height:330px}}

/* Supplied Phinam Industries logo */

@media(max-width:760px){}


/* === Phinam Industries logo layout tuning === */
.brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  line-height:0;
}
.brand img{
  display:block;
  width:clamp(168px, 15vw, 215px);
  height:auto;
  max-height:64px;
  object-fit:contain;
  object-position:left center;
  filter:none;
}
@media (max-width: 980px){
  .brand img{
    width:184px;
    max-height:58px;
  }
}
@media (max-width: 760px){
  .brand img{
    width:160px;
    max-width:48vw;
    max-height:50px;
  }
}
@media (max-width: 420px){
  .brand img{
    width:146px;
    max-width:46vw;
    max-height:46px;
  }
}


/* =========================================================
   Premium page-load & scroll animations
   ========================================================= */
html { scroll-behavior: smooth; }

body {
  opacity: 0;
  animation: phPageIn .55s ease-out forwards;
}

@keyframes phPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Header enters cleanly from above */
header, .site-header {
  animation: phHeaderIn .65s cubic-bezier(.22,.8,.35,1) both;
}

@keyframes phHeaderIn {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero content stagger */
.hero h1,
.hero .eyebrow,
.hero p,
.hero .btn,
.hero .hero-actions,
.hero .hero-card,
.hero .visual {
  opacity: 0;
  animation: phHeroUp .75s cubic-bezier(.2,.75,.25,1) forwards;
}

.hero .eyebrow { animation-delay: .12s; }
.hero h1 { animation-delay: .20s; }
.hero p { animation-delay: .30s; }
.hero .hero-actions,
.hero .btn { animation-delay: .40s; }
.hero .hero-card,
.hero .visual { animation-delay: .48s; }

@keyframes phHeroUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cards gain a premium lift */
.card,
.product-card,
.application-card,
.stat,
.feature,
.quality-card {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card:hover,
.product-card:hover,
.application-card:hover,
.stat:hover,
.feature:hover,
.quality-card:hover {
  transform: translateY(-6px);
}

/* Buttons */
.btn,
button,
input[type="submit"] {
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.btn:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
}

/* Logo subtle entrance only; no continuous distracting motion */
.brand img {
  animation: phLogoIn .7s cubic-bezier(.22,.8,.35,1) both;
}
@keyframes phLogoIn {
  from { opacity: 0; transform: translateX(-12px) scale(.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body,
  header, .site-header,
  .hero h1, .hero .eyebrow, .hero p, .hero .btn,
  .hero .hero-actions, .hero .hero-card, .hero .visual,
  .brand img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
