/* ================================================================
   PRIVASSISTANT LANDING PAGE — priva_ver2.css
   Aligns with Figma via explicit frame references in comments.
   Sections are normalized to maintainable CSS while preserving pixel specs.
   ================================================================ */

/* ==========
   Global / Root
   ========== */

:root{
  --ink:#000319;
  --ink-2:#000318;
  --white:#fff;
  --brand-navy-1:#122A54;
  --brand-blue:#285DBA;
  --cta:#008B00;
  --bg-muted:#F1F6F7;

  --radius-12:12px;
  --radius-pill:74px;

  --space-120:120px;
  --space-96:96px;
  --space-60:60px;
  --gap-48:48px;
  --gap-32:32px;
  --gap-24:24px;
  --gap-12:12px;
  --gap-10:10px;
}

.page{
  position: relative; /* FIGMA: Root frame “Privassistant Landing Page” */
  width: 1440px;      /* FIGMA size */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Reset helpers (safe defaults) */
h1,h2,h3,h4,p{ margin:0; }
img{ display:block; max-width:100%; height:auto; }

/* ================================================================
   HEADER
   ================================================================ */
/* FIGMA: Header (top nav bar) */

.header{                                 /* FIGMA: Header */
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  gap:193px;
  padding:16px var(--space-120);
  background:#FFFFFF;
  width:100%;
  height:83px;
  box-sizing:border-box;
}

.header__logo{                            /* FIGMA: image 1 */
  width:239px; height:33px;
  background: url("image") center/contain no-repeat;
}

.header__nav{                             /* FIGMA: Frame 176 */
  display:flex; flex-direction:row; align-items:center;
  gap:32px;
  height:19px;
}

.nav__link{                               /* FIGMA: Home / Products / Company / Login */
  font-family:'Inter',sans-serif;
  font-weight:400; font-size:16px; line-height:19px;
  color:var(--ink);
  text-decoration:none;
}

.nav__group{                              /* FIGMA: Frame 177 / Frame 178 (label + caret) */
  display:flex; flex-direction:row; align-items:center; gap:8px;
}

.nav__caret{                              /* FIGMA: Vector (10 x 5) */
  width:10px; height:5px; border:1px solid var(--ink);
}

.header__ctaWrap{                         /* FIGMA: Frame 180 */
  display:flex; flex-direction:row; justify-content:flex-end; align-items:center;
  gap:24px; height:51px;
}

.button--primary{                         /* FIGMA: Button (Request a Demo) */
  display:flex; justify-content:center; align-items:center;
  gap:10px; padding:16px 24px;
  width:174px; height:51px;
  background:var(--cta);
  color:#fff; border-radius:var(--radius-pill);
  font-family:'Inter',sans-serif; font-weight:500; font-size:16px; line-height:19px;
  text-decoration:none;
}

.header__lang{                            /* FIGMA: Frame 179 (EN + caret) */
  display:flex; align-items:center; gap:8px; height:19px;
}
.header__lang-label{ font:400 16px/19px 'Inter',sans-serif; color:var(--ink); }
.header__lang-caret{ width:10px; height:5px; border:1px solid var(--ink); }

/* ================================================================
   HERO
   ================================================================ */
/* FIGMA: Hero */

.hero{
  display:flex; flex-direction:column; align-items:center;
  padding:172px var(--space-120);
  gap:100px; width:100%; height:653px; box-sizing:border-box;
  background:
    linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,.6)),
    url("b3b426ce58") center/cover no-repeat;
}
.hero__stack{                             /* FIGMA: Title (Frame) */
  display:flex; flex-direction:column; align-items:center; gap:32px;
  width:789px; height:309px;
}
.hero__title{                             /* FIGMA: “Your Data Privacy Assistant in Action” */
  width:789px; height:154px;
  font-family:'Manrope',sans-serif; font-weight:600; font-size:64px; line-height:120%;
  text-align:center; letter-spacing:-0.05em; color:#fff;
}
.hero__subtitle{                          /* FIGMA: lorem... */
  width:642px; height:40px;
  font:400 17px/120% 'Inter',sans-serif; color:#fff; text-align:center;
}
.hero .button--primary{                   /* FIGMA: Button under hero */
  order:2;
}

/* ================================================================
   HOW TO SETUP — STEPS (SECTION #1)
   ================================================================ */
