/* Precision Global Trading S.R.L. — pgtrading.ro
   Восстановлено по макету Figma (файл rubicom (Copy), Page 2, фреймы precision-global-trading).
   Все размеры, цвета и шрифты сняты из макета: контейнер 1186px на холсте 1920px. */

:root{
  --red:#dd1913;
  --red-nav:#f62b25;
  --blue:#00358f;
  --navy:#0b2b62;
  --navy-dots:#17366a;
  --navy-lite:#9eacc3;
  --amber:#fba925;
  --chip:#ffc15e;
  --ring:#f4ca15;
  --bg:#fafafa;
  --line:#e0e0e0;
  --rule:#ebebeb;
  --foot:#f3f4f8;
  --foot-bar:#cfd2de;
  --muted:#525872;
  --container:1186px;
  --header-h:75px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:#000;
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:18px;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%}

a{color:inherit}

.container{
  width:var(--container);
  max-width:calc(100% - 48px);
  margin:0 auto;
}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------- header */

.site-header{
  position:sticky;top:0;z-index:60;
  height:var(--header-h);
  background:#fff;
  border-bottom:1px solid var(--line);
}

.header-inner{
  width:1134px;
  max-width:calc(100% - 48px);
  margin:0 auto;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.logo{display:block;flex:none;line-height:0}
.logo img{width:171px;height:41px;display:block}

.nav{display:flex;align-items:center;gap:79px}

.nav a{
  font-family:"Roboto","Helvetica Neue",Arial,sans-serif;
  font-weight:300;font-size:16px;line-height:19px;
  text-transform:uppercase;color:#000;text-decoration:none;
  white-space:nowrap;
  transition:color .15s ease;
}
.nav a:hover{color:var(--red-nav)}
.nav a[aria-current="page"]{font-weight:500;color:var(--red-nav)}

.burger{
  display:none;flex:none;width:40px;height:40px;padding:8px;
  background:none;border:0;cursor:pointer;
}
.burger span{display:block;height:2px;background:#000;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------------------------------------------------------- hero */

.hero{
  height:565px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background:
    linear-gradient(rgba(0,0,0,.69),rgba(0,0,0,.69)),
    url("img/hero.jpg") center/cover no-repeat #222;
}

.hero-inner{max-width:794px;padding:0 24px}

.hero h1{
  margin:0;
  font-family:"Roboto","Helvetica Neue",Arial,sans-serif;
  font-weight:800;font-size:50px;line-height:59px;
  text-transform:uppercase;color:#fff;
}
.hero h1 em{display:block;font-style:normal;font-weight:900;color:var(--red)}

.hero p{
  margin:7px auto 0;max-width:598px;
  font-weight:600;font-size:25px;line-height:30px;color:#fff;
}

.hero-actions{margin-top:42px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ---------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:43px;padding:0 34px;border-radius:5px;
  font-weight:600;font-size:14px;line-height:17px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:#c2140f}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}
.btn-ghost:hover{background:#fff;color:#000}

/* ------------------------------------------------------------ page title */

.page-head{
  height:137px;background:var(--red);
  display:flex;align-items:center;justify-content:center;
}
.page-head h1{
  margin:0;font-weight:800;font-size:50px;line-height:61px;
  text-transform:uppercase;color:#fff;text-align:center;
}

/* --------------------------------------------------------- section title */

.heading{margin:0 0 53px}
.heading h2{
  margin:0;font-weight:700;font-size:45px;line-height:55px;
  text-transform:uppercase;color:var(--blue);
}
.heading .rules{
  display:block;position:relative;width:442px;max-width:100%;height:7px;margin-top:16px;
}
.heading .rules::before,
.heading .rules::after{content:"";position:absolute;height:1px}
.heading .rules::before{left:1px;top:0;width:312px;background:var(--red)}
.heading .rules::after{left:75px;top:6px;width:368px;background:var(--amber)}

.heading-center{text-align:center}
.heading-center .rules{margin-left:auto;margin-right:auto}

.heading-light h2{color:#fff}
.heading-light .rules::before,
.heading-light .rules::after{background:#fff}

/* Заголовки внутренних страниц: Montserrat 700 30/37, чёрный, по центру. */
.subhead{
  margin:0 auto 44px;max-width:1008px;
  font-weight:700;font-size:30px;line-height:37px;
  text-transform:uppercase;text-align:center;color:#000;
}
.subhead-light{color:#fff}

/* ------------------------------------------------------------- features */

.features{background:#fff;padding:53px 0 35px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:58px}

.feature{position:relative;display:flex;gap:15px;align-items:flex-start}
.feature+.feature::before{
  content:"";position:absolute;left:-29px;top:-32px;
  width:1px;height:125px;background:var(--rule);
}
.feature img{width:58px;height:58px;flex:none}
.feature h3{margin:0;font-weight:600;font-size:16px;line-height:20px}
.feature p{margin:8px 0 0;font-weight:400;font-size:14px;line-height:17px}

/* --------------------------------------------------------------- cards */

.card{
  position:relative;overflow:hidden;
  background:#fff;border-radius:10px;
  box-shadow:0 4px 26px rgba(0,0,0,.02);
}

/* Триколорный «росчерк» в правом нижнем углу карточки.
   В макете это группа 256x268, повёрнутая на 4.6 град. и вынесенная за угол
   карточки на 130px вправо и 120px вниз; видна только её кромка. */
.card .ribbon,.proj-card .ribbon{
  position:absolute;right:-96px;bottom:-114px;z-index:0;
  width:220px;height:239.44px;max-width:none;
  transform:rotate(4.6deg);
  pointer-events:none;user-select:none;
}
/* В макете росчерк лежит под текстом карточки. */
.card>:not(.ribbon){position:relative;z-index:1}

.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

.svc-card{min-height:295px;padding:37px 8px 24px;text-align:center}
.svc-card img.icon{width:95px;height:95px;display:block;margin:0 auto}
.svc-card h3{margin:19px auto 0;font-weight:600;font-size:18px;line-height:22px}
.svc-card p{margin:8px auto 0;font-weight:400;font-size:15px;line-height:18px}

.center-action{margin-top:65px;text-align:center}

/* ---------------------------------------------------------- advantages */

.advantages{
  position:relative;
  background:var(--navy);
  padding:91px 0 0;
  min-height:470px;
  clip-path:polygon(0 0,100% 0,100% 80.43%,50% 100%,0 80.43%);
}
/* Светлая подложка, выглядывающая из-под тёмного шеврона (в макете — copy со сдвигом 13px). */
.advantages-wrap{position:relative}
.advantages-wrap::before{
  content:"";position:absolute;left:0;right:0;top:13px;height:470px;
  background:var(--navy-lite);
  clip-path:polygon(0 0,100% 0,100% 80.43%,50% 100%,0 80.43%);
}
.advantages-wrap>.advantages{position:relative}

.adv-grid{display:grid;grid-template-columns:376fr 372fr 375fr;gap:31px}
.adv-card{
  height:117px;padding:0 24px;
  display:flex;align-items:center;gap:23px;
}
.adv-card img{width:54px;height:54px;flex:none}
.adv-card p{margin:0;font-weight:400;font-size:15px;line-height:18px}

/* ------------------------------------------------------------- partners */

.partners{padding:117px 0 132px}
.partners .heading{margin-bottom:75px}
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.partner{
  height:99px;background:#fff;border-radius:10px;
  box-shadow:0 4px 8px rgba(0,0,0,.13);
  display:flex;align-items:center;justify-content:center;padding:12px 16px;
}
.partner img{max-height:74px;width:auto;object-fit:contain}

/* --------------------------------------------------------------- about */

.about-grid{
  display:grid;grid-template-columns:369px 1fr;gap:79px;
  align-items:start;
}
.about-photo{width:369px;height:555px;object-fit:cover;border-radius:10px;display:block}
.about-lead{max-width:680px;padding-top:26px}
.about-lead h2{
  margin:0;font-weight:700;font-size:30px;line-height:37px;
  text-transform:uppercase;color:var(--blue);
}
.about-lead p{margin:18px 0 0;font-weight:600;font-size:25px;line-height:30px}

.timeline{margin:36px 0 0;padding:0;list-style:none;display:grid;gap:27px}
.timeline li{display:flex;align-items:center;gap:38px}
.timeline .year{
  flex:none;width:200px;height:50px;border-radius:10px;background:var(--chip);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:25px;line-height:30px;
}
.timeline span:last-child{font-weight:500;font-size:20px;line-height:24px}

/* -------------------------------------------------------- technologies */

.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tech-card{min-height:239px;padding:42px 33px 24px;text-align:center}
.tech-card img.icon{width:95px;height:95px;display:block;margin:0 auto}
.tech-card h3{margin:26px 0 0;font-weight:600;font-size:18px;line-height:22px}

.band{
  background:var(--navy-dots) url("img/tech-band.png") center/1920px 447px repeat;
  padding:49px 0 84px;
}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:29px}
.band-grid .tech-card{min-height:239px}

.materials{padding:61px 0 96px}
.materials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:29px}

/* ----------------------------------------------------------- solutions */

.steps{display:grid;grid-template-columns:255fr 249fr 297fr 271fr;gap:38px;margin-bottom:131px}
.step{display:flex;gap:14px;align-items:flex-start}
.step .num{
  flex:none;width:52px;height:52px;border-radius:10px;background:var(--chip);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:21px;line-height:26px;
}
.step h3{margin:0;font-weight:500;font-size:18px;line-height:22px}
.step p{margin:5px 0 0;font-weight:400;font-size:14px;line-height:17px}

.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tst-card{min-height:215px;padding:33px 9px 30px 28px}
.tst-head{display:flex;align-items:center;gap:25px}
.tst-head img{
  width:67px;height:67px;flex:none;border-radius:50%;
  border:2px solid var(--ring);object-fit:cover;
}
.tst-head h3{margin:0;font-weight:600;font-size:18px;line-height:22px}
.tst-head p{margin:2px 0 0;font-weight:400;font-size:14px;line-height:17px}
.tst-card blockquote{
  margin:11px 0 0;font-style:italic;font-weight:300;font-size:14px;line-height:17px;
}

/* ------------------------------------------------------------ projects */

.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 28px}
.proj-card{
  position:relative;overflow:hidden;border-radius:10px;
  min-height:225px;display:flex;align-items:center;
  padding:0 54px;color:#fff;
  box-shadow:0 4px 26px rgba(0,0,0,.02);
  background-color:#000;background-position:center;background-size:cover;
}
.proj-card::before{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.7);
}
.proj-card>*{position:relative}
.proj-card h3{margin:0;font-weight:600;font-size:18px;line-height:22px}
.proj-card p{margin:8px 0 0;font-weight:400;font-size:15px;line-height:18px;max-width:443px}

/* ------------------------------------------------------------- contact */

.contact-grid{display:grid;grid-template-columns:367px 808px;gap:59px;justify-content:center}
.contact-list{margin:0;padding:0;list-style:none;display:grid;gap:39px;align-content:start}
.contact-list li{display:flex;align-items:center;gap:10px}
.contact-list img{width:27px;height:27px;flex:none}
.contact-list a,.contact-list span{font-weight:400;font-size:15px;line-height:15px;text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.contact-map{
  width:808px;max-width:100%;height:463px;border:0;display:block;background:#e8eaed;
}

/* -------------------------------------------------------------- footer */

.site-footer{margin-top:auto}
.footer-main{background:var(--foot);padding:49px 0}
.footer-row{
  display:flex;align-items:center;justify-content:center;gap:124px;flex-wrap:wrap;
}
.footer-row div{display:flex;align-items:center;gap:10px}
.footer-row img{width:27px;height:27px;flex:none}
.footer-row a,.footer-row span{font-weight:400;font-size:15px;line-height:15px;text-decoration:none}
.footer-row a:hover{text-decoration:underline}
.footer-bar{
  background:var(--foot-bar);height:47px;
  display:flex;align-items:center;justify-content:center;
}
.footer-bar p{margin:0;font-weight:400;font-size:15px;line-height:15px;color:var(--muted)}

/* -------------------------------------------------------------- layout */

.page{display:flex;flex-direction:column;min-height:100vh}
.page>main{flex:1 0 auto}

.section{padding:108px 0 0}
.section-services{padding:108px 0 95px}
.section-pad{padding:67px 0 120px}

/* --------------------------------------------------------- responsive */

@media (max-width:1280px){
  .hero h1{font-size:42px;line-height:50px}
  .hero p{font-size:22px;line-height:27px}
  .heading h2{font-size:38px;line-height:46px}
  .about-grid{gap:48px}
  .contact-grid{grid-template-columns:300px 1fr;gap:40px}
  .contact-map{width:100%}
}

@media (max-width:1080px){
  .svc-grid,.tech-grid,.partner-grid{grid-template-columns:repeat(2,1fr)}
  .adv-grid{grid-template-columns:1fr;gap:20px}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px;margin-bottom:80px}
  .band-grid,.materials-grid,.tst-grid{grid-template-columns:1fr;gap:20px}
  .features-grid{grid-template-columns:1fr;gap:32px}
  .feature+.feature::before{display:none}
  .advantages{clip-path:none;padding:64px 0 64px}
  .advantages-wrap::before{display:none}
}

@media (max-width:900px){
  .nav{
    position:absolute;top:var(--header-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:8px 24px 16px;
    box-shadow:0 12px 24px rgba(0,0,0,.06);
  }
  .nav:not(.is-open){display:none}
  .nav a{padding:14px 0;border-bottom:1px solid #f0f0f0}
  .nav a:last-child{border-bottom:0}
  .burger{display:block}
  .site-header{position:relative}
  .about-grid{grid-template-columns:1fr}
  .about-photo{width:100%;height:auto;max-height:520px}
  .contact-grid{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr}
  .footer-row{gap:22px;flex-direction:column;align-items:flex-start}
  .footer-main{padding:32px 0}
  .section{padding:64px 0 0}
  .section-pad{padding:64px 0}
  .partners{padding:64px 0 72px}
  .heading{margin-bottom:36px}
}

@media (max-width:680px){
  .hero{height:auto;padding:72px 0}
  .hero h1{font-size:32px;line-height:39px}
  .hero p{font-size:18px;line-height:23px}
  .page-head{height:104px}
  .page-head h1{font-size:34px;line-height:42px}
  .heading h2{font-size:29px;line-height:36px}
  .heading .rules::before{width:190px}
  .heading .rules::after{left:46px;width:224px}
  .subhead{font-size:22px;line-height:28px}
  .svc-grid,.tech-grid,.partner-grid,.steps{grid-template-columns:1fr}
  .about-lead{max-width:680px;padding-top:26px}
.about-lead h2{font-size:24px;line-height:30px}
  .about-lead p{font-size:19px;line-height:25px}
  .timeline li{gap:18px}
  .timeline .year{width:120px;height:44px;font-size:20px}
  .timeline span:last-child{font-size:17px;line-height:21px}
  .proj-card{padding:0 24px}
  .logo img{width:140px;height:34px}
  .card .ribbon,.proj-card .ribbon{
    right:-66px;bottom:-78px;width:150px;height:163.26px;
  }
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}