/* FIGMA: “How to Setup” (Steps) — Frame 184, 190, 194, cards 191–194 */
/* Note: Frame 184 appears multiple times in Figma. Scoped names below. */

.howto-steps{                             /* FIGMA: How to Setup (first) */
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:96px var(--space-120); gap:48px;
  width:100%; height:991px; background: var(--bg-muted);
  box-sizing:border-box;
}
.howto-steps .frame-184__header{          /* FIGMA: Frame 184 (header stack) */
  display:flex; flex-direction:column; align-items:center; gap:8px; width:654px; height:171px;
}
.howto-steps .frame-184__chip{            /* FIGMA: Frame 184 (chip) */
  box-sizing:border-box; display:flex; justify-content:center; align-items:center; gap:10px;
  padding:8px 12px; width:133px; height:32px;
  background: rgba(211,211,211,.1); border:1px solid #F5F5F5; border-radius:30px;
}
.howto-steps .chip__label{                 /* FIGMA: “Setting it up” */
  width:109px; height:16px;
  font:500 13px/16px 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:#000318; opacity:.6;
}

.howto-steps .frame-190{                  /* FIGMA: Frame 190 (title block) */
  display:flex; flex-direction:column; align-items:center; gap:24px; width:654px; height:131px;
}
.howto-steps .title{                      /* FIGMA: How it works */
  width:654px; height:67px;
  font:500 56px/120% 'Manrope',sans-serif; letter-spacing:-0.05em; text-align:center; color:#000319;
}
.howto-steps .subtitle{                   /* FIGMA: subtext */
  width:654px; height:40px;
  font:400 17px/120% 'Inter',sans-serif; text-align:center; color:#000318;
}

.howto-steps .frame-194__cards{           /* FIGMA: Frame 194 (row) */
  display:flex; flex-direction:row; align-items:flex-start; gap:12px; width:1200px; height:481px;
}

/* Cards 191/192/193/194 share anatomy */
.howto-card{                              /* FIGMA: Frame 191/192/193/194 (card) */
  position:relative; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  padding:24px 16px; width:291px; height:481px;
  background:#fff; border:1px solid #E9E9E9; border-radius:12px; flex:1 1 0;
}
.howto-card .card__head{                  /* FIGMA: Frame 192 (inside card) */
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  width:259px; height:70px;
}
.step-chip{                               /* FIGMA: Frame 195 / 196 */
  display:flex; justify-content:center; align-items:center; gap:10px;
  padding:6px 12px; height:29px; min-width:64px;
  border:1px solid #CDCDCD; border-radius:32px; box-sizing:border-box;
}
.step-chip__label{
  font:600 14px/120% 'Manrope',sans-serif; text-align:center; color:var(--ink);
}
.card__title{
  width:259px; height:29px;
  font:600 24px/120% 'Manrope',sans-serif; letter-spacing:-0.05em; color:#000;
}
.card__text{
  width:259px; height:138px;
  font:400 15px/120% 'Inter',sans-serif; color:var(--ink); opacity:.6;
}
.card__image-wrap{                         /* FIGMA: Frame 1 */
  position:relative; width:259px; height:193px;
}
.card__image{                              /* FIGMA: image 14 (absolute) */
  position:absolute; width:161px; height:161px; left:49px; top:14px;
  background: linear-gradient(0deg, #122A54, #122A54), url("image.png");
  background-blend-mode: color, normal; background-size:cover; border-radius:8px;
}

/* CTA under Steps */
.howto-steps .button--primary{ order:2; }

/* ================================================================
   WHAT MAKES US DIFFERENT — FEATURES (SECTION #2)
   ================================================================ */
/* FIGMA: “How to Setup” (second block in file) actually “What Makes Us Different”
   Frames: 184 (chip), 190 (title), 201 (column), 199/200 (rows), 197/198 (cards)
*/

.features-section{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:96px var(--space-120); gap:48px; box-sizing:border-box;
  width:100%; background:#fff;
}
.features-section .frame-184__chip{       /* FIGMA: Frame 184 (chip) */
  display:flex; justify-content:center; align-items:center; gap:10px;
  padding:8px 12px; width:100px; height:32px;
  background: rgba(211,211,211,.1); border:1px solid #F5F5F5; border-radius:30px;
}
.features-section .chip__label{           /* FIGMA: “Features” */
  font:500 13px/16px 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:#000318; opacity:.6;
}
.features-section .frame-190{             /* FIGMA: Frame 190 */
  display:flex; flex-direction:column; align-items:center; gap:24px; width:654px; height:131px;
}
.features-section .title{                 /* FIGMA: What Makes Us Different */
  width:654px; height:67px; text-align:center;
  font:500 56px/120% 'Manrope',sans-serif; letter-spacing:-0.05em; color:var(--ink);
}
.features-section .subtitle{              /* FIGMA: subtext */
  width:654px; height:40px; text-align:center;
  font:400 17px/120% 'Inter',sans-serif; color:var(--ink-2);
}

.features{                                /* FIGMA: Frame 201 */
  display:flex; flex-direction:column; align-items:flex-start;
  gap:12px; width:1200px; height:946px;
}
.features__row{                           /* FIGMA: Frame 199 / Frame 200 */
  display:flex; flex-direction:row; align-items:flex-start; gap:12px; width:100%;
}
.features__row--top{ height:474px; }
.features__row--bottom{ height:460px; }

.feature-card{
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding:24px; gap:12px; border:1px solid transparent; border-radius:12px; color:#fff;
}
.feature-card--lg{ width:750px; }
.feature-card--sm{ width:438px; }

.feature-card--blue{                      /* FIGMA: Frame 197 (blue) */
  background: linear-gradient(258.62deg, #35B1E6 3.56%, #3B4CEA 92.69%);
  border-color:#D9DAE6;
  height:474px;
}
.feature-card--green{                     /* FIGMA: Frame 198 (green) */
  background: linear-gradient(90deg, #3CA128 0%, #8BCD28 92.31%);
  border-color:#E9F2E7;
  height:474px;
}
.features__row--bottom .feature-card--green{ height:460px; }
.features__row--bottom .feature-card--orange{
  background: linear-gradient(258.62deg, #F4AE3D 3.56%, #D78C00 92.69%);
  border-color:#E6E6D9;
  height:460px;
}

.feature-title{
  width:100%; max-width:702px;
  font:600 24px/120% 'Manrope',sans-serif; letter-spacing:-0.05em;
}
.feature-desc{
  width:100%; max-width:702px;
  font:400 15px/120% 'Inter',sans-serif; opacity:.7;
}

/* Mask group (decorative square with overlay image) — FIGMA: “Mask group” */
.mask-group{ width:272px; height:272px; position:relative; flex:none; }
.mask-icon{ position:absolute; inset:0; border-radius:24px; background-size:cover; background-position:center; background-repeat:no-repeat; background-blend-mode:hard-light, normal; }
.mask-icon--lock{      background-image: linear-gradient(0deg, #3875B9, #3875B9), url("Lock"); }
.mask-icon--briefcase{ background-image: linear-gradient(0deg, #6AB938, #6AB938), url("Briefcase"); }
.mask-icon--puzzle{    background-image: linear-gradient(0deg, #6AB938, #6AB938), url("Puzzle"); }
.mask-icon--recycling{ background-image: linear-gradient(0deg, #D39B41, #D39B41), url("Recycling"); }

/* Optional Figma “Subtract/Vector/Union” demo blocks preserved as decorative helpers */
.mask-subtract, .mask-vector{ position:absolute; background:#D9D9D9; opacity:1; }

/* ================================================================
   BENEFITS (SECTION #3)
   ================================================================ */
/* FIGMA: Gradient section — Frames: background, 281 (grid lines), 289 (cards row),
   247–250 (cards), 288 (icon circle), button, ellipse glow, etc.
*/

.benefits-section{
  display:flex; flex-direction:column; align-items:center;
  padding:96px var(--space-120); gap:96px; isolation:isolate;
  width:100%; height:812px; box-sizing:border-box;
  background: linear-gradient(180deg, #285DBA 0%, #122A54 100%);
  color:#fff; position:relative; overflow:hidden;
}

/* Decorative grid lines (Frame 281 / Frame 282) — optional */
.benefits-section .grid-vertical,
.benefits-section .grid-horizontal{
  position:absolute; inset:0; opacity:.03; pointer-events:none;
}

/* Benefits header (Frame 184 / Frame 190) */
.benefits__header{ display:flex; flex-direction:column; align-items:center; gap:8px; width:654px; height:171px; z-index:1; }
.benefits__chip{ display:flex; justify-content:center; align-items:center; padding:8px 12px; gap:10px; width:95px; height:32px; background:rgba(211,211,211,.1); border-radius:30px; }
.benefits__chip span{ font:500 13px/16px 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#fff; opacity:.6; }
.benefits__title{ width:654px; height:67px; text-align:center; font:500 56px/120% 'Manrope',sans-serif; letter-spacing:-.05em; color:#fff; }
.benefits__subtitle{ width:654px; height:40px; text-align:center; font:400 17px/120% 'Inter',sans-serif; color:#fff; opacity:.7; }

/* Cards row (Frame 289) */
.benefits__row{
  display:flex; flex-direction:row; align-items:flex-start; gap:32px; width:1200px; height:206px; z-index:2;
}

.benefit-card{                              /* Frames 247–250 */
  width:276px; display:flex; flex-direction:column; gap:32px; text-align:left;
}
.benefit-card__stack{                       /* Frame 251 */
  display:flex; flex-direction:column; gap:12px; width:276px;
}

/* Icon circle (Frame 288) */
.icon-circle{
  position:relative; width:72px; height:72px; border-radius:50%;
  background:#fff;
}
.icon-circle__svg{
  position:absolute; width:24px; height:24px; left:24px; top:24px;
}
.icon-circle__vector{                       /* decorative stroke */
  position:absolute; inset:12.5% 12.5% 4.17% 12.5%; border:2px solid var(--cta);
}

.benefit-card__title{
  width:276px; height:34px;
  font:600 24px/140% 'Manrope',sans-serif; letter-spacing:-.05em; color:#fff;
}
.benefit-card__desc{
  width:276px; font:400 16px/120% 'Inter',sans-serif; color:#fff; opacity:.6;
}

/* CTA button inside benefits */
.benefits-section .button--primary{ z-index:3; }

/* Glow ellipse (Ellipse 851) */
.benefits-section .glow{
  position:absolute; width:731px; height:138px; left:343px; top:-96px;
  background:#75C9E3; filter: blur(40px); z-index:4; opacity:.8;
}

/* ================================================================
   FRAMEWORKS (SECTION #4)
   ================================================================ */
/* FIGMA: “How to Setup” (third block) actually “Our Core Frameworks”
   Frames: 184 (chip), 190 (title), 293 (row), 290/291 (cards)
*/

.frameworks{
  display:flex; flex-direction:column; align-items:center;
  padding:96px var(--space-120); gap:48px; width:100%;
  background:#fff; box-sizing:border-box;
}
.frameworks__header{ display:flex; flex-direction:column; align-items:center; gap:8px; width:654px; height:151px; }
.frameworks__chip{
  display:flex; justify-content:center; align-items:center; gap:10px;
  padding:8px 12px; width:128px; height:32px;
  background:rgba(211,211,211,.1); border:1px solid #F5F5F5; border-radius:30px;
}
.frameworks__chip span{
  font:500 13px/16px 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#000318; opacity:.6;
}
.frameworks__title{
  width:654px; height:67px; text-align:center;
  font:500 56px/120% 'Manrope',sans-serif; letter-spacing:-.05em; color:var(--ink);
}
.frameworks__subtitle{
  width:654px; height:20px; text-align:center;
  font:400 17px/120% 'Inter',sans-serif; color:var(--ink-2);
}

.frameworks__row{                           /* FIGMA: Frame 293 */
  display:flex; flex-direction:row; align-items:flex-start; gap:24px;
  width:1200px; height:217px;
}

.framework-card{                             /* FIGMA: Frame 290 / Frame 291 */
  box-sizing:border-box;
  display:flex; flex-direction:column; align-items:flex-start; gap:23px;
  width:588px; height:217px; padding:24px;
  background:#fff; border:1px solid #E9E9E9; border-radius:12px; box-shadow:0 3px 0 #E9E9E9;
}
.framework-card__stack{                      /* FIGMA: Frame 292 */
  display:flex; flex-direction:column; gap:12px; width:540px; height:122px;
}
.framework-card__title{
  width:101px; height:38px;
  font:500 32px/120% 'Manrope',sans-serif; letter-spacing:-.05em; color:var(--ink); text-align:center;
}
.framework-card__desc{
  width:540px; height:72px;
  font:400 15px/120% 'Inter',sans-serif; color:var(--ink); opacity:.5;
}
.framework-card__link{                       /* FIGMA: Frame 291 (row) */
  display:flex; align-items:center; gap:12px; width:115px; height:24px;
}
.framework-card__link a{
  font:400 17px/120% 'Inter',sans-serif; color:var(--cta); text-decoration:none;
}

/* ================================================================
   CTA STRIP
   ================================================================ */
/* FIGMA: CTA (Frame 211), Frame 89 (text), rocket + overlays */

.cta{
  display:flex; flex-direction:column; align-items:center; gap:24px;
  padding:60px var(--space-120); width:100%; background:#fff; box-sizing:border-box;
}
.cta__panel{                                /* FIGMA: Frame 211 */
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:24px;
  padding:0 60px; width:1200px; height:423px; position:relative;
  background: linear-gradient(90deg, #3CA128 0%, #8BCD28 92.31%);
  border-radius:32px; isolation:isolate; overflow:hidden;
}
.cta__stack{                                 /* FIGMA: Frame 89 */
  display:flex; flex-direction:column; gap:24px; width:578px; height:273px; z-index:0;
}
.cta__tag{                                   /* FIGMA: Frame 184 (hidden in Figma) */
  display:none;
}
.cta__title{
  width:578px; height:134px; font:500 56px/120% 'Manrope',sans-serif; letter-spacing:-.05em; color:#fff;
}
.cta__text{
  width:578px; height:40px; font:400 17px/120% 'Inter',sans-serif; color:#fff; opacity:.7;
}
.cta__button{                                /* FIGMA: Button (white) */
  display:flex; justify-content:center; align-items:center; gap:10px;
  width:174px; height:51px; padding:16px 24px;
  background:#fff; border-radius:74px; color:var(--ink);
  font:500 16px/19px 'Inter',sans-serif; text-decoration:none;
}

.cta__rocket{                                /* FIGMA: Rocket group */
  position:absolute; width:575px; height:549px; right:60px; top:-120px; z-index:1;
}
.cta__rocket-shadow{                         /* FIGMA: Ellipse 850 under rocket */
  position:absolute; width:357px; height:23px; left:82px; top:486px; background:rgba(0,0,0,.2); filter:blur(19.35px);
}
.cta__assist-text{                           /* FIGMA: rotated “Private Assistant” letters group */
  position:absolute; right:120px; top:60px; transform:rotate(-38deg);
  font:500 16px 'Inter',sans-serif; letter-spacing:.2em; color:#122A54;
}

/* ================================================================
   FOOTER
   ================================================================ */
/* FIGMA: Footer (Frame 241, 210, 215, 211–213, 209, etc.) */

/* .site-footer{
  display:flex; flex-direction:column; align-items:center; gap:48px;
  padding:96px var(--space-120); width:100%; box-sizing:border-box; position:relative; overflow:hidden;
  background: linear-gradient(156.49deg, #285DBA -21.52%, #122A54 116.38%); color:#fff;
} */

/* .footer__top{                               
  display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start;
  gap:193px; width:1200px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.2);
} */
/* .footer__about{                             
  display:flex; flex-direction:column; gap:24px; width:373px;
} */
/* .footer__logo-shape{                        
  width:80px; height:92px; background:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center;
} */
/* .footer__about p{
  font:400 16px/130% 'Inter',sans-serif; color:#fff; opacity:.7;
} */

/* .footer__links{                             
  display:flex; gap:48px;
}
.footer-col{                              
  display:flex; flex-direction:column; gap:16px; min-width:170px;
}
.footer-col h4{ font:700 16px/120% 'Manrope',sans-serif; color:#fff; }
.footer-col a{ font:400 16px/120% 'Inter',sans-serif; color:rgba(255,255,255,.7); text-decoration:none; }
.footer-col a:hover{ color:#fff; } */

/* .footer__socials{                           
  display:flex; gap:24px;
}
.footer__icon{
  width:48px; height:48px; border-radius:100px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
}
.footer__icon svg{ width:20px; height:20px; color:#fff; } */

/* .footer__grid-vert, .footer__grid-horiz{    
  position:absolute; inset:0; opacity:.03; pointer-events:none;
}
.footer__glow{                               
  position:absolute; width:296.71px; height:107.69px; left:9.79px; bottom:458.63px;
  background:#75C9E3; filter: blur(40px);
}

.footer__bottom{                          
  display:flex; flex-direction:row; justify-content:space-between; align-items:center;
  width:1200px; height:19px; gap:48px;
}
.footer__legal{ font:400 16px/19px 'Inter',sans-serif; color:rgba(255,255,255,.7); }
.footer__policies{ display:flex; align-items:center; gap:24px; }
.footer__policies a{ font:400 16px/19px 'Inter',sans-serif; color:rgba(255,255,255,.7); text-decoration:none; }
.footer__policies a:hover{ color:#fff; } */

/* ================================================================
   RESPONSIVE (practical add-on — not in Figma, preserves layout)
   ================================================================ */
@media (max-width:1440px){
  .page{ width:100%; }
  .header, .hero, .howto-steps, .features-section, .benefits-section, .frameworks, .cta, .site-footer{
    padding-left:24px; padding-right:24px;
  }
  .hero{ height:auto; }
  .hero__stack, .howto-steps .frame-184__header, .howto-steps .frame-190,
  .features-section .frame-190, .frameworks__header{ width:100%; }
  .hero__title, .features-section .title, .frameworks__title{ width:100%; }
  .hero__subtitle{ width:100%; }
  .howto-steps .frame-194__cards{ width:100%; overflow-x:auto; }
  .features{ width:100%; height:auto; }
  .features__row{ flex-direction:column; height:auto; }
  .feature-card--lg, .feature-card--sm{ width:100%; height:auto; }
  /* .benefits__row, .frameworks__row, .footer__top, .footer__bottom{ width:100%; } */

   .benefits__row, .frameworks__row{ width:100%; }
}

@media (max-width:1024px){
  .header{ gap:24px; }
  .cta__panel{ width:100%; height:auto; padding:40px; }
  .cta__stack{ width:100%; height:auto; }
  .cta__title{ font-size:48px; }
  .cta__rocket{ position:relative; right:auto; top:auto; width:400px; height:auto; margin-top:40px; }
  .cta__assist-text{ display:none; }
}

@media (max-width:768px){
  .hero{ padding:120px 20px; }
  .hero__title{ font-size:42px; }
  .features-section .title, .frameworks__title, .benefits__title{ font-size:36px; }
  .cta{ padding:40px 20px; }
  .cta__title{ font-size:36px; }
  .cta__text{ font-size:15px; }
  .cta__rocket{ width:300px; }
  .footer__top{ flex-direction:column; gap:40px; }
  .footer__links{ flex-direction:column; align-items:center; gap:32px; }
  .footer__bottom{ flex-direction:column; gap:16px; }
}

@media (max-width:480px){
  .cta__title{ font-size:28px; line-height:1.2; }
  .cta__text{ font-size:14px; }
  .cta__button{ width:100%; }
  .cta__rocket{ width:220px; margin-top:20px; }
}

/* ================================================================
   FIGMA METADATA NOTES (traceability)
   - Header: Header, Frame 176 (nav), Frame 177/178 (dropdown groups), Frame 180 (CTA group), Frame 179 (language)
   - Hero: Title frame, Button
   - Howto Steps Section: Frame 184 (header stack & chip), Frame 190 (title), Frame 194 (cards row), Cards: 191/192/193/194,
     Inner: Frame 192 (card head), Frame 195/196 (chips), Frame 1 (image slot), image 14.
   - Features Section (What Makes Us Different): Frame 184 (chip), Frame 190 (title), Frame 201 (column),
     Rows: Frame 199 / Frame 200, Cards: Frame 197 (blue), Frame 198 (green/orange variants).
   - Benefits Section: background group, Frame 281/282 (grid lines), Frame 289 (row),
     Cards: 247/248/249/250, inside: Frame 251 (stack), Frame 288 (icon circle), ellipse 851 (glow).
   - Frameworks Section: Frame 184 (chip), Frame 190 (title), Frame 293 (row),
     Cards: Frame 290 / 291; inner stack: Frame 292; link row: Frame 291.
   - CTA Strip: Frame 211 (panel), Frame 89 (text stack), Frame 184 (hidden tag), Rocket group, Ellipse 850 (shadow),
     rotated “Private Assistant” letters group.
   - Footer: Frame 241 (top), Frame 210 (about), Frame 215 (columns), Frames 211/212/213 (cols),
     Frame 209 (socials), background frames (281/282), Ellipse 851, Frame 312 (bottom).
   - Reused frame names (e.g., Frame 184) are scoped by section class to avoid collisions.
   ================================================================ */


   /* ================================================================
   PRIVACY POLICY PAGE (ISOLATED - NO CONFLICTS)
   ================================================================ */

/* Reset ONLY inside pp */
.pp-main {
  background: #f1f6f7;
  padding: 48px 120px;
  width: 100%;
}

/* Prevent global layout interference */
.pp-main * {
  box-sizing: border-box;
}

/* Container */
.pp-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ================= LAYOUT ================= */
.pp-layout {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

/* ================= SIDEBAR ================= */
.pp-side {
  width: 220px;
  display: flex;
  gap: 16px;
}

/* Rail */
.pp-side__rail {
  position: relative;
  width: 3px;
  background: #dfe5ed;
}

/* Active indicator */
.pp-rail__active {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 45px;
  background: #008b00;
}

/* List */
.pp-side__list {
  list-style: none;
  padding: 12px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pp-side__item a {
  text-decoration: none;
  font-family: Manrope;
  font-size: 16px;
  font-weight: 500;
  color: #000319;
}

.pp-side__item--active a {
  color: #008b00;
}

/* ================= CARD ================= */
.pp-card {
  flex: 1;
  background: #fff;
  border: 1px solid #dfe5ed;
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header */
.pp-card__head {
  border-bottom: 1px solid #dfe5ed;
  padding-bottom: 24px;
}

.pp-card__title {
  font-family: Manrope;
  font-size: 24px;
  font-weight: 500;
  margin: 0;
}

.pp-card__meta {
  font-family: Inter;
  font-size: 14px;
  opacity: 0.4;
  margin-top: 4px;
}

/* ================= CONTENT ================= */
.pp-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pp-block__title {
  font-family: Manrope;
  font-size: 20px;
  font-weight: 500;
  border-left: 3px solid #008b00;
  padding-left: 12px;
  margin: 0;
}

.pp-block__text {
  font-family: Inter;
  font-size: 14px;
  line-height: 140%;
  opacity: 0.8;
  margin: 0;
}

/* ================= MAST FIX ================= */
.pp-mast {
  background: #f1f6f7;
  text-align: center;
  padding: 40px 0 0;
}

.pp-mast__title {
  font-family: Manrope;
  font-size: 32px;
  font-weight: 500;
}


/* ================================================================
   PRIVACY POLICY PAGE — RESPONSIVE (pp_responsive.css)
   Fixes mobile/tablet layout for .pp-* components.
   Import AFTER priva_ver2.css (or wherever pp styles currently live).
   ================================================================ */
 
/* ---------------------------------------------------------------
   BASE (already defined in priva_ver2.css — kept here for clarity)
   Desktop: sidebar left, card right, side-by-side
   --------------------------------------------------------------- */
 
.pp-main {
  background: #f1f6f7;
  padding: 48px 120px;
  width: 100%;
  box-sizing: border-box;
}
 
.pp-main * {
  box-sizing: border-box;
}
 
.pp-container {
  max-width: 1200px;
  margin: 0 auto;
}
 
/* ---------------------------------------------------------------
   MASTHEAD
   --------------------------------------------------------------- */
.pp-mast {
  background: #f1f6f7;
  text-align: center;
  padding: 40px 24px 0;
}
 
.pp-mast__title {
  font-family: Manrope, sans-serif;
  font-size: 32px;
  font-weight: 500;
}
 
/* ---------------------------------------------------------------
   LAYOUT — desktop default (≥1024 px)
   --------------------------------------------------------------- */
.pp-layout {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}
 
/* ---------------------------------------------------------------
   SIDEBAR — desktop default
   --------------------------------------------------------------- */
.pp-side {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  gap: 16px;
  /* Sticky so it follows scroll on large screens */
  position: sticky;
  top: 24px;
}
 
.pp-side__rail {
  position: relative;
  width: 3px;
  background: #dfe5ed;
  flex-shrink: 0;
}
 
.pp-rail__active {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 45px;
  background: #008b00;
  transition: top 0.2s ease;
}
 
.pp-side__list {
  list-style: none;
  padding: 12px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
 
.pp-side__item a {
  text-decoration: none;
  font-family: Manrope, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000319;
  transition: color 0.15s ease;
}
 
.pp-side__item a:hover {
  color: #008b00;
}
 
.pp-side__item--active a {
  color: #008b00;
}
 
/* ---------------------------------------------------------------
   CONTENT CARD
   --------------------------------------------------------------- */
.pp-card {
  flex: 1;
  min-width: 0; /* prevent flex overflow */
  background: #fff;
  border: 1px solid #dfe5ed;
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
 
.pp-card__head {
  border-bottom: 1px solid #dfe5ed;
  padding-bottom: 24px;
}
 
.pp-card__title {
  font-family: Manrope, sans-serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0;
}
 
.pp-card__meta {
  font-family: Inter, sans-serif;
  font-size: 14px;
  opacity: 0.4;
  margin-top: 4px;
}
 
/* ---------------------------------------------------------------
   CONTENT BLOCKS
   --------------------------------------------------------------- */
.pp-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
 
.pp-block__title {
  font-family: Manrope, sans-serif;
  font-size: 20px;
  font-weight: 500;
  border-left: 3px solid #008b00;
  padding-left: 12px;
  margin: 0;
}
 
.pp-block__text {
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 140%;
  opacity: 0.8;
  margin: 0;
}
 
/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */
 
/* ---------------------------------------------------------------
   Large tablet / small laptop  (≤1280 px)
   Tighten padding, shrink sidebar slightly
   --------------------------------------------------------------- */
@media (max-width: 1280px) {
  .pp-main {
    padding: 48px 60px;
  }
 
  .pp-side {
    width: 190px;
  }
 
  .pp-layout {
    gap: 40px;
  }
}
 
/* ---------------------------------------------------------------
   Tablet landscape / iPad Pro  (≤1024 px)
   Collapse sidebar into a horizontal scroll-nav strip above card
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .pp-main {
    padding: 32px 32px;
  }
 
  .pp-mast__title {
    font-size: 28px;
  }
 
  /* Stack sidebar above card */
  .pp-layout {
    flex-direction: column;
    gap: 24px;
  }
 
  /* Sidebar becomes a horizontal pill-nav */
  .pp-side {
    width: 100%;
    position: static; /* no longer sticky */
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding-bottom: 4px;
  }
 
  .pp-side::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
 
  /* Hide the vertical rail on tablet/mobile */
  .pp-side__rail {
    display: none;
  }
 
  .pp-side__list {
    flex-direction: row;
    gap: 0;
    padding: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
 
  .pp-side__item {
    flex-shrink: 0;
  }
 
  .pp-side__item a {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    color: #000319;
  }
 
  .pp-side__item--active a,
  .pp-side__item a:hover {
    color: #008b00;
    border-bottom-color: #008b00;
  }
 
  .pp-card {
    padding: 24px;
  }
}
 
/* ---------------------------------------------------------------
   Tablet portrait / iPad mini  (≤768 px)
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  .pp-main {
    padding: 24px 20px;
  }
 
  .pp-mast {
    padding: 32px 20px 0;
  }
 
  .pp-mast__title {
    font-size: 24px;
  }
 
  .pp-card {
    padding: 20px 16px;
    border-radius: 10px;
    gap: 20px;
  }
 
  .pp-card__title {
    font-size: 20px;
  }
 
  .pp-block__title {
    font-size: 17px;
  }
 
  .pp-block__text {
    font-size: 14px;
  }
 
  .pp-side__item a {
    padding: 8px 12px;
    font-size: 13px;
  }
}
 
/* ---------------------------------------------------------------
   Large phone  (≤480 px)  — iPhone 12/13/14, Galaxy S
   --------------------------------------------------------------- */
@media (max-width: 480px) {
  .pp-main {
    padding: 16px 12px;
  }
 
  .pp-mast {
    padding: 24px 12px 0;
  }
 
  .pp-mast__title {
    font-size: 22px;
  }
 
  .pp-card {
    padding: 16px 14px;
    gap: 16px;
    border-radius: 8px;
  }
 
  .pp-card__title {
    font-size: 18px;
  }
 
  .pp-card__meta {
    font-size: 12px;
  }
 
  .pp-block__title {
    font-size: 15px;
    padding-left: 10px;
  }
 
  .pp-block__text {
    font-size: 13px;
    line-height: 150%;
  }
 
  .pp-side__item a {
    padding: 8px 10px;
    font-size: 12px;
  }
}
 
/* ---------------------------------------------------------------
   Small phone  (≤375 px)  — iPhone SE, Galaxy A-series
   --------------------------------------------------------------- */
@media (max-width: 375px) {
  .pp-main {
    padding: 12px 10px;
  }
 
  .pp-card {
    padding: 14px 12px;
  }
 
  .pp-block__title {
    font-size: 14px;
  }
 
  .pp-block__text {
    font-size: 12px;
  }
